:root {
  color-scheme: dark;
  --bg: #080b0f;
  --panel: rgba(16, 22, 29, 0.92);
  --panel-strong: #121a22;
  --panel-soft: rgba(255, 255, 255, 0.055);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke-strong: rgba(255, 255, 255, 0.2);
  --text: #eef4f8;
  --muted: #9eabb5;
  --gold: #d7b46a;
  --gold-strong: #ffcc6a;
  --green: #3ed08f;
  --red: #f06d6d;
  --blue: #63a8ff;
  --teal: #3fd5c7;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.legal-modal {
  width: min(1080px, 96vw);
  max-height: min(860px, 92vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(243, 198, 111, 0.28);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(25, 19, 11, 0.92), rgba(4, 6, 8, 0.96)),
    rgba(5, 8, 12, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.legal-modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(18px, 3vw, 30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-modal header span,
.legal-modal-tabs a {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.legal-modal h3 {
  margin: 4px 0 0;
  color: #fff8ec;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  text-transform: uppercase;
}

.legal-modal-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px clamp(18px, 3vw, 30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-modal-tabs a {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(243, 198, 111, 0.24);
  border-radius: 7px;
  color: rgba(255, 248, 236, 0.86);
  text-decoration: none;
  background: rgba(4, 7, 10, 0.5);
}

.legal-modal-content {
  min-height: 0;
  overflow: auto;
  padding: 18px clamp(18px, 3vw, 30px) 28px;
}

.legal-modal-content article {
  padding: 18px 0 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-modal-content h4 {
  margin: 0 0 12px;
  color: #f7cc7b;
  font-size: 1rem;
  text-transform: uppercase;
}

.legal-modal-content pre {
  margin: 0;
  color: rgba(255, 248, 236, 0.86);
  font: 700 0.88rem/1.6 var(--font-main, system-ui, sans-serif);
  white-space: pre-wrap;
}

.legal-loading,
.legal-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(0, 136, 255, 0.12);
  color: #d9ecff;
  font-weight: 900;
}

.legal-error {
  background: rgba(227, 66, 50, 0.14);
  color: #ffb4aa;
}

.game.pcm-premium-shell .presidential-bottom-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.game.pcm-premium-shell .presidential-bottom-actions button {
  min-width: 0;
}

@media (max-width: 980px) and (orientation: landscape) {
  .game.pcm-premium-shell .presidential-bottom-strip {
    grid-template-columns: minmax(250px, 332px) minmax(0, 1fr) max-content !important;
  }

  .game.pcm-premium-shell .presidential-bottom-actions {
    width: min(332px, 37vw) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .game.pcm-premium-shell .presidential-bottom-actions button {
    min-height: 30px !important;
    padding: 0 5px !important;
    font-size: 0.5rem !important;
  }

  .game.pcm-premium-shell .presidential-bottom-actions svg {
    width: 13px !important;
    height: 13px !important;
  }

  .legal-modal {
    width: 96vw;
    max-height: 90vh;
  }

  .legal-modal header {
    padding: 12px 16px;
  }

  .legal-modal h3 {
    font-size: 1.35rem;
  }

  .legal-modal-tabs {
    padding: 8px 14px;
  }

  .legal-modal-tabs a {
    padding: 7px 9px;
    font-size: 0.58rem;
  }

  .legal-modal-content {
    padding: 12px 16px 18px;
  }

  .legal-modal-content pre {
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

/* Premium interface refresh based on the new President of Club references. */
.pcm-premium-shell {
  --pcm-blue: #0094ff;
  --pcm-blue-soft: rgba(0, 148, 255, 0.28);
  --pcm-gold: #ffbe2f;
  --pcm-green: #00e078;
  --pcm-panel: rgba(5, 18, 31, 0.78);
  --pcm-panel-strong: rgba(7, 21, 35, 0.94);
  min-height: 100svh;
  color: #f7fbff;
  background:
    radial-gradient(circle at 50% -6%, rgba(0, 123, 255, 0.18), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(255, 190, 47, 0.12), transparent 22%),
    linear-gradient(180deg, #03101c 0%, #020810 42%, #02070c 100%);
}

.pcm-premium-shell .content {
  min-height: 100svh;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.pcm-topbar {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.8fr);
  align-items: center;
  gap: 22px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(0, 148, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.12), transparent 44%, rgba(255, 190, 47, 0.035)),
    rgba(1, 8, 16, 0.72);
}

.pcm-brand {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.pcm-crest {
  position: relative;
  width: 64px;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: visible;
  isolation: isolate;
}

.pcm-crest::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  background: var(--pcm-gold);
  clip-path: polygon(50% 0, 62% 34%, 98% 34%, 69% 55%, 80% 90%, 50% 68%, 20% 90%, 31% 55%, 2% 34%, 38% 34%);
  filter: drop-shadow(0 0 10px rgba(255, 190, 47, 0.65));
}

.pcm-crest > img,
.pcm-crest .president-frame,
.pcm-crest > span {
  width: 54px;
  height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255, 190, 47, 0.82);
  border-radius: 8px 8px 18px 18px;
  background:
    linear-gradient(90deg, #0c5fb8 0 33%, #f7f7f7 33% 66%, #0c5fb8 66%),
    #0a2c55;
  box-shadow:
    inset 0 0 0 2px rgba(2, 9, 18, 0.9),
    0 0 24px rgba(0, 148, 255, 0.24);
  clip-path: polygon(50% 0, 92% 12%, 86% 72%, 50% 100%, 14% 72%, 8% 12%);
}

.pcm-crest img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.club-crest-button {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.club-crest-button:hover .club-crest-img {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(255, 190, 47, 0.48));
}

.pcm-crest > .club-crest-img {
  width: 58px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  object-fit: contain;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.pcm-topbar .topbar-title h2 {
  margin: 0;
  color: #f7fbff;
  font-size: clamp(1.65rem, 2.2vw, 2.35rem);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.pcm-topbar .topbar-title .muted {
  margin-top: 8px;
  color: #d1d8e0;
  font-size: 1rem;
}

.pcm-premium-shell .top-actions {
  justify-content: end;
  gap: 20px;
}

.pcm-premium-shell .audio-controls {
  display: grid;
  grid-template-columns: minmax(92px, 1fr);
  gap: 8px;
  align-items: center;
}

.pcm-premium-shell .audio-toggle {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 7px;
  color: #dbe8f6;
  background:
    linear-gradient(104deg, rgba(0, 148, 255, 0.08), transparent 62%),
    rgba(3, 15, 27, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.pcm-premium-shell .audio-toggle span,
.pcm-premium-shell .audio-toggle strong {
  font-size: 0.72rem;
  line-height: 1;
  text-transform: uppercase;
}

.pcm-premium-shell .audio-toggle strong {
  color: #7b8796;
}

.pcm-premium-shell .audio-toggle.active {
  border-color: rgba(0, 255, 154, 0.45);
  color: #f7fbff;
  background:
    radial-gradient(circle at 12% 50%, rgba(0, 255, 154, 0.28), transparent 30%),
    linear-gradient(104deg, rgba(0, 148, 255, 0.1), transparent 62%),
    rgba(3, 18, 29, 0.82);
  box-shadow:
    0 0 18px rgba(0, 255, 154, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pcm-premium-shell .audio-toggle.active strong {
  color: var(--pcm-neon-green);
}

.pcm-premium-shell .top-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.pcm-premium-shell .currency {
  position: relative;
  min-height: 66px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 16px 12px 58px;
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 7px;
  background:
    linear-gradient(104deg, rgba(0, 148, 255, 0.1), transparent 62%),
    rgba(3, 15, 27, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: skewX(-7deg);
}

.pcm-premium-shell .currency > * {
  transform: skewX(7deg);
}

.pcm-premium-shell .currency::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%) skewX(7deg);
  border: 2px solid currentColor;
  border-radius: 7px;
  box-shadow: 0 0 18px currentColor;
  opacity: 0.85;
}

.pcm-premium-shell .currency-budget { color: var(--pcm-green); }
.pcm-premium-shell .currency.credits { color: var(--pcm-gold); }
.pcm-premium-shell .currency-morale { color: var(--pcm-blue); }
.pcm-premium-shell .currency-reputation { color: #db4dff; }

.pcm-premium-shell .currency span {
  color: #c6d2dd;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pcm-premium-shell .currency strong {
  color: #fff;
  font-size: 0.98rem;
  font-weight: 1000;
}

.pcm-premium-shell .top-command-actions {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(150px, auto) 58px;
  gap: 12px;
}

.pcm-premium-shell .top-action {
  min-height: 66px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #f8fbff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(3, 13, 24, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: skewX(-7deg);
}

.pcm-premium-shell .top-action > * {
  transform: skewX(7deg);
}

.pcm-premium-shell .top-action.primary {
  color: #12100a;
  background: linear-gradient(180deg, #ffd875, #eaa51d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 10px 24px rgba(255, 173, 21, 0.24);
}

.pcm-premium-shell .top-action.settings {
  display: grid;
  place-items: center;
  padding: 0;
}

.pcm-premium-shell .top-action.settings svg {
  width: 24px;
  height: 24px;
}

.pcm-premium-shell .horizontal-nav-shell {
  padding: 0 26px;
  border-bottom: 1px solid rgba(0, 148, 255, 0.2);
  background:
    linear-gradient(90deg, rgba(1, 13, 24, 0.95), rgba(2, 9, 17, 0.78)),
    rgba(2, 8, 14, 0.95);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.pcm-premium-shell .top-app-nav {
  height: 72px;
  display: grid;
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  gap: 0;
  overflow: visible;
}

.pcm-premium-shell .app-nav .nav-btn {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-columns: auto auto;
  place-content: center;
  align-items: center;
  gap: 10px;
  border: 0;
  border-left: 1px solid rgba(0, 148, 255, 0.12);
  border-radius: 0;
  color: #f5f6f8;
  background: transparent;
  font-size: 0.98rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pcm-premium-shell .app-nav .nav-btn:last-child {
  border-right: 1px solid rgba(0, 148, 255, 0.12);
}

.pcm-premium-shell .app-nav .nav-btn::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 2px;
  background: transparent;
  box-shadow: none;
}

.pcm-premium-shell .app-nav .nav-btn svg {
  width: 24px;
  height: 24px;
}

.pcm-premium-shell .app-nav .nav-icon-img {
  display: block;
  width: 34px;
  height: 24px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(0, 148, 255, 0.38));
}

.pcm-premium-shell .top-app-nav .nav-icon-liga {
  width: min(128px, 86%);
  height: 54px;
}

.pcm-premium-shell .app-nav .nav-btn.active {
  color: var(--pcm-gold);
  background:
    radial-gradient(circle at 50% 100%, rgba(0, 148, 255, 0.32), transparent 42%),
    linear-gradient(90deg, transparent, rgba(0, 148, 255, 0.08), transparent);
}

.pcm-premium-shell .app-nav .nav-btn.active::after {
  background: linear-gradient(90deg, transparent, var(--pcm-gold), var(--pcm-blue), transparent);
  box-shadow: 0 0 16px var(--pcm-blue), 0 0 24px rgba(255, 190, 47, 0.42);
}

.pcm-premium-shell .main-stage {
  padding: 16px 26px 116px;
  overflow: auto;
}

.bottom-dock {
  position: fixed;
  z-index: 60;
  left: 20px;
  right: 20px;
  bottom: 10px;
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(4, 20, 34, 0.94), rgba(2, 10, 18, 0.96)),
    rgba(1, 9, 16, 0.95);
  box-shadow:
    0 -18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
}

.bottom-dock .nav-btn {
  grid-template-columns: 1fr;
  grid-template-rows: 28px auto;
  gap: 6px;
  min-height: 88px;
  align-content: center;
  justify-items: center;
  text-align: center;
  font-size: 0.82rem;
}

.bottom-dock .nav-continental {
  font-size: 0.74rem;
}

.pcm-premium-shell .bottom-dock .nav-continental .nav-label {
  max-width: 82px;
  white-space: normal;
}

.bottom-dock .nav-btn svg {
  margin: 0 auto;
  width: 28px;
  height: 28px;
}

.bottom-dock .nav-icon-img {
  margin: 0 auto;
  width: 44px;
  height: 28px;
  object-fit: contain;
}

.pcm-premium-shell .app-nav .nav-liga {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
  padding: 0 8px;
}

.pcm-premium-shell .app-nav .nav-liga .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pcm-premium-shell .app-nav .nav-liga .nav-icon-liga {
  align-self: center;
  justify-self: center;
  object-fit: contain;
}

.pcm-premium-shell .bottom-dock .nav-liga .nav-icon-liga {
  width: min(112px, 92%);
  height: 62px;
}

.pcm-premium-shell .bottom-dock .nav-comunidad svg {
  color: #19d7ff;
  filter: drop-shadow(0 0 10px rgba(0, 174, 255, 0.36));
}

.pcm-premium-shell .app-nav .nav-btn .nav-label {
  width: 100%;
  text-align: center;
  line-height: 1.1;
}

.pcm-premium-shell .app-nav .nav-btn .mission-nav-alert {
  position: absolute;
  top: 13px;
  right: 18px;
  z-index: 2;
  width: 20px;
  height: 20px;
  margin: 0;
  color: #11100b;
  border: 1px solid rgba(255, 214, 107, 0.78);
  background: linear-gradient(180deg, #ffd972, #f0a91d);
  box-shadow:
    0 0 12px rgba(255, 184, 36, 0.68),
    0 0 22px rgba(255, 128, 0, 0.38);
}

.pcm-premium-shell .bottom-dock .nav-btn .mission-nav-alert {
  top: 12px;
  right: calc(50% - 30px);
}

.pcm-premium-shell .app-nav .nav-btn.has-alert {
  color: #ffd36a;
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 174, 28, 0.28), transparent 52%),
    linear-gradient(180deg, rgba(255, 146, 0, 0.12), rgba(255, 146, 0, 0.035));
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 47, 0.08),
    0 0 20px rgba(255, 145, 0, 0.14);
}

.pcm-premium-shell .app-nav .nav-btn.has-alert::after {
  background: linear-gradient(90deg, transparent, #ff9f1c, #ffd36a, transparent);
  box-shadow: 0 0 16px rgba(255, 159, 28, 0.62), 0 0 26px rgba(255, 115, 0, 0.35);
}

.pcm-premium-shell .app-nav .nav-btn.has-alert.active {
  color: var(--pcm-gold);
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 190, 47, 0.32), transparent 50%),
    linear-gradient(180deg, rgba(255, 146, 0, 0.16), rgba(0, 148, 255, 0.08));
}

.bottom-dock .nav-btn.active {
  border: 1px solid rgba(255, 190, 47, 0.56);
  border-radius: 9px;
  color: var(--pcm-gold);
  background:
    radial-gradient(circle at 50% 100%, rgba(255, 190, 47, 0.24), transparent 48%),
    rgba(255, 190, 47, 0.035);
}

.premium-home {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(360px, 0.64fr) minmax(360px, 0.74fr);
  gap: 14px;
}

.premium-home .panel,
.pcm-premium-shell .panel,
.pcm-premium-shell .table-wrap,
.pcm-premium-shell .store-page > section,
.pcm-premium-shell .profile-hero,
.pcm-premium-shell .profile-card,
.pcm-premium-shell .facility-card {
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.88), rgba(4, 15, 26, 0.94)),
    rgba(3, 12, 22, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 16px 38px rgba(0, 0, 0, 0.24);
}

.premium-match-card {
  position: relative;
  height: 455px;
  min-height: 455px;
  max-height: 455px;
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 8px;
  background: #051525;
}

.match-card-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.24), rgba(2, 8, 16, 0.9)),
    linear-gradient(90deg, rgba(3, 13, 24, 0.9), rgba(3, 13, 24, 0.18), rgba(3, 13, 24, 0.9)),
    url("./assets/login/slide-liga.png") center 38% / cover no-repeat;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.02);
}

.premium-match-content {
  position: relative;
  z-index: 1;
  height: 455px;
  min-height: 455px;
  max-height: 455px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 18px 24px;
  text-align: center;
}

.premium-match-content span,
.premium-section-head h3,
.premium-store-banner span,
.premium-followers-card h3,
.premium-recent-card h3 {
  margin: 0;
  color: var(--pcm-blue);
  font-size: 0.92rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.premium-match-content h3 {
  margin: 0;
  font-size: clamp(1.65rem, 2.75vw, 2.65rem);
  line-height: 0.96;
  text-transform: uppercase;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.75);
}

.premium-match-content h4 {
  margin: 0;
  font-size: clamp(1.15rem, 1.85vw, 1.85rem);
  line-height: 1;
  text-transform: uppercase;
}

.premium-match-content .versus {
  color: #fff;
  font-size: 0.92rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.premium-match-content p {
  max-width: 560px;
  margin: 0;
  color: #d8e2eb;
  font-size: 0.9rem;
}

.premium-match-content .primary-btn {
  min-width: 220px;
  min-height: 42px;
  margin-top: 6px;
}

.premium-match-content .match-preview-compact {
  width: min(430px, 100%);
  margin: 4px 0 2px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 217, 255, 0.18);
  border-radius: 7px;
  background: rgba(1, 9, 20, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.premium-match-content .match-preview-label {
  font-size: 0.7rem;
}

.premium-match-content .match-preview-odds {
  font-size: 0.62rem;
}

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

.premium-section-head .link-btn,
.pcm-premium-shell .link-btn {
  width: auto;
  padding: 0;
  color: #dce7f0;
  background: transparent;
}

.premium-news-card {
  min-height: 420px;
}

.lead-news {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.lead-news-thumb {
  min-height: 122px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(4, 14, 24, 0.1), rgba(4, 14, 24, 0.42)),
    url("./assets/avatars/president-founder.png") center top / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.news-press-thumb {
  background:
    linear-gradient(180deg, rgba(4, 14, 24, 0.04), rgba(4, 14, 24, 0.28)),
    url("./assets/news/press-conference.png") center / cover no-repeat,
    url("./assets/avatars/president-founder.png") center top / cover no-repeat;
}

.lead-news span,
.premium-news-list small,
.finance-split span,
.finance-split small,
.premium-followers-card span,
.premium-followers-card small {
  color: #aebac5;
  font-size: 0.78rem;
}

.lead-news strong {
  display: block;
  margin: 8px 0;
  color: #fff;
  font-size: 1.08rem;
  line-height: 1.35;
}

.lead-news p {
  margin: 0;
  color: #bcc8d2;
  line-height: 1.55;
}

.premium-news-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.premium-news-list button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  color: #edf5fa;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
}

.premium-news-list svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 6px;
  color: var(--pcm-green);
  background: rgba(0, 224, 120, 0.12);
}

.premium-news-list strong,
.premium-news-list small {
  display: block;
}

.premium-finance-card {
  min-height: 220px;
}

.finance-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 148, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.finance-split > div {
  display: grid;
  gap: 6px;
}

.finance-split strong {
  color: #fff;
  font-size: 1.08rem;
}

.finance-split strong.positive,
.finance-split small {
  color: var(--pcm-green);
}

.finance-split strong.negative {
  color: var(--red);
}

.finance-dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero hero hero hero hero hero"
    "kpis kpis kpis kpis kpis kpis kpis kpis kpis kpis kpis kpis"
    "income income income income costs costs costs costs ledger ledger ledger ledger"
    "income income income income costs costs costs costs tools tools tools tools";
  gap: 14px;
}

.finance-hero,
.finance-kpi,
.finance-panel {
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.88), rgba(4, 15, 26, 0.96)),
    rgba(3, 12, 22, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(0, 0, 0, 0.22);
}

.finance-hero {
  grid-area: hero;
  min-height: 132px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background:
    linear-gradient(90deg, rgba(2, 11, 22, 0.96), rgba(2, 11, 22, 0.74), rgba(2, 11, 22, 0.96)),
    radial-gradient(circle at 78% 18%, rgba(0, 224, 120, 0.18), transparent 28%),
    radial-gradient(circle at 24% 0%, rgba(0, 148, 255, 0.18), transparent 34%),
    rgba(3, 12, 22, 0.92);
}

.finance-hero h2 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.finance-hero p {
  max-width: 740px;
  margin: 0;
  color: #b9c9d8;
  line-height: 1.45;
}

.finance-hero-score {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(0, 224, 120, 0.22);
  border-radius: 8px;
  background: rgba(0, 224, 120, 0.055);
}

.finance-hero-score span,
.finance-panel-head span,
.finance-kpi span,
.finance-row-list span,
.finance-ledger-list span {
  color: #9fb3c8;
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.finance-hero-score strong {
  color: var(--pcm-green);
  font-size: 2.1rem;
  line-height: 1;
}

.finance-hero-score i,
.finance-mini-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.finance-hero-score i::before,
.finance-mini-bar span {
  content: "";
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0c9cff, #24e0c6, #20f07b);
}

.finance-kpi-grid {
  grid-area: kpis;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.finance-kpi {
  min-height: 94px;
  display: grid;
  gap: 6px;
  padding: 16px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.finance-kpi:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 196, 255, 0.34);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(0, 148, 255, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.finance-kpi strong {
  color: #fff;
  font-size: 1.45rem;
  line-height: 1.05;
}

.finance-kpi.budget strong,
.finance-kpi.positive strong,
.finance-panel-head strong.positive {
  color: var(--pcm-green);
}

.finance-kpi.negative strong,
.finance-panel-head strong.negative {
  color: #ff6b6b;
}

.finance-kpi.health strong {
  color: #24e0c6;
}

.finance-kpi em {
  color: #aebdcc;
  font-size: 0.82rem;
  font-style: normal;
}

.finance-panel {
  min-height: 172px;
  padding: 16px;
}

.finance-income-panel { grid-area: income; }
.finance-cost-panel { grid-area: costs; }
.finance-ledger-panel { grid-area: ledger; }
.finance-tools-panel { grid-area: tools; }

.finance-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.finance-panel-head h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.05rem;
}

.finance-panel-head > strong {
  color: var(--pcm-green);
  font-size: 1.15rem;
  white-space: nowrap;
}

.finance-row-list,
.finance-ledger-list {
  display: grid;
  gap: 8px;
}

.finance-row-list article,
.finance-ledger-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.finance-row-list strong,
.finance-ledger-list strong {
  color: #fff;
  text-align: right;
}

.finance-row-list em,
.finance-ledger-list em {
  grid-column: 1 / -1;
  color: #9fb3c8;
  font-size: 0.78rem;
  font-style: normal;
}

.finance-mini-bar {
  margin-top: 12px;
}

.finance-mini-bar.warning span {
  background: linear-gradient(90deg, #20f07b, #ffd56a, #ff7777);
}

.finance-tools-panel p {
  margin: 0 0 14px;
  color: #aebdcc;
  line-height: 1.45;
}

.finance-tools-panel .primary-btn {
  width: 100%;
}

@media (max-width: 1180px) {
  .finance-dashboard {
    grid-template-areas:
      "hero hero hero hero hero hero hero hero hero hero hero hero"
      "kpis kpis kpis kpis kpis kpis kpis kpis kpis kpis kpis kpis"
      "income income income income income income costs costs costs costs costs costs"
      "ledger ledger ledger ledger ledger ledger tools tools tools tools tools tools";
  }

  .finance-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .finance-dashboard {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "kpis"
      "income"
      "costs"
      "ledger"
      "tools";
  }

  .finance-hero {
    grid-template-columns: 1fr;
  }

  .finance-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.forbes-mini {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.14), rgba(0, 224, 120, 0.08)),
    rgba(255, 255, 255, 0.03);
}

.forbes-mini span,
.forbes-mini em {
  display: block;
  color: #d7e1eb;
  font-style: normal;
  text-align: left;
}

.forbes-mini strong {
  grid-row: span 2;
  color: #fff;
  font-size: 2rem;
}

.premium-store-banner {
  min-height: 156px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 20, 34, 0.92), rgba(8, 20, 34, 0.55), rgba(8, 20, 34, 0.96)),
    url("./assets/banners/nacimiento.png") center / cover no-repeat;
}

.premium-store-banner h3 {
  margin: 6px 0 18px;
  font-size: 1.25rem;
}

.premium-calendar-card,
.premium-table-card,
.premium-training-card,
.premium-followers-card,
.premium-recent-card {
  min-height: 210px;
}

.table-mini-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 44px 50px;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.table-mini-row.user {
  border-left: 3px solid var(--pcm-green);
  background: linear-gradient(90deg, rgba(0, 224, 120, 0.22), transparent);
}

.table-mini-row em {
  color: #aab8c5;
  font-style: normal;
}

.table-mini-row b {
  color: #fff;
}

.training-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.training-row span {
  color: #c7d2dc;
}

.training-row strong {
  color: var(--pcm-gold);
  font-size: 1.45rem;
}

.premium-followers-card {
  position: relative;
  overflow: hidden;
}

.premium-followers-card > strong {
  display: block;
  margin-top: 26px;
  font-size: 2.2rem;
}

.mini-bars {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: end;
  gap: 7px;
}

.mini-bars i {
  width: 14px;
  border: 1px solid rgba(0, 148, 255, 0.32);
  background: linear-gradient(180deg, rgba(0, 148, 255, 0.74), rgba(0, 88, 190, 0.42));
}

.empty-ball {
  min-height: 126px;
  display: grid;
  place-items: center;
  color: #b7c3cd;
  text-align: center;
}

.pcm-premium-shell .primary-btn {
  border-radius: 6px;
  color: #10100c;
  background: linear-gradient(180deg, #ffd978, #efa91f);
  box-shadow: 0 10px 28px rgba(255, 174, 22, 0.2);
}

.pcm-premium-shell .secondary-btn,
.pcm-premium-shell .danger-btn {
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.014)),
    rgba(3, 13, 24, 0.8);
}

.pcm-premium-shell .danger-btn {
  border-color: rgba(240, 109, 109, 0.34);
  color: #ff8a8a;
}

.pcm-premium-shell table {
  border-collapse: separate;
  border-spacing: 0;
}

.pcm-premium-shell th {
  color: #aebac5;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.pcm-premium-shell td {
  border-color: rgba(255, 255, 255, 0.07);
}

.pcm-premium-shell tr:hover td,
.pcm-premium-shell .clickable-row:hover td {
  background: rgba(0, 148, 255, 0.08);
}

.pcm-premium-shell .badge,
.pcm-premium-shell .rating {
  border-radius: 6px;
}

.pcm-premium-shell .store-page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: 16px;
}

.pcm-premium-shell .store-hero {
  grid-column: 1 / -1;
  min-height: 210px;
  background:
    linear-gradient(90deg, rgba(8, 20, 34, 0.94), rgba(8, 20, 34, 0.54), rgba(8, 20, 34, 0.96)),
    url("./assets/banners/nacimiento.png") center / cover no-repeat;
}

.pcm-premium-shell .store-showcase,
.pcm-premium-shell .store-grid {
  grid-column: 1 / -1;
}

.pcm-premium-shell .product-card,
.pcm-premium-shell .store-showcase-banner {
  border-color: rgba(255, 190, 47, 0.18);
}

.pcm-premium-shell .profile-page,
.pcm-premium-shell .ranking-page,
.pcm-premium-shell .news-page-shell,
.pcm-premium-shell .office-game-screen,
.pcm-premium-shell .section-grid {
  max-width: 100%;
}

.pcm-premium-shell .formation-field {
  min-height: 560px;
  border-color: rgba(0, 148, 255, 0.2);
  background:
    linear-gradient(rgba(4, 10, 8, 0.22), rgba(4, 10, 8, 0.36)),
    radial-gradient(circle at 50% 50%, rgba(164, 255, 123, 0.12), transparent 50%),
    linear-gradient(90deg, rgba(50, 120, 54, 0.72) 0 10%, rgba(42, 105, 49, 0.72) 10% 20%, rgba(50, 120, 54, 0.72) 20% 30%, rgba(42, 105, 49, 0.72) 30% 40%, rgba(50, 120, 54, 0.72) 40% 50%, rgba(42, 105, 49, 0.72) 50% 60%, rgba(50, 120, 54, 0.72) 60% 70%, rgba(42, 105, 49, 0.72) 70% 80%, rgba(50, 120, 54, 0.72) 80% 90%, rgba(42, 105, 49, 0.72) 90% 100%);
}

.pcm-premium-shell .lineup-player {
  border: 1px solid rgba(0, 148, 255, 0.55);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(0, 101, 205, 0.82), rgba(5, 16, 31, 0.92));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), 0 0 16px rgba(0, 148, 255, 0.18);
}

.pcm-premium-shell .lineup-player.selected {
  border-color: var(--pcm-gold);
  box-shadow: 0 0 0 1px var(--pcm-gold), 0 0 28px rgba(255, 190, 47, 0.42);
}

@media (max-width: 1080px) {
  .pcm-topbar {
    grid-template-columns: 1fr;
  }

  .pcm-premium-shell .top-ledger {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .premium-home {
    grid-template-columns: 1fr 1fr;
  }

  .premium-match-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .pcm-topbar {
    padding: 16px;
  }

  .pcm-brand {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .pcm-crest {
    width: 48px;
    height: 60px;
  }

  .pcm-crest > img,
  .pcm-crest .president-frame,
  .pcm-crest > span {
    width: 44px;
    height: 52px;
  }

  .pcm-premium-shell .top-ledger {
    grid-template-columns: 1fr;
  }

  .pcm-premium-shell .top-command-actions {
    grid-template-columns: 1fr;
  }

  .pcm-premium-shell .top-app-nav {
    height: auto;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .pcm-premium-shell .app-nav .nav-btn {
    min-height: 58px;
    font-size: 0.78rem;
  }

  .premium-home {
    grid-template-columns: 1fr;
  }

  .bottom-dock {
    left: 8px;
    right: 8px;
    grid-template-columns: repeat(6, minmax(76px, 1fr));
    overflow-x: auto;
  }

  .bottom-dock .nav-btn {
    min-width: 82px;
  }

  .pcm-premium-shell .main-stage {
    padding: 12px 12px 110px;
  }

  .lead-news {
    grid-template-columns: 1fr;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  min-height: 100svh;
  background:
    radial-gradient(circle at 18% 8%, rgba(215, 180, 106, 0.18), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(63, 213, 199, 0.12), transparent 24%),
    linear-gradient(145deg, #080b0f 0%, #10151b 48%, #090c10 100%);
}

@media (display-mode: standalone) {
  .app-shell {
    min-height: 100svh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background:
      linear-gradient(180deg, rgba(8, 11, 15, 0.96), rgba(8, 11, 15, 0) 72px),
      radial-gradient(circle at 18% 8%, rgba(215, 180, 106, 0.18), transparent 28%),
      radial-gradient(circle at 86% 16%, rgba(63, 213, 199, 0.12), transparent 24%),
      linear-gradient(145deg, #080b0f 0%, #10151b 48%, #090c10 100%);
  }

  .sidebar {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
  }
}

.auth-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, 0.94fr);
  align-items: stretch;
}

.auth-art {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 48px;
  background: #080d11;
}

.auth-scene-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 11, 15, 0.1), rgba(8, 11, 15, 0.94)),
    linear-gradient(90deg, rgba(8, 11, 15, 0.48) 0%, rgba(8, 11, 15, 0.18) 52%, rgba(8, 11, 15, 0.82) 100%),
    var(--auth-bg) center / var(--auth-bg-size, cover) no-repeat;
  filter: saturate(0.92) contrast(1.04);
  transform: scale(1.015);
}

.auth-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 66%, rgba(255, 204, 106, 0.16), transparent 25%),
    linear-gradient(90deg, rgba(8, 11, 15, 0.08) 0%, rgba(8, 11, 15, 0.24) 58%, rgba(8, 11, 15, 0.9) 100%);
}

.brand-lockup {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.auth-carousel {
  width: min(760px, 100%);
  min-height: 520px;
  display: grid;
  align-content: end;
  gap: 18px;
  padding: 22px 0 0;
}

.auth-carousel::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -18px;
  height: 72%;
  z-index: -1;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent, rgba(6, 10, 14, 0.58) 34%, rgba(6, 10, 14, 0.84)),
    linear-gradient(135deg, rgba(255, 204, 106, 0.12), transparent 44%),
    linear-gradient(90deg, rgba(63, 213, 199, 0.13), transparent 62%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.auth-slide-count {
  justify-self: start;
  padding: 7px 10px;
  border: 1px solid rgba(255, 204, 106, 0.24);
  border-radius: 999px;
  color: #ffe1a1;
  background: rgba(255, 204, 106, 0.1);
  font-size: 0.72rem;
  font-weight: 1000;
}

.kicker {
  color: var(--gold-strong);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.brand-lockup h1 {
  margin: 12px 0 18px;
  max-width: 680px;
  font-size: clamp(3.05rem, 5.4vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-lockup p {
  margin: 0;
  max-width: 520px;
  color: #cfd9df;
  font-size: 1.04rem;
  line-height: 1.7;
}

.auth-slide-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}

.auth-slide-stats span {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #e6eef4;
  background: rgba(255, 255, 255, 0.075);
  font-size: 0.78rem;
  font-weight: 900;
}

.auth-carousel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.auth-carousel-controls > button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 204, 106, 0.28);
  border-radius: 50%;
  color: #11161a;
  background: var(--gold-strong);
  font-size: 1.6rem;
  font-weight: 1000;
}

.auth-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}

.auth-dots button {
  width: 28px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.auth-dots button.active {
  width: 44px;
  background: linear-gradient(90deg, var(--gold-strong), var(--green));
}

.auth-panel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
}

.auth-panel {
  width: min(100%, 450px);
  border: 1px solid var(--stroke);
  background: rgba(12, 17, 22, 0.92);
  box-shadow: var(--shadow);
  border-radius: 8px;
  padding: 28px;
}

.auth-tabs,
.nav-tabs,
.sub-tabs {
  display: flex;
  gap: 8px;
}

.tab-btn {
  flex: 1;
  min-height: 42px;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 800;
}

.tab-btn.active {
  color: #11161a;
  background: linear-gradient(135deg, var(--gold-strong), #e5aa42);
}

.form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.field {
  display: grid;
  gap: 7px;
}

.field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.locked-field {
  padding: 12px 13px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.locked-field strong {
  display: block;
  margin-top: 5px;
  color: var(--gold-strong);
}

.field input,
.field select {
  width: 100%;
  min-height: 48px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 0 13px;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: rgba(255, 204, 106, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 204, 106, 0.13);
}

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

.avatar-option {
  min-height: 118px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0;
}

.avatar-option.active {
  border-color: var(--gold-strong);
  background: rgba(255, 204, 106, 0.16);
}

.avatar-option img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  display: block;
}

.avatar-option span {
  min-height: 30px;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.primary-btn,
.secondary-btn,
.danger-btn,
.icon-btn {
  min-height: 44px;
  border-radius: 6px;
  font-weight: 900;
}

.primary-btn {
  color: #101419;
  background: linear-gradient(135deg, var(--gold-strong), #d99331);
}

.secondary-btn,
.icon-btn {
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--stroke);
}

.danger-btn {
  color: #fff;
  background: rgba(240, 109, 109, 0.16);
  border: 1px solid rgba(240, 109, 109, 0.34);
}

.link-btn {
  min-height: 32px;
  justify-self: center;
  color: var(--gold-strong);
  background: transparent;
  font-weight: 900;
}

.link-btn:hover {
  color: #ffe1a1;
}

.hint {
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.game {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 260px;
}

.game-horizontal-nav {
  grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(circle at 18% 0%, rgba(63, 213, 199, 0.08), transparent 26%),
    radial-gradient(circle at 70% 0%, rgba(255, 204, 106, 0.08), transparent 26%),
    #080d12;
}

.game-horizontal-nav .content {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
}

.game-horizontal-nav .main-stage {
  padding-bottom: 112px;
}

.horizontal-nav-shell {
  display: block;
  align-items: stretch;
  padding: 8px 14px 10px;
  border-bottom: 1px solid rgba(0, 102, 255, 0.3);
  background:
    linear-gradient(90deg, rgba(0, 65, 210, 0.22), transparent 26%, rgba(0, 65, 210, 0.14)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(4, 10, 18, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.28);
}

.horizontal-club-card {
  position: relative;
  overflow: hidden;
  display: none;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 204, 106, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(255, 204, 106, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.045);
}

.horizontal-club-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.horizontal-club-card.profile-banner-nacimiento::before {
  opacity: 0.54;
  background:
    linear-gradient(90deg, rgba(8, 12, 18, 0.82), rgba(8, 12, 18, 0.36), rgba(8, 12, 18, 0.9)),
    url("./assets/banners/nacimiento.png");
  background-size: 100% 100%, auto 165%;
  background-position: center, 42% 18%;
}

.horizontal-club-card > * {
  position: relative;
  z-index: 1;
}

.horizontal-club-photo,
.horizontal-club-photo .president-frame {
  width: 54px;
  height: 54px;
}

.horizontal-club-photo {
  overflow: visible;
  border-radius: 7px;
}

.horizontal-club-card span,
.horizontal-club-card small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.horizontal-club-card strong {
  display: block;
  overflow: hidden;
  margin: 3px 0;
  color: #f4f7fb;
  font-size: 0.92rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar {
  border-right: 1px solid var(--stroke);
  background: rgba(8, 11, 15, 0.9);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.club-mark {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: stretch;
  gap: 13px;
  padding: 11px;
  border: 1px solid rgba(255, 204, 106, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.1), transparent 62%),
    rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.club-mark::before,
.club-mark::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.club-mark::before {
  inset: 0;
  background: var(--hero-frame-bg, transparent);
  background-size: 180% 180%;
  animation: heroFrameAtmosphere 9s ease-in-out infinite;
}

.club-mark::after {
  inset: 5px;
  border: var(--hero-frame-line, 0);
  border-radius: 7px;
  background: var(--hero-frame-sheen, transparent);
  background-size: 220% 100%;
  box-shadow: var(--hero-frame-shadow, none);
  animation: heroFrameSheen 7s linear infinite;
}

.club-mark > * {
  position: relative;
  z-index: 1;
}

.club-mark.profile-hero-frame {
  border-color: var(--hero-frame-border);
  box-shadow: var(--hero-frame-box);
}

.club-mark.profile-hero-frame::before,
.club-mark.profile-hero-frame::after {
  opacity: 1;
}

.club-mark.profile-hero-frame .sidebar-president-photo {
  box-shadow: var(--hero-avatar-shadow);
}

.club-mark.profile-banner-nacimiento::before {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(8, 12, 18, 0.72) 0%, rgba(8, 12, 18, 0.42) 44%, rgba(8, 12, 18, 0.9) 100%),
    radial-gradient(circle at 28% 48%, rgba(255, 204, 106, 0.18), transparent 30%),
    url("./assets/banners/nacimiento.png");
  background-size: 100% 100%, 100% 100%, auto 145%;
  background-position: center, center, 34% 24%;
  animation: sidebarBannerNacimientoDrift 18s ease-in-out infinite;
}

.club-mark.profile-banner-nacimiento::after {
  opacity: 1;
  border: 1px solid rgba(255, 238, 176, 0.22);
  background: linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.12) 44%, transparent 53% 100%);
  background-size: 220% 100%;
  box-shadow: inset 0 0 26px rgba(255, 204, 106, 0.08);
}

.crest {
  width: 52px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #11161a;
  background: linear-gradient(135deg, var(--gold-strong), #d7b46a 45%, #77d4c9);
  clip-path: polygon(50% 0, 88% 16%, 82% 76%, 50% 100%, 18% 76%, 12% 16%);
  font-weight: 1000;
}

.club-name {
  font-weight: 1000;
  text-transform: uppercase;
}

.season {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.sidebar-president-photo {
  overflow: hidden;
  width: 82px;
  min-height: 104px;
  border-radius: 7px;
  border: 1px solid rgba(255, 204, 106, 0.3);
  background: #0b1116;
}

.sidebar-president-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.president-frame {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
}

.president-frame .frame-core {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--frame-thickness, 10px));
  height: calc(100% - var(--frame-thickness, 10px));
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background: #0b1116;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 0 var(--frame-core-gap, 2px) var(--frame-core-ring, rgba(255, 255, 255, 0.15));
}

.president-frame img,
.president-frame .frame-core > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.president-frame::before,
.president-frame::after,
.president-frame .frame-ornaments {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.president-frame::before {
  inset: 0;
  z-index: 0;
  background: var(--frame-metal);
  box-shadow: var(--frame-shadow);
  animation: var(--frame-spin, none);
}

.president-frame::after {
  inset: var(--frame-outer-inset, -4px);
  z-index: 1;
  border: var(--frame-outer-border);
  background: var(--frame-shine);
  opacity: var(--frame-shine-opacity, 0.72);
  mask: radial-gradient(circle, transparent 54%, #000 55%);
  animation: var(--frame-shimmer, none);
}

.president-frame .frame-ornaments {
  inset: var(--frame-ornament-inset, -8px);
  z-index: 3;
  border: var(--frame-ornament-border, 0);
  box-shadow: var(--frame-ornament-shadow, none);
  background: var(--frame-ornament-bg, transparent);
  mask: var(--frame-ornament-mask, none);
}

.president-frame.has-image-frame {
  --frame-thickness: 0px;
  border-radius: 50%;
  background: transparent;
  overflow: visible;
}

.president-frame.has-image-frame::before,
.president-frame.has-image-frame::after,
.president-frame.has-image-frame .frame-ornaments {
  display: none;
}

.president-frame.has-image-frame .frame-core {
  z-index: 1;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  background: rgba(4, 12, 28, 0.88);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 16px rgba(0, 0, 0, 0.42);
}

.president-frame.has-image-frame > .president-frame-asset {
  position: absolute;
  z-index: 3;
  inset: -14%;
  width: 128%;
  height: 128%;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(100, 180, 255, 0.22));
}

.president-frame.frame-founder {
  --frame-thickness: 18px;
  --frame-core-gap: 3px;
  --frame-core-ring: #1d1610;
  --frame-metal:
    conic-gradient(from 18deg, #5c3514, #f4c75e, #fff4ba, #9c681d, #2dd4bf, #f4c75e, #5c3514);
  --frame-shadow:
    0 0 0 1px rgba(255, 239, 181, 0.75),
    0 0 0 5px rgba(76, 54, 24, 0.72),
    0 10px 24px rgba(0, 0, 0, 0.45),
    inset 0 0 12px rgba(72, 39, 12, 0.5);
  --frame-outer-border: 2px solid rgba(255, 228, 150, 0.66);
  --frame-shine:
    conic-gradient(from 0deg, transparent 0 12%, rgba(255,255,255,.72) 14%, transparent 20% 48%, rgba(45,212,191,.48) 52%, transparent 60% 100%);
  --frame-shimmer: founderSweep 5.6s linear infinite;
  --frame-ornament-inset: -5px;
  --frame-ornament-border: 1px solid rgba(255, 214, 107, 0.42);
  --frame-ornament-shadow:
    inset 0 0 0 6px rgba(0, 0, 0, 0.08),
    0 -7px 0 -4px #ffe8a0,
    0 7px 0 -4px #ffe8a0;
}

.president-frame.frame-season-pass {
  --frame-thickness: 22px;
  --frame-core-gap: 3px;
  --frame-core-ring: #08162e;
  --frame-metal:
    conic-gradient(from 35deg, #071a3a, #4ca3ff, #e9f7ff, #3454d1, #f6c95a, #8ecbff, #071a3a);
  --frame-shadow:
    0 0 0 1px rgba(198, 232, 255, 0.76),
    0 0 0 6px rgba(9, 24, 52, 0.82),
    0 12px 28px rgba(28, 97, 178, 0.28),
    inset 0 0 14px rgba(2, 12, 34, 0.62);
  --frame-outer-inset: -6px;
  --frame-outer-border: 2px solid rgba(189, 229, 255, 0.66);
  --frame-shine:
    conic-gradient(from 90deg, transparent 0 10%, rgba(255,255,255,.78) 12%, transparent 19% 43%, rgba(125,211,252,.52) 48%, transparent 56% 75%, rgba(250,204,21,.48) 79%, transparent 86% 100%);
  --frame-shimmer: seasonOrbit 6.5s linear infinite;
  --frame-ornament-inset: -9px;
  --frame-ornament-border: 1px solid rgba(125, 211, 252, 0.46);
  --frame-ornament-shadow:
    0 -9px 0 -5px #e9f7ff,
    0 9px 0 -5px #e9f7ff,
    9px 0 0 -5px #f6c95a,
    -9px 0 0 -5px #4ca3ff;
}

.president-frame.frame-gold {
  --frame-thickness: 26px;
  --frame-core-gap: 4px;
  --frame-core-ring: #2a1a05;
  --frame-metal:
    conic-gradient(from 0deg, #3b2507, #b37518, #fff2ad, #e2a72c, #7a4c0a, #fff7cc, #b37518, #3b2507);
  --frame-shadow:
    0 0 0 1px rgba(255, 236, 174, 0.9),
    0 0 0 7px rgba(53, 35, 12, 0.88),
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(255, 204, 106, 0.2),
    inset 0 0 16px rgba(73, 45, 6, 0.72);
  --frame-outer-inset: -8px;
  --frame-outer-border: 2px solid rgba(255, 238, 176, 0.8);
  --frame-shine:
    conic-gradient(from 45deg, transparent 0 8%, rgba(255,255,255,.92) 10%, transparent 17% 34%, rgba(255,226,145,.62) 39%, transparent 47% 62%, rgba(255,255,255,.66) 68%, transparent 75% 100%);
  --frame-shimmer: goldCrownSweep 7.5s linear infinite;
  --frame-ornament-inset: -12px;
  --frame-ornament-border: 2px solid rgba(255, 214, 107, 0.48);
  --frame-ornament-bg:
    radial-gradient(circle at 50% 0%, #fff2ad 0 4px, transparent 5px),
    radial-gradient(circle at 50% 100%, #fff2ad 0 4px, transparent 5px),
    radial-gradient(circle at 0% 50%, #f3bd45 0 4px, transparent 5px),
    radial-gradient(circle at 100% 50%, #f3bd45 0 4px, transparent 5px);
  --frame-ornament-shadow:
    0 -12px 0 -7px #fff2ad,
    0 12px 0 -7px #fff2ad,
    12px 0 0 -7px #f3bd45,
    -12px 0 0 -7px #f3bd45,
    0 0 20px rgba(255, 204, 106, 0.26);
}

.sidebar-president-info {
  min-width: 0;
  display: grid;
  align-content: center;
}

.sidebar-president-info span {
  display: block;
  color: var(--gold-strong);
  font-size: 0.66rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-president-info strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--text);
  font-size: 1rem;
  font-weight: 1000;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-president-info small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #c5d0d8;
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-president-info .season {
  margin-top: 8px;
  color: #d6e0e8;
  font-size: 0.78rem;
  line-height: 1.25;
}

.nav {
  display: grid;
  gap: 12px;
}

.app-nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
  scrollbar-width: none;
}

.app-nav .nav-group {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 102, 255, 0.26);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(0, 86, 255, 0.12), rgba(0, 27, 74, 0.14)),
    rgba(4, 10, 18, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 22px rgba(0, 85, 255, 0.08);
}

.app-nav .nav-group-title {
  display: none;
}

.app-nav .nav-btn {
  position: relative;
  min-height: 36px;
  padding: 0 10px;
  border-color: rgba(83, 154, 255, 0.22);
  border-radius: 4px;
  color: #c9def4;
  background:
    linear-gradient(180deg, rgba(0, 85, 255, 0.12), rgba(0, 30, 92, 0.18)),
    rgba(255, 255, 255, 0.018);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  font-size: 0.82rem;
  text-shadow: 0 1px 8px rgba(0, 72, 220, 0.44);
}

.app-nav .nav-btn:hover {
  color: #ffffff;
  border-color: rgba(124, 185, 255, 0.68);
  background:
    linear-gradient(180deg, rgba(0, 103, 255, 0.36), rgba(0, 44, 142, 0.42)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    0 0 22px rgba(0, 102, 255, 0.26),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.app-nav .nav-btn.active {
  color: #ffffff;
  border-color: rgba(156, 205, 255, 0.82);
  background:
    linear-gradient(180deg, #0b69ff, #0040c8),
    #0047df;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 10px 28px rgba(0, 54, 180, 0.46),
    0 0 28px rgba(0, 102, 255, 0.5);
}

.app-nav .nav-btn.active svg {
  color: #ffffff;
}

.app-nav .mission-nav-alert {
  width: 18px;
  height: 18px;
  margin-left: 0;
  font-size: 0.72rem;
  background: rgba(9, 13, 18, 0.2);
}

.nav-group {
  display: grid;
  gap: 5px;
}

.nav-group-title {
  display: block;
  padding: 0 10px 2px;
  color: rgba(184, 201, 219, 0.62);
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.nav-btn {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 10px;
  text-align: left;
  font-weight: 800;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-nav-alert {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid rgba(215, 180, 106, 0.42);
  border-radius: 999px;
  background: rgba(215, 180, 106, 0.16);
  font-size: 0.92rem;
  line-height: 1;
  transform-origin: center;
  animation: missionReadyBounce 1.35s ease-in-out infinite;
}

.nav-btn svg {
  width: 19px;
  height: 19px;
}

.nav-btn.active,
.nav-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--stroke);
}

.manager-card {
  margin-top: auto;
  border: 1px solid var(--stroke);
  background: var(--panel-soft);
  border-radius: 8px;
  padding: 14px;
}

.manager-row {
  display: flex;
  gap: 11px;
  align-items: center;
}

.avatar {
  width: 46px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #202b36, #526477);
  border: 1px solid var(--stroke-strong);
  font-size: 1.35rem;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.level-bar {
  height: 7px;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
}

.level-bar span {
  display: block;
  height: 100%;
  width: var(--xp, 62%);
  background: linear-gradient(90deg, var(--gold-strong), var(--green));
}

.profile-page {
  display: grid;
  gap: 18px;
}

.profile-hero {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(255, 204, 106, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.16), transparent 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    var(--panel);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.profile-hero::before,
.profile-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.profile-hero::before {
  inset: 0;
  background: var(--hero-frame-bg, transparent);
  background-size: 180% 180%;
  animation: heroFrameAtmosphere 9s ease-in-out infinite;
}

.profile-hero::after {
  inset: 7px;
  border: var(--hero-frame-line, 0);
  border-radius: 8px;
  box-shadow: var(--hero-frame-shadow, none);
  background: var(--hero-frame-sheen, transparent);
  background-size: 220% 100%;
  animation: heroFrameSheen 7s linear infinite;
}

.profile-hero > * {
  position: relative;
  z-index: 1;
}

.profile-hero-frame {
  border-color: var(--hero-frame-border);
  box-shadow: var(--hero-frame-box);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    var(--panel);
}

.profile-hero-frame .profile-avatar {
  transform: translateZ(0);
  box-shadow: var(--hero-avatar-shadow);
}

.profile-hero-frame::before,
.profile-hero-frame::after {
  opacity: 1;
}

.profile-hero-frame.frame-founder {
  --hero-frame-border: rgba(255, 214, 107, 0.38);
  --hero-frame-bg:
    radial-gradient(circle at 9% 36%, rgba(255, 214, 107, 0.34), transparent 25%),
    linear-gradient(115deg, rgba(255, 204, 106, 0.2), transparent 42%, rgba(45, 212, 191, 0.1));
  --hero-frame-line: 1px solid rgba(255, 226, 145, 0.42);
  --hero-frame-shadow:
    inset 0 0 0 1px rgba(255, 214, 107, 0.16),
    inset 0 0 46px rgba(255, 204, 106, 0.12),
    0 0 0 1px rgba(255, 214, 107, 0.18);
  --hero-frame-sheen: linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.14) 45%, transparent 52% 100%);
  --hero-frame-box:
    0 24px 70px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 214, 107, 0.4),
    0 0 0 4px rgba(255, 214, 107, 0.06),
    inset 0 0 0 1px rgba(255, 214, 107, 0.16);
  --hero-avatar-shadow:
    0 0 0 9px rgba(255, 214, 107, 0.1),
    0 18px 34px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(255, 204, 106, 0.18);
}

.profile-hero-frame.frame-season-pass {
  --hero-frame-border: rgba(125, 211, 252, 0.36);
  --hero-frame-bg:
    radial-gradient(circle at 9% 36%, rgba(125, 211, 252, 0.34), transparent 25%),
    linear-gradient(115deg, rgba(37, 99, 235, 0.2), transparent 43%, rgba(250, 204, 21, 0.1));
  --hero-frame-line: 1px solid rgba(189, 229, 255, 0.42);
  --hero-frame-shadow:
    inset 0 0 0 1px rgba(125, 211, 252, 0.16),
    inset 0 0 46px rgba(125, 211, 252, 0.12),
    0 0 0 1px rgba(125, 211, 252, 0.18);
  --hero-frame-sheen: linear-gradient(110deg, transparent 0 38%, rgba(189, 229, 255, 0.16) 45%, transparent 52% 100%);
  --hero-frame-box:
    0 24px 70px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(125, 211, 252, 0.4),
    0 0 0 4px rgba(125, 211, 252, 0.06),
    inset 0 0 0 1px rgba(125, 211, 252, 0.16);
  --hero-avatar-shadow:
    0 0 0 9px rgba(125, 211, 252, 0.1),
    0 18px 34px rgba(0, 0, 0, 0.38),
    0 0 32px rgba(125, 211, 252, 0.18);
}

.profile-hero-frame.frame-gold {
  --hero-frame-border: rgba(255, 214, 107, 0.5);
  --hero-frame-bg:
    radial-gradient(circle at 9% 36%, rgba(255, 214, 107, 0.42), transparent 26%),
    linear-gradient(115deg, rgba(255, 204, 106, 0.25), transparent 42%, rgba(124, 77, 11, 0.12));
  --hero-frame-line: 1px solid rgba(255, 238, 176, 0.5);
  --hero-frame-shadow:
    inset 0 0 0 1px rgba(255, 238, 176, 0.2),
    inset 0 0 58px rgba(255, 204, 106, 0.16),
    0 0 0 1px rgba(255, 238, 176, 0.22);
  --hero-frame-sheen: linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.2) 44%, transparent 53% 100%);
  --hero-frame-box:
    0 26px 76px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 238, 176, 0.55),
    0 0 0 5px rgba(255, 214, 107, 0.08),
    0 0 34px rgba(255, 204, 106, 0.1),
    inset 0 0 0 1px rgba(255, 238, 176, 0.18);
  --hero-avatar-shadow:
    0 0 0 10px rgba(255, 214, 107, 0.12),
    0 20px 38px rgba(0, 0, 0, 0.42),
    0 0 38px rgba(255, 204, 106, 0.24);
}

.profile-banner-nacimiento {
  --profile-banner-image: url("./assets/banners/nacimiento.png");
}

.profile-banner-nacimiento::before,
.profile-banner-nacimiento::after {
  opacity: 1;
}

.profile-banner-nacimiento::before {
  background:
    linear-gradient(90deg, rgba(8, 12, 18, 0.78) 0%, rgba(8, 12, 18, 0.34) 34%, rgba(8, 12, 18, 0.86) 100%),
    radial-gradient(circle at 17% 38%, rgba(255, 204, 106, 0.18), transparent 28%),
    var(--profile-banner-image);
  background-size: 100% 100%, 100% 100%, 100% auto;
  background-position: center, center, 50% 10%;
  animation: bannerNacimientoDrift 16s ease-in-out infinite;
}

.profile-banner-nacimiento::after {
  border-color: rgba(255, 238, 176, 0.28);
  background:
    linear-gradient(110deg, transparent 0 36%, rgba(255, 255, 255, 0.14) 44%, transparent 53% 100%),
    linear-gradient(180deg, rgba(255, 204, 106, 0.12), transparent);
  background-size: 220% 100%, 100% 100%;
}

.profile-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.profile-avatar {
  width: clamp(92px, 12vw, 132px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 204, 106, 0.45);
  border-radius: 50%;
  background: linear-gradient(135deg, #25313b, #111820);
  box-shadow: 0 0 0 8px rgba(255, 204, 106, 0.07);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.profile-identity h3 {
  margin: 6px 0 2px;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 0.95;
}

.profile-identity p {
  margin: 0;
  color: #dce7ee;
  font-size: 1.08rem;
  font-weight: 900;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.profile-tags span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: #b9c8d3;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.78rem;
  font-weight: 900;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.profile-stat {
  min-height: 116px;
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 15px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    var(--panel);
}

.profile-stat span,
.profile-stat em,
.profile-record-grid span,
.profile-trophy-row span {
  color: var(--muted);
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 900;
}

.profile-stat strong {
  color: var(--text);
  font-size: 1.22rem;
  line-height: 1.1;
}

.profile-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.profile-reputation-card,
.profile-trophy-card,
.profile-record-card,
.profile-settings-card {
  min-height: 0;
}

.profile-card-heading,
.profile-record-card,
.profile-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-card-heading h3,
.profile-record-card h3,
.profile-settings-card h3 {
  margin: 4px 0 0;
}

.profile-trophy-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.profile-trophy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-trophy-row.won {
  border-color: rgba(255, 204, 106, 0.24);
  background:
    linear-gradient(90deg, rgba(255, 204, 106, 0.12), transparent),
    rgba(255, 255, 255, 0.04);
}

.profile-trophy-row strong {
  display: block;
  margin-bottom: 4px;
}

.profile-trophy-row em {
  min-width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11161a;
  background: var(--gold-strong);
  font-style: normal;
  font-weight: 1000;
}

.profile-emblems-card {
  display: grid;
  gap: 16px;
}

.profile-emblems-count {
  padding: 8px 11px;
  border: 1px solid rgba(255, 204, 106, 0.2);
  border-radius: 999px;
  color: var(--gold-strong);
  background: rgba(255, 204, 106, 0.07);
  font-size: 0.78rem;
  font-weight: 1000;
}

.profile-emblem-group {
  display: grid;
  gap: 10px;
}

.profile-emblem-group + .profile-emblem-group {
  padding-top: 4px;
}

.profile-emblem-group h4 {
  margin: 0;
  color: #dce7ee;
  font-size: 0.86rem;
  font-weight: 1000;
  text-transform: uppercase;
}

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

.profile-emblem {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 190px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(255, 255, 255, 0.035);
  position: relative;
  overflow: hidden;
}

.profile-emblem::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background: linear-gradient(145deg, var(--emblem-a), transparent 58%, var(--emblem-b));
  pointer-events: none;
}

.profile-emblem > * {
  position: relative;
}

.profile-emblem-mark {
  width: 58px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  color: #11161a;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.82), transparent 28%),
    linear-gradient(145deg, var(--emblem-a), var(--emblem-b));
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  font-size: 0.92rem;
  font-weight: 1000;
}

.profile-emblem span {
  display: block;
  margin-bottom: 5px;
  color: var(--emblem-a);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.profile-emblem strong {
  display: block;
  color: var(--text);
  line-height: 1.12;
}

.profile-emblem p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.profile-emblem.locked {
  filter: grayscale(0.92);
  opacity: 0.48;
}

.profile-emblem.unlocked {
  border-color: rgba(255, 204, 106, 0.32);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.profile-emblem.bronze {
  --emblem-a: #c98a4f;
  --emblem-b: #7a4d2b;
}

.profile-emblem.bronze-plus {
  --emblem-a: #dfaa60;
  --emblem-b: #8f6538;
}

.profile-emblem.silver {
  --emblem-a: #d9e5ee;
  --emblem-b: #8296a7;
}

.profile-emblem.gold {
  --emblem-a: #ffd66b;
  --emblem-b: #d89a24;
}

.profile-emblem.elite {
  --emblem-a: #86e7ff;
  --emblem-b: #3479d4;
}

.profile-emblem.legend {
  --emblem-a: #ffc86f;
  --emblem-b: #d24a76;
}

.profile-emblem.mythic {
  --emblem-a: #f5f3ff;
  --emblem-b: #5eead4;
}

.profile-emblem.apex {
  --emblem-a: #ffffff;
  --emblem-b: #f5c451;
}

.profile-customization-card {
  display: grid;
  gap: 16px;
}

.profile-frame-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.profile-frame-option {
  position: relative;
  min-height: 330px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.profile-frame-option::before,
.profile-frame-option::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.profile-frame-option::before {
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: 8px;
}

.profile-frame-option::after {
  left: 18px;
  right: 18px;
  top: 126px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 204, 106, 0.22), transparent);
}

.profile-frame-option.active {
  border-color: rgba(255, 204, 106, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.11), transparent 56%),
    rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 204, 106, 0.08), 0 18px 34px rgba(0, 0, 0, 0.22);
}

.profile-frame-option.locked {
  opacity: 0.54;
}

.frame-preview {
  width: 136px;
  aspect-ratio: 1;
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.18), transparent 37%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 46px rgba(0, 0, 0, 0.34);
  overflow: visible;
}

.frame-preview::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 34px;
  background: var(--preview-aura, transparent);
  opacity: 0.72;
  filter: blur(0.2px);
}

.frame-preview::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -10px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(7px);
}

.frame-preview > img,
.frame-preview > .president-frame {
  position: relative;
  z-index: 1;
  width: 86px;
  height: 86px;
  border-radius: 50%;
}

.profile-frame-option.frame-classic .frame-preview {
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)),
    #111820;
}

.profile-frame-option.frame-founder {
  border-color: rgba(255, 214, 107, 0.22);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 214, 107, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 204, 106, 0.08), rgba(45, 212, 191, 0.04)),
    var(--panel);
}

.profile-frame-option.frame-founder .frame-preview {
  --preview-aura:
    conic-gradient(from 180deg, transparent, rgba(255, 214, 107, 0.42), rgba(45, 212, 191, 0.32), transparent);
  animation: premiumPreviewFloat 5.8s ease-in-out infinite;
}

.profile-frame-option.frame-season-pass {
  border-color: rgba(125, 211, 252, 0.22);
  background:
    radial-gradient(circle at 50% 24%, rgba(125, 211, 252, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(37, 99, 235, 0.1), rgba(250, 204, 21, 0.04)),
    var(--panel);
}

.profile-frame-option.frame-season-pass .frame-preview {
  --preview-aura:
    conic-gradient(from 210deg, transparent, rgba(125, 211, 252, 0.48), rgba(250, 204, 21, 0.26), transparent);
  animation: premiumPreviewFloat 6.4s ease-in-out infinite;
}

.profile-frame-option.frame-gold {
  border-color: rgba(255, 214, 107, 0.34);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 214, 107, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(255, 204, 106, 0.1), rgba(124, 77, 11, 0.08)),
    var(--panel);
}

.profile-frame-option.frame-gold .frame-preview {
  --preview-aura:
    conic-gradient(from 90deg, transparent, rgba(255, 243, 189, 0.5), rgba(240, 185, 63, 0.44), transparent);
  animation: premiumPreviewFloat 6s ease-in-out infinite;
}

.profile-frame-option strong,
.profile-frame-option span {
  display: block;
}

.profile-frame-option strong {
  color: #edf4fb;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.profile-frame-option span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.profile-banner-customization {
  display: grid;
  gap: 10px;
}

.profile-banner-customization h4 {
  margin: 0;
  color: #dce7ee;
  font-size: 0.86rem;
  font-weight: 1000;
  text-transform: uppercase;
}

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

.profile-banner-option {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(255, 255, 255, 0.035);
}

.profile-banner-option.active {
  border-color: rgba(255, 204, 106, 0.32);
}

.profile-banner-option.locked {
  opacity: 0.54;
}

.banner-preview {
  min-height: 120px;
  border: 1px solid rgba(255, 204, 106, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(255, 204, 106, 0.14), transparent),
    rgba(255, 255, 255, 0.04);
  background-size: cover;
  background-position: center;
}

.banner-nacimiento .banner-preview {
  background-image:
    linear-gradient(90deg, rgba(8, 12, 18, 0.16), rgba(8, 12, 18, 0.52)),
    var(--banner-src);
  background-size: 100% 100%, cover;
  background-position: center, 50% 10%;
}

.store-product-media {
  min-height: 118px;
  border: 1px solid rgba(255, 204, 106, 0.18);
  border-radius: 8px;
  background-image:
    linear-gradient(90deg, rgba(8, 12, 18, 0.1), rgba(8, 12, 18, 0.45)),
    var(--product-image);
  background-size: 100% 100%, cover;
  background-position: center, 50% 10%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.profile-banner-option strong,
.profile-banner-option span {
  display: block;
}

.profile-banner-option strong {
  text-transform: uppercase;
}

.profile-banner-option span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.profile-record-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: min(760px, 100%);
}

.profile-record-grid div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.profile-record-grid strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-settings-card {
  opacity: 0.88;
}

.content {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.friends-panel {
  min-width: 0;
  min-height: 0;
  max-height: 100vh;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 18px 14px;
  border-left: 1px solid var(--stroke);
  background: rgba(8, 11, 15, 0.92);
}

.friends-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.friends-head h3 {
  margin: 0;
  text-transform: uppercase;
}

.friends-head span,
.friend-row span,
.empty-friends {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.icon-action {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 204, 106, 0.32);
  border-radius: 8px;
  color: #11161a;
  background: var(--gold-strong);
  font-size: 1.25rem;
  font-weight: 1000;
  cursor: pointer;
}

.friends-list {
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: auto;
}

.friend-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 10px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.friend-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11161a;
  background: linear-gradient(135deg, var(--gold-strong), #77d4c9);
  font-size: 0.75rem;
  font-weight: 1000;
}

.friend-status {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7b8791;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.friend-status.online {
  background: var(--green);
}

.friend-status.busy {
  background: var(--gold-strong);
}

.friends-actions {
  display: grid;
  gap: 8px;
}

.friends-panel.friends-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 35;
  min-height: 0;
  max-height: none;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.friends-toggle {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 230px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 204, 106, 0.35);
  border-radius: 999px;
  color: #f7fbff;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.24), rgba(63, 213, 199, 0.14)),
    rgba(9, 14, 20, 0.95);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  pointer-events: auto;
}

.friends-toggle:hover {
  border-color: rgba(255, 211, 105, 0.62);
  transform: translateY(-1px);
}

.friends-toggle-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11161a;
  background: linear-gradient(135deg, #ffd369, #4bd7c1);
}

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

.friends-toggle-text {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.friends-toggle-text strong,
.friends-toggle-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends-toggle-text strong {
  font-size: 0.86rem;
  text-transform: uppercase;
}

.friends-toggle-text small {
  color: #a9bdd0;
  font-size: 0.72rem;
  font-weight: 900;
}

.friends-toggle-stack {
  display: flex;
  align-items: center;
  padding-right: 2px;
}

.friends-toggle-stack .friend-mini {
  margin-left: -8px;
  box-shadow: 0 0 0 2px #0b1118;
}

.friends-toggle-stack .friend-mini:first-child {
  margin-left: 0;
}

.friends-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(330px, calc(100vw - 24px));
  display: none;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 204, 106, 0.26);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(27, 42, 56, 0.96), rgba(10, 16, 23, 0.98)),
    #0b1118;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62);
  pointer-events: auto;
}

.friends-widget.open .friends-popover {
  display: grid;
}

.friends-widget.open .friends-toggle {
  border-color: rgba(73, 214, 189, 0.54);
}

.friends-widget .friends-list,
.friends-widget .friends-actions {
  display: grid;
}

.friends-widget .friends-list {
  max-height: 270px;
  overflow-y: auto;
}

.friends-widget .friends-head {
  gap: 10px;
}

.friends-widget .friends-head h3 {
  font-size: 0.95rem;
}

.friends-widget .friends-head span {
  font-size: 0.72rem;
}

.dashboard-friends-widget {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 4;
  width: 100%;
  margin-top: 0;
}

.dashboard-friends-widget .friends-toggle {
  width: 100%;
  min-width: 0;
  border-radius: 8px;
}

.dashboard-friends-widget .friends-popover {
  right: 0;
  top: calc(100% + 8px);
  bottom: auto;
  width: 100%;
}

.friend-mini {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #11161a;
  background: linear-gradient(135deg, #ffd369, #6ee7b7);
  font-size: 0.7rem;
  font-weight: 1000;
}

.friend-mini::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 8px;
  height: 8px;
  border: 2px solid #091018;
  border-radius: 999px;
  background: #7a8793;
}

.friend-mini.online::after {
  background: #3ee08f;
}

.friend-mini.away::after,
.friend-mini.busy::after {
  background: #ffd369;
}

.topbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(10, 14, 18, 0.72);
  backdrop-filter: blur(18px);
}

.topbar-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar h2 {
  margin: 0;
  font-size: 1.4rem;
  text-transform: uppercase;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-ledger,
.top-command-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-president-card {
  min-height: 52px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  border: 1px solid rgba(255, 204, 106, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.1), transparent 62%),
    rgba(255, 255, 255, 0.045);
}

.top-president-photo {
  overflow: hidden;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid rgba(255, 204, 106, 0.28);
  background: #0b1116;
}

.top-president-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.top-president-card span {
  display: block;
  color: var(--gold-strong);
  font-size: 0.64rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.top-president-card strong {
  display: block;
  max-width: 170px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.top-president-card small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.currency {
  min-height: 44px;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 128px;
  padding: 8px 12px;
  border: 1px solid rgba(169, 191, 214, 0.18);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(10, 15, 20, 0.62);
}

.currency span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.currency strong {
  color: #dff7ea;
  font-size: 0.95rem;
  font-weight: 1000;
  line-height: 1.08;
  white-space: nowrap;
}

.currency.credits strong {
  color: #ffe1a1;
}

.top-action {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(169, 191, 214, 0.22);
  border-radius: 6px;
  color: #dce7ee;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(14, 20, 27, 0.7);
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.top-action.primary {
  color: #11161a;
  border-color: rgba(255, 204, 106, 0.34);
  background: linear-gradient(135deg, #f4c75e, #d99a34);
}

.top-action.logout {
  color: #ffd1d1;
  border-color: rgba(240, 109, 109, 0.28);
  background: rgba(83, 31, 34, 0.32);
}

.top-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.main-stage {
  padding: 14px 18px 22px;
  overflow-y: auto;
  overflow-x: hidden;
}

.dashboard-shell {
  display: grid;
  gap: 14px;
}

.dashboard-command-center {
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.8fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(255, 204, 106, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(255, 204, 106, 0.08), transparent 34%),
    linear-gradient(120deg, rgba(63, 213, 199, 0.055), transparent 66%),
    rgba(13, 18, 23, 0.78);
  box-shadow: none;
}

.command-main {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  border: 0;
}

.command-main span,
.panel-kicker {
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.command-main h3 {
  margin: 0;
  font-size: clamp(1.08rem, 1.6vw, 1.45rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.command-main p,
.executive-focus p {
  margin: 0;
  color: #b7c4cf;
  line-height: 1.45;
}

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

.command-kpi {
  min-height: 82px;
  display: grid;
  align-content: space-between;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.025);
}

.command-kpi span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.command-kpi strong {
  overflow-wrap: anywhere;
  font-size: 1.26rem;
  font-weight: 1000;
}

.command-kpi em {
  overflow: hidden;
  color: #b9c5ce;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.55fr);
  gap: 14px;
}

.office-scene {
  min-height: 0;
  position: relative;
  overflow: auto;
  border: 1px solid rgba(91, 146, 180, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 0%, rgba(68, 207, 190, 0.08), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(255, 204, 106, 0.07), transparent 26%),
    linear-gradient(180deg, rgba(18, 29, 40, 0.94), rgba(13, 19, 27, 0.98));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
}

.office-scene > .office-hud,
.office-scene > .office-news-panel,
.office-scene > .laptop-dock {
  display: none;
}

.news-search-page {
  min-height: 0;
  padding: 16px;
  color: #f4f7fb;
  background:
    linear-gradient(145deg, rgba(20, 35, 48, 0.82), rgba(13, 18, 25, 0.96)),
    #101820;
}

.pcm-newsroom {
  min-height: calc(100vh - 120px);
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(18px, 2vw, 30px);
  border: 1px solid rgba(214, 166, 82, 0.26);
  border-radius: 8px;
  color: #fff8ec;
  background:
    linear-gradient(180deg, rgba(9, 8, 7, 0.72), rgba(5, 6, 7, 0.92)),
    radial-gradient(circle at 84% 10%, rgba(214, 166, 82, 0.14), transparent 30%),
    rgba(5, 6, 7, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 72px rgba(0, 0, 0, 0.42);
}

.pcm-newsroom-masthead {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.pcm-newsroom-masthead span,
.pcm-newsroom-kicker span,
.pcm-newsroom-section-title span,
.pcm-newsroom-panel > span,
.pcm-newsroom-video span,
.pcm-newsroom-story span {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.pcm-newsroom-masthead h2 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(1.4rem, 2.2vw, 2.35rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.pcm-newsroom-masthead aside {
  display: grid;
  gap: 3px;
  justify-items: end;
  padding: 10px 13px;
  border: 1px solid rgba(214, 166, 82, 0.32);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
}

.pcm-newsroom-masthead strong,
.pcm-newsroom-masthead em {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcm-newsroom-masthead em {
  color: rgba(255, 248, 236, 0.72);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
}

.pcm-newsroom-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(430px, 1.05fr);
  gap: 18px;
  align-items: stretch;
}

.pcm-newsroom-lead {
  min-height: 360px;
  display: grid;
  align-content: end;
  gap: 14px;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(214, 166, 82, 0.14), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    rgba(8, 9, 10, 0.72);
}

.pcm-newsroom-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pcm-newsroom-kicker small {
  color: rgba(255, 248, 236, 0.62);
  font-size: 0.72rem;
  font-weight: 900;
}

.pcm-newsroom-lead h1 {
  max-width: 980px;
  margin: 0;
  color: #fff;
  font-size: clamp(2.05rem, 4.3vw, 5.4rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.pcm-newsroom-lead p {
  max-width: 800px;
  margin: 0;
  color: rgba(255, 248, 236, 0.82);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 700;
  line-height: 1.38;
}

.pcm-newsroom-lead blockquote {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid #d6a652;
  color: rgba(255, 248, 236, 0.76);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.35;
}

.pcm-newsroom-video {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid rgba(214, 166, 82, 0.28);
  border-radius: 8px;
  background: #050607;
  aspect-ratio: 16 / 9;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.36);
}

.pcm-newsroom-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(1.08) contrast(1.04) saturate(1.04);
}

.pcm-newsroom-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.78)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 54%);
  pointer-events: none;
}

.pcm-newsroom-video > div {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  gap: 3px;
}

.pcm-newsroom-video strong {
  color: #fff;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.pcm-newsroom-video em {
  color: rgba(255, 248, 236, 0.72);
  font-style: normal;
  font-weight: 800;
}

.pcm-news-impact,
.pcm-newsroom-trends {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcm-news-impact span,
.pcm-newsroom-trends span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(43, 211, 133, 0.13);
  color: #7bf1b0;
  font-size: 0.72rem;
  font-weight: 1000;
}

.pcm-news-impact span.negative {
  background: rgba(236, 75, 84, 0.14);
  color: #ff9498;
}

.pcm-newsroom-trends {
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(214, 166, 82, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.pcm-newsroom-trends strong {
  color: rgba(255, 248, 236, 0.72);
  font-size: 0.74rem;
  text-transform: uppercase;
}

.pcm-newsroom-trends span {
  border: 1px solid rgba(214, 166, 82, 0.22);
  background: rgba(214, 166, 82, 0.12);
  color: #ffe0a0;
}

.pcm-newsroom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
  gap: 18px;
}

.pcm-newsroom-feed,
.pcm-newsroom-sidebar,
.pcm-newsroom-panel {
  min-width: 0;
}

.pcm-newsroom-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pcm-newsroom-section-title strong {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
}

.pcm-newsroom-story {
  min-height: 102px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pcm-story-rank {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(214, 166, 82, 0.15);
  color: #f3c66f;
  font-weight: 1000;
}

.pcm-newsroom-story strong,
.pcm-statement-memory b {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 1rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcm-newsroom-story p,
.pcm-newsroom-panel p,
.pcm-statement-memory em {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 0;
  color: rgba(255, 248, 236, 0.7);
  font-style: normal;
  font-weight: 700;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pcm-newsroom-story time {
  color: rgba(255, 248, 236, 0.58);
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.pcm-newsroom-story .news-impact-list {
  margin-top: 7px;
}

.pcm-newsroom-sidebar {
  display: grid;
  align-content: start;
  gap: 14px;
}

.pcm-newsroom-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(214, 166, 82, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.pcm-newsroom-panel > strong {
  color: #fff;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.pcm-newsroom-panel > b {
  color: #f3c66f;
  font-size: 1.25rem;
}

.pcm-newsroom-panel button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(214, 166, 82, 0.42);
  border-radius: 6px;
  background: rgba(214, 166, 82, 0.12);
  color: #ffe0a0;
  font-weight: 1000;
  text-transform: uppercase;
}

.pcm-statement-memory {
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pcm-statement-memory small {
  color: #f3c66f;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.pcm-statement-memory.cumplida small {
  color: #7bf1b0;
}

.pcm-statement-memory.incumplida small {
  color: #ff9498;
}

@media (max-width: 1180px) {
  .pcm-newsroom-hero,
  .pcm-newsroom-grid {
    grid-template-columns: 1fr;
  }

  .pcm-newsroom-video {
    min-height: 260px;
  }
}

@media (max-width: 720px) {
  .pcm-newsroom {
    padding: 14px;
  }

  .pcm-newsroom-masthead,
  .pcm-newsroom-story {
    grid-template-columns: 1fr;
  }

  .pcm-newsroom-masthead {
    align-items: flex-start;
    flex-direction: column;
  }

  .pcm-newsroom-masthead aside {
    justify-items: start;
  }

  .pcm-newsroom-story {
    display: grid;
  }

  .pcm-newsroom-story time {
    justify-self: start;
  }
}

.dashboard-news-home {
  display: grid;
  gap: 16px;
  border: 0;
  border-radius: 8px;
}

.dashboard-news-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-news-topline h2 {
  margin: 2px 0 0;
  font-size: 1.28rem;
  text-transform: uppercase;
}

.dashboard-news-focus {
  grid-template-columns: minmax(0, 1.55fr) minmax(255px, 0.62fr);
  grid-auto-rows: minmax(330px, auto);
  gap: 14px;
}

.dashboard-news-focus .news-main-card {
  min-height: 330px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
}

.dashboard-news-focus .news-card-copy {
  bottom: 18px;
  max-width: calc(100% - 34px);
}

.dashboard-news-focus .news-card-copy h3,
.dashboard-news-focus .news-card-copy p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.dashboard-news-focus .news-card-copy h3 {
  -webkit-line-clamp: 2;
  line-height: 1.18;
}

.dashboard-news-focus .news-card-copy p {
  -webkit-line-clamp: 2;
}

.dashboard-news-stack {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
}

.dashboard-news-list {
  display: block;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(127, 164, 190, 0.16);
}

.dashboard-news-list .featured-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
  gap: 12px;
}

.dashboard-news-list .featured-list article {
  min-height: 0;
  grid-template-columns: 74px minmax(0, 1fr);
  padding: 10px;
  border: 1px solid rgba(117, 158, 190, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(10, 17, 24, 0.74);
}

.dashboard-news-list .featured-list article:hover {
  border-color: rgba(75, 215, 193, 0.3);
  background:
    linear-gradient(135deg, rgba(75, 215, 193, 0.095), rgba(255, 204, 106, 0.04)),
    rgba(11, 19, 27, 0.86);
}

.dashboard-news-list .news-thumb {
  width: 74px;
  height: 58px;
}

.dashboard-news-list .featured-primary .news-thumb {
  height: 58px;
}

.executive-focus {
  display: grid;
  gap: 14px;
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.14), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.executive-focus h3 {
  margin-bottom: 7px;
}

.focus-meter {
  --v: 50%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(62, 208, 143, 0.22) var(--v), rgba(255, 255, 255, 0.055) var(--v)),
    rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.focus-meter span {
  color: #d6e1e7;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.focus-meter strong {
  color: var(--gold-strong);
  font-size: 1.65rem;
  font-weight: 1000;
}

.dashboard-profile-card,
.dashboard-store-card {
  position: relative;
  overflow: hidden;
}

.dashboard-presidency-dock {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-color: rgba(255, 204, 106, 0.18);
  background:
    linear-gradient(100deg, rgba(255, 204, 106, 0.1), transparent 52%),
    rgba(17, 24, 31, 0.84);
}

.dashboard-presidency-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.24;
  background: var(--hero-frame-bg, transparent);
  pointer-events: none;
}

.dashboard-presidency-dock.profile-banner-nacimiento::before {
  opacity: 0.52;
  background:
    linear-gradient(90deg, rgba(8, 12, 18, 0.78), rgba(8, 12, 18, 0.32), rgba(8, 12, 18, 0.88)),
    url("./assets/banners/nacimiento.png");
  background-size: 100% 100%, auto 165%;
  background-position: center, 45% 18%;
}

.dashboard-presidency-dock > * {
  position: relative;
  z-index: 1;
}

.dashboard-dock-avatar,
.dashboard-dock-avatar .president-frame {
  width: 64px;
  height: 64px;
}

.dashboard-dock-copy {
  min-width: 0;
}

.dashboard-dock-copy span,
.dashboard-dock-copy em {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.dashboard-dock-copy strong {
  display: block;
  overflow: hidden;
  margin: 2px 0;
  color: #f4f7fb;
  font-size: 1rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-dock-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dashboard-dock-actions button {
  min-height: 34px;
}

.dashboard-profile-card {
  min-height: 164px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: end;
  gap: 11px;
  border-color: rgba(255, 204, 106, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.dashboard-profile-card::before,
.dashboard-profile-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.dashboard-profile-card::before {
  inset: 0;
  opacity: 0.56;
  background:
    linear-gradient(90deg, rgba(9, 13, 18, 0.64) 0%, rgba(9, 13, 18, 0.18) 48%, rgba(9, 13, 18, 0.86) 100%),
    radial-gradient(circle at 18% 26%, rgba(255, 204, 106, 0.16), transparent 34%);
}

.dashboard-profile-card.profile-banner-nacimiento::before {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.18) 0%, rgba(8, 12, 18, 0.44) 52%, rgba(8, 12, 18, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 12, 18, 0.24), rgba(8, 12, 18, 0.04) 48%, rgba(8, 12, 18, 0.68)),
    url("./assets/banners/nacimiento.png");
  background-size: 100% 100%, 100% 100%, auto 128%;
  background-position: center, center, 45% 18%;
  animation: sidebarBannerNacimientoDrift 18s ease-in-out infinite;
}

.dashboard-profile-card::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 0 58%, rgba(8, 12, 18, 0.72) 100%);
}

.dashboard-profile-card > *,
.dashboard-store-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-profile-avatar {
  width: 88px;
  align-self: center;
}

.dashboard-profile-avatar .president-frame {
  width: 88px;
  height: 88px;
}

.dashboard-profile-copy {
  min-width: 0;
  align-self: center;
}

.dashboard-profile-copy h3 {
  margin: 5px 0 2px;
  overflow: hidden;
  color: #f6f8fb;
  font-size: 1.08rem;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-profile-copy p {
  margin: 0;
  overflow: hidden;
  color: #d7e2ea;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.dashboard-profile-tags span {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #cbd7df;
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.68rem;
  font-weight: 1000;
}

.dashboard-profile-card > button {
  grid-column: 1 / -1;
}

.dashboard-store-card {
  display: grid;
  gap: 10px;
  border-color: rgba(63, 213, 199, 0.2);
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.dashboard-store-card h3 {
  margin: 4px 0;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.dashboard-store-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.dashboard-store-ledger {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(63, 213, 199, 0.2);
  border-radius: 8px;
  background: rgba(63, 213, 199, 0.08);
}

.dashboard-store-ledger span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.dashboard-store-ledger strong {
  color: #41e48f;
  font-size: 0.96rem;
}

.president-dashboard-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.13), transparent 58%),
    var(--panel);
}

.president-dashboard-photo {
  overflow: hidden;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid rgba(255, 204, 106, 0.32);
  background: #0b1116;
}

.president-dashboard-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.president-dashboard-card span {
  color: var(--gold-strong);
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.president-dashboard-card h3 {
  margin: 4px 0 7px;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.president-dashboard-card strong {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 4px;
  color: #11161a;
  background: var(--gold-strong);
  font-size: 0.78rem;
}

.president-dashboard-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.news-search-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.news-brand {
  font-size: 1.1rem;
  font-weight: 1000;
  letter-spacing: 0;
}

.news-searchbar {
  flex: 1;
  max-width: 460px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px 0 18px;
  border-radius: 999px;
  background: #4a4f56;
  color: #edf2f7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.news-club-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.news-club-header h2 {
  margin: 0;
  font-size: 1.28rem;
  text-transform: uppercase;
}

.news-club-header p {
  margin: 4px 0 0;
  color: #b9c2ce;
}

.news-header-chip {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255, 204, 106, 0.12);
  border: 1px solid rgba(255, 204, 106, 0.25);
  color: #ffe1a1;
  font-weight: 900;
}

.news-trending-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0 0 10px;
  overflow-x: auto;
}

.news-trending-strip strong,
.news-trending-strip span {
  flex: 0 0 auto;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 1000;
  white-space: nowrap;
}

.news-trending-strip strong {
  color: rgba(255, 249, 238, 0.72);
  text-transform: uppercase;
}

.news-trending-strip span {
  padding: 7px 10px;
  border: 1px solid rgba(255, 204, 106, 0.22);
  background: rgba(255, 204, 106, 0.1);
  color: #ffe0a1;
}

.news-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(260px, 0.62fr);
  grid-auto-rows: 190px;
  gap: 10px;
}

.news-main-card,
.news-mini-card,
.news-video-card,
.featured-lead,
.featured-list article,
.club-about-card {
  border-radius: 8px;
  background: #121b24;
  overflow: hidden;
}

.news-main-card {
  position: relative;
  border: 1px solid rgba(121, 169, 204, 0.18);
}

.news-main-card img,
.featured-lead img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 20%, rgba(0, 0, 0, 0.72) 74%, rgba(0, 0, 0, 0.9)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 52%);
}

.news-card-copy {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

.news-card-copy span,
.news-source {
  color: #7db8ff;
  font-size: 0.78rem;
  font-weight: 900;
}

.news-card-copy h3 {
  margin: 6px 0;
  font-size: 1.08rem;
}

.news-card-copy p,
.featured-lead p,
.featured-list p,
.club-about-card p {
  margin: 0;
  color: #c6ced8;
  line-height: 1.45;
}

.news-impact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.news-impact-list span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(42, 220, 139, 0.12);
  color: #72f0ae;
  font-size: 0.68rem;
  font-weight: 1000;
  text-shadow: none;
}

.news-impact-list span.negative {
  background: rgba(236, 75, 84, 0.14);
  color: #ff8b8f;
}

.news-mini-card {
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 204, 106, 0.1);
  background: #3b2a2c;
}

.news-mini-card:nth-child(3) {
  background: #26363a;
}

.news-mini-card strong,
.news-video-card strong {
  font-size: 0.95rem;
}

.news-mini-card span,
.news-video-card span {
  color: #f5d58f;
  font-weight: 900;
}

.news-mini-visual {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 204, 106, 0.16);
  color: var(--gold-strong);
  font-weight: 1000;
}

.player-mini .player-avatar-wrap,
.player-mini .player-avatar,
.player-mini .player-avatar-img {
  width: 56px;
  height: 56px;
}

.news-video-card {
  position: relative;
  display: block;
  background: #38272b;
}

.league-top-scorer-card {
  display: grid;
  grid-template-rows: auto minmax(0, auto) minmax(0, 1fr);
  align-content: stretch;
  min-height: 0;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(83, 205, 191, 0.2);
  background:
    linear-gradient(135deg, rgba(83, 205, 191, 0.16), transparent 54%),
    linear-gradient(225deg, rgba(255, 204, 106, 0.08), transparent 58%),
    #101a23;
}

.top-scorer-layout {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.league-top-scorer-card.waiting {
  border-color: rgba(125, 184, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(125, 184, 255, 0.14), transparent 54%),
    linear-gradient(225deg, rgba(255, 204, 106, 0.1), transparent 58%),
    #151b22;
}

.scorer-medal {
  width: 44px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 204, 106, 0.34);
  border-radius: 50%;
  color: #11161a;
  background: var(--gold-strong);
  font-size: 1.28rem;
  font-weight: 1000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.league-top-scorer-card.waiting .scorer-medal {
  color: #dce8ef;
  background: rgba(255, 255, 255, 0.08);
}

.news-video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #11161a;
}

.highlight-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11161a;
  background: rgba(255, 204, 106, 0.92);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 1.35rem;
  font-weight: 1000;
}

.highlight-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(8px);
}

.league-top-scorer-card .highlight-caption {
  min-width: 0;
  position: static;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.league-top-scorer-card .highlight-caption strong {
  display: block;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-top-scorer-card .highlight-caption span {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #d6e1e8;
  font-size: 0.78rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scorer-chasers {
  display: grid;
  gap: 6px;
  align-self: end;
}

.scorer-chasers div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 27px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.scorer-chasers em {
  display: grid;
  place-items: center;
  width: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #11161a;
  background: rgba(255, 204, 106, 0.86);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 1000;
}

.scorer-chasers span {
  min-width: 0;
  overflow: hidden;
  color: #dce6ec;
  font-size: 0.76rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scorer-chasers strong {
  color: var(--gold-strong);
  font-size: 0.8rem;
}

.highlight-caption strong,
.highlight-caption span {
  display: block;
}

.news-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(230px, 0.6fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.featured-news h3,
.club-about-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.featured-headline {
  margin-bottom: 12px;
  color: #f4f7fb;
  font-size: 1.05rem;
  font-weight: 900;
}

.featured-layout {
  display: block;
}

.featured-lead {
  background: transparent;
}

.featured-lead img {
  height: 120px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.featured-lead strong,
.featured-list strong {
  display: block;
  margin-bottom: 4px;
  color: #6eb6ff;
}

.featured-lead span,
.featured-list small {
  display: block;
  margin-top: 5px;
  color: #9aa6b3;
}

.featured-list p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.84rem;
}

.featured-list {
  display: grid;
  gap: 4px;
}

.featured-list article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 70px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 0;
  background: transparent;
}

.featured-list article.featured-primary {
  min-height: 82px;
}

.news-thumb {
  width: 82px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.85), rgba(55, 156, 139, 0.85)),
    url("./assets/office.svg") center / cover no-repeat;
  color: #11161a;
  font-size: 1.35rem;
  font-weight: 1000;
  overflow: hidden;
}

.featured-primary .news-thumb {
  height: 64px;
}

.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-thumb span {
  color: #11161a;
  font-size: 1.25rem;
  font-weight: 1000;
}

.club-about-card,
.forbes-news-card {
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(35, 51, 67, 0.82), rgba(16, 24, 34, 0.96)),
    #111b24;
  border: 1px solid rgba(126, 171, 202, 0.16);
}

.club-about-card dl {
  margin: 16px 0 0;
}

.club-about-card div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.club-about-card dt {
  color: #ffcfd6;
  font-weight: 900;
}

.club-about-card dd {
  margin: 0;
  color: #fff;
  font-weight: 800;
}

.forbes-news-card {
  background:
    linear-gradient(145deg, rgba(32, 47, 64, 0.9), rgba(17, 24, 34, 0.98)),
    #111a24;
}

.forbes-news-card.compact {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 0;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.dashboard-news-stack .forbes-news-card.compact {
  padding: 12px;
}

.forbes-news-card.compact:hover {
  border-color: rgba(83, 205, 191, 0.36);
  transform: translateY(-2px);
}

.forbes-preview {
  display: grid;
  gap: 4px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.forbes-preview strong {
  color: #fff;
}

.forbes-preview span {
  color: var(--gold-strong);
  font-size: 1.08rem;
  font-weight: 1000;
}

.forbes-news-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.forbes-news-card > p {
  margin: 0 0 14px;
  color: #c6ced8;
  line-height: 1.45;
}

.forbes-list {
  display: grid;
  gap: 10px;
}

.forbes-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.forbes-list article > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11161a;
  background: var(--gold-strong);
  font-weight: 1000;
}

.forbes-list strong {
  display: block;
  color: #fff;
}

.forbes-list p {
  margin: 3px 0 0;
  color: #b9c2ce;
  font-size: 0.82rem;
  line-height: 1.35;
}

.forbes-list b {
  color: #ffe1a1;
  white-space: nowrap;
}

.league-prize-card {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 204, 106, 0.24);
  border-radius: 8px;
  background: rgba(255, 204, 106, 0.08);
}

.league-prize-card strong {
  color: var(--gold-strong);
  font-size: 1.8rem;
}

.league-prize-card span {
  color: var(--muted);
  font-weight: 800;
}

.ai-club-profile-panel {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.ai-club-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ai-club-profile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ai-club-profile-crest.club-crest-img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
}

.ai-club-president-mini {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 204, 106, 0.42);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 204, 106, 0.08);
}

.ai-club-president-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-club-president-mini span {
  color: var(--gold-strong);
  font-weight: 1000;
}

.ai-club-profile-identity h3,
.ai-club-profile-identity p {
  margin: 0;
}

.ai-club-profile-identity h3 {
  font-size: 1.15rem;
}

.ai-club-profile-identity p {
  color: #a8bdce;
  font-size: 0.82rem;
}

.ai-club-profile-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px;
}

.ai-club-profile-tabs .secondary-btn {
  min-height: 34px;
  padding: 7px 14px;
  font-size: 0.82rem;
}

.ai-club-profile-tabs .secondary-btn.active {
  border-color: rgba(255, 204, 106, 0.65);
  color: var(--gold-strong);
  box-shadow: inset 0 -2px 0 rgba(255, 204, 106, 0.75);
}

.ai-club-profile-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 12px;
}

.ai-club-info-card,
.ai-club-metrics-card,
.ai-club-coach-card,
.ai-club-metric-card {
  border: 1px solid rgba(0, 149, 255, 0.22);
  border-radius: 8px;
  background: rgba(3, 23, 38, 0.72);
  padding: 14px;
}

.ai-club-info-card h3,
.ai-club-metrics-card h3 {
  margin-top: 0;
  font-size: 0.98rem;
}

.ai-club-info-card p {
  margin: 8px 0;
}

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

.ai-club-metrics span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid rgba(83, 205, 191, 0.18);
  border-radius: 8px;
  background: rgba(12, 45, 68, 0.56);
}

.ai-club-metrics b {
  color: #4ad7ff;
  font-size: 1.35rem;
}

.ai-club-metrics em,
.ai-club-coach-card span,
.ai-club-coach-card em,
.ai-club-metric-card span,
.ai-club-metric-card em {
  color: #a8bdce;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
}

.ai-club-coach-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.ai-club-coach-card img {
  width: 84px;
  height: 104px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255, 204, 106, 0.35);
}

.ai-club-coach-card strong {
  display: block;
  margin: 4px 0;
  font-size: 1.05rem;
}

.ai-club-squad-table {
  min-height: 0;
}

.ai-club-squad-table table {
  margin: 0;
}

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

.ai-club-metric-card strong {
  display: block;
  margin: 4px 0;
  color: var(--gold-strong);
  font-size: 1.8rem;
}

.league-trophy-panel {
  display: grid;
  gap: 14px;
  overflow: hidden;
  border-color: rgba(255, 204, 106, 0.26);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 204, 106, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(255, 204, 106, 0.08), rgba(63, 213, 199, 0.04)),
    var(--panel);
}

.league-trophy-panel.empty {
  border-color: rgba(255, 255, 255, 0.08);
}

.league-trophy-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.league-trophy-heading h3 {
  margin: 4px 0 0;
  text-transform: uppercase;
}

.league-position-chip {
  min-width: 70px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 204, 106, 0.24);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  text-align: center;
}

.league-position-chip span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.league-position-chip strong {
  color: var(--gold-strong);
  font-size: 1.15rem;
  line-height: 1;
}

.league-trophy-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  align-items: stretch;
}

.league-trophy-card {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(260px, 1fr) auto;
  gap: 8px;
  align-content: end;
  padding: 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.16);
}

.league-trophy-card.current {
  border-color: rgba(105, 226, 187, 0.38);
  box-shadow: 0 0 0 1px rgba(105, 226, 187, 0.12), 0 16px 32px rgba(0, 0, 0, 0.22);
}

.league-trophy-image {
  height: 260px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.league-trophy-card:first-child .league-trophy-image {
  height: 260px;
}

.league-trophy-image img {
  max-width: 82%;
  max-height: 250px;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.38));
}

.league-trophy-card:first-child .league-trophy-image img,
.league-trophy-card:nth-child(2) .league-trophy-image img {
  max-width: 76%;
}

.league-trophy-card strong,
.league-trophy-card span {
  display: block;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.league-trophy-card strong {
  color: #f4f7fb;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.league-trophy-card span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.league-trophy-prize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 204, 106, 0.2);
  border-radius: 8px;
  background: rgba(255, 204, 106, 0.08);
}

.league-trophy-prize span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.league-trophy-prize strong {
  color: var(--gold-strong);
  font-size: 1.05rem;
  white-space: nowrap;
}

.all-leagues-panel {
  display: grid;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(99, 168, 255, 0.1), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.preseason-panel {
  display: grid;
  gap: 16px;
  border-color: rgba(63, 213, 199, 0.22);
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.13), transparent 50%),
    linear-gradient(225deg, rgba(255, 204, 106, 0.1), transparent 52%),
    var(--panel);
}

.preseason-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.preseason-heading h3 {
  margin: 4px 0 8px;
  text-transform: uppercase;
}

.preseason-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

.preseason-status {
  min-width: 230px;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(63, 213, 199, 0.22);
  border-radius: 8px;
  background: rgba(63, 213, 199, 0.08);
}

.preseason-status span,
.preseason-status strong {
  display: block;
}

.preseason-status span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.preseason-status strong {
  color: var(--green);
}

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

.preseason-fixtures article {
  min-height: 96px;
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.preseason-fixtures article.next {
  border-color: rgba(255, 204, 106, 0.34);
  background: rgba(255, 204, 106, 0.08);
}

.preseason-fixtures article.played {
  opacity: 0.76;
}

.preseason-fixtures span,
.preseason-fixtures em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.preseason-fixtures strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-leagues-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.all-leagues-heading h3 {
  margin: 4px 0 0;
}

.all-leagues-heading p {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

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

.league-tier {
  min-height: 118px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.league-tier.current {
  border-color: rgba(255, 204, 106, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 204, 106, 0.12), transparent),
    rgba(255, 255, 255, 0.045);
}

.league-tier.locked {
  opacity: 0.62;
}

.league-tier span {
  color: #7db8ff;
  font-size: 0.72rem;
  font-weight: 1000;
}

.league-tier strong {
  color: var(--text);
  line-height: 1.15;
}

.league-tier em,
.league-tier small {
  color: var(--muted);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 900;
}

.league-system-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.league-system-notes div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.league-system-notes strong,
.league-system-notes span {
  display: block;
}

.league-system-notes strong {
  color: var(--gold-strong);
  font-size: 0.82rem;
}

.league-system-notes span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.marketing-screen {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(360px, 1.18fr);
  grid-template-areas:
    "hero hero"
    "members progress"
    "commercial commercial"
    "shirts shirts";
  gap: 12px;
}

.marketing-command-panel,
.marketing-members-panel,
.marketing-progress-panel,
.marketing-commercial-panel,
.marketing-shirts-panel {
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7, 26, 43, 0.9), rgba(3, 13, 23, 0.96)),
    rgba(3, 12, 22, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.marketing-command-panel {
  grid-area: hero;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: end;
  gap: 22px;
  padding: 24px 28px;
  background:
    linear-gradient(90deg, rgba(2, 10, 19, 0.98) 0%, rgba(3, 19, 36, 0.88) 48%, rgba(4, 27, 49, 0.72) 100%),
    radial-gradient(circle at 78% 18%, rgba(255, 190, 47, 0.18), transparent 25%),
    radial-gradient(circle at 92% 72%, rgba(0, 148, 255, 0.22), transparent 30%),
    url("./assets/news/press-conference.png") right center / auto 118% no-repeat;
}

.marketing-command-copy {
  max-width: 720px;
}

.marketing-command-copy h2 {
  margin: 6px 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.marketing-command-copy p {
  max-width: 540px;
  margin: 0;
  color: #c8d5df;
  font-weight: 800;
  line-height: 1.45;
}

.marketing-command-stats,
.marketing-member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.marketing-command-stats div,
.marketing-member-grid div {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(0, 17, 31, 0.72);
}

.marketing-command-stats span,
.marketing-member-grid span,
.marketing-command-actions span,
.marketing-price-control span {
  color: #aebdcc;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.marketing-command-stats strong,
.marketing-member-grid strong {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}

.marketing-command-actions {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 190, 47, 0.34);
  border-radius: 8px;
  background: rgba(3, 14, 25, 0.82);
}

.marketing-command-actions strong {
  color: var(--pcm-gold);
  font-size: 1.45rem;
}

.marketing-members-panel {
  grid-area: members;
  padding: 18px;
}

.marketing-progress-panel {
  grid-area: progress;
  padding: 18px;
}

.marketing-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.marketing-panel-head h3 {
  margin: 3px 0 0;
  color: #fff;
  text-transform: uppercase;
}

.marketing-panel-head > strong {
  color: var(--pcm-gold);
  font-size: 1.25rem;
  text-align: right;
}

.marketing-members-panel .marketing-member-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.marketing-price-control {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.marketing-price-control input {
  width: 100%;
}

.marketing-channel-grid {
  display: grid;
  gap: 10px;
}

.marketing-channel-grid article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.marketing-channel-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--pcm-gold);
  background: rgba(255, 190, 47, 0.1);
}

.marketing-channel-icon svg {
  width: 24px;
  height: 24px;
}

.marketing-channel-grid article div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.marketing-channel-grid strong {
  color: #fff;
}

.marketing-channel-grid em {
  color: #00e078;
  font-style: normal;
  font-weight: 1000;
}

.marketing-channel-grid i {
  grid-column: 2;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.marketing-channel-grid b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0094ff, #00e078);
}

.marketing-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.marketing-hero div {
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.052);
}

.marketing-hero span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 900;
}

.marketing-hero strong {
  display: block;
  margin-top: 8px;
  font-size: 1.65rem;
  color: var(--gold-strong);
}

.marketing-commercial-panel {
  grid-area: commercial;
  display: grid;
  gap: 18px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 190, 47, 0.1), transparent 36%),
    linear-gradient(100deg, rgba(63, 213, 199, 0.08), transparent 64%),
    rgba(5, 18, 31, 0.92);
}

.marketing-shirts-panel {
  grid-area: shirts;
  padding: 18px;
}

.commercial-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.1fr) repeat(2, minmax(190px, 0.7fr));
  gap: 12px;
}

.commercial-rights-card,
.commercial-channel-card {
  min-height: 168px;
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02)),
    rgba(9, 14, 20, 0.42);
}

.commercial-rights-card {
  border-color: rgba(255, 204, 106, 0.25);
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.17), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    rgba(12, 16, 20, 0.56);
}

.commercial-channel-card.web {
  border-color: rgba(63, 213, 199, 0.22);
}

.commercial-channel-card.retail {
  border-color: rgba(125, 211, 252, 0.22);
}

.commercial-rights-card span,
.commercial-channel-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.commercial-rights-card strong,
.commercial-channel-card strong {
  color: #f5f7fb;
  font-size: 1.75rem;
  line-height: 1;
}

.commercial-rights-card p,
.commercial-channel-card p {
  margin: 0;
  color: #b7c4cf;
  font-weight: 800;
}

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

.commercial-split div {
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.commercial-split em,
.commercial-split b {
  display: block;
  font-style: normal;
}

.commercial-split em {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.commercial-split b {
  margin-top: 4px;
  color: var(--gold-strong);
  font-size: 0.95rem;
}

.shirt-sales-board {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.shirt-sales-head,
.shirt-sales-row {
  display: grid;
  align-items: center;
}

.shirt-sales-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
}

.shirt-sales-head h3 {
  margin: 4px 0 0;
}

.shirt-sales-head > strong {
  color: var(--green);
  font-size: 1.15rem;
}

.shirt-sales-list {
  display: grid;
  gap: 8px;
}

.shirt-sales-row {
  grid-template-columns: 34px 42px minmax(0, 1fr) 92px 110px;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 204, 106, 0.08), transparent 44%),
    rgba(255, 255, 255, 0.035);
}

.shirt-sales-rank {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #11161a;
  background: linear-gradient(135deg, #f4c75e, #69e2bb);
  font-weight: 1000;
}

.shirt-sales-player {
  min-width: 0;
}

.shirt-sales-player strong,
.shirt-sales-player span,
.shirt-sales-units strong,
.shirt-sales-units span {
  display: block;
}

.shirt-sales-player strong {
  overflow: hidden;
  color: #f3f6fa;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shirt-sales-player span,
.shirt-sales-units span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.shirt-sales-units {
  text-align: right;
}

.shirt-sales-units strong {
  color: var(--gold-strong);
  font-size: 1rem;
}

.shirt-sales-income {
  color: #dff7ea;
  font-weight: 1000;
  text-align: right;
}

.office-hud {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.office-news-panel {
  position: absolute;
  left: 20px;
  top: 84px;
  width: min(390px, calc(100% - 40px));
  max-height: 365px;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(255, 204, 106, 0.24);
  border-radius: 8px;
  background: rgba(8, 12, 15, 0.82);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(10px);
}

.office-news-panel h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
}

.office-news-panel blockquote {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--gold-strong);
  color: #d8e1e6;
  font-size: 0.82rem;
  line-height: 1.45;
}

.guide-dialog {
  position: absolute;
  right: 24px;
  top: 92px;
  width: min(430px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 204, 106, 0.32);
  border-radius: 8px;
  background: rgba(8, 12, 15, 0.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.guide-dialog img {
  width: 92px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold-strong);
}

.guide-dialog h3 {
  margin: 0 0 5px;
  text-transform: uppercase;
}

.guide-dialog p {
  margin: 0 0 11px;
  color: var(--muted);
  line-height: 1.45;
}

.guide-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.guide-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(3px);
}

.guide-scrim-tour {
  background:
    radial-gradient(circle at 18% 36%, rgba(255, 204, 106, 0.12), transparent 22%),
    rgba(0, 0, 0, 0.86);
}

.guide-dialog-pending {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 48;
  width: min(560px, calc(100vw - 32px));
  grid-template-columns: 124px 1fr;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, rgba(13, 19, 25, 0.98), rgba(5, 8, 12, 0.98));
}

.guide-dialog-pending img {
  width: 124px;
}

.president-scrim {
  position: fixed;
  inset: 0;
  z-index: 42;
  background:
    radial-gradient(circle at 50% 28%, rgba(215, 180, 106, 0.18), transparent 27%),
    rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.president-selection {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 49;
  width: min(980px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 204, 106, 0.34);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(15, 22, 29, 0.98), rgba(5, 8, 12, 0.98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.72);
}

.president-selection-head span,
.president-intro span {
  color: var(--gold-strong);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.president-selection-head h3,
.president-intro h3 {
  margin: 5px 0 0;
  font-size: 1.45rem;
  text-transform: uppercase;
}

.president-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.president-choice {
  position: relative;
  min-height: 390px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}

.president-choice:not(.locked):hover {
  border-color: var(--gold-strong);
  background: rgba(255, 204, 106, 0.1);
  transform: translateY(-2px);
}

.president-choice.locked {
  opacity: 0.54;
  cursor: not-allowed;
}

.president-portrait {
  overflow: hidden;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: #0b1116;
}

.president-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.president-choice strong {
  font-size: 1.08rem;
  text-transform: uppercase;
}

.president-choice em {
  color: var(--gold-strong);
  font-style: normal;
  font-weight: 900;
}

.president-choice small {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.4;
}

.president-choice .badge {
  justify-self: start;
  margin-top: 4px;
}

.president-intro {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  width: min(860px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px;
  border: 1px solid rgba(255, 204, 106, 0.42);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(15, 22, 29, 0.98), rgba(5, 8, 12, 0.98));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.76);
  text-align: center;
  animation: presidentIntroRise 650ms ease both;
}

.president-intro-ring {
  width: 190px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(215, 180, 106, 0.2), var(--gold-strong), rgba(215, 180, 106, 0.2));
  animation: presidentRing 1.9s ease-in-out infinite;
}

.president-intro-ring img {
  width: 168px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #101820;
  box-shadow: 0 0 34px rgba(255, 204, 106, 0.26);
  animation: presidentAvatarReveal 900ms ease both;
}

.president-intro-video {
  width: 100%;
  max-height: 68vh;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 204, 106, 0.34);
  border-radius: 8px;
  background: #05080c;
  box-shadow: 0 0 34px rgba(255, 204, 106, 0.16);
}

.video-fallback {
  display: none;
}

.president-intro p {
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 800;
}

.guide-mode .guide-focus {
  position: relative;
  z-index: 46;
  border-color: rgba(255, 204, 106, 0.82) !important;
  box-shadow:
    0 0 0 2px rgba(255, 204, 106, 0.18),
    0 18px 46px rgba(0, 0, 0, 0.58),
    0 0 38px rgba(255, 204, 106, 0.2);
}

.guide-mode .nav-btn.guide-focus {
  color: var(--text);
  background: rgba(255, 204, 106, 0.14);
}

.guide-coach {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 49;
  width: min(520px, calc(100vw - 56px));
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 15px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(255, 204, 106, 0.4);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(15, 22, 29, 0.98), rgba(6, 9, 13, 0.98));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.72);
}

.guide-coach img {
  width: 92px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold-strong);
}

.guide-coach h3 {
  margin: 3px 0 6px;
  text-transform: uppercase;
}

.guide-coach p {
  margin: 0 0 12px;
  color: #d6e0e5;
  line-height: 1.5;
}

.guide-kicker {
  color: var(--gold-strong);
  font-size: 0.75rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.guide-arrow {
  position: fixed;
  z-index: 47;
  width: 0;
  height: 0;
  filter: drop-shadow(0 0 12px rgba(255, 204, 106, 0.55));
}

.guide-arrow::before {
  content: "";
  position: absolute;
  width: 82px;
  height: 4px;
  border-radius: 99px;
  background: var(--gold-strong);
}

.guide-arrow::after {
  content: "";
  position: absolute;
  border: 10px solid transparent;
  border-left-color: var(--gold-strong);
}

.guide-arrow-office,
.guide-arrow-news,
.guide-arrow-calendar {
  left: 54%;
  top: 52%;
}

.guide-arrow-office::before,
.guide-arrow-news::before,
.guide-arrow-calendar::before {
  transform: rotate(-28deg);
}

.guide-arrow-office::after,
.guide-arrow-news::after,
.guide-arrow-calendar::after {
  left: 70px;
  top: -12px;
  transform: rotate(-28deg);
}

.guide-arrow-nav-plantilla,
.guide-arrow-nav-comunidad,
.guide-arrow-nav-estadio,
.guide-arrow-nav-finanzas,
.guide-arrow-nav-liga,
.guide-arrow-nav-mercado,
.guide-arrow-nav-perfil {
  left: 226px;
  top: 210px;
}

.guide-arrow-nav-comunidad { top: 260px; }
.guide-arrow-nav-estadio { top: 355px; }
.guide-arrow-nav-finanzas { top: 405px; }
.guide-arrow-nav-liga { top: 455px; }
.guide-arrow-nav-mercado { top: 555px; }
.guide-arrow-nav-perfil { top: 605px; }

.status-pill {
  padding: 10px 12px;
  color: #dce7ed;
  background: rgba(8, 11, 15, 0.72);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  backdrop-filter: blur(10px);
  font-weight: 900;
}

.laptop-dock {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  width: min(86%, 680px);
  border-radius: 8px;
  padding: 14px;
  background: rgba(4, 7, 10, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
}

.laptop-screen {
  min-height: 235px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(99, 168, 255, 0.14), transparent 42%),
    linear-gradient(180deg, #0e171f, #071017);
  padding: 14px;
}

.screen-header {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mail-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.mail-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
}

.mail-item strong {
  font-size: 0.9rem;
}

.mail-item span {
  color: var(--muted);
  font-size: 0.75rem;
}

.side-stack,
.panel-grid {
  display: grid;
  gap: 18px;
}

.panel-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.panel,
.stat-card,
.table-wrap {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 42%),
    var(--panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.panel {
  padding: 18px;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.panel:hover,
.command-kpi:hover {
  border-color: rgba(255, 204, 106, 0.24);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.panel h3,
.table-wrap h3 {
  margin: 0 0 14px;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.social-panel {
  background:
    linear-gradient(135deg, rgba(99, 168, 255, 0.08), transparent 54%),
    rgba(17, 24, 31, 0.82);
}

.dashboard-side-card {
  padding: 14px;
  border-color: rgba(255, 255, 255, 0.075);
}

.dashboard-side-card h3 {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.recent-matches-card .fixture-row {
  padding: 8px 0;
}

.recent-matches-card .fixture-row:nth-of-type(n+4) {
  display: none;
}

.social-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 0.85fr);
  gap: 12px;
  align-items: start;
}

.calendar-panel {
  display: grid;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(215, 180, 106, 0.14), transparent 58%),
    var(--panel);
}

.calendar-date {
  padding: 14px;
  border: 1px solid rgba(255, 204, 106, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--gold-strong);
  font-size: 1.8rem;
  font-weight: 1000;
  text-align: center;
}

.daily-balance {
  font-size: 0.86rem;
  font-weight: 900;
}

.daily-balance.positive {
  color: var(--green);
}

.daily-balance.negative {
  color: var(--red);
}

.match-lock {
  color: var(--gold-strong);
  font-size: 0.84rem;
  font-weight: 900;
}

.daily-reward-panel,
.daily-office-panel,
.daily-construction-panel,
.office-minigame-panel,
.office-history-panel {
  display: grid;
  gap: 12px;
}

.daily-reward-panel {
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.daily-office-panel {
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.16), transparent 58%),
    linear-gradient(225deg, rgba(255, 204, 106, 0.09), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.daily-office-panel.resolved {
  border-color: rgba(62, 208, 143, 0.24);
  background:
    linear-gradient(135deg, rgba(62, 208, 143, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.daily-construction-panel {
  background:
    linear-gradient(135deg, rgba(99, 168, 255, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.office-minigame-panel {
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.11), transparent 56%),
    linear-gradient(225deg, rgba(63, 213, 199, 0.08), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.daily-reward-panel p,
.daily-office-panel p,
.daily-construction-panel p,
.office-minigame-panel p,
.office-history-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.45;
}

.daily-streak {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 204, 106, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.daily-streak strong {
  color: var(--gold-strong);
  font-size: 2rem;
  line-height: 1;
}

.daily-streak span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-reward-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.daily-step {
  min-width: 0;
  padding: 7px 5px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.daily-step span,
.construction-row span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-step strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-step.active {
  border-color: rgba(255, 204, 106, 0.55);
  background: rgba(255, 204, 106, 0.14);
}

.daily-step.claimed {
  box-shadow: inset 0 0 0 1px rgba(62, 208, 143, 0.34);
}

.daily-mission-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background:
    radial-gradient(circle at 72% 28%, rgba(0, 156, 255, 0.22), transparent 28%),
    radial-gradient(circle at 28% 68%, rgba(255, 190, 66, 0.16), transparent 24%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  animation: dailyScrimIn 260ms ease both;
}

.daily-mission-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 61;
  width: min(720px, calc(100vw - 32px));
  display: grid;
  gap: 16px;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(255, 199, 82, 0.44);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 14%, rgba(0, 148, 255, 0.2), transparent 28%),
    linear-gradient(145deg, rgba(8, 29, 48, 0.98), rgba(5, 9, 15, 0.98) 62%),
    var(--panel);
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.72),
    0 0 42px rgba(255, 196, 68, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
  animation: dailyRewardEnter 320ms cubic-bezier(0.2, 0.9, 0.25, 1.12) both;
}

.daily-popup-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(29, 164, 255, 0.12) 35%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%);
}

.daily-mission-popup > *:not(.daily-popup-ambient) {
  position: relative;
  z-index: 1;
}

.daily-popup-head {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 16px;
  align-items: center;
}

.daily-popup-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 196, 68, 0.42);
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255, 204, 106, 0.26), rgba(255, 204, 106, 0.08) 58%, rgba(0, 0, 0, 0.22));
  box-shadow: 0 0 30px rgba(255, 196, 68, 0.16);
}

.daily-popup-icon span {
  width: 36px;
  height: 36px;
  display: block;
  border: 3px solid var(--gold-strong);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 6px rgba(255, 204, 106, 0.12),
    0 0 18px rgba(255, 204, 106, 0.36);
}

.daily-mission-popup h3 {
  margin: 2px 0 6px;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.daily-mission-popup p {
  margin: 0;
  color: #cfd9df;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.5;
}

.daily-popup-streak {
  min-width: 92px;
  padding: 12px;
  border: 1px solid rgba(0, 186, 255, 0.34);
  border-radius: 12px;
  background: rgba(0, 55, 93, 0.34);
  text-align: center;
}

.daily-popup-streak strong {
  display: block;
  color: var(--cyan);
  font-size: 2.1rem;
  line-height: 1;
  text-shadow: 0 0 16px rgba(0, 186, 255, 0.36);
}

.daily-popup-streak span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-popup-reward {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(255, 204, 106, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 204, 106, 0.13), rgba(0, 150, 255, 0.08)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.daily-popup-reward span {
  color: var(--gold-strong);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-popup-reward strong {
  display: block;
  margin-top: 4px;
  font-size: 1.55rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.daily-popup-reward em {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.daily-popup-reward b {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.daily-popup-reward b i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--daily-progress);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-strong), #20dfff);
  box-shadow: 0 0 16px rgba(32, 223, 255, 0.28);
  animation: dailyTrackFill 620ms ease both;
}

.daily-mission-popup .daily-reward-grid {
  gap: 8px;
}

.daily-mission-popup .daily-step {
  position: relative;
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 9px 7px;
  border-color: rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.daily-mission-popup .daily-step i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #dbe9f2;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
}

.daily-mission-popup .daily-step.complete {
  border-color: rgba(62, 208, 143, 0.28);
  background: rgba(62, 208, 143, 0.08);
}

.daily-mission-popup .daily-step.complete i {
  background: rgba(62, 208, 143, 0.22);
  color: var(--green);
}

.daily-mission-popup .daily-step.active {
  border-color: rgba(255, 204, 106, 0.88);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 204, 106, 0.34), transparent 62%),
    rgba(255, 204, 106, 0.14);
  box-shadow:
    0 0 22px rgba(255, 204, 106, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  animation: dailyActivePulse 1.8s ease-in-out infinite;
}

.daily-mission-popup .daily-step.active i {
  background: var(--gold-strong);
  color: #081018;
}

.daily-popup-claim {
  min-height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  border-radius: 10px;
  box-shadow:
    0 14px 34px rgba(255, 190, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.daily-popup-claim span {
  font-size: 1rem;
}

.daily-popup-claim small {
  color: rgba(6, 12, 18, 0.72);
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

@keyframes dailyScrimIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dailyRewardEnter {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 18px)) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes dailyTrackFill {
  from {
    width: 0;
  }
  to {
    width: var(--daily-progress);
  }
}

@keyframes dailyActivePulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(255, 204, 106, 0.15),
      inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 28px rgba(255, 204, 106, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  }
}

.daily-mission-popup {
  width: min(1180px, calc(100vw - 38px));
  max-height: calc(100svh - 34px);
  gap: 18px;
  overflow: auto;
  padding: 30px;
  border-color: rgba(43, 156, 255, 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at 82% 10%, rgba(37, 144, 255, 0.22), transparent 25%),
    radial-gradient(circle at 22% 20%, rgba(45, 206, 255, 0.1), transparent 24%),
    linear-gradient(145deg, rgba(4, 17, 35, 0.99), rgba(3, 8, 18, 0.99) 70%),
    var(--panel);
  box-shadow:
    0 36px 120px rgba(0, 0, 0, 0.8),
    0 0 54px rgba(0, 132, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.daily-popup-ambient {
  background:
    linear-gradient(115deg, transparent 0 34%, rgba(29, 164, 255, 0.1) 35%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 140px);
  opacity: 0.78;
}

.daily-popup-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9db3c9;
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease;
}

.daily-popup-close:hover {
  color: var(--text);
  text-shadow: 0 0 16px rgba(76, 204, 255, 0.45);
  transform: scale(1.06);
}

.daily-popup-head {
  grid-template-columns: 104px minmax(0, 1fr) 300px;
  gap: 22px;
  padding-right: 50px;
}

.daily-popup-icon {
  width: 92px;
  height: 92px;
  border: 0;
  border-radius: 18px;
  background: rgba(0, 35, 70, 0.18);
  box-shadow: 0 0 34px rgba(0, 186, 255, 0.22);
}

.daily-popup-icon img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(0, 210, 255, 0.42));
}

.daily-mission-popup h3 {
  font-size: clamp(2.1rem, 3vw, 3.05rem);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

.daily-mission-popup p {
  color: #bcd0e4;
  font-size: 1.03rem;
}

.daily-popup-timer {
  min-height: 82px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(63, 147, 255, 0.28);
  border-radius: 12px;
  background: rgba(2, 19, 39, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.daily-popup-timer img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(43, 209, 255, 0.35));
}

.daily-popup-timer span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.daily-popup-timer strong {
  display: block;
  margin-top: 3px;
  color: #47f1ff;
  font-size: 1.45rem;
  line-height: 1;
  text-shadow: 0 0 16px rgba(71, 241, 255, 0.34);
}

.daily-mission-popup .daily-reward-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.daily-bonus-card {
  position: relative;
  min-height: 300px;
  display: grid;
  grid-template-rows: auto 116px 1fr auto;
  gap: 10px;
  padding: 18px 12px 16px;
  overflow: hidden;
  border: 1px solid rgba(61, 143, 255, 0.34);
  border-radius: 9px;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 170, 255, 0.12), transparent 52%),
    linear-gradient(180deg, rgba(4, 30, 58, 0.92), rgba(2, 12, 25, 0.96));
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 30px rgba(0, 0, 0, 0.2);
  transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}

.daily-bonus-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 40% 78%, rgba(0, 0, 0, 0.2));
}

.daily-bonus-card > * {
  position: relative;
  z-index: 1;
}

.daily-bonus-card.active {
  border-color: rgba(255, 213, 70, 0.9);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 207, 64, 0.2), transparent 52%),
    linear-gradient(180deg, rgba(8, 28, 55, 0.96), rgba(5, 12, 25, 0.98));
  box-shadow:
    0 0 28px rgba(255, 202, 55, 0.28),
    0 12px 42px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: dailyBonusActivePulse 1.9s ease-in-out infinite;
}

.daily-bonus-card.claimed {
  border-color: rgba(62, 232, 126, 0.32);
}

.daily-bonus-card.locked {
  opacity: 0.72;
}

.daily-bonus-day {
  color: #37a7ff;
  font-size: 1.35rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-bonus-card.active .daily-bonus-day {
  color: var(--gold-strong);
  text-shadow: 0 0 14px rgba(255, 213, 70, 0.32);
}

.daily-bonus-art {
  display: grid;
  place-items: center;
}

.daily-bonus-art img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, 0.34));
}

.daily-bonus-card.active .daily-bonus-art img {
  width: 120px;
  height: 120px;
  filter:
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.36))
    drop-shadow(0 0 18px rgba(255, 199, 55, 0.34));
}

.daily-bonus-items {
  display: grid;
  align-content: center;
  gap: 9px;
}

.daily-bonus-item {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.daily-bonus-item img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.daily-bonus-item strong {
  display: block;
  color: var(--text);
  font-size: 1.14rem;
  line-height: 1;
  font-weight: 1000;
}

.daily-bonus-item span,
.daily-bonus-items em {
  color: #f1f6ff;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.daily-bonus-items em {
  color: var(--gold-strong);
}

.daily-bonus-card footer {
  min-height: 38px;
  display: grid;
  place-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.daily-claimed-mark,
.daily-locked-mark {
  color: #53f384;
  font-size: 0.9rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-claimed-mark::before {
  content: "✓";
  margin-right: 8px;
}

.daily-locked-mark {
  color: rgba(195, 210, 225, 0.64);
}

.daily-card-claim {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffd869, #f2a711);
  color: #111007;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 12px 25px rgba(255, 190, 48, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 170ms ease, filter 170ms ease;
}

.daily-card-claim:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.daily-weekly-box {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 16px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(70, 150, 255, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(7, 35, 69, 0.74), rgba(4, 16, 32, 0.76)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.daily-weekly-copy {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
  align-items: center;
}

.daily-weekly-copy span {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.daily-weekly-copy h4 {
  margin: 3px 0 8px;
  color: var(--gold-strong);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.daily-weekly-copy p {
  color: #a9bed4;
  font-size: 0.9rem;
}

.daily-weekly-copy img {
  width: 142px;
  height: 112px;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 18px rgba(255, 193, 44, 0.2));
}

.daily-weekly-rewards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.daily-weekly-rewards article {
  min-height: 156px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 12px 10px;
  border: 1px solid rgba(70, 150, 255, 0.26);
  border-radius: 9px;
  background: rgba(4, 18, 37, 0.7);
  text-align: center;
}

.daily-weekly-rewards article strong {
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1;
}

.daily-weekly-rewards article img {
  width: 70px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 10px 13px rgba(0, 0, 0, 0.3));
}

.daily-weekly-rewards article b {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.05;
}

.daily-weekly-rewards article span {
  color: #c6d6e8;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.daily-bonus-warning {
  justify-self: center;
  min-width: min(560px, 100%);
  padding: 9px 16px;
  border: 1px solid rgba(70, 150, 255, 0.22);
  border-radius: 8px;
  background: rgba(3, 16, 32, 0.72);
  color: #9eb1c6 !important;
  font-size: 0.92rem !important;
  text-align: center;
}

@media (hover: hover) {
  .daily-bonus-card:not(.locked):hover {
    transform: translateY(-2px);
    border-color: rgba(80, 180, 255, 0.58);
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.32),
      0 0 22px rgba(0, 169, 255, 0.11),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

@keyframes dailyBonusActivePulse {
  0%, 100% {
    box-shadow:
      0 0 22px rgba(255, 204, 106, 0.2),
      0 12px 42px rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow:
      0 0 34px rgba(255, 204, 106, 0.36),
      0 12px 42px rgba(0, 0, 0, 0.34),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

.daily-choice-list {
  display: grid;
  gap: 10px;
}

.daily-choice-btn {
  display: grid;
  gap: 6px;
  min-height: 68px;
  padding: 12px 14px;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(255, 255, 255, 0.035);
  text-align: left;
}

.daily-choice-btn:hover {
  border-color: rgba(255, 204, 106, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 204, 106, 0.08), transparent),
    rgba(255, 255, 255, 0.05);
}

.daily-choice-btn strong,
.construction-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-choice-btn span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.daily-result {
  padding: 12px;
  border: 1px solid rgba(62, 208, 143, 0.25);
  border-radius: 8px;
  background: rgba(62, 208, 143, 0.09);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.4;
}

.daily-result.missed {
  border-color: rgba(255, 104, 104, 0.28);
  background: rgba(255, 104, 104, 0.09);
  color: #ffd6d6;
}

.office-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 61;
  width: min(580px, calc(100vw - 32px));
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(255, 204, 106, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(20, 26, 32, 0.98), rgba(7, 10, 14, 0.98)),
    var(--panel);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
  transform: translate(-50%, -50%);
}

.office-popup h3 {
  margin: 0;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.office-popup p {
  margin: 0;
  color: #d3dde3;
  line-height: 1.55;
}

.player-match-popup {
  width: min(620px, calc(100vw - 32px));
}

.season-celebration-popup,
.player-growth-popup {
  width: min(820px, calc(100vw - 32px));
  border-color: rgba(255, 190, 47, 0.52);
  background:
    radial-gradient(circle at 22% 0%, rgba(0, 148, 255, 0.24), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(255, 190, 47, 0.2), transparent 30%),
    linear-gradient(145deg, rgba(4, 31, 57, 0.98), rgba(2, 11, 20, 0.98));
}

.season-celebration-media {
  min-height: 178px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 190, 47, 0.25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 76% 45%, rgba(255, 190, 47, 0.18), transparent 34%),
    linear-gradient(110deg, rgba(0, 148, 255, 0.16), rgba(255, 190, 47, 0.08)),
    rgba(255, 255, 255, 0.035);
}

.season-league-logo {
  width: 104px;
  max-height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(0, 148, 255, 0.48));
}

.season-trophy-image {
  justify-self: center;
  width: min(280px, 70%);
  max-height: 162px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(255, 190, 47, 0.42));
}

.season-celebration-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.season-celebration-summary article {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.season-celebration-summary span,
.season-celebration-summary strong {
  display: block;
}

.season-celebration-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.season-celebration-summary strong {
  margin-top: 4px;
  color: #fff;
  font-size: 1.08rem;
}

.growth-level-row em {
  color: var(--gold-strong);
}

.player-growth-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(0, 148, 255, 0.16), rgba(255, 190, 47, 0.08)),
    rgba(255, 255, 255, 0.035);
}

.player-growth-hero h3 {
  margin-top: 5px;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
}

.player-growth-hero p {
  margin-top: 6px;
  max-width: 560px;
}

.player-growth-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.player-growth-summary article {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 22, 38, 0.72);
}

.player-growth-summary span {
  color: #9eb8cb;
  font-size: 0.66rem;
  font-weight: 1000;
  line-height: 1.05;
  text-transform: uppercase;
}

.player-growth-summary strong {
  color: #fff;
  font-size: 1.28rem;
  line-height: 1;
}

.player-growth-list {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.player-growth-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.04);
}

.player-growth-row.level-up {
  border-color: rgba(255, 190, 47, 0.42);
  background:
    linear-gradient(90deg, rgba(255, 190, 47, 0.16), rgba(0, 148, 255, 0.08) 58%, transparent),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 0 22px rgba(255, 190, 47, 0.1);
}

.player-growth-row .player-avatar-wrap,
.player-growth-row .player-avatar-img,
.player-growth-row .player-avatar {
  width: 54px;
  height: 54px;
}

.player-growth-main {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.player-growth-main header,
.player-growth-main footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.player-growth-main strong,
.player-growth-main span {
  display: block;
}

.player-growth-main strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-growth-main header span,
.player-growth-main footer span {
  color: rgba(202, 222, 239, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
}

.player-growth-main em {
  flex: 0 0 auto;
  color: var(--gold-strong);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 1000;
}

.player-growth-main footer b {
  color: #19d7ff;
  font-size: 0.78rem;
}

.player-growth-row.level-up .player-growth-main footer b {
  color: var(--gold-strong);
}

.player-growth-bar {
  position: relative;
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.player-growth-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--from);
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.18);
}

.player-growth-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--to);
  border-radius: inherit;
  background: linear-gradient(90deg, #0094ff, #24d7ff 48%, #00e078);
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.28);
  animation: playerGrowthFill 760ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.player-growth-row.level-up .player-growth-bar i {
  background: linear-gradient(90deg, #0094ff, #ffc943);
  box-shadow: 0 0 18px rgba(255, 190, 47, 0.35);
}

@keyframes playerGrowthFill {
  from {
    width: var(--from);
  }
  to {
    width: var(--to);
  }
}

.player-achievement-list {
  display: grid;
  gap: 9px;
  max-height: 330px;
  overflow: auto;
}

.player-achievement-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.player-achievement-row.positive {
  border-color: rgba(63, 213, 143, 0.22);
  background:
    linear-gradient(90deg, rgba(63, 213, 143, 0.11), transparent 52%),
    rgba(255, 255, 255, 0.04);
}

.player-achievement-row.negative {
  border-color: rgba(240, 109, 109, 0.2);
  background:
    linear-gradient(90deg, rgba(240, 109, 109, 0.1), transparent 52%),
    rgba(255, 255, 255, 0.04);
}

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

.player-achievement-row strong {
  overflow: hidden;
  color: #f4f7fb;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-achievement-row span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.player-achievement-row em {
  color: var(--green);
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 1000;
}

.player-achievement-row.negative em {
  color: #ffb3b3;
}

.construction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(99, 168, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.construction-row div {
  min-width: 0;
}

.construction-row em {
  flex: 0 0 auto;
  color: var(--gold-strong);
  font-style: normal;
  font-weight: 1000;
}

.social-handle {
  color: var(--gold-strong);
  font-size: 0.9rem;
  font-weight: 1000;
}

.social-count {
  margin-top: 6px;
  font-size: 2rem;
  font-weight: 1000;
}

.brand-reach {
  display: grid;
  justify-items: end;
  gap: 5px;
  text-align: right;
}

.brand-reach span,
.brand-reach small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.brand-reach strong {
  color: var(--gold-strong);
  font-size: 1.25rem;
  font-weight: 1000;
}

.member-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--stroke);
}

.member-line span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.member-line strong {
  color: var(--gold-strong);
  font-size: 1rem;
}

.stat-card {
  padding: 16px;
}

.stat-card .label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stat-card .value {
  margin-top: 8px;
  font-size: 1.65rem;
  font-weight: 1000;
}

.stat-card .delta {
  margin-top: 6px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
}

.mission-summary-card,
.mission-featured-card {
  min-height: 260px;
  display: grid;
  align-content: space-between;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.mission-featured-card {
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.14), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.mission-summary-card h3,
.mission-featured-card h3 {
  margin: 6px 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.mission-featured-card p {
  max-width: 680px;
  margin: 0;
  color: #c4d0d9;
  line-height: 1.55;
}

.mission-xp-ring {
  --v: 0%;
  width: 132px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 8px 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #111820 0 58%, transparent 59%),
    conic-gradient(var(--gold-strong) var(--v), rgba(255, 255, 255, 0.1) 0);
  border: 1px solid rgba(255, 204, 106, 0.22);
}

.mission-xp-ring strong,
.mission-xp-ring span {
  grid-area: 1 / 1;
}

.mission-xp-ring strong {
  font-size: 1.7rem;
  font-weight: 1000;
}

.mission-xp-ring span {
  margin-top: 46px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 1000;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.daily-missions-section {
  display: grid;
  gap: 14px;
}

.mission-daily-featured {
  align-self: stretch;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.12), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.mission-daily-featured .section-heading {
  align-items: flex-start;
}

.mission-daily-featured .section-heading p {
  max-width: 360px;
  font-size: 0.8rem;
}

.mission-daily-featured .daily-missions-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}

.office-section {
  display: grid;
  gap: 16px;
}

.office-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 204, 106, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.13), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    var(--panel);
}

.office-hero h3 {
  margin: 4px 0 8px;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.96;
}

.office-hero p {
  max-width: 680px;
  margin: 0;
  color: #c7d3db;
  font-weight: 800;
  line-height: 1.5;
}

.office-status-card {
  min-width: min(280px, 100%);
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(63, 213, 199, 0.22);
  border-radius: 8px;
  background: rgba(63, 213, 199, 0.08);
}

.office-status-card span,
.office-status-card em,
.office-card-top em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-status-card strong {
  color: var(--green);
  font-size: 1.25rem;
}

.office-game-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  align-items: center;
  justify-items: center;
}

.office-stage {
  position: relative;
  width: min(100%, calc((100svh - 178px) * 2), 1680px);
  aspect-ratio: 2 / 1;
  min-height: 0;
  max-height: calc(100svh - 178px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 34%),
    url("./assets/office/fondo.png") center / cover no-repeat;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.office-stage-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.06), transparent 25%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.34)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 28%, rgba(0, 0, 0, 0.22));
  pointer-events: none;
}

.office-stage-title {
  position: absolute;
  top: 4.8%;
  right: 3.1%;
  z-index: 2;
  margin: 0;
  color: #ffffff;
  font-size: clamp(4.8rem, 8.6vw, 8.4rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.46);
}

.office-stage-status {
  position: absolute;
  top: 13.4%;
  right: 3.2%;
  z-index: 3;
  min-width: 230px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(7, 10, 14, 0.56);
  backdrop-filter: blur(14px);
}

.office-stage-status span,
.office-stage-status em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.office-stage-status strong {
  color: #ffffff;
  font-size: 1.02rem;
  text-transform: uppercase;
}

.office-stage-actions {
  position: absolute;
  top: 3.3%;
  left: 0.6%;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: 1.9%;
  width: 21.5%;
}

.office-image-action {
  position: relative;
  width: 69.5%;
  display: block;
  padding: 0;
  border: 1px solid rgba(78, 144, 255, 0.42);
  border-radius: 0;
  background: #0042e6;
  appearance: none;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 18px 36px rgba(0, 44, 155, 0.42),
    0 0 34px rgba(0, 83, 255, 0.24);
  filter: saturate(1.2) brightness(1.08);
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.office-image-action::after,
.office-photo-hotspot::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -48%;
  width: 46%;
  z-index: 2;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 48%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: officeButtonSheen 2.8s ease-in-out infinite;
}

.office-image-action-large {
  width: 100%;
}

.office-image-action img {
  width: 100%;
  display: block;
}

.office-image-action:hover,
.office-image-action:focus-visible,
.office-photo-hotspot:hover,
.office-photo-hotspot:focus-visible {
  transform: translateY(-5px) scale(1.012);
  filter: saturate(1.34) brightness(1.16);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 24px 48px rgba(0, 44, 155, 0.48),
    0 0 46px rgba(0, 108, 255, 0.54);
  outline: 0;
}

.office-photo-hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(46, 120, 255, 0.54);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.26);
  appearance: none;
  cursor: pointer;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 34px rgba(0, 77, 255, 0.2);
  filter: saturate(1.08) brightness(1.04);
  transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.office-photo-hotspot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.office-hotspot-label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(137, 187, 255, 0.46);
  background:
    linear-gradient(90deg, rgba(0, 62, 189, 0.86), rgba(0, 36, 116, 0.72)),
    rgba(5, 12, 24, 0.78);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0, 22, 78, 0.42);
  font-size: clamp(0.68rem, 0.78vw, 0.9rem);
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.56);
  pointer-events: none;
}

.office-photo-hotspot:hover,
.office-photo-hotspot:focus-visible {
  border-color: rgba(128, 184, 255, 0.88);
}

.office-photo-meetings {
  left: 0.9%;
  bottom: 0;
  width: 25.2%;
  aspect-ratio: 1.37 / 1;
}

.office-photo-assembly {
  right: 2.4%;
  bottom: 36.5%;
  width: 18.2%;
  aspect-ratio: 1.72 / 1;
}

.office-photo-works {
  right: 1.1%;
  bottom: 0;
  width: 22.4%;
  aspect-ratio: 1.68 / 1;
}

.office-alert-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 6;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #043dc4;
  box-shadow: 0 10px 26px rgba(0, 37, 139, 0.5);
  font-size: 1rem;
  line-height: 1;
  animation: officeBadgePulse 1.15s ease-in-out infinite;
}

.office-image-action.has-alert,
.office-photo-hotspot.has-alert {
  animation: officeButtonPulse 1.8s ease-in-out infinite;
}

.office-ingame-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px);
}

.office-ingame-panel {
  width: min(980px, calc(100% - 24px));
  max-height: min(760px, calc(100% - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 68, 190, 0.18), transparent 54%),
    rgba(9, 13, 18, 0.95);
  box-shadow: 0 32px 96px rgba(0, 0, 0, 0.6);
}

.office-ingame-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.office-ingame-head h3 {
  margin: 3px 0 0;
  color: #ffffff;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.office-close-btn {
  flex: 0 0 auto;
}

.office-ingame-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.office-overlay-stack {
  display: grid;
  gap: 14px;
}

.main-stage:has(.office-game-screen) {
  padding: 8px;
  overflow: hidden;
  background: #05070a;
}

.game-horizontal-nav .main-stage:has(.office-game-screen) {
  padding-bottom: 8px;
}

@keyframes officeButtonPulse {
  0%, 100% {
    filter: saturate(1.18) brightness(1.08);
    box-shadow:
      0 18px 42px rgba(0, 44, 155, 0.44),
      0 0 0 1px rgba(255, 255, 255, 0.1) inset,
      0 0 26px rgba(0, 97, 255, 0.28);
  }
  50% {
    filter: saturate(1.46) brightness(1.22);
    box-shadow:
      0 22px 52px rgba(0, 44, 155, 0.54),
      0 0 0 1px rgba(255, 255, 255, 0.2) inset,
      0 0 52px rgba(0, 132, 255, 0.72);
  }
}

@keyframes officeButtonSheen {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-18deg);
  }
  12% {
    opacity: 0.5;
  }
  76% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateX(330%) skewX(-18deg);
  }
}

@keyframes officeBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 26px rgba(0, 37, 139, 0.5);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px rgba(78, 144, 255, 0.18), 0 12px 30px rgba(0, 74, 220, 0.62);
  }
}

.office-control-deck {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.office-control-main,
.office-control-side {
  min-width: 0;
  scroll-margin-top: 96px;
}

.office-scroll-anchor {
  display: block;
  scroll-margin-top: 96px;
}

.office-control-side {
  display: grid;
  gap: 14px;
}

.office-game-screen .daily-office-board,
.office-game-screen .daily-construction-panel,
.office-game-screen .office-minigame-panel {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(135deg, rgba(0, 77, 194, 0.15), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    rgba(11, 16, 21, 0.94);
}

.office-game-screen .daily-office-board {
  padding: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.daily-missions-grid.office-grid {
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  align-items: start;
}

.office-side-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.office-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-office-board {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.office-agenda-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(63, 213, 199, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(63, 213, 199, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.035);
}

.office-agenda-strip h3 {
  margin: 4px 0 0;
  text-transform: uppercase;
}

.office-agenda-strip em {
  color: var(--gold-strong);
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-agent-inbox {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(125, 211, 252, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.04);
}

.office-agent-inbox.empty {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.office-agent-inbox.resolved {
  border-color: rgba(63, 213, 143, 0.2);
  background:
    linear-gradient(135deg, rgba(63, 213, 143, 0.1), transparent 58%),
    rgba(255, 255, 255, 0.04);
}

.office-agent-inbox strong {
  display: block;
  margin-top: 4px;
  color: #f3f7fb;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.office-agent-inbox p {
  margin: 0;
  color: #b8c7d1;
  font-weight: 800;
  line-height: 1.4;
}

.office-issue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.daily-office-panel.agent-mail-card {
  border-color: rgba(125, 211, 252, 0.28);
  background:
    linear-gradient(135deg, rgba(125, 211, 252, 0.13), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.office-history-panel {
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel);
}

.office-history-row {
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

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

.office-history-row span {
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-minigame-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 204, 106, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.office-minigame-board span {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: #dce7ee;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(255, 255, 255, 0.035);
  font-size: 0.76rem;
  font-weight: 1000;
}

.office-minigame-board:not(.revealed) span {
  color: var(--gold-strong);
  border-color: rgba(255, 204, 106, 0.18);
  background: rgba(255, 204, 106, 0.08);
}

.office-minigame-board.revealed span:nth-child(1),
.office-minigame-board.revealed span:nth-child(5),
.office-minigame-board.revealed span:nth-child(9) {
  border-color: rgba(255, 204, 106, 0.32);
  color: var(--gold-strong);
}

.office-calendar-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(142, 169, 198, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(48, 78, 112, 0.26), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    #101a25;
}

.calendar-league-screen {
  display: grid;
}

.calendar-command-screen {
  display: grid;
  gap: 16px;
}

.calendar-next-hero,
.calendar-command-panel {
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 72% 0%, rgba(0, 148, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(6, 27, 46, 0.94), rgba(2, 12, 22, 0.98)),
    rgba(2, 13, 24, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 40px rgba(0, 0, 0, 0.25);
}

.calendar-next-hero {
  min-height: 210px;
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.45fr) minmax(190px, 0.45fr);
  align-items: center;
  gap: 20px;
  padding: 24px;
  overflow: hidden;
}

.calendar-next-hero.calendar-type-cup {
  border-color: rgba(255, 190, 47, 0.32);
  background:
    radial-gradient(circle at 72% 0%, rgba(255, 190, 47, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(38, 28, 10, 0.78), rgba(2, 12, 22, 0.98)),
    rgba(2, 13, 24, 0.95);
}

.calendar-next-hero.calendar-type-continental {
  border-color: rgba(169, 92, 255, 0.32);
  background:
    radial-gradient(circle at 72% 0%, rgba(145, 78, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(24, 16, 58, 0.8), rgba(2, 12, 22, 0.98)),
    rgba(2, 13, 24, 0.95);
}

.calendar-next-meta {
  display: grid;
  gap: 8px;
}

.calendar-next-meta strong,
.calendar-next-side strong {
  color: #fff;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.calendar-next-meta p,
.calendar-next-side small,
.calendar-row-main em,
.calendar-competition-card small,
.calendar-empty-state {
  margin: 0;
  color: #aebfd1;
}

.calendar-next-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.calendar-next-facts span,
.calendar-row-main span,
.calendar-competition-card em {
  color: #c5d8ec;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.calendar-next-facts span {
  padding: 7px 10px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 148, 255, 0.08);
}

.calendar-next-clubs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.calendar-next-team,
.calendar-next-vs,
.calendar-next-side {
  display: grid;
  justify-items: center;
  text-align: center;
}

.calendar-next-team {
  gap: 10px;
}

.calendar-next-team strong {
  color: #fff;
  font-size: clamp(1.05rem, 1.8vw, 1.6rem);
  line-height: 1;
  text-transform: uppercase;
}

.calendar-next-crest {
  width: 94px;
  height: 94px;
  object-fit: contain;
}

.match-ai-crest.calendar-next-crest {
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 148, 255, 0.34);
  border-radius: 14px;
  color: #dff6ff;
  background: linear-gradient(145deg, rgba(0, 148, 255, 0.35), rgba(3, 17, 31, 0.9));
  font-size: 1.6rem;
  font-weight: 1000;
}

.calendar-next-vs b {
  color: #fff;
  font-size: clamp(2rem, 3.2vw, 3.3rem);
  line-height: 1;
}

.calendar-next-vs span {
  color: var(--pcm-gold);
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.calendar-next-side {
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.calendar-next-side span {
  color: #b8cadc;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.calendar-next-side .secondary-btn {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
}

.calendar-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.calendar-command-panel {
  min-height: 420px;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
}

.calendar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.calendar-panel-head h3 {
  margin: 0;
  color: #16a9ff;
  font-size: 1rem;
  text-transform: uppercase;
}

.calendar-list,
.calendar-competition-stack {
  display: grid;
  gap: 10px;
}

.calendar-list-row {
  min-height: 78px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(0, 148, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.12), rgba(0, 148, 255, 0.025)),
    rgba(5, 22, 38, 0.78);
}

.calendar-list-row.calendar-type-cup {
  border-color: rgba(255, 190, 47, 0.22);
  background:
    linear-gradient(90deg, rgba(255, 190, 47, 0.12), rgba(0, 148, 255, 0.025)),
    rgba(5, 22, 38, 0.78);
}

.calendar-list-row.calendar-type-continental {
  border-color: rgba(169, 92, 255, 0.24);
  background:
    linear-gradient(90deg, rgba(145, 78, 255, 0.16), rgba(0, 148, 255, 0.025)),
    rgba(5, 22, 38, 0.78);
}

.calendar-date-chip {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  color: #f2f7ff;
  text-transform: uppercase;
}

.calendar-date-chip span,
.calendar-date-chip em {
  color: #aebfd1;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 1000;
}

.calendar-date-chip strong {
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
}

.calendar-row-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.calendar-row-main strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-row-main span b {
  color: #18aaff;
}

.calendar-type-cup .calendar-row-main span b {
  color: var(--pcm-gold);
}

.calendar-type-continental .calendar-row-main span b {
  color: #b884ff;
}

.calendar-row-crest {
  width: 42px;
  height: 42px;
  object-fit: contain;
  justify-self: end;
}

.match-ai-crest.calendar-row-crest {
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #dff6ff;
  background: linear-gradient(145deg, rgba(0, 148, 255, 0.4), rgba(3, 17, 31, 0.92));
  font-size: 0.8rem;
  font-weight: 1000;
}

.calendar-result-row {
  grid-template-columns: 76px minmax(0, 1fr) 36px;
}

.calendar-score-pill {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  justify-self: end;
  border-radius: 7px;
  color: #111;
  background: #b8cadc;
  font-weight: 1000;
}

.calendar-result-row.win .calendar-score-pill {
  color: #05170e;
  background: #23d078;
}

.calendar-result-row.loss .calendar-score-pill {
  color: #fff;
  background: #ff4d5f;
}

.calendar-result-row.draw .calendar-score-pill {
  color: #111;
  background: #ffd35b;
}

.calendar-competition-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 92% 22%, rgba(255, 255, 255, 0.08), transparent 26%),
    linear-gradient(135deg, rgba(0, 148, 255, 0.22), rgba(2, 14, 25, 0.92));
}

.calendar-competition-card.calendar-type-cup {
  border-color: rgba(255, 190, 47, 0.28);
  background:
    radial-gradient(circle at 92% 22%, rgba(255, 190, 47, 0.15), transparent 28%),
    linear-gradient(135deg, rgba(255, 190, 47, 0.18), rgba(2, 14, 25, 0.92));
}

.calendar-competition-card.calendar-type-continental {
  border-color: rgba(169, 92, 255, 0.28);
  background:
    radial-gradient(circle at 92% 22%, rgba(169, 92, 255, 0.2), transparent 28%),
    linear-gradient(135deg, rgba(116, 70, 255, 0.22), rgba(2, 14, 25, 0.92));
}

.calendar-competition-card strong {
  display: block;
  color: #fff;
  text-transform: uppercase;
}

.calendar-competition-card small {
  grid-column: 2;
  margin-top: -6px;
}

.calendar-competition-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #eaf7ff;
  background: rgba(0, 148, 255, 0.12);
}

.calendar-competition-icon svg {
  width: 30px;
  height: 30px;
}

.calendar-month-drawer {
  display: grid;
  padding-top: 4px;
}

.calendar-league-panel {
  min-height: 660px;
  padding: 8px 0 0;
  border: 0;
  background:
    radial-gradient(circle at 54% 0%, rgba(0, 148, 255, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(7, 30, 50, 0.2), rgba(2, 11, 19, 0.1));
  box-shadow: none;
}

.calendar-league-panel .office-calendar-header {
  padding: 0 8px 10px;
}

.calendar-league-panel .office-calendar-header h3 {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
}

.calendar-league-panel .calendar-month-controls {
  margin-left: auto;
  margin-right: auto;
}

.calendar-league-panel .calendar-month-controls .icon-action,
.calendar-league-panel .real-clock-card {
  border-color: rgba(0, 148, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(3, 13, 24, 0.72);
}

.calendar-league-panel .calendar-month-controls .icon-action:nth-child(2) {
  color: var(--pcm-gold);
}

.calendar-league-panel .real-clock-card {
  min-width: 174px;
}

.calendar-league-panel .real-clock-card span {
  color: var(--pcm-gold);
}

.office-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.office-calendar-header h3 {
  margin: 4px 0 0;
  text-transform: uppercase;
}

.real-clock-card {
  min-width: 210px;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(169, 191, 214, 0.2);
  border-radius: 8px;
  background: rgba(9, 16, 24, 0.62);
}

.real-clock-card span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.real-clock-card strong {
  color: #edf4fb;
  font-size: 1rem;
  text-transform: capitalize;
}

.calendar-month-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-month-controls .icon-action {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(169, 191, 214, 0.18);
  border-radius: 8px;
  color: #edf4fb;
  background: rgba(9, 16, 24, 0.72);
  font-size: 1.05rem;
  font-weight: 1000;
}

.calendar-month-controls .icon-action:nth-child(2) {
  width: auto;
  padding: 0 12px;
  font-size: 0.78rem;
}

.office-calendar-weekdays,
.office-month-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-league-panel .office-calendar-weekdays {
  gap: 4px;
  padding: 0 4px;
}

.calendar-league-panel .office-calendar-weekdays span {
  color: #b7c9db;
  font-size: 0.78rem;
}

.calendar-league-panel .office-month-calendar {
  gap: 4px;
}

.office-calendar-weekdays span {
  color: #b8c9db;
  font-size: 0.72rem;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
}

.office-calendar-day {
  min-height: 74px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(184, 201, 219, 0.34);
  border-radius: 8px;
  background: #eef3f7;
}

.calendar-league-panel .office-calendar-day {
  min-height: 91px;
  gap: 8px;
  padding: 8px;
  border-color: rgba(0, 148, 255, 0.12);
  background:
    linear-gradient(145deg, rgba(18, 40, 59, 0.78), rgba(7, 22, 35, 0.9)),
    rgba(4, 14, 24, 0.9);
}

.calendar-league-panel .office-calendar-day.outside {
  opacity: 0.54;
  background:
    linear-gradient(145deg, rgba(24, 46, 65, 0.52), rgba(8, 22, 35, 0.72)),
    rgba(4, 14, 24, 0.76);
}

.calendar-league-panel .office-calendar-day.current-game-day {
  border-color: rgba(0, 148, 255, 0.86);
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 148, 255, 0.12), transparent 62%),
    linear-gradient(145deg, rgba(8, 35, 58, 0.94), rgba(3, 18, 31, 0.98));
  box-shadow: inset 0 0 0 1px rgba(0, 148, 255, 0.22);
}

.office-calendar-day.outside {
  opacity: 0.48;
  background: #cfd8e2;
}

.office-calendar-day.current-game-day {
  border-color: rgba(49, 105, 160, 0.72);
  background:
    linear-gradient(180deg, rgba(58, 124, 188, 0.12), transparent),
    #ffffff;
}

.calendar-day-number {
  width: 22px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #102033;
  background: #d8e2ec;
  font-size: 0.7rem;
  font-weight: 1000;
}

.calendar-league-panel .calendar-day-number {
  width: 24px;
  color: #dce7ef;
  background: rgba(183, 201, 219, 0.2);
}

.calendar-league-panel .office-calendar-day.outside .calendar-day-number {
  color: #8699ab;
}

.calendar-day-games {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.calendar-empty {
  color: rgba(16, 32, 51, 0.34);
  font-size: 0.7rem;
  font-weight: 800;
}

.calendar-game {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 5px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(16, 32, 51, 0.09);
}

.calendar-league-panel .calendar-game {
  min-height: 50px;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.16), rgba(0, 148, 255, 0.06)),
    rgba(2, 24, 44, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.calendar-league-panel .calendar-game.user-game {
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.2), rgba(0, 148, 255, 0.08)),
    rgba(2, 24, 44, 0.86);
  box-shadow: inset 0 0 0 1px rgba(0, 148, 255, 0.16);
}

.calendar-league-panel .calendar-game.cup-game {
  border-color: rgba(255, 190, 47, 0.34);
  background:
    linear-gradient(90deg, rgba(255, 190, 47, 0.22), rgba(0, 148, 255, 0.08)),
    rgba(2, 24, 44, 0.88);
}

.calendar-league-panel .calendar-game.cup-game .calendar-team-badge {
  background:
    linear-gradient(145deg, rgba(255, 190, 47, 0.78), rgba(35, 31, 20, 0.96));
  color: #130f08;
}

.calendar-league-panel .calendar-game.played {
  opacity: 0.94;
}

.calendar-team-badge {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(0, 148, 255, 0.55), rgba(20, 40, 70, 0.95));
  font-size: 0.62rem;
  font-weight: 1000;
}

.calendar-league-panel .calendar-game em {
  display: grid;
  place-items: center;
  color: #dce7ef;
  font-style: normal;
}

.calendar-league-panel .calendar-game em svg {
  width: 15px;
  height: 15px;
}

.calendar-game.user-game {
  background: #dfeaf5;
  box-shadow: inset 0 0 0 1px rgba(49, 105, 160, 0.2);
}

.calendar-game.played {
  opacity: 0.78;
}

.calendar-game strong,
.calendar-game span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-game strong {
  color: #111827;
  font-size: 0.62rem;
}

.calendar-league-panel .calendar-game strong {
  color: #fff;
  font-size: 0.75rem;
}

.calendar-game span {
  color: #376996;
  font-size: 0.58rem;
  font-weight: 900;
}

.calendar-league-panel .calendar-game span {
  color: #a9bdd0;
  font-size: 0.66rem;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 12px 0;
  color: #b9c8d7;
  font-size: 0.78rem;
  font-weight: 850;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendar-legend i {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #dce7ef;
  background: rgba(183, 201, 219, 0.2);
  font-style: normal;
}

.calendar-legend i svg {
  width: 13px;
  height: 13px;
}

.calendar-legend .league {
  background: #0b7ddb;
}

.calendar-legend .cup {
  color: #fff;
  background: linear-gradient(180deg, #a55cff, #5723b6);
}

.calendar-legend .international {
  border: 2px solid #75ef5f;
  background: transparent;
}

.calendar-legend .store-outline-btn {
  width: auto;
  min-height: 34px;
  margin-left: auto;
  padding: 0 18px;
  text-transform: none;
}

.mission-daily-featured .daily-reward-panel,
.mission-daily-featured .daily-office-panel,
.mission-daily-featured .daily-construction-panel {
  min-height: 0;
  padding: 14px;
}

.mission-daily-featured .daily-reward-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.mission-daily-featured .daily-step {
  padding: 7px 5px;
}

.mission-daily-featured .daily-step span {
  font-size: 0.58rem;
}

.mission-daily-featured .daily-step strong {
  font-size: 0.7rem;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.section-heading h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.section-heading p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
  text-align: right;
}

.daily-missions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mission-card {
  min-height: 238px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 46%),
    var(--panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.mission-card.completed {
  border-color: rgba(62, 208, 143, 0.32);
}

.missions-premium-screen {
  display: grid;
  grid-template-columns: 480px minmax(0, 1fr);
  grid-template-areas:
    "level main"
    "daily daily";
  gap: 14px;
}

.missions-level-panel,
.missions-main-panel,
.mission-daily-panel {
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.9), rgba(4, 15, 26, 0.97)),
    rgba(3, 12, 22, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(0, 0, 0, 0.22);
}

.missions-level-panel {
  grid-area: level;
  min-height: 320px;
  display: grid;
  align-content: space-between;
  padding: 24px 28px;
}

.missions-level-panel h3 {
  margin: 18px 0 8px;
  color: #fff;
  font-size: 2.35rem;
  line-height: 1;
  text-transform: uppercase;
}

.missions-level-panel p {
  margin: 0;
  color: #c8d5df;
  line-height: 1.45;
}

.missions-level-panel small {
  color: #91a5b8;
  font-weight: 900;
}

.missions-level-panel .mission-xp-ring {
  width: 118px;
  border-color: rgba(0, 148, 255, 0.16);
  background:
    radial-gradient(circle at center, #061827 0 55%, transparent 56%),
    conic-gradient(var(--pcm-gold) var(--v), rgba(255, 255, 255, 0.09) 0);
}

.missions-level-panel .mission-xp-ring strong {
  color: #fff;
  font-size: 1.55rem;
}

.missions-level-panel .mission-xp-ring span {
  margin-top: 42px;
  color: #d7e2eb;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.missions-main-panel {
  grid-area: main;
  min-height: 320px;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px 24px 20px;
}

.missions-main-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
  gap: 24px;
}

.missions-main-head h3 {
  margin: 6px 0 4px;
  color: #fff;
  font-size: 1.28rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.missions-main-head p {
  margin: 0;
  color: #c6d2dd;
  line-height: 1.35;
}

.missions-main-head > p {
  text-align: right;
  font-size: 0.86rem;
}

.missions-main-reward {
  display: grid;
  gap: 6px;
}

.missions-main-reward span,
.missions-main-progress span,
.mission-daily-progress span {
  color: #9fb0bf;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.missions-main-reward strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 1.12rem;
}

.missions-main-reward i,
.missions-xp-btn i {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 2px solid rgba(190, 94, 255, 0.75);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(180deg, #8f43ff, #4d1db6);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
}

.missions-main-progress,
.mission-daily-progress {
  display: grid;
  gap: 8px;
}

.missions-main-progress div,
.mission-daily-progress div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.missions-main-progress strong,
.mission-daily-progress strong {
  color: var(--pcm-gold);
}

.missions-main-progress b,
.mission-daily-progress b {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.missions-main-progress b i,
.mission-daily-progress b i {
  display: block;
  width: var(--v, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd86a, #ffb61b);
}

.national-cup-screen {
  display: grid;
  gap: 14px;
}

.national-cup-hero,
.national-cup-card,
.national-cup-round {
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 10%, rgba(255, 190, 47, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(8, 30, 48, 0.92), rgba(4, 15, 26, 0.98)),
    rgba(3, 12, 22, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(0, 0, 0, 0.22);
}

.national-cup-hero {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  overflow: hidden;
}

.continental-cup-hero {
  background:
    radial-gradient(circle at 86% 8%, rgba(0, 214, 255, 0.18), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(87, 102, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(5, 24, 54, 0.94), rgba(3, 12, 24, 0.98)),
    rgba(3, 12, 22, 0.94);
}

.national-cup-hero h3,
.national-cup-card h3 {
  margin: 6px 0;
  color: #fff;
  text-transform: uppercase;
}

.national-cup-hero h3 {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
}

.national-cup-hero p,
.national-cup-card p,
.national-cup-round em {
  margin: 0;
  color: #b9c8d7;
}

.national-cup-prize {
  min-width: 280px;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 190, 47, 0.28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 190, 47, 0.12), rgba(0, 148, 255, 0.06));
}

.national-cup-prize span,
.national-cup-prize em {
  color: #b9c8d7;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.national-cup-prize strong {
  color: var(--pcm-gold);
  font-size: 1.8rem;
}

.continental-cup-prize strong {
  color: #42d7ff;
}

.continental-cup-requirements {
  border-color: rgba(255, 190, 47, 0.26);
}

.national-cup-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap: 14px;
}

.national-cup-card {
  min-height: 160px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
}

.national-cup-progress {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.national-cup-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00e676, #ffbf35);
}

.national-cup-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #fff;
  font-weight: 1000;
}

.national-cup-next span {
  color: var(--pcm-gold);
}

.national-cup-rounds {
  display: grid;
  gap: 8px;
}

.national-cup-round {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
}

.national-cup-round span,
.national-cup-round b {
  color: var(--pcm-gold);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.national-cup-round strong {
  display: block;
  margin: 4px 0;
  color: #fff;
}

.national-cup-round.played {
  border-color: rgba(62, 208, 143, 0.28);
}

.national-cup-round.locked {
  opacity: 0.48;
}

.mission-daily-progress b i {
  background: linear-gradient(90deg, #35a8ff, #2fe4cf);
}

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

.mission-objective-tile {
  position: relative;
  min-height: 90px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.028);
}

.mission-objective-tile.completed {
  border-color: rgba(0, 224, 114, 0.28);
}

.mission-objective-tile span {
  color: #e0e8ef;
  line-height: 1.25;
}

.mission-objective-tile strong {
  color: var(--pcm-gold);
  font-size: 1.02rem;
}

.mission-objective-tile.completed strong {
  color: #27e66a;
}

.mission-objective-tile i {
  position: absolute;
  right: 12px;
  bottom: 18px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #042513;
  background: #27e66a;
  font-style: normal;
  font-weight: 1000;
}

.missions-daily-row {
  grid-area: daily;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.mission-daily-panel {
  min-height: 190px;
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 18px;
}

.mission-daily-panel.completed {
  border-color: rgba(0, 224, 114, 0.28);
}

.mission-daily-panel.claimed {
  opacity: 0.72;
}

.mission-daily-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mission-daily-head span {
  color: var(--pcm-gold);
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-daily-head strong {
  color: #22ef88;
  font-size: 0.84rem;
}

.mission-daily-panel h3 {
  margin: 0;
  color: #fff;
  font-size: 1.08rem;
  text-transform: uppercase;
}

.mission-daily-panel p {
  margin: 0;
  color: #bfccd8;
  line-height: 1.35;
}

.missions-xp-btn {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 190, 47, 0.35);
  border-radius: 6px;
  color: #111307;
  background: linear-gradient(180deg, #ffd86a, #ffb61b);
  font-weight: 1000;
}

.missions-xp-btn.secondary {
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
}

@media (max-width: 1100px) {
  .missions-premium-screen {
    grid-template-columns: 1fr;
    grid-template-areas:
      "level"
      "main"
      "daily";
  }

  .missions-main-head,
  .missions-objective-grid,
  .missions-daily-row {
    grid-template-columns: 1fr;
  }

  .missions-main-head > p {
    text-align: left;
  }
}

.store-page {
  display: grid;
  gap: 16px;
}

.store-hero {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 204, 106, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.13), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent),
    var(--panel);
}

.store-hero h3 {
  max-width: 760px;
  margin: 4px 0 8px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.store-hero p {
  max-width: 680px;
  margin: 0;
  color: #c7d3db;
  font-weight: 800;
  line-height: 1.5;
}

.store-wallet {
  min-width: min(310px, 100%);
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(63, 213, 199, 0.22);
  border-radius: 8px;
  background: rgba(63, 213, 199, 0.08);
}

.store-wallet span,
.store-wallet em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.store-wallet strong {
  color: var(--green);
  font-size: 1.25rem;
}

.store-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  gap: 14px;
}

.store-showcase-banner,
.store-showcase-frames {
  min-height: 230px;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 204, 106, 0.22);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.store-showcase-banner {
  background:
    linear-gradient(90deg, rgba(8, 12, 18, 0.78), rgba(8, 12, 18, 0.28) 48%, rgba(8, 12, 18, 0.76)),
    url("./assets/banners/nacimiento.png");
  background-size: 100% 100%, 100% auto;
  background-position: center, 50% 0%;
  animation: storeBannerNacimientoDrift 16s ease-in-out infinite;
}

.store-showcase-frames {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 204, 106, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(255, 204, 106, 0.08), rgba(45, 212, 191, 0.04)),
    var(--panel);
}

.store-showcase-banner span,
.store-showcase-frames span {
  color: var(--gold-strong);
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.store-showcase-banner strong {
  color: #edf4fb;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.store-showcase-banner p,
.store-showcase-frames p {
  max-width: 520px;
  margin: 0;
  color: #d6e0e8;
  font-weight: 900;
}

.store-frame-line {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 8px 0;
}

.store-frame-preview {
  width: 84px;
  aspect-ratio: 1;
  border-radius: 50%;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.store-product {
  min-height: 260px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.store-product.featured {
  border-color: rgba(255, 204, 106, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 204, 106, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    var(--panel);
}

.store-product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.store-product-top span {
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.store-product-top strong {
  color: #dce7ee;
  font-size: 1rem;
}

.store-product h3 {
  margin: 0;
  text-transform: uppercase;
}

.store-product p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.45;
}

.store-product ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-product li {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: #cfe0ec;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.8rem;
  font-weight: 900;
}

.store-note p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.store-shop {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 330px;
  gap: 16px;
  min-height: 650px;
}

.store-sidebar,
.store-main,
.store-offers-panel {
  min-width: 0;
}

.store-sidebar,
.store-main {
  display: grid;
  gap: 16px;
  align-content: start;
}

.store-category-card,
.store-season-card,
.store-main-banner,
.store-feature-panel,
.store-offers-panel {
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.88), rgba(4, 15, 26, 0.96)),
    rgba(3, 12, 22, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.store-category-card {
  padding: 18px;
}

.store-category-card h3,
.store-season-card h3,
.store-section-head h3 {
  margin: 0;
  color: var(--pcm-gold);
  font-size: 0.95rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.store-category-list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.store-category-list button {
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #e6edf4;
  background: transparent;
  text-align: left;
}

.store-category-list button:not(:last-child) {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.store-category-list button.active {
  border-color: rgba(255, 190, 47, 0.82);
  background: linear-gradient(90deg, rgba(255, 190, 47, 0.13), rgba(255, 255, 255, 0.02));
}

.store-category-list svg {
  width: 24px;
  height: 24px;
  color: #f4f8ff;
}

.store-category-list button.active svg,
.store-category-list button.active strong {
  color: var(--pcm-gold);
}

.store-category-list strong {
  min-width: 0;
  color: inherit;
  font-size: 0.94rem;
}

.store-season-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 12px;
  padding: 16px;
}

.store-season-card span,
.store-season-card em,
.store-shelf-product span,
.store-offer-card span,
.store-offer-card em {
  color: #b5c6d6;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
}

.store-season-card strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 1.04rem;
}

.store-season-card b {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--pcm-gold);
  border: 1px solid rgba(255, 190, 47, 0.34);
  border-radius: 50%;
  background: rgba(255, 190, 47, 0.08);
}

.store-season-card b svg {
  width: 34px;
  height: 34px;
}

.store-pass-progress {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.store-pass-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffd86a, #ffb61b);
}

.store-season-card em,
.store-season-card .store-outline-btn {
  grid-column: 1 / -1;
}

.store-outline-btn {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  font-weight: 950;
  text-transform: uppercase;
}

.store-main-banner {
  position: relative;
  min-height: 270px;
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  align-items: center;
  padding: 26px 66px;
  background:
    linear-gradient(90deg, rgba(2, 10, 20, 0.94), rgba(2, 10, 20, 0.62) 43%, rgba(2, 10, 20, 0.16)),
    radial-gradient(circle at 80% 55%, rgba(255, 190, 47, 0.22), transparent 28%),
    url("./assets/banners/nacimiento.png") center / cover no-repeat;
}

.store-banner-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
}

.store-banner-copy span {
  color: #dce7ef;
  font-weight: 900;
  text-transform: uppercase;
}

.store-banner-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  text-transform: uppercase;
}

.store-banner-copy p {
  max-width: 420px;
  margin: 0 0 8px;
  color: #dce7ef;
  line-height: 1.45;
}

.store-banner-copy .primary-btn {
  width: fit-content;
  min-width: 170px;
}

.store-banner-items {
  position: relative;
  z-index: 2;
  min-height: 220px;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 28px;
}

.store-showcase-item {
  width: 150px;
  height: 190px;
  border: 1px solid rgba(255, 190, 47, 0.24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 217, 115, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(5, 28, 50, 0.92), rgba(2, 11, 21, 0.98));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.store-showcase-item.kit {
  width: 178px;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 190, 47, 0.34) 43% 48%, transparent 49%),
    radial-gradient(circle at 50% 24%, rgba(255, 217, 115, 0.18), transparent 34%),
    linear-gradient(180deg, #111925, #020b14);
  clip-path: polygon(18% 8%, 35% 0, 65% 0, 82% 8%, 94% 42%, 78% 49%, 76% 100%, 24% 100%, 22% 49%, 6% 42%);
}

.store-showcase-item.office {
  background:
    linear-gradient(135deg, rgba(255, 190, 47, 0.28), transparent 42%),
    linear-gradient(180deg, #0e273d, #020b14);
}

.store-showcase-item.frame {
  background:
    radial-gradient(circle at 50% 52%, rgba(2, 11, 21, 0.96) 0 30%, transparent 31%),
    conic-gradient(from 45deg, #ffd66a, #0c9cff, #ffd66a, #102440, #ffd66a);
}

.store-showcase-item.banner {
  width: 210px;
  height: 130px;
  background:
    linear-gradient(135deg, rgba(255, 190, 47, 0.28), transparent 40%),
    linear-gradient(180deg, #073b77, #031528);
}

.store-showcase-item.stadium {
  width: 210px;
  height: 132px;
  background:
    radial-gradient(circle at 50% 72%, rgba(255, 190, 47, 0.2), transparent 38%),
    linear-gradient(180deg, #131a20, #020b14);
}

.store-banner-arrow {
  position: absolute;
  top: 50%;
  left: 10px;
  z-index: 3;
  width: 36px;
  min-height: 58px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: rgba(2, 13, 24, 0.58);
  font-size: 2rem;
}

.store-banner-arrow.right {
  right: 10px;
  left: auto;
}

.store-banner-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.store-banner-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
}

.store-banner-dots i:first-child {
  background: #fff;
}

.store-feature-panel {
  padding: 18px;
}

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

.store-section-head button {
  border: 0;
  color: #fff;
  background: transparent;
  font-weight: 950;
}

.store-product-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.store-shelf-product {
  min-height: 260px;
  display: grid;
  grid-template-rows: auto minmax(36px, auto) 132px auto;
  gap: 8px;
  padding: 14px 12px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
    rgba(2, 13, 24, 0.7);
  text-align: center;
}

.store-shelf-product h4 {
  min-height: 42px;
  margin: 0;
  color: #fff;
  font-size: 0.96rem;
}

.store-product-art {
  min-height: 0;
  height: 132px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 190, 47, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(5, 38, 68, 0.78), rgba(2, 11, 21, 0.92));
}

.store-product-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-product-art video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.06);
}

.store-product-art.kit-product {
  min-height: 174px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 190, 47, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(5, 38, 68, 0.6), rgba(2, 11, 21, 0.92));
}

.store-product-art.kit-product img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.36));
}

.store-product-art.crest-product img {
  width: auto;
  height: 74%;
  max-width: 64%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 190, 47, 0.18))
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.42));
}

.store-product-art.home-skin-product,
.store-product-art.stadium-skin-product {
  background: #03080d;
}

.store-credit-amount {
  color: #ffd86a;
  font-size: 2rem;
  font-weight: 1000;
}

.store-credit-bonus {
  margin: 0;
  color: rgba(226, 236, 246, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
}

.store-credit-bonus strong {
  color: #fff;
}

.store-credit-bonus s {
  color: rgba(226, 236, 246, 0.55);
}

.store-product-art svg {
  width: 66px;
  height: 66px;
  color: var(--pcm-gold);
}

.store-price-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 190, 47, 0.18);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.045);
  font-weight: 1000;
}

.store-price-btn i,
.store-offer-card strong i {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--pcm-gold);
}

.store-price-btn svg,
.store-offer-card strong svg {
  width: 18px;
  height: 18px;
}

.store-offers-panel {
  padding: 18px;
}

.store-offer-list {
  display: grid;
  gap: 14px;
}

.store-offer-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  min-height: 142px;
  padding: 16px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(15, 50, 85, 0.72), rgba(4, 15, 26, 0.92));
}

.store-offer-card.legend {
  border-color: rgba(190, 78, 255, 0.38);
  background: linear-gradient(145deg, rgba(74, 22, 105, 0.68), rgba(4, 15, 26, 0.92));
}

.store-offer-card.basic {
  border-color: rgba(0, 224, 114, 0.25);
  background: linear-gradient(145deg, rgba(0, 93, 54, 0.48), rgba(4, 15, 26, 0.92));
}

.store-pack-icon {
  width: 72px;
  height: 86px;
  display: grid;
  place-items: center;
  color: var(--pcm-gold);
  border: 1px solid rgba(255, 190, 47, 0.25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 217, 115, 0.2), transparent 38%),
    rgba(2, 13, 24, 0.6);
}

.store-pack-icon svg {
  width: 46px;
  height: 46px;
}

.store-offer-card h4 {
  margin: 2px 0 4px;
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
}

.store-offer-card strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--pcm-gold);
  font-size: 1.15rem;
}

.store-offer-card b {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #8cff95;
  background: rgba(0, 120, 58, 0.62);
}

.store-offer-card button {
  position: absolute;
  inset: 0;
  opacity: 0;
}

@media (max-width: 1260px) {
  .store-shop {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .store-offers-panel {
    grid-column: 1 / -1;
  }

  .store-offer-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 940px) {
  .store-shop,
  .store-main-banner {
    grid-template-columns: 1fr;
  }

  .store-product-row,
  .store-offer-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-banner-items {
    display: none;
  }
}

@media (max-width: 620px) {
  .store-product-row,
  .store-offer-list {
    grid-template-columns: 1fr;
  }

  .store-main-banner {
    padding: 22px 48px;
  }
}

.ranking-page {
  display: grid;
  gap: 14px;
}

.ranking-hero {
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.32fr);
  align-items: stretch;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(0, 148, 255, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 28%, rgba(255, 190, 58, 0.14), transparent 28%),
    linear-gradient(115deg, rgba(0, 148, 255, 0.16), rgba(3, 12, 25, 0.72) 46%, rgba(3, 10, 20, 0.95)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 70px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  position: relative;
}

.ranking-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 58%, rgba(0, 148, 255, 0.08) 58% 59%, transparent 59%),
    repeating-linear-gradient(115deg, transparent 0 84px, rgba(0, 148, 255, 0.045) 85px 86px);
  pointer-events: none;
}

.ranking-hero > * {
  position: relative;
  z-index: 1;
}

.ranking-hero-copy {
  display: grid;
  align-content: center;
}

.ranking-hero h3 {
  margin: 4px 0 8px;
  color: #f5f8ff;
  font-size: clamp(2.2rem, 4.2vw, 4.8rem);
  line-height: 0.92;
  text-transform: uppercase;
  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.ranking-hero p {
  max-width: 680px;
  margin: 0;
  color: #c7d8e8;
  font-weight: 800;
  line-height: 1.5;
}

.ranking-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 10px;
  margin-top: 18px;
}

.ranking-hero-stats div {
  min-width: 128px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background: rgba(0, 22, 42, 0.56);
}

.ranking-hero-stats span,
.ranking-hero-stats strong {
  display: block;
}

.ranking-hero-stats span {
  color: #9db1c4;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.ranking-hero-stats strong {
  overflow: hidden;
  margin-top: 4px;
  color: #ffffff;
  font-size: 0.92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-user-position {
  min-width: min(280px, 100%);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 194, 64, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 194, 64, 0.14), rgba(0, 148, 255, 0.08)),
    rgba(0, 18, 34, 0.72);
}

.ranking-user-position span,
.ranking-user-position em {
  color: var(--muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.ranking-user-position strong {
  color: var(--gold-strong);
  font-size: 3rem;
  line-height: 1;
}

.ranking-user-position b {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.ranking-user-position i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--gold-strong));
}

.ranking-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.35fr);
  gap: 14px;
}

.ranking-main-card,
.ranking-leader-panel,
.ranking-table-card {
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(0, 21, 39, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.ranking-main-card {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.ranking-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ranking-podium-card {
  min-height: 206px;
  display: grid;
  align-content: stretch;
  padding: 0;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 75% 20%, rgba(0, 148, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
  position: relative;
  overflow: hidden;
}

.ranking-podium-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background: linear-gradient(135deg, var(--rank-a), transparent 58%, var(--rank-b));
  pointer-events: none;
}

.ranking-podium-card > * {
  position: relative;
}

.ranking-podium-cover {
  position: relative;
  min-height: 206px;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.1), rgba(8, 12, 18, 0.82)),
    radial-gradient(circle at 22% 28%, rgba(255, 204, 106, 0.18), transparent 26%);
  overflow: hidden;
}

.ranking-podium-card.profile-banner-nacimiento .ranking-podium-cover {
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.08), rgba(8, 12, 18, 0.9)),
    linear-gradient(90deg, rgba(8, 12, 18, 0.22), rgba(8, 12, 18, 0.78)),
    url("./assets/banners/nacimiento.png");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center, center, 50% 14%;
}

.ranking-avatar {
  width: 84px;
  aspect-ratio: 1;
  position: absolute;
  right: 16px;
  bottom: 20px;
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(0, 217, 255, 0.32);
  background: rgba(6, 23, 51, 0.72);
  color: #ffffff;
  font-weight: 1000;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.48);
}

.ranking-avatar > img,
.ranking-avatar > .president-frame,
.ranking-avatar > span {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.ranking-avatar > span {
  display: grid;
  place-items: center;
}

.ranking-podium-info {
  align-self: end;
  display: grid;
  gap: 5px;
  margin: 0 -12px -12px;
  padding: 12px 112px 12px 14px;
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.1), rgba(8, 12, 18, 0.86)),
    rgba(8, 12, 18, 0.62);
  backdrop-filter: blur(4px);
}

.ranking-podium-card.rank-1 {
  --rank-a: #ffd66b;
  --rank-b: #2dd4bf;
  border-color: rgba(255, 214, 107, 0.34);
}

.ranking-podium-card.rank-2 {
  --rank-a: #dbeafe;
  --rank-b: #60a5fa;
}

.ranking-podium-card.rank-3 {
  --rank-a: #d99a54;
  --rank-b: #7c4d0b;
}

.ranking-podium-card.current,
.ranking-row.current {
  border-color: rgba(255, 194, 64, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 194, 64, 0.18);
}

.ranking-medal {
  position: absolute;
  right: 12px;
  top: 12px;
  min-width: 42px;
  height: 30px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #11161a;
  background: linear-gradient(145deg, var(--rank-a), var(--rank-b));
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.ranking-podium-card strong {
  display: block;
  color: #edf4fb;
  font-size: 1rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.ranking-podium-card em,
.ranking-podium-card small {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.ranking-podium-card p {
  margin: 0;
  color: var(--gold-strong);
  font-size: 1.16rem;
  font-weight: 1000;
}

.ranking-table-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.ranking-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ranking-table-heading h3 {
  margin: 4px 0 0;
}

.ranking-table-heading > strong {
  color: var(--gold-strong);
}

.ranking-leader-panel {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 194, 64, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(0, 148, 255, 0.08), transparent),
    rgba(0, 21, 39, 0.86);
}

.ranking-leader-mark {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 194, 64, 0.42);
  border-radius: 50%;
  background: rgba(8, 18, 32, 0.78);
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 1000;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.ranking-leader-mark img,
.ranking-leader-mark .president-frame,
.ranking-leader-mark > span {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.ranking-leader-mark > span {
  display: grid;
  place-items: center;
}

.ranking-leader-panel h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1;
  text-transform: uppercase;
}

.ranking-leader-panel > strong {
  color: var(--green);
  font-size: 1.5rem;
}

.ranking-leader-stats {
  width: 100%;
  display: grid;
  gap: 8px;
}

.ranking-leader-stats span {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #d8e8f7;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.78rem;
  font-weight: 900;
}

.ranking-list {
  display: grid;
  gap: 7px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 54px 44px minmax(0, 1fr) minmax(120px, 0.35fr) minmax(150px, 0.42fr);
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 148, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 31, 56, 0.46);
}

.ranking-row-rank {
  color: var(--gold-strong);
  font-size: 1rem;
  font-weight: 1000;
}

.ranking-row-avatar {
  width: 36px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(0, 148, 255, 0.14);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 1000;
}

.ranking-row-avatar img,
.ranking-row-avatar .president-frame,
.ranking-row-avatar > span {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.ranking-row-avatar > span {
  display: grid;
  place-items: center;
}

.ranking-row strong,
.ranking-row em,
.ranking-row span {
  min-width: 0;
}

.ranking-row div strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ranking-row em,
.ranking-row > span:not(.ranking-row-avatar) {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-row > strong {
  color: var(--green);
  text-align: right;
}

.mission-card.claimed {
  opacity: 0.68;
}

.mission-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.mission-card-top span {
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.mission-card-top strong {
  color: #baf4d9;
  font-size: 0.86rem;
}

.mission-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.mission-card p {
  margin: 0;
  color: #c4d0d9;
  line-height: 1.45;
}

.mission-progress {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.mission-actions {
  display: grid;
}

.table-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap h3 {
  padding: 17px 18px 0;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.compact-stat-table {
  min-width: 360px;
}

th,
td {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  font-size: 0.9rem;
}

th {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.user-row td {
  background: rgba(255, 204, 106, 0.09);
}

.rating {
  color: #11161a;
  background: var(--gold-strong);
  border-radius: 4px;
  padding: 4px 7px;
  font-weight: 1000;
}

.player-cell {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  font-weight: 800;
}

.player-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--stroke);
}

.player-avatar-wrap {
  width: 32px;
  height: 32px;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.player-avatar-img {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  border: 1px solid var(--stroke);
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover td {
  background: rgba(255, 255, 255, 0.055);
}

.link-cell {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.link-cell:hover {
  color: var(--gold-strong);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 6, 9, 0.72);
  backdrop-filter: blur(8px);
}

.player-modal {
  position: relative;
  width: min(680px, 100%);
  border: 1px solid var(--stroke-strong);
  border-radius: 8px;
  background: #101820;
  box-shadow: var(--shadow);
  padding: 20px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  min-height: 38px;
  font-size: 1.3rem;
}

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

.player-hero .player-avatar-wrap,
.player-hero .player-avatar,
.player-hero .player-avatar-img {
  width: 70px;
  height: 70px;
}

.player-hero .player-avatar-img {
  position: absolute;
}

.player-hero h3 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.rating.big {
  padding: 8px 11px;
  font-size: 1.25rem;
}

.player-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.detail-stat {
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.detail-stat span,
.player-economy span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-stat strong {
  display: block;
  margin-top: 5px;
  font-size: 1.35rem;
}

.player-economy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.player-economy > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.player-economy strong {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}

.transfer-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 204, 106, 0.24);
  border-radius: 8px;
  background: rgba(255, 204, 106, 0.09);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.transfer-note strong {
  color: var(--gold-strong);
}

.formation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 18px;
}

.formation-panel {
  display: grid;
  gap: 16px;
}

.formation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pa-card {
  min-width: 104px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 204, 106, 0.32);
  background: rgba(255, 204, 106, 0.12);
  text-align: center;
}

.pa-card span {
  display: block;
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 1000;
}

.pa-card strong {
  display: block;
  font-size: 2rem;
  line-height: 1;
}

.tactical-pitch {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 70px, transparent 70px 140px),
    linear-gradient(180deg, #22653b, #164a2e);
}

.tactical-pitch::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 3px solid rgba(255, 255, 255, 0.42);
  border-radius: 4px;
}

.pitch-line.center {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  border-top: 3px solid rgba(255, 255, 255, 0.34);
}

.pitch-line.center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 118px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
}

.pitch-box {
  position: absolute;
  left: 31%;
  width: 38%;
  height: 120px;
  border: 3px solid rgba(255, 255, 255, 0.34);
}

.pitch-box.top {
  top: 20px;
  border-top: 0;
}

.pitch-box.bottom {
  bottom: 20px;
  border-bottom: 0;
}

/* Comunidad body. Navigation and global layout remain untouched. */
.community-page {
  display: grid;
  grid-template-columns: 270px minmax(520px, 1fr) 370px;
  gap: 14px;
  min-height: calc(100vh - 246px);
}

.community-sidebar,
.community-feed {
  display: grid;
  gap: 12px;
  align-content: start;
}

.community-card,
.community-composer,
.community-toolbar,
.community-post,
.community-hub-hero {
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at top left, rgba(0, 148, 255, 0.16), transparent 32%),
    linear-gradient(145deg, rgba(8, 30, 48, 0.92), rgba(4, 15, 26, 0.96)),
    rgba(3, 12, 22, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.22);
}

.community-card {
  padding: 14px;
}

.community-card h3,
.community-post h3 {
  margin: 0;
  color: var(--pcm-blue);
  text-transform: uppercase;
  font-size: 0.88rem;
}

.community-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr);
  align-items: center;
  gap: 18px;
  min-height: 132px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.18), rgba(196, 92, 255, 0.08) 48%, rgba(0, 224, 120, 0.04)),
    radial-gradient(circle at 75% 20%, rgba(0, 210, 255, 0.18), transparent 28%),
    rgba(3, 12, 22, 0.92);
}

.community-hub-hero h2 {
  margin: 5px 0 6px;
  color: #fff;
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  line-height: 0.96;
  text-transform: uppercase;
}

.community-hub-hero p {
  max-width: 640px;
  margin: 0;
  color: rgba(222, 238, 250, 0.82);
  font-weight: 800;
  line-height: 1.45;
}

.community-hub-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.community-hub-stats article {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 26, 45, 0.66);
}

.community-hub-stats span {
  color: #9eb8cb;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.community-hub-stats strong {
  color: #fff;
  font-size: 1.28rem;
  line-height: 1;
}

.community-card-head,
.community-toolbar,
.community-composer,
.community-post-actions,
.community-post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.community-category-list,
.community-club-list,
.community-trend-list,
.community-activity-list,
.community-user-list,
.community-post-list {
  display: grid;
  gap: 8px;
}

.community-category-list {
  margin-top: 12px;
}

.community-category,
.community-club-row,
.community-trend-row,
.community-user-row,
.community-activity-list div {
  display: grid;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  color: rgba(233, 244, 255, 0.84);
}

.community-category {
  grid-template-columns: 24px 1fr auto;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.community-category.active,
.community-category:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(0, 148, 255, 0.22), rgba(0, 148, 255, 0.05));
  box-shadow: inset 3px 0 0 var(--pcm-blue);
}

.community-category svg,
.community-toolbar svg,
.community-post-actions svg {
  width: 16px;
  height: 16px;
}

.community-category strong,
.community-club-row strong,
.community-user-row strong,
.community-trend-row strong {
  color: #f6fbff;
  font-size: 0.84rem;
}

.community-category em,
.community-club-row em,
.community-user-row em,
.community-trend-row em,
.community-activity-list span {
  color: rgba(197, 215, 231, 0.78);
  font-style: normal;
  font-size: 0.78rem;
}

.community-club-row {
  grid-template-columns: 18px 30px 1fr auto;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.community-club-row:last-child,
.community-user-row:last-child {
  border-bottom: 0;
}

.community-club-row i,
.community-user-row i,
.community-user-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #9ee9ff;
  font-style: normal;
  font-weight: 900;
  background: rgba(0, 148, 255, 0.14);
  border: 1px solid rgba(0, 210, 255, 0.24);
}

.community-club-crest,
.community-composer-crest {
  width: 30px;
  height: 30px;
}

.community-composer {
  grid-template-columns: 42px 1fr 108px;
  display: grid;
  padding: 12px;
  background:
    linear-gradient(145deg, rgba(0, 148, 255, 0.12), rgba(4, 15, 26, 0.96)),
    rgba(3, 12, 22, 0.92);
}

.community-composer-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 148, 255, 0.08);
  border: 1px solid rgba(0, 148, 255, 0.22);
}

.community-composer input {
  min-width: 0;
  height: 42px;
  border-radius: 6px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  color: #fff;
  background: rgba(7, 24, 39, 0.88);
  padding: 0 14px;
}

.community-toolbar {
  padding: 10px 12px;
}

.community-toolbar > div {
  display: flex;
  gap: 8px;
}

.community-post {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) 176px;
  gap: 14px;
  padding: 14px;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.community-post:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 42px rgba(0, 148, 255, 0.14),
    0 16px 38px rgba(0, 0, 0, 0.24);
}

.community-post-user {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-content: start;
}

.community-user-badge {
  position: relative;
  width: 48px;
  height: 48px;
  border-color: rgba(0, 148, 255, 0.62);
  box-shadow: 0 0 16px rgba(0, 148, 255, 0.22);
}

.community-user-badge em {
  position: absolute;
  right: -5px;
  bottom: -5px;
  padding: 2px 5px;
  border-radius: 5px;
  color: #fff;
  background: #104e9d;
  border: 1px solid rgba(255, 190, 47, 0.58);
  font-size: 0.62rem;
}

.community-post-user small,
.community-player-preview span,
.community-player-preview small {
  color: rgba(198, 217, 234, 0.82);
  font-size: 0.76rem;
}

.community-post-body {
  min-width: 0;
}

.community-post-meta {
  margin-bottom: 8px;
}

.community-post-meta em {
  color: rgba(191, 211, 229, 0.72);
  font-style: normal;
  font-size: 0.76rem;
}

.community-post-body h3 {
  color: #fff;
  font-size: 1.02rem;
  letter-spacing: 0;
  text-transform: none;
}

.community-post-body p {
  margin: 8px 0 14px;
  color: rgba(225, 237, 248, 0.86);
  font-size: 0.86rem;
  line-height: 1.45;
}

.community-tag {
  color: #24cfff;
  font-size: 0.76rem;
  font-weight: 800;
}

.community-tag.success { color: #1de078; }
.community-tag.warning { color: #ffc943; }
.community-tag.purple { color: #c45cff; }
.community-tag.info { color: #18b8ff; }

.community-post-actions {
  justify-content: flex-start;
  color: rgba(201, 221, 239, 0.78);
  font-size: 0.78rem;
}

.community-post-actions span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.community-post-image {
  align-self: center;
  margin: 0;
  overflow: hidden;
  border-radius: 7px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  aspect-ratio: 16 / 9;
}

.community-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-player-preview {
  align-self: center;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border-radius: 7px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  background: rgba(0, 54, 91, 0.42);
}

.community-player-preview .player-avatar-wrap,
.community-player-preview .player-avatar-img,
.community-player-preview .player-avatar {
  width: 52px;
  height: 52px;
}

.community-player-preview b {
  color: #fff;
  font-size: 1.1rem;
}

.community-player-preview small {
  grid-column: 2 / 4;
}

.community-trend-row {
  grid-template-columns: 24px 1fr;
  padding: 7px 0;
}

.community-modern-page .community-trend-row {
  grid-template-columns: 24px 30px 1fr;
}

.community-trend-row span {
  color: var(--pcm-gold);
  font-weight: 900;
}

.community-trend-row i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--pcm-blue);
  background: rgba(0, 148, 255, 0.1);
  border: 1px solid rgba(0, 148, 255, 0.18);
}

.community-trend-row i svg {
  width: 16px;
  height: 16px;
}

.community-live-chat {
  display: grid;
  gap: 12px;
  background:
    radial-gradient(circle at top right, rgba(0, 224, 120, 0.12), transparent 26%),
    linear-gradient(145deg, rgba(7, 31, 50, 0.94), rgba(3, 13, 24, 0.98));
}

.community-card-head small {
  display: block;
  margin-top: 4px;
  color: rgba(198, 217, 234, 0.72);
  font-weight: 800;
}

.community-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #00e078;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
  background: rgba(0, 224, 120, 0.1);
  border: 1px solid rgba(0, 224, 120, 0.24);
  box-shadow: 0 0 18px rgba(0, 224, 120, 0.1);
}

.community-chat-list {
  display: grid;
  gap: 9px;
}

.community-chat-message {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(0, 148, 255, 0.12);
  border-radius: 8px;
  background: rgba(0, 20, 34, 0.56);
}

.community-chat-message.own {
  border-color: rgba(255, 190, 47, 0.24);
  background: linear-gradient(145deg, rgba(255, 190, 47, 0.1), rgba(0, 20, 34, 0.62));
}

.community-chat-message i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-weight: 1000;
  background: rgba(0, 148, 255, 0.18);
  border: 1px solid rgba(0, 210, 255, 0.28);
}

.community-chat-message header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.community-chat-message header strong {
  color: #fff;
  font-size: 0.82rem;
}

.community-chat-message header span,
.community-chat-message small {
  color: rgba(192, 213, 230, 0.7);
  font-size: 0.68rem;
  font-weight: 800;
}

.community-chat-message p {
  margin: 5px 0 0;
  color: rgba(232, 244, 255, 0.9);
  font-size: 0.8rem;
  line-height: 1.35;
}

.community-chat-input {
  display: grid;
  grid-template-columns: 1fr 46px;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.community-chat-input input {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  background: rgba(4, 16, 28, 0.86);
  padding: 0 12px;
}

.community-chat-input button {
  min-width: 46px;
  width: 46px;
  height: 42px;
  padding: 0;
}

.community-chat-input button svg {
  width: 18px;
  height: 18px;
}

.community-activity-list {
  margin-top: 10px;
}

.community-activity-list div {
  grid-template-columns: 1fr auto;
}

.community-activity-list strong {
  color: #dceeff;
}

.community-user-row {
  grid-template-columns: 18px 34px 1fr auto;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.community-user-row b {
  color: rgba(210, 230, 246, 0.82);
  font-size: 0.78rem;
}

@media (max-width: 1180px) {
  .community-page {
    grid-template-columns: 1fr;
  }

  .community-hub-hero {
    grid-template-columns: 1fr;
  }

  .community-post {
    grid-template-columns: 1fr;
  }

  .community-sidebar {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.formation-slot {
  position: absolute;
  width: 126px;
  min-height: 142px;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 204, 106, 0.34);
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 204, 106, 0.18), transparent 34%),
    linear-gradient(180deg, #142019, #070d0d 70%);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42);
}

.formation-slot:hover {
  border-color: var(--gold-strong);
  transform: translate(-50%, -50%) translateY(-2px);
}

.formation-slot.active {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(62, 208, 143, 0.16), 0 16px 38px rgba(0, 0, 0, 0.42);
}

.formation-slot.bad-fit {
  border-color: rgba(240, 109, 109, 0.72);
}

.slot-label {
  color: var(--gold-strong);
  font-size: 0.7rem;
  font-weight: 1000;
}

.slot-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gold-strong);
  font-size: 0.72rem;
  font-weight: 1000;
}

.formation-slot strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  text-transform: uppercase;
}

.formation-slot em,
.slot-top em {
  color: #11161a;
  background: var(--gold-strong);
  border-radius: 4px;
  padding: 4px 7px;
  font-style: normal;
  font-weight: 1000;
  font-size: 0.8rem;
}

.formation-slot .player-avatar-wrap,
.formation-slot .player-avatar,
.formation-slot .player-avatar-img {
  width: 64px;
  height: 64px;
}

.formation-slot .player-avatar-img,
.formation-slot .player-avatar {
  border-width: 2px;
  border-color: rgba(255, 204, 106, 0.55);
}

.formation-player-list {
  max-height: 560px;
  overflow: auto;
  display: grid;
  gap: 8px;
}

.formation-player,
.selected-player {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}

.formation-player.active {
  border-color: var(--gold-strong);
  background: rgba(255, 204, 106, 0.12);
}

.formation-player small {
  color: var(--green);
  font-weight: 900;
}

.selected-player {
  grid-template-columns: minmax(0, 1fr) auto;
}

.match-screen {
  display: grid;
  gap: 18px;
}

.match-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr);
  gap: 18px;
}

.match-board,
.match-scoreboard {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(62, 208, 143, 0.12), transparent 45%),
    var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.match-team h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
}

.match-center {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.match-center strong {
  font-size: 3.4rem;
}

.prematch-pa {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
}

.prematch-pa span:nth-child(2) {
  color: var(--gold-strong);
  font-size: 1rem;
}

.prematch-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.prematch-card {
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
}

.prematch-card h3 {
  margin: 0 0 12px;
  text-transform: uppercase;
}

.buff-options {
  display: grid;
  gap: 9px;
}

.buff-option {
  min-height: 94px;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
}

.buff-option.active {
  border-color: var(--gold-strong);
  background: rgba(255, 204, 106, 0.13);
}

.buff-option strong {
  text-transform: uppercase;
}

.buff-option span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.buff-option em {
  color: var(--green);
  font-style: normal;
  font-weight: 900;
}

.match-scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  text-align: center;
}

.match-scoreboard strong {
  display: block;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.match-scoreboard span {
  color: var(--muted);
  font-weight: 900;
}

.live-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.live-score span {
  min-width: 68px;
  color: var(--text);
  font-size: 4rem;
  font-weight: 1000;
  line-height: 1;
}

.live-score em {
  color: var(--gold-strong);
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 1000;
}

.match-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.match-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--gold-strong));
  transition: width 0.4s ease;
}

.match-minute {
  color: var(--gold-strong);
  font-size: 1.1rem;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
}

.match-plan {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
}

.match-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: 18px;
}

.match-xi {
  display: grid;
  gap: 8px;
}

.match-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.match-player span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.match-player em {
  color: var(--muted);
  font-style: normal;
  font-weight: 900;
}

.match-player strong {
  color: #101419;
  background: var(--gold-strong);
  border-radius: 4px;
  padding: 3px 6px;
}

.event-feed {
  align-content: start;
}

.event-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.event-row span {
  color: var(--gold-strong);
  font-weight: 1000;
}

.event-row strong,
.event-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-row em {
  grid-column: 2;
  color: var(--muted);
  font-style: normal;
}

.goal-video-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(10px);
}

.goal-video-card {
  width: min(980px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 204, 106, 0.36);
  border-radius: 8px;
  background: #06090d;
  box-shadow: var(--shadow);
}

.goal-video-card video {
  width: 100%;
  max-height: 68vh;
  display: block;
  background: #000;
}

.goal-video-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-video-caption strong {
  text-transform: uppercase;
}

.goal-video-caption span {
  color: var(--gold-strong);
  font-weight: 900;
}

.goal-video-card .secondary-btn {
  width: calc(100% - 32px);
  margin: 0 16px 16px;
}

.president-cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.president-cinematic-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  max-height: 100vh;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

.president-cinematic-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
  opacity: 1;
  transition: opacity 220ms ease;
}

.president-cinematic-video.is-loading {
  opacity: 0;
}

.president-cinematic-skip {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  z-index: 262;
  min-width: 104px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 245, 225, 0.24);
  border-radius: 8px;
  color: #f8efe1;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.president-cinematic-skip:hover {
  border-color: rgba(243, 198, 111, 0.62);
  color: #f3c66f;
}

.president-cinematic-options {
  position: absolute;
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(18px, 3vw, 42px);
  z-index: 261;
  width: min(360px, 36vw);
  display: grid;
  gap: 10px;
}

.president-cinematic-choice {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 245, 225, 0.16);
  border-radius: 8px;
  color: #f8efe1;
  text-align: left;
  background:
    linear-gradient(145deg, rgba(18, 15, 10, 0.72), rgba(3, 4, 5, 0.78)),
    rgba(0, 0, 0, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.president-cinematic-choice.available:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 198, 111, 0.58);
  background:
    linear-gradient(145deg, rgba(64, 43, 18, 0.76), rgba(12, 9, 6, 0.82)),
    rgba(0, 0, 0, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 20px 42px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(216, 169, 90, 0.18);
}

.president-cinematic-choice:disabled {
  cursor: not-allowed;
}

.president-cinematic-choice.locked {
  opacity: 0.58;
  filter: grayscale(0.35);
}

.president-cinematic-choice span {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.president-cinematic-choice strong {
  color: #fff;
  font-size: clamp(0.9rem, 1vw, 1.08rem);
  line-height: 1.05;
}

.president-cinematic-choice em {
  color: rgba(248, 239, 225, 0.68);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
}

.president-cinematic-fallback {
  position: absolute;
  inset: auto 24px 24px;
  z-index: 261;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid rgba(243, 198, 111, 0.22);
  border-radius: 8px;
  color: #f8efe1;
  background: rgba(8, 8, 7, 0.72);
  backdrop-filter: blur(12px);
}

.press-cinematic-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 28%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 28%, rgba(0, 0, 0, 0.28) 100%);
}

.press-question-subtitle {
  position: absolute;
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 30vw, 460px);
  bottom: clamp(170px, 22vh, 250px);
  z-index: 261;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-left: 3px solid rgba(243, 198, 111, 0.86);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.3)),
    rgba(0, 0, 0, 0.34);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(8px);
}

.press-question-subtitle span {
  color: #f3c66f;
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.press-question-subtitle strong {
  max-width: 960px;
  font-size: clamp(1.05rem, 1.8vw, 1.7rem);
  line-height: 1.15;
}

.coach-meeting-question-subtitle {
  position: absolute;
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 31vw, 510px);
  bottom: clamp(168px, 22vh, 252px);
  z-index: 261;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-left: 3px solid rgba(243, 198, 111, 0.88);
  color: #fff;
  background:
    radial-gradient(circle at 0% 50%, rgba(243, 198, 111, 0.18), transparent 34%),
    linear-gradient(90deg, rgba(8, 7, 5, 0.84), rgba(0, 0, 0, 0.34)),
    rgba(0, 0, 0, 0.36);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.coach-meeting-question-subtitle span,
.coach-meeting-question-subtitle em {
  color: #f3c66f;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-meeting-question-subtitle strong {
  max-width: 960px;
  font-size: clamp(1rem, 1.55vw, 1.48rem);
  line-height: 1.18;
}

.assembly-question-subtitle {
  position: absolute;
  left: clamp(18px, 3vw, 48px);
  right: clamp(18px, 31vw, 500px);
  bottom: clamp(168px, 22vh, 252px);
  z-index: 261;
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-left: 3px solid rgba(255, 111, 99, 0.9);
  color: #fff;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 111, 99, 0.22), transparent 34%),
    linear-gradient(90deg, rgba(20, 8, 4, 0.84), rgba(0, 0, 0, 0.34)),
    rgba(0, 0, 0, 0.36);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
}

.assembly-question-subtitle span,
.assembly-question-subtitle em {
  color: #f3c66f;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.assembly-question-subtitle strong {
  max-width: 960px;
  font-size: clamp(1rem, 1.55vw, 1.48rem);
  line-height: 1.18;
}

.assembly-cinematic-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.03), transparent 28%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(90deg, rgba(34, 5, 3, 0.34), transparent 30%, rgba(0, 0, 0, 0.32) 100%);
}

.assembly-cinematic-options {
  width: min(430px, 39vw);
}

.coach-meeting-options {
  width: min(430px, 39vw);
}

.coach-meeting-president-subtitle {
  border-bottom-color: rgba(243, 198, 111, 0.74);
}

.coach-meeting-result-panel {
  position: absolute;
  right: clamp(18px, 4vw, 58px);
  bottom: clamp(28px, 5vh, 54px);
  z-index: 262;
  width: min(430px, 38vw);
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(243, 198, 111, 0.32);
  border-radius: 8px;
  color: #fff6e8;
  background:
    radial-gradient(circle at 12% 0%, rgba(243, 198, 111, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(12, 11, 9, 0.84), rgba(0, 0, 0, 0.68));
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42), 0 0 26px rgba(243, 198, 111, 0.14);
  backdrop-filter: blur(12px);
}

.coach-meeting-result-panel > span {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-meeting-result-panel > strong {
  font-size: clamp(1.05rem, 1.4vw, 1.32rem);
  line-height: 1.05;
}

.coach-meeting-result-bars {
  display: grid;
  gap: 10px;
}

.coach-meeting-result-bars article {
  display: grid;
  gap: 7px;
}

.coach-meeting-result-bars header {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
  color: rgba(255, 248, 235, 0.9);
  font-size: 0.78rem;
  font-weight: 900;
}

.coach-meeting-result-bars svg {
  width: 16px;
  height: 16px;
  color: #f3c66f;
}

.coach-meeting-result-bars em {
  color: #71f2a8;
  font-style: normal;
  font-weight: 1000;
}

.coach-meeting-result-bars article.negative em {
  color: #ff766a;
}

.coach-meeting-result-bars i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.coach-meeting-result-bars i span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1fe07c, #f3c66f);
  box-shadow: 0 0 16px rgba(31, 224, 124, 0.34);
}

.coach-meeting-result-bars article.negative i span {
  background: linear-gradient(90deg, #ff4d3d, #f3a36f);
  box-shadow: 0 0 16px rgba(255, 77, 61, 0.34);
}

.assembly-president-subtitle {
  border-bottom-color: rgba(255, 111, 99, 0.74);
}

.press-cinematic-options {
  width: min(410px, 38vw);
}

.press-choice-effects {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.press-choice-effects span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(255, 245, 225, 0.12);
  border-radius: 999px;
  color: #f8efe1;
  background: rgba(0, 0, 0, 0.28);
}

.press-choice-effects span.positive {
  border-color: rgba(44, 228, 139, 0.34);
  color: #9ff7c5;
}

.press-choice-effects span.negative {
  border-color: rgba(255, 82, 82, 0.38);
  color: #ff9d9d;
}

.press-choice-effects svg {
  width: 14px;
  height: 14px;
}

.press-choice-effects b {
  font-size: 0.68rem;
  font-weight: 1000;
}

.press-president-subtitle {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: clamp(26px, 5vh, 58px);
  z-index: 262;
  width: min(980px, calc(100% - 48px));
  display: grid;
  gap: 7px;
  padding: 15px 20px 17px;
  border: 1px solid rgba(255, 245, 225, 0.16);
  border-bottom: 3px solid rgba(243, 198, 111, 0.72);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.76)),
    rgba(0, 0, 0, 0.52);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
}

.press-president-subtitle span {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.press-president-subtitle strong {
  font-size: clamp(1.08rem, 2vw, 1.8rem);
  line-height: 1.18;
}

@media (max-width: 760px), (max-height: 560px) {
  .president-cinematic-options {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .president-cinematic-choice {
    padding: 9px 10px;
  }

  .president-cinematic-choice em {
    display: none;
  }

  .press-question-subtitle {
    left: 12px;
    right: 12px;
    bottom: 178px;
    padding: 12px;
  }

  .press-president-subtitle {
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 10px 12px;
  }

  .press-choice-effects {
    display: none;
  }
}

@media (max-width: 880px) {
  .presidential-customize-btn {
    left: auto;
    right: auto;
    transform: none;
  }

  .presidential-customize-grid {
    grid-template-columns: 1fr;
  }

  .presidential-customize-option {
    min-height: 220px;
  }
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.league-side {
  display: grid;
  gap: 18px;
  align-content: start;
}

.league-clean-layout {
  align-content: start;
}

.league-standings-panel {
  min-height: 0;
}

.league-action-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.league-detail-btn {
  min-height: 44px;
  justify-content: center;
  text-align: center;
  white-space: normal;
}

.league-detail-btn.active {
  border-color: rgba(255, 209, 102, 0.72);
  color: #05070a;
  background: linear-gradient(180deg, #ffe572, #f1b937);
  box-shadow: 0 14px 26px rgba(241, 185, 55, 0.18);
}

.league-detail-panel {
  min-height: 0;
}

.league-prizes-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.ranking-tabs-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(216, 169, 90, 0.18);
  border-radius: 8px;
  background: rgba(3, 5, 7, 0.72);
}

.ranking-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ranking-mode-tabs button {
  min-height: 40px;
  justify-content: center;
  text-align: center;
}

.ranking-mode-tabs button.active {
  color: #05070a;
  border-color: rgba(255, 209, 102, 0.72);
  background: linear-gradient(180deg, #ffe572, #f1b937);
}

.ranking-tabs-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.col-4 {
  grid-column: span 4;
}

.col-5 {
  grid-column: span 5;
}

.col-7 {
  grid-column: span 7;
}

.col-8 {
  grid-column: span 8;
}

.col-12 {
  grid-column: span 12;
}

.progress-list {
  display: grid;
  gap: 13px;
}

.progress-row {
  display: grid;
  gap: 7px;
}

.progress-top {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

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

.progress span {
  display: block;
  height: 100%;
  width: var(--v);
  background: linear-gradient(90deg, var(--blue), var(--teal));
}

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

.tile {
  min-height: 92px;
  padding: 13px;
  border-radius: 8px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.055);
}

.tile strong {
  display: block;
  font-size: 1.45rem;
}

.tile span {
  color: var(--muted);
  font-size: 0.8rem;
}

.ticket-pricing {
  display: grid;
  gap: 14px;
}

.stadium-screen {
  display: grid;
  grid-template-columns: minmax(560px, 1.35fr) minmax(340px, 0.65fr);
  grid-template-areas:
    "map map"
    "hero ticket"
    "works works"
    "facilities facilities";
  gap: 12px;
}

.stadium-map-panel,
.stadium-hero-panel,
.stadium-ticket-panel,
.stadium-works-panel,
.stadium-facilities-panel {
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7, 26, 43, 0.9), rgba(3, 13, 23, 0.96)),
    rgba(3, 12, 22, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.stadium-map-panel {
  grid-area: map;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
  gap: 14px;
  padding: 16px;
}

.stadium-map-copy {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.stadium-map-copy h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: clamp(1.35rem, 1.8vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
}

.stadium-map-copy p {
  max-width: 760px;
  margin: 0;
  color: #b7c6d4;
  font-weight: 800;
  line-height: 1.35;
}

.stadium-map-stage {
  position: relative;
  min-width: 0;
  aspect-ratio: 1492 / 1054;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 10px;
  background: #07111d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.stadium-map-base,
.stadium-map-layer {
  width: 100%;
  height: 100%;
  aspect-ratio: 1492 / 1054;
  display: block;
  object-fit: contain;
}

.stadium-map-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  aspect-ratio: auto;
  pointer-events: none;
}

.stadium-map-card {
  position: absolute;
  z-index: 3;
  right: 12.5%;
  bottom: 32.5%;
  cursor: pointer;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 172px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 190, 47, 0.38);
  border-radius: 8px;
  color: #fff;
  background: rgba(2, 10, 18, 0.82);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(8px);
}

.stadium-map-card.selected {
  border-color: rgba(255, 190, 47, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 190, 47, 0.2),
    0 16px 38px rgba(0, 0, 0, 0.36);
}

.stadium-map-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--pcm-gold);
  background: rgba(255, 190, 47, 0.12);
}

.stadium-map-card svg {
  width: 20px;
  height: 20px;
}

.stadium-map-card strong,
.stadium-map-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stadium-map-card strong {
  font-size: 0.78rem;
  text-transform: uppercase;
}

.stadium-map-card em {
  margin-top: 2px;
  color: #aebdcc;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.facility-map-card {
  left: var(--map-x, 50%);
  top: var(--map-y, 50%);
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 2px;
  border-color: rgba(0, 148, 255, 0.34);
  border-radius: 10px;
  background: rgba(2, 10, 18, 0.68);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
}

.facility-map-card.selected {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 0 0 2px rgba(255, 190, 47, 0.54),
    0 10px 24px rgba(0, 0, 0, 0.36);
}

.facility-map-card::after {
  content: attr(data-level);
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: #fff;
  background: rgba(2, 10, 18, 0.92);
  font-size: 0.58rem;
  font-weight: 1000;
  line-height: 1;
}

.facility-map-card > div {
  position: absolute;
  left: auto;
  right: 46px;
  top: 50%;
  z-index: 5;
  min-width: 112px;
  max-width: 168px;
  padding: 5px 8px;
  border: 1px solid rgba(0, 148, 255, 0.16);
  border-radius: 7px;
  background: rgba(2, 10, 18, 0.58);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.24);
  opacity: 0.72;
  pointer-events: none;
  text-align: right;
  transform: translateY(-50%);
  transition: opacity 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
  visibility: visible;
}

.facility-map-card:hover > div,
.facility-map-card:focus-visible > div,
.facility-map-card.selected > div {
  border-color: rgba(255, 190, 47, 0.38);
  background: rgba(2, 10, 18, 0.78);
  opacity: 0.96;
}

.facility-map-card.tone-gold {
  border-color: rgba(255, 190, 47, 0.5);
}

.facility-map-card.tone-purple {
  border-color: rgba(166, 91, 255, 0.48);
}

.facility-map-card.tone-green {
  border-color: rgba(0, 232, 134, 0.38);
}

.facility-map-card.tone-blue {
  border-color: rgba(0, 148, 255, 0.42);
}

.facility-map-card.tone-gold > span {
  color: var(--pcm-gold);
  background: rgba(255, 190, 47, 0.14);
}

.facility-map-card.tone-purple > span {
  color: #b56cff;
  background: rgba(166, 91, 255, 0.16);
}

.facility-map-card.tone-green > span {
  color: #00e886;
  background: rgba(0, 232, 134, 0.13);
}

.facility-map-card.tone-blue > span {
  color: #39a8ff;
  background: rgba(0, 148, 255, 0.14);
}

.facility-map-card.working em {
  color: var(--pcm-gold);
}

.stadium-map-upgrade {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 190, 47, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(255, 190, 47, 0.09), transparent 58%),
    rgba(1, 10, 18, 0.72);
}

.stadium-map-upgrade p {
  margin: -6px 0 0;
  color: #b7c6d4;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.35;
}

.stadium-map-metrics {
  display: grid;
  gap: 8px;
}

.stadium-map-metrics article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.stadium-map-metrics span {
  color: #9fb4c6;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.stadium-map-metrics strong {
  color: #fff;
  font-size: 0.88rem;
  text-align: right;
}

.stadium-map-upgrade-actions {
  align-items: stretch;
  flex-direction: column;
}

.stadium-map-upgrade-actions .primary-btn,
.stadium-map-upgrade-actions .secondary-btn {
  min-height: 42px;
}

.facilities-map-screen {
  min-height: calc(100svh - 226px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 148, 255, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(2, 12, 22, 0.82), rgba(1, 7, 14, 0.96));
}

.facilities-map-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 0;
}

.facilities-map-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 2vw, 2.35rem);
  line-height: 1;
  text-transform: uppercase;
}

.facilities-map-header p {
  max-width: 560px;
  margin: 8px 0 0;
  color: #bfccd8;
  font-weight: 800;
  line-height: 1.35;
}

.facilities-map-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.62fr) minmax(620px, 2.35fr) minmax(260px, 0.85fr);
  align-items: start;
  gap: 12px;
  padding: 0 18px 18px;
}

.facilities-summary-panel,
.facilities-detail-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background: rgba(2, 12, 23, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.facilities-summary-panel article,
.facilities-detail-metrics article {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.facilities-summary-panel article:last-child,
.facilities-detail-metrics article:last-child {
  border-bottom: 0;
}

.facilities-summary-panel span,
.facilities-detail-panel span,
.facilities-detail-metrics span {
  color: #9fb1c4;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.facilities-summary-panel strong,
.facilities-detail-panel strong,
.facilities-detail-metrics strong {
  color: #fff;
  font-size: 1rem;
  line-height: 1.05;
}

.facilities-map-screen .stadium-map-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.facilities-map-screen .stadium-map-stage {
  width: min(100%, 960px);
  max-height: calc(100svh - 310px);
  border-color: rgba(0, 148, 255, 0.12);
  border-radius: 8px;
  background: #06101a;
}

.facilities-map-screen .stadium-map-base,
.facilities-map-screen .stadium-map-layer {
  object-fit: contain;
}

.facilities-map-screen .stadium-map-layer {
  height: 100%;
}

.facilities-map-screen .official-store-card {
  left: 79.5%;
  top: 50.2%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  min-width: 192px;
}

.facilities-map-screen .stadium-main-card {
  left: 46.5%;
  top: 43%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.facilities-map-screen .official-store-card:disabled {
  cursor: default;
  opacity: 0.92;
}

.facilities-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.facilities-detail-head strong {
  display: block;
  margin-top: 4px;
  color: var(--pcm-gold);
  text-align: right;
}

.facilities-detail-image {
  overflow: hidden;
  border: 1px solid rgba(166, 91, 255, 0.36);
  border-radius: 8px;
  background: #09121f;
}

.facilities-detail-image img,
.facilities-detail-image svg {
  width: 100%;
  aspect-ratio: 16 / 8.8;
  display: block;
  object-fit: cover;
}

.facilities-detail-panel p {
  margin: 0;
  color: #b7c6d4;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.38;
}

.facilities-detail-section-title {
  margin: 4px 0 0;
  color: rgba(226, 236, 246, 0.82);
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.facilities-detail-metrics {
  display: grid;
  gap: 4px;
}

.facilities-detail-metrics strong em {
  margin-left: 8px;
  color: #00e886;
  font-size: 0.78rem;
  font-style: normal;
}

.facilities-detail-upgrade {
  width: 100%;
  min-height: 46px;
}

.facility-map-mini-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1492 / 1054;
  overflow: hidden;
  background: #07111d;
}

.facility-map-mini-zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230%;
  height: 230%;
  transform: translate(calc(-1 * var(--preview-x, 50%)), calc(-1 * var(--preview-y, 50%)));
}

.facility-map-mini-preview .stadium-map-base,
.facility-map-mini-preview .stadium-map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

.facility-map-mini-preview .stadium-map-layer {
  z-index: 2;
}

.stadium-hero-panel {
  position: relative;
  grid-area: hero;
  min-height: 480px;
}

.stadium-hero-panel .stadium-visual {
  height: 480px;
  min-height: 480px;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.stadium-hero-panel .stadium-visual img,
.stadium-hero-panel .stadium-visual svg {
  height: 100%;
  min-height: 480px;
  aspect-ratio: auto;
  object-position: center 44%;
}

.stadium-hero-overlay {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 22px 18px;
  background:
    linear-gradient(180deg, transparent, rgba(1, 8, 15, 0.86) 28%, rgba(1, 8, 15, 0.98)),
    linear-gradient(90deg, rgba(0, 148, 255, 0.12), transparent 62%);
}

.stadium-hero-overlay h2 {
  max-width: 760px;
  margin: 4px 0 6px;
  color: #fff;
  font-size: clamp(1.55rem, 2.1vw, 2.45rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.stadium-hero-overlay p {
  max-width: 680px;
  margin: 0;
  color: #c7d5df;
  font-weight: 800;
  line-height: 1.35;
}

.stadium-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.stadium-hero-stats div {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(0, 17, 31, 0.74);
}

.stadium-hero-stats span,
.stadium-panel-head span {
  color: #aebdcc;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.stadium-hero-stats strong {
  color: #fff;
  font-size: 1.06rem;
  line-height: 1;
}

.stadium-ticket-panel {
  grid-area: ticket;
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-height: 0;
}

.stadium-ticket-panel .ticket-pricing {
  display: grid;
  gap: 12px;
}

.stadium-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.stadium-panel-head h3 {
  margin: 3px 0 0;
  color: #fff;
  text-transform: uppercase;
}

.stadium-panel-head > strong {
  color: var(--pcm-gold);
  font-size: 1.18rem;
  text-align: right;
}

.ticket-price-readout {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(255, 204, 106, 0.22);
  border-radius: 8px;
  background: rgba(255, 204, 106, 0.08);
}

.ticket-price-readout strong {
  color: var(--gold-strong);
  font-size: 1.65rem;
}

.ticket-price-readout span,
.ticket-note {
  color: var(--muted);
  line-height: 1.45;
}

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

.ticket-metric-grid article {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 148, 255, 0.09), rgba(0, 224, 120, 0.045)),
    rgba(255, 255, 255, 0.035);
}

.ticket-metric-grid span {
  color: #9fb4c6;
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1.05;
  text-transform: uppercase;
}

.ticket-metric-grid strong {
  color: #fff;
  font-size: 1.02rem;
  line-height: 1;
}

.ticket-pricing input[type="range"] {
  width: 100%;
  accent-color: var(--gold-strong);
}

.ticket-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stadium-visual {
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: #0b1015;
}

.stadium-ticket-upgrade {
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stadium-ticket-upgrade .muted,
.stadium-ticket-upgrade .cooldown {
  text-align: left;
}

.stadium-ticket-upgrade .primary-btn {
  min-width: 156px;
  min-height: 48px;
  padding: 0 24px;
  color: #11161a;
  font-size: 1.02rem;
  font-weight: 1000;
}

.stadium-works-panel {
  grid-area: works;
  padding: 16px;
}

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

.stadium-progress-grid article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(0, 148, 255, 0.07), rgba(0, 224, 120, 0.035)),
    rgba(255, 255, 255, 0.035);
}

.stadium-progress-grid article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--pcm-gold);
  background: rgba(255, 190, 47, 0.1);
}

.stadium-progress-grid svg {
  width: 20px;
  height: 20px;
}

.stadium-progress-grid div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stadium-progress-grid strong {
  color: #fff;
}

.stadium-progress-grid em {
  color: #00e078;
  font-style: normal;
  font-weight: 1000;
}

.stadium-progress-grid i {
  grid-column: 2;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.stadium-progress-grid b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0094ff, #00e078);
}

.stadium-facilities-panel {
  grid-area: facilities;
  padding: 16px;
}

.stadium-visual svg,
.stadium-visual img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

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

.stadium-facility-grid {
  grid-template-columns: repeat(7, minmax(125px, 1fr));
}

.stadium-screen .facility-card {
  min-height: 190px;
  gap: 10px;
  padding: 12px;
  border-color: rgba(0, 148, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.72), rgba(4, 15, 26, 0.94)),
    rgba(255, 255, 255, 0.035);
}

.stadium-screen .facility-image {
  aspect-ratio: 16 / 9.6;
  margin-top: 9px;
  border-color: rgba(255, 190, 47, 0.12);
  object-position: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.stadium-screen .facility-actions {
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.stadium-screen .facility-actions .muted,
.stadium-screen .facility-actions .cooldown {
  font-size: 0.72rem;
  line-height: 1.25;
}

.stadium-screen .facility-actions .secondary-btn,
.stadium-screen .facility-actions .primary-btn,
.stadium-screen .facility-card > .secondary-btn {
  min-height: 34px;
  padding: 0 10px;
}

.facility-card {
  min-height: 224px;
  display: grid;
  align-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--stroke);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.052);
}

.facility-image {
  width: 100%;
  aspect-ratio: 16 / 5.4;
  object-fit: cover;
  display: block;
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: #0b1015;
}

.facility-card.locked {
  opacity: 0.58;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.045),
    rgba(255, 255, 255, 0.045) 10px,
    rgba(255, 255, 255, 0.025) 10px,
    rgba(255, 255, 255, 0.025) 20px
  );
}

.facility-top,
.facility-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.facility-top strong {
  text-transform: uppercase;
}

.facility-actions {
  align-items: flex-end;
}

.cooldown {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gold-strong);
  font-size: 0.84rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.timer-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold-strong);
  box-shadow: 0 0 0 0 rgba(255, 204, 106, 0.55);
  animation: timerPulse 1.2s ease-out infinite;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.trophy-row,
.fixture-row,
.news-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fixture-row.user-fixture {
  background: rgba(255, 204, 106, 0.07);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
}

.round-list {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.round-card {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.round-card summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
}

.round-fixtures {
  padding: 0 13px 10px;
}

.trophy-row:first-child,
.fixture-row:first-child,
.news-row:first-child {
  border-top: 0;
}

.badge {
  color: #11161a;
  background: var(--gold-strong);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 1000;
}

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

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

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 13px 15px;
  border-radius: 8px;
  background: #111820;
  border: 1px solid var(--stroke-strong);
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateY(22px);
  opacity: 0;
  transition: 0.2s ease;
  pointer-events: none;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-stack {
  position: fixed;
  top: auto;
  right: calc(18px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 120;
  width: min(430px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.game-toast {
  --toast-accent: #0c9cff;
  --toast-glow: rgba(12, 156, 255, 0.34);
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 16px 17px 17px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--toast-accent) 48%, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  color: #f7fbff;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--toast-accent) 14%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(7, 24, 40, 0.96), rgba(3, 12, 22, 0.96));
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5), 0 0 30px var(--toast-glow);
  transform: translateX(30px) scale(0.98);
  opacity: 0;
  transition: opacity 250ms ease, transform 250ms ease;
  pointer-events: auto;
}

.game-toast.show {
  transform: translateX(0) scale(1);
  opacity: 1;
}

.game-toast.leaving {
  transform: translateX(22px) scale(0.98);
  opacity: 0;
}

.game-toast.success {
  --toast-accent: #19e57b;
  --toast-glow: rgba(25, 229, 123, 0.3);
}

.game-toast.info {
  --toast-accent: #0c9cff;
  --toast-glow: rgba(12, 156, 255, 0.34);
}

.game-toast.warning {
  --toast-accent: #ffc84a;
  --toast-glow: rgba(255, 200, 74, 0.28);
}

.game-toast.error {
  --toast-accent: #ff5a66;
  --toast-glow: rgba(255, 90, 102, 0.3);
}

.game-toast-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--toast-accent);
  background: color-mix(in srgb, var(--toast-accent) 13%, rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--toast-accent) 42%, transparent);
}

.game-toast-icon svg {
  width: 25px;
  height: 25px;
}

.game-toast-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.game-toast-copy strong {
  color: #fff;
  font-size: 0.98rem;
  font-weight: 1000;
  line-height: 1.1;
}

.game-toast-copy span {
  color: #cdd9e4;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

.game-toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--toast-accent), color-mix(in srgb, var(--toast-accent) 35%, transparent));
  transform-origin: left center;
  animation: toastLife linear forwards;
}

.game-toast.paused .game-toast-progress {
  animation-play-state: paused;
}

@keyframes toastLife {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (max-width: 640px) {
  .toast-stack {
    top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    right: 12px;
    left: 12px;
    width: auto;
  }

  .game-toast {
    min-height: 68px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 11px 12px 13px;
    border-radius: 9px;
  }

  .game-toast-icon {
    width: 34px;
    height: 34px;
  }
}

.day-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(243, 198, 111, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(4, 6, 8, 0.98), rgba(10, 8, 5, 0.96));
  backdrop-filter: none;
  animation: dayFade 1.25s ease both;
  pointer-events: none;
}

.day-card {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid rgba(255, 204, 106, 0.28);
  border-radius: 8px;
  background: #101820;
  box-shadow: var(--shadow);
  text-align: center;
  animation: dayRise 1.1s cubic-bezier(.2, .9, .2, 1) both;
}

.calendar-flip {
  min-height: 82px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 8px;
  color: #12161a;
  background: linear-gradient(135deg, var(--gold-strong), #d69532);
  font-size: 2rem;
  font-weight: 1000;
  transform-origin: top center;
  animation: calendarFlip 0.78s ease both;
}

.day-card strong {
  display: block;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.day-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

@keyframes dayFade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dayRise {
  0% { transform: translateY(22px) scale(.96); opacity: 0; }
  20% { transform: translateY(0) scale(1); opacity: 1; }
  84% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-10px) scale(.98); opacity: 0; }
}

@keyframes calendarFlip {
  0% { transform: rotateX(82deg); filter: brightness(.65); }
  60% { transform: rotateX(-8deg); }
  100% { transform: rotateX(0); filter: brightness(1); }
}

@keyframes presidentIntroRise {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes presidentRing {
  0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
  50% { transform: rotate(180deg) scale(1.04); filter: brightness(1.15); }
}

@keyframes presidentAvatarReveal {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes premiumFrameGlow {
  0%, 100% { filter: saturate(1) brightness(1); background-position: 0% 50%; }
  50% { filter: saturate(1.18) brightness(1.08); background-position: 100% 50%; }
}

@keyframes premiumFrameDrift {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(8deg) brightness(1.08); }
}

@keyframes premiumFramePulse {
  0%, 100% { filter: brightness(1) contrast(1); }
  50% { filter: brightness(1.12) contrast(1.05); }
}

@keyframes premiumPreviewFloat {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-3px); filter: brightness(1.08); }
}

@keyframes heroFrameAtmosphere {
  0%, 100% { background-position: 0% 50%; opacity: 0.92; }
  50% { background-position: 100% 50%; opacity: 1; }
}

@keyframes heroFrameSheen {
  from { background-position: -160% 0; opacity: 0.58; }
  45% { opacity: 0.82; }
  to { background-position: 160% 0; opacity: 0.58; }
}

@keyframes bannerNacimientoDrift {
  0%, 100% { background-position: center, center, 48% 10%; }
  50% { background-position: center, center, 55% 7%; }
}

@keyframes storeBannerNacimientoDrift {
  0%, 100% { background-position: center, 48% 0%; }
  50% { background-position: center, 54% 2%; }
}

@keyframes sidebarBannerNacimientoDrift {
  0%, 100% { background-position: center, center, 34% 24%; }
  50% { background-position: center, center, 41% 20%; }
}

@keyframes founderSweep {
  from { transform: rotate(0deg); opacity: 0.58; }
  50% { opacity: 0.9; }
  to { transform: rotate(360deg); opacity: 0.58; }
}

@keyframes seasonOrbit {
  from { transform: rotate(0deg) scale(1); opacity: 0.62; }
  50% { transform: rotate(180deg) scale(1.03); opacity: 0.96; }
  to { transform: rotate(360deg) scale(1); opacity: 0.62; }
}

@keyframes goldCrownSweep {
  from { transform: rotate(0deg); opacity: 0.66; filter: brightness(1); }
  45% { opacity: 1; filter: brightness(1.22); }
  to { transform: rotate(360deg); opacity: 0.66; filter: brightness(1); }
}

@keyframes timerPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 204, 106, 0.55); }
  100% { box-shadow: 0 0 0 8px rgba(255, 204, 106, 0); }
}

@keyframes missionReadyBounce {
  0%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
    box-shadow: 0 0 0 0 rgba(215, 180, 106, 0.42);
  }
  35% {
    transform: translateY(-3px) scale(1.14) rotate(-8deg);
    box-shadow: 0 0 0 6px rgba(215, 180, 106, 0);
  }
  62% {
    transform: translateY(1px) scale(0.98) rotate(6deg);
  }
}

@media (max-width: 1080px) {
  .auth-screen,
  .game,
  .dashboard-command-center,
  .dashboard-grid,
  .marketing-screen,
  .stadium-screen,
  .commercial-grid,
  .formation-layout,
  .match-board,
  .match-scoreboard,
  .match-live-grid,
  .prematch-options {
    grid-template-columns: 1fr;
  }

  .friends-panel {
    min-height: auto;
    border-left: 0;
    border-top: 1px solid var(--stroke);
  }

  .game-horizontal-nav {
    display: grid;
  }

  .game-horizontal-nav .friends-panel.friends-widget:not(.dashboard-friends-widget) {
    position: fixed;
    right: 14px;
    bottom: 14px;
    display: grid;
    width: auto;
    border: 0;
  }

  .horizontal-nav-shell {
    display: block;
  }

  .horizontal-club-card {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 54px;
  }

  .horizontal-club-photo,
  .horizontal-club-photo .president-frame {
    width: 48px;
    height: 48px;
  }

  .app-nav {
    justify-content: center;
  }

  .friends-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .auth-art {
    min-height: 44vh;
  }

  .marketing-screen {
    grid-template-areas:
      "hero"
      "members"
      "progress"
      "commercial"
      "shirts";
  }

  .marketing-command-panel {
    grid-template-columns: 1fr;
  }

  .stadium-screen {
    grid-template-areas:
      "map"
      "hero"
      "ticket"
      "works"
      "facilities";
  }

  .stadium-map-panel {
    grid-template-columns: 1fr;
  }

  .stadium-map-copy {
    display: grid;
  }

  .stadium-progress-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stadium-facility-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auth-carousel {
    min-height: 390px;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 3;
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
  }

  .nav {
    display: flex;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: auto;
  }

  .app-nav {
    justify-content: center;
    flex-wrap: wrap;
    overflow: visible;
  }

  .nav-group {
    display: contents;
  }

  .nav-group-title {
    display: none;
  }

  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .store-showcase {
    grid-template-columns: 1fr;
  }

  .ranking-podium {
    grid-template-columns: 1fr;
  }

  .ranking-body-grid {
    grid-template-columns: 1fr;
  }

  .ranking-row {
    grid-template-columns: 54px minmax(0, 1fr) minmax(130px, auto);
  }

  .ranking-row > span:not(.ranking-row-rank) {
    display: none;
  }

  .daily-missions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-emblems-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .profile-frame-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-banner-grid {
    grid-template-columns: 1fr;
  }

  .league-pyramid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preseason-heading {
    flex-direction: column;
  }

  .preseason-status {
    min-width: 0;
  }

  .preseason-fixtures {
    grid-template-columns: 1fr;
  }

  .league-system-notes {
    grid-template-columns: 1fr;
  }

  .profile-main-grid,
  .profile-record-card,
  .profile-settings-card {
    grid-template-columns: 1fr;
  }

  .profile-record-card,
  .profile-settings-card {
    display: grid;
  }

  .profile-record-grid {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-scene {
    min-height: 0;
  }

  .news-hero-grid,
  .news-lower-grid,
  .featured-layout {
    grid-template-columns: 1fr;
  }

  .news-main-card {
    min-height: 260px;
  }

  .news-video-card {
    grid-column: auto;
  }

  .president-choice-grid {
    grid-template-columns: 1fr;
  }

  .president-selection {
    max-height: calc(100vh - 32px);
    overflow: auto;
  }

  .office-stage {
    width: min(100%, calc((100svh - 168px) * 2), 1280px);
    min-height: 0;
    max-height: calc(100svh - 168px);
  }

  .office-stage-title {
    font-size: clamp(3.7rem, 9vw, 6rem);
  }

  .office-stage-status {
    top: 14%;
    right: 3%;
    left: auto;
    bottom: auto;
  }

  .office-ingame-panel {
    width: min(900px, calc(100% - 18px));
  }
}

@media (max-width: 760px) {
  html,
  body,
  .app-shell {
    width: 100%;
    min-width: 0;
  }

  body {
    font-size: 14px;
  }

  .auth-screen,
  .game {
    display: block;
    min-height: 100svh;
  }

  .auth-art,
  .auth-panel-wrap,
  .main-stage,
  .topbar {
    padding-left: 12px;
    padding-right: 12px;
  }

  .auth-art {
    min-height: 28svh;
    align-items: flex-end;
    padding-top: 32px;
    padding-bottom: 24px;
  }

  .auth-panel-wrap {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .auth-panel {
    padding: 18px;
  }

  .brand-lockup h1 {
    font-size: 2.65rem;
  }

  .brand-lockup p {
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .marketing-command-panel,
  .marketing-members-panel,
  .marketing-progress-panel,
  .marketing-commercial-panel,
  .marketing-shirts-panel {
    padding: 14px;
  }

  .marketing-command-stats,
  .marketing-members-panel .marketing-member-grid,
  .marketing-member-grid,
  .shirt-sales-row {
    grid-template-columns: 1fr;
  }

  .marketing-command-copy h2 {
    font-size: 2.15rem;
  }

  .shirt-sales-row {
    text-align: left;
  }

  .shirt-sales-units,
  .shirt-sales-income {
    text-align: left;
  }

  .stadium-hero-panel,
  .stadium-hero-panel .stadium-visual,
  .stadium-hero-panel .stadium-visual img,
  .stadium-hero-panel .stadium-visual svg {
    min-height: 380px;
  }

  .stadium-hero-panel .stadium-visual {
    height: 380px;
  }

  .stadium-hero-overlay {
    padding: 16px;
  }

  .stadium-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stadium-progress-grid,
  .stadium-facility-grid {
    grid-template-columns: 1fr;
  }

  .ticket-metric-grid {
    grid-template-columns: 1fr;
  }

  .player-growth-hero {
    grid-template-columns: 1fr;
  }

  .player-growth-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .player-growth-main header,
  .player-growth-main footer {
    display: grid;
  }

  .auth-carousel {
    min-height: 300px;
    gap: 10px;
  }

  .auth-slide-stats {
    gap: 6px;
  }

  .auth-slide-stats span {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.7rem;
  }

  .auth-carousel-controls {
    margin-top: 6px;
  }

  .auth-carousel-controls > button {
    width: 36px;
    height: 36px;
  }

  .content {
    display: block;
  }

  .sidebar {
    position: static;
    padding: 12px;
    gap: 12px;
  }

  .club-mark {
    align-items: center;
    grid-template-columns: 62px minmax(0, 1fr);
    padding: 9px;
  }

  .crest {
    width: 44px;
  }

  .sidebar-president-photo {
    width: 62px;
    min-height: 76px;
  }

  .sidebar-president-info strong {
    font-size: 0.9rem;
  }

  .sidebar-president-info small,
  .sidebar-president-info .season {
    font-size: 0.72rem;
  }

  .club-name {
    font-size: 0.9rem;
  }

  .season {
    font-size: 0.72rem;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .app-nav {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    padding-bottom: 0;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .manager-card {
    display: none;
  }

  .friends-list {
    grid-template-columns: 1fr;
  }

  .friends-panel {
    display: none;
  }

  .game-horizontal-nav .friends-panel.friends-widget:not(.dashboard-friends-widget) {
    display: grid;
    width: auto;
    right: 10px;
    bottom: 10px;
  }

  .friends-toggle {
    grid-template-columns: 34px auto;
    min-width: 58px;
    min-height: 58px;
    padding: 9px;
  }

  .friends-toggle-icon {
    width: 34px;
    height: 34px;
  }

  .friends-toggle-text,
  .friends-toggle-stack {
    display: none;
  }

  .friend-mini {
    width: 30px;
    height: 30px;
    font-size: 0.64rem;
  }

  .horizontal-nav-shell {
    padding: 8px 10px 10px;
  }

  .horizontal-club-card {
    display: none;
  }

  .app-nav .nav-group-title {
    display: none;
  }

  .app-nav .nav-group {
    padding: 4px;
  }

  .nav-btn {
    min-width: 88px;
    min-height: 38px;
    flex: 0 0 auto;
    justify-content: center;
    padding: 0 9px;
    font-size: 0.78rem;
  }

  .nav-btn svg {
    width: 17px;
    height: 17px;
  }

  .mission-nav-alert {
    width: 20px;
    height: 20px;
    margin-left: 0;
    font-size: 0.78rem;
  }

  .main-stage {
    padding-top: 12px;
    padding-bottom: 18px;
  }

  .game-horizontal-nav .main-stage {
    padding-bottom: 96px;
  }

  .office-game-screen {
    width: 100%;
  }

  .office-stage {
    width: min(100%, calc((100svh - 150px) * 2), 980px);
    max-width: 100%;
    min-height: 0;
    max-height: calc(100svh - 150px);
    background-position: center;
  }

  .office-stage-title {
    top: 4.8%;
    right: 3.1%;
    font-size: 4.2rem;
  }

  .office-stage-status {
    top: 13.5%;
    left: auto;
    right: 3%;
    bottom: auto;
    min-width: 0;
  }

  .office-stage-actions {
    top: 3.3%;
    left: 0.6%;
    width: 21.5%;
    gap: 9px;
  }

  .office-image-action {
    width: 69.5%;
  }

  .office-image-action-large {
    width: 100%;
  }

  .office-photo-hotspot {
    border-radius: 0;
  }

  .office-photo-meetings {
    left: 0.9%;
    bottom: 0;
    width: 25.2%;
  }

  .office-photo-assembly {
    right: 2.4%;
    bottom: 36.5%;
    width: 18.2%;
  }

  .office-photo-works {
    right: 1.1%;
    bottom: 0;
    width: 22.4%;
  }

  .office-ingame-overlay {
    padding: 14px;
  }

  .office-ingame-panel {
    width: min(760px, calc(100% - 16px));
    max-height: calc(100% - 16px);
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .topbar h2 {
    font-size: 1.08rem;
  }

  .top-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .top-ledger,
  .top-command-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .top-command-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar-left {
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .top-president-card {
    width: 100%;
    min-height: 58px;
  }

  .top-president-card strong {
    max-width: none;
  }

  .top-actions .currency,
  .top-action {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 8px;
    font-size: 0.78rem;
  }

  .dashboard-grid,
  .side-stack,
  .panel-grid,
  .section-grid {
    gap: 12px;
  }

  .dashboard-shell {
    gap: 12px;
  }

  .dashboard-command-center {
    padding: 10px;
  }

  .command-main {
    min-height: 96px;
    padding: 12px;
  }

  .command-kpis {
    grid-template-columns: 1fr 1fr;
  }

  .command-kpi {
    min-height: 90px;
    padding: 11px;
  }

  .command-kpi strong {
    font-size: 1.15rem;
  }

  .dashboard-grid {
    display: flex;
    flex-direction: column;
  }

  .side-stack {
    order: 1;
  }

  .office-scene {
    order: 2;
  }

  .dashboard-grid + .panel-grid {
    display: none;
  }

  .panel {
    padding: 14px;
  }

  .office-scene {
    min-height: 0;
  }

  .news-search-page {
    padding: 12px;
    max-height: none;
  }

  .news-search-top,
  .news-club-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .news-searchbar {
    display: none;
  }

  .news-club-header h2 {
    font-size: 1.25rem;
  }

  .news-hero-grid {
    grid-auto-rows: auto;
    gap: 0;
  }

  .dashboard-news-focus {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }

  .dashboard-news-list .featured-list {
    grid-template-columns: 1fr;
  }

  .news-main-card {
    min-height: 168px;
  }

  .dashboard-news-focus .news-main-card {
    min-height: 220px;
  }

  .news-mini-card {
    min-height: 112px;
  }

  .news-video-card,
  .news-lower-grid,
  .office-news-panel,
  .laptop-dock,
  .side-stack > .panel:nth-of-type(n+6) {
    display: none;
  }

  .news-card-copy {
    padding: 14px;
  }

  .news-card-copy h3 {
    font-size: 1rem;
    line-height: 1.2;
  }

  .news-card-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.8rem;
  }

  .news-video-card,
  .club-about-card div,
  .forbes-list article {
    grid-template-columns: 1fr;
  }

  .featured-list article {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  .news-thumb {
    width: 76px;
    height: 62px;
  }

  .news-video-card {
    padding: 0 0 14px;
  }

  .news-video-card video {
    width: 100%;
    height: 150px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .section-heading p {
    max-width: none;
    text-align: left;
  }

  .daily-missions-grid {
    grid-template-columns: 1fr;
  }

  .shirt-sales-row {
    grid-template-columns: 30px 38px minmax(0, 1fr);
  }

  .shirt-sales-units,
  .shirt-sales-income {
    grid-column: 3;
    text-align: left;
  }

  .shirt-sales-income {
    font-size: 0.95rem;
  }

  .player-achievement-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .player-achievement-row em {
    grid-column: 2;
    font-size: 0.95rem;
  }

  .dashboard-profile-card {
    min-height: 220px;
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .dashboard-profile-avatar,
  .dashboard-profile-avatar .president-frame {
    width: 96px;
    height: 96px;
  }

  .dashboard-profile-copy h3 {
    font-size: 1.08rem;
  }

  .profile-hero {
    padding: 18px;
  }

  .profile-identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-avatar {
    width: 96px;
  }

  .profile-stat-grid,
  .profile-record-grid,
  .profile-emblems-grid,
  .profile-frame-grid,
  .profile-banner-grid,
  .league-trophy-showcase,
  .league-pyramid {
    grid-template-columns: 1fr;
  }

  .league-trophy-heading,
  .league-trophy-prize {
    align-items: stretch;
    flex-direction: column;
  }

  .league-position-chip {
    width: 100%;
  }

  .league-trophy-image,
  .league-trophy-card:first-child .league-trophy-image {
    height: 150px;
  }

  .all-leagues-heading {
    flex-direction: column;
  }

  .profile-card-heading,
  .profile-record-card,
  .profile-settings-card {
    align-items: stretch;
    flex-direction: column;
  }

  .office-hero {
    flex-direction: column;
    padding: 18px;
  }

  .office-stage {
    min-height: 560px;
  }

  .office-stage-title {
    font-size: clamp(3.8rem, 11vw, 6.4rem);
  }

  .office-stage-status {
    top: auto;
    right: 16px;
    bottom: 16px;
  }

  .office-stage-actions {
    width: min(360px, 46vw);
  }

  .office-photo-meetings {
    width: min(420px, 42vw);
  }

  .office-photo-assembly {
    right: 20px;
    bottom: 33%;
    width: min(320px, 34vw);
  }

  .office-photo-works {
    width: min(440px, 45vw);
  }

  .office-control-deck {
    grid-template-columns: 1fr;
  }

  .store-hero {
    flex-direction: column;
    padding: 18px;
  }

  .ranking-hero {
    padding: 18px;
    grid-template-columns: 1fr;
  }

  .ranking-hero-stats {
    grid-template-columns: 1fr;
  }

  .store-grid {
    grid-template-columns: 1fr;
  }

  .store-product ul {
    grid-template-columns: 1fr;
  }

  .ranking-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .ranking-row > strong {
    grid-column: 2;
    text-align: left;
  }

  .office-calendar-header {
    align-items: stretch;
    flex-direction: column;
  }

  .daily-office-board {
    grid-column: auto;
  }

  .office-agent-inbox {
    grid-template-columns: 1fr;
  }

  .daily-missions-grid.office-grid {
    grid-template-columns: 1fr;
  }

  .office-issue-grid {
    grid-template-columns: 1fr;
  }

  .real-clock-card {
    min-width: 0;
  }

  .office-calendar-weekdays {
    display: none;
  }

  .office-month-calendar {
    grid-template-columns: 1fr;
  }

  .office-calendar-day {
    min-height: 0;
  }

  .office-popup {
    width: calc(100vw - 24px);
    max-height: calc(100svh - 24px);
    overflow: auto;
    padding: 18px;
  }

  .daily-mission-popup {
    width: calc(100vw - 24px);
    max-height: calc(100svh - 24px);
    overflow: auto;
    padding: 18px;
  }

  .daily-mission-popup h3 {
    font-size: 1.65rem;
  }

  .daily-popup-head,
  .daily-popup-reward {
    grid-template-columns: 1fr;
    padding-right: 38px;
  }

  .daily-popup-icon {
    display: none;
  }

  .daily-popup-streak {
    display: none;
  }

  .daily-popup-timer {
    grid-template-columns: 44px 1fr;
    min-height: 64px;
  }

  .daily-popup-timer img {
    width: 42px;
    height: 42px;
  }

  .daily-mission-popup .daily-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-bonus-card {
    min-height: 250px;
    grid-template-rows: auto 92px 1fr auto;
  }

  .daily-bonus-art img,
  .daily-bonus-card.active .daily-bonus-art img {
    width: 86px;
    height: 86px;
  }

  .daily-weekly-box,
  .daily-weekly-copy,
  .daily-weekly-rewards {
    grid-template-columns: 1fr;
  }

  .daily-weekly-copy {
    text-align: center;
  }

  .daily-weekly-copy img {
    justify-self: center;
  }

  .daily-popup-claim {
    min-height: 54px;
  }

  .president-dashboard-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 11px;
  }

  .president-dashboard-photo {
    width: 86px;
  }

  .president-dashboard-card h3 {
    font-size: 0.98rem;
    overflow-wrap: anywhere;
  }

  .president-dashboard-card strong {
    font-size: 0.7rem;
  }

  .social-grid,
  .member-line {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .social-grid {
    gap: 10px;
  }

  .brand-reach {
    justify-items: start;
    text-align: left;
  }

  .calendar-date {
    min-height: 62px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
  }

  .calendar-panel,
  .social-panel,
  .president-dashboard-card {
    min-height: 0;
  }

  .stadium-ticket-upgrade {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
  }

  .stadium-ticket-upgrade .muted,
  .stadium-ticket-upgrade .cooldown {
    text-align: left;
  }

  .stadium-ticket-upgrade .primary-btn {
    width: 100%;
  }

  .fixture-row {
    padding: 9px 0;
  }

  .calendar-panel-head,
  .calendar-next-facts {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-list-row,
  .calendar-result-row {
    grid-template-columns: 64px minmax(0, 1fr) 38px;
    gap: 9px;
  }

  .calendar-date-chip strong {
    font-size: 1.35rem;
  }

  .tactical-pitch {
    min-height: 620px;
  }

  .formation-slot {
    width: 82px;
    min-height: 104px;
    padding: 6px;
    font-size: 0.68rem;
  }

  .formation-slot .player-avatar-wrap,
  .formation-slot .player-avatar,
  .formation-slot .player-avatar-img {
    width: 58px;
    height: 58px;
  }

  .formation-layout,
  .match-board,
  .match-scoreboard,
  .match-live-grid,
  .prematch-options {
    gap: 12px;
  }

  .match-scoreboard {
    grid-template-columns: 1fr;
  }

  .live-score span {
    min-width: 48px;
    font-size: 3rem;
  }

  .match-board {
    padding: 14px;
  }

  .office-hud {
    flex-direction: column;
  }

  .office-news-panel {
    top: 146px;
    max-height: 260px;
  }

  .guide-dialog {
    top: 416px;
    left: 12px;
    right: 12px;
    width: auto;
    grid-template-columns: 72px 1fr;
  }

  .guide-dialog img {
    width: 72px;
  }

  .guide-actions {
    grid-template-columns: 1fr;
  }

  .guide-dialog-pending {
    top: 50%;
    left: 50%;
    right: auto;
    grid-template-columns: 82px 1fr;
    width: min(520px, calc(100vw - 24px));
    transform: translate(-50%, -50%);
  }

  .guide-dialog-pending img {
    width: 82px;
  }

  .president-selection {
    padding: 16px;
    width: calc(100vw - 18px);
    max-height: calc(100svh - 18px);
  }

  .president-choice {
    min-height: 0;
  }

  .president-choice {
    grid-template-columns: 86px minmax(0, 1fr);
    align-items: center;
  }

  .president-portrait {
    grid-row: span 4;
  }

  .president-choice .badge {
    grid-column: 2;
  }

  .president-intro-ring {
    width: 150px;
  }

  .president-intro-ring img {
    width: 132px;
  }

  .president-intro-video {
    max-height: 44svh;
  }

  .president-intro {
    width: calc(100vw - 18px);
    padding: 16px;
  }

  .guide-coach {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: 72px 1fr;
  }

  .guide-coach img {
    width: 72px;
  }

  .guide-arrow {
    display: none;
  }

  .laptop-dock {
    width: calc(100% - 24px);
  }

  .panel-grid,
  .tiles,
  .facility-grid,
  .mission-grid,
  .player-detail-grid,
  .player-economy,
  .actions-grid {
    grid-template-columns: 1fr;
  }

  .section-grid > .panel.col-12,
  .section-grid > .panel.col-4,
  .section-grid > .panel.col-5 {
    max-height: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section-grid > .panel.col-12 .actions-grid {
    grid-template-columns: 1fr;
  }

  .col-4,
  .col-5,
  .col-7,
  .col-8,
  .col-12 {
    grid-column: span 12;
  }

  th,
  td {
    padding: 9px 10px;
    font-size: 0.74rem;
  }

  .table-wrap {
    margin-left: -2px;
    margin-right: -2px;
    max-height: 64svh;
    overflow: auto;
    border-radius: 8px;
  }

  table {
    min-width: 680px;
  }

  .table-wrap h3 {
    position: sticky;
    left: 0;
    z-index: 1;
    background: rgba(16, 22, 29, 0.96);
  }

  .player-cell {
    gap: 7px;
  }

  .player-avatar,
  .player-avatar-wrap,
  .player-avatar-img {
    width: 28px;
    height: 28px;
  }
}

/* Final precedence layer for the premium shell. Kept at EOF so legacy mobile blocks cannot flatten the new frame. */
.game.pcm-premium-shell .pcm-topbar {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.8fr);
  align-items: center;
  justify-content: initial;
  gap: 22px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid rgba(0, 148, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.12), transparent 44%, rgba(255, 190, 47, 0.035)),
    rgba(1, 8, 16, 0.72);
  backdrop-filter: none;
}

.game.pcm-premium-shell .pcm-brand {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.game.pcm-premium-shell .top-app-nav {
  height: 72px;
  display: grid;
  grid-template-columns: repeat(8, minmax(96px, 1fr));
  gap: 0;
}

.game.pcm-premium-shell .bottom-dock {
  position: fixed;
  z-index: 60;
  left: 20px;
  right: 20px;
  bottom: 10px;
  min-height: 88px;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(4, 20, 34, 0.94), rgba(2, 10, 18, 0.96)),
    rgba(1, 9, 16, 0.95);
  box-shadow:
    0 -18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.game.pcm-premium-shell .bottom-dock .nav-btn {
  grid-template-columns: 1fr;
  grid-template-rows: 28px auto;
  gap: 6px;
  min-height: 88px;
  align-content: center;
  justify-items: center;
  text-align: center;
  font-size: 0.82rem;
}

.game.pcm-premium-shell .bottom-dock .nav-btn svg {
  margin: 0 auto;
  width: 28px;
  height: 28px;
}

.game.pcm-premium-shell .bottom-dock .nav-btn.active {
  border: 1px solid rgba(255, 190, 47, 0.56);
  border-radius: 9px;
  color: var(--pcm-gold);
}

.game.pcm-premium-shell .main-stage {
  padding: 16px 26px 116px;
  overflow: auto;
}

.game.pcm-premium-shell .premium-match-card,
.game.pcm-premium-shell .premium-match-content {
  height: 455px;
  min-height: 455px;
  max-height: 455px;
}

.game.pcm-premium-shell .premium-match-card {
  grid-row: auto;
}

.game.pcm-premium-shell .top-command-actions {
  display: grid;
  grid-template-columns: minmax(160px, auto) minmax(150px, auto) 58px;
  gap: 12px;
}

.game.pcm-premium-shell .audio-controls {
  min-width: 96px;
}

@media (max-width: 1080px) {
  .game.pcm-premium-shell .pcm-topbar {
    grid-template-columns: 1fr;
  }

  .game.pcm-premium-shell .top-actions {
    justify-content: start;
  }
}

@media (max-width: 860px) {
  .game.pcm-premium-shell .pcm-topbar {
    padding: 16px;
  }

  .game.pcm-premium-shell .top-app-nav {
    height: auto;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }

  .game.pcm-premium-shell .audio-controls {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game.pcm-premium-shell .bottom-dock {
    left: 8px;
    right: 8px;
    grid-template-columns: repeat(6, minmax(76px, 1fr));
    overflow-x: auto;
  }
}

/* Login refresh. */
.auth-screen {
  min-height: 100svh;
  grid-template-columns: minmax(420px, 0.82fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 54px 7vw;
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.94), rgba(2, 8, 16, 0.72), rgba(2, 8, 16, 0.94)),
    url("./assets/login/slide-liga.png") center / cover no-repeat;
}

.auth-art {
  min-height: 0;
  height: 100%;
  order: 2;
  padding: 0;
  border: 1px solid rgba(255, 190, 47, 0.26);
  border-radius: 10px;
  background: rgba(3, 12, 22, 0.64);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.44);
}

.auth-scene-bg {
  background:
    linear-gradient(90deg, rgba(3, 12, 22, 0.88), rgba(3, 12, 22, 0.28), rgba(3, 12, 22, 0.9)),
    var(--auth-bg) center / var(--auth-bg-size, cover) no-repeat;
}

.brand-lockup.auth-carousel {
  min-height: 520px;
  padding: 46px;
  align-content: center;
}

.brand-lockup h1 {
  max-width: 640px;
  font-size: clamp(2.1rem, 4.2vw, 4.8rem);
}

.auth-panel-wrap {
  order: 1;
  display: grid;
  gap: 18px;
  padding: 0;
}

.auth-panel {
  width: min(100%, 640px);
  min-height: 720px;
  padding: 52px 54px;
  border: 1px solid rgba(255, 190, 47, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(6, 18, 31, 0.9), rgba(2, 8, 16, 0.96)),
    rgba(2, 8, 16, 0.92);
}

.auth-product-logo {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-bottom: 34px;
  text-align: center;
  text-transform: uppercase;
}

.auth-product-logo strong {
  max-width: 460px;
  color: #f6f7f5;
  font-size: clamp(2.6rem, 4.8vw, 5.4rem);
  font-style: italic;
  font-weight: 1000;
  line-height: 0.82;
  text-shadow:
    0 4px 0 #1c2530,
    0 0 28px rgba(255, 190, 47, 0.26);
}

.auth-product-logo span {
  display: block;
  color: var(--pcm-gold, #ffbe2f);
  font-size: 0.36em;
  line-height: 0.9;
}

.auth-product-logo em {
  color: #fff;
  font-size: 0.95rem;
  font-style: normal;
  letter-spacing: 0;
}

.auth-panel .tab-btn.active,
.auth-panel .primary-btn {
  background: linear-gradient(180deg, #ffda72, #e99f1f);
}

.auth-panel .field input {
  min-height: 58px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
}

.auth-feature-grid {
  width: min(100%, 640px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.auth-feature-grid article {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(255, 190, 47, 0.16);
  border-radius: 8px;
  background: rgba(4, 14, 24, 0.78);
}

.auth-feature-grid svg {
  width: 28px;
  height: 28px;
  color: var(--pcm-gold, #ffbe2f);
}

.auth-feature-grid strong {
  color: #fff;
  text-transform: uppercase;
}

.auth-feature-grid p {
  margin: 0;
  color: #bbc6d0;
  font-size: 0.84rem;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .auth-screen {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .auth-art {
    order: 1;
  }

  .auth-panel-wrap {
    order: 2;
  }
}

@media (max-width: 720px) {
  .auth-panel {
    min-height: 0;
    padding: 28px;
  }

  .auth-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* Login reference layout. */
.auth-screen {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(440px, 0.82fr) minmax(560px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 22px 34px;
  align-items: center;
  padding: 48px 5.6vw 20px;
  background:
    radial-gradient(circle at 82% 4%, rgba(255, 190, 47, 0.16), transparent 18%),
    radial-gradient(circle at 22% 22%, rgba(0, 148, 255, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(2, 8, 16, 0.62), rgba(2, 8, 16, 0.96)),
    url("./assets/login/slide-liga.png") center / cover no-repeat;
  overflow-x: hidden;
}

.auth-panel-wrap {
  order: initial;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.auth-panel {
  width: min(100%, 620px);
  min-height: min(820px, calc(100svh - 168px));
  display: grid;
  align-content: start;
  padding: 54px 54px 42px;
  border: 1px solid rgba(255, 190, 47, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 7%, rgba(0, 148, 255, 0.22), transparent 18%),
    linear-gradient(180deg, rgba(4, 16, 29, 0.91), rgba(2, 8, 16, 0.97));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.auth-product-logo {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-bottom: 28px;
  text-align: center;
  text-transform: uppercase;
}

.auth-product-logo strong {
  display: grid;
  justify-items: center;
  max-width: 420px;
  color: #f4f6f8;
  font-size: clamp(2.75rem, 4.8vw, 5.25rem);
  font-style: italic;
  font-weight: 1000;
  line-height: 0.78;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 #202b36,
    0 0 32px rgba(255, 190, 47, 0.25);
}

.auth-product-logo strong span {
  display: block;
  color: #f4f6f8;
  font-size: 1em;
  line-height: 0.78;
}

.auth-product-logo strong span:last-child {
  color: #ffbe2f;
  text-shadow:
    0 3px 0 #5a3300,
    0 0 28px rgba(255, 190, 47, 0.38);
}

.auth-product-logo strong em {
  color: #ffbe2f;
  font-size: 0.34em;
  font-style: italic;
  line-height: 0.92;
}

.auth-product-logo small {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
}

.auth-product-logo small b {
  color: #ffbe2f;
}

.auth-form-divider {
  height: 1px;
  margin: 0 0 24px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-form h2 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.auth-field span {
  display: none;
}

.auth-panel .field input,
.auth-panel .locked-field {
  min-height: 58px;
  padding-left: 56px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  background: rgba(1, 10, 19, 0.52);
  font-size: 0.98rem;
}

.auth-field {
  position: relative;
}

.auth-field::before {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 1;
  color: #aebdcc;
  font-size: 1.15rem;
  transform: translateY(-50%);
}

.auth-field.icon-mail::before {
  content: "✉";
}

.auth-field.icon-lock::before {
  content: "▣";
}

.auth-field.icon-club::before {
  content: "⚑";
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 10px;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5df;
  font-size: 0.9rem;
}

.auth-remember input {
  width: 18px;
  height: 18px;
  accent-color: #ffbe2f;
}

.auth-row .link-btn,
.auth-switch button {
  color: #ffbe2f;
  background: transparent;
  font-weight: 900;
}

.auth-submit {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: #171004 !important;
  background: linear-gradient(180deg, #ffdd75, #eba51f) !important;
  font-size: 1.04rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-submit span {
  font-size: 1.7rem;
  line-height: 0;
}

.auth-guest-btn {
  min-height: 52px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(0, 148, 255, 0.42);
  border-radius: 6px;
  color: #eaf6ff;
  background:
    linear-gradient(180deg, rgba(0, 148, 255, 0.16), rgba(0, 62, 132, 0.14)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 22px rgba(0, 148, 255, 0.1);
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-guest-btn:hover {
  border-color: rgba(0, 190, 255, 0.7);
  background:
    linear-gradient(180deg, rgba(0, 148, 255, 0.22), rgba(0, 62, 132, 0.18)),
    rgba(255, 255, 255, 0.055);
  transform: translateY(-1px);
}

.auth-guest-btn small {
  color: #9db4c8;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: none;
}

.auth-social-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 10px 0 2px;
  color: #9daab5;
  font-size: 0.83rem;
}

.auth-social-separator::before,
.auth-social-separator::after {
  content: "";
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

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

.auth-social-grid button {
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
  font-size: 1rem;
  font-weight: 900;
}

.auth-social-grid b {
  color: #477cff;
  font-size: 1.2rem;
}

.auth-switch {
  margin: 12px 0 0;
  color: #cbd5df;
  text-align: center;
}

.auth-art {
  order: initial;
  height: auto;
  min-height: min(820px, calc(100svh - 168px));
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-scene-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.96), rgba(2, 8, 16, 0.54), rgba(2, 8, 16, 0.94)),
    var(--auth-bg) center / var(--auth-bg-size, cover) no-repeat;
  filter: saturate(1.04) contrast(1.02);
}

.auth-art::after {
  display: none;
}

.auth-panel-wrap,
.auth-art,
.auth-trust-bar,
.auth-copyright {
  position: relative;
  z-index: 1;
}

.auth-showcase {
  display: grid;
  grid-template-rows: 320px minmax(0, 1fr);
  gap: 18px;
  height: 100%;
}

.auth-trailer-card,
.auth-feature-grid,
.auth-legacy-card,
.auth-news-card,
.auth-trust-bar {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(4, 15, 27, 0.72);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.auth-trailer-card {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(260px, 1fr);
  align-items: center;
  overflow: hidden;
  padding: 42px 36px;
  background:
    linear-gradient(90deg, rgba(3, 13, 24, 0.98) 0%, rgba(3, 13, 24, 0.72) 48%, rgba(3, 13, 24, 0.1) 100%),
    url("./assets/login/slide-despacho.png") center / cover no-repeat;
}

.auth-trailer-card h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: 1.35rem;
  text-transform: uppercase;
}

.auth-trailer-card h2 span,
.auth-legacy-card h3 span,
.auth-news-card span {
  color: #ffbe2f;
}

.auth-trailer-card p {
  max-width: 360px;
  margin: 0 0 24px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.45;
}

.auth-trailer-card button {
  min-width: 190px;
  min-height: 54px;
  border: 1px solid rgba(255, 190, 47, 0.56);
  border-radius: 6px;
  color: #ffbe2f;
  background: rgba(0, 0, 0, 0.24);
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-image-placeholder {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 190, 47, 0.35);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.58);
  background:
    linear-gradient(135deg, rgba(0, 148, 255, 0.16), rgba(255, 190, 47, 0.1)),
    rgba(0, 0, 0, 0.24);
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-right-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(260px, 0.85fr);
  grid-template-rows: 1fr 160px;
  gap: 8px;
}

.auth-showcase .auth-feature-grid {
  width: auto;
  display: grid;
  grid-row: 1 / 3;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 20px;
}

.auth-showcase .auth-feature-grid article {
  min-height: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
}

.auth-showcase .auth-feature-grid article:last-child {
  border-bottom: 0;
}

.auth-showcase .auth-feature-grid article > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 190, 47, 0.34);
  border-radius: 8px;
  color: #ffbe2f;
  background: rgba(255, 190, 47, 0.08);
}

.auth-showcase .auth-feature-grid p {
  margin: 4px 0 0;
  color: #cbd5df;
  line-height: 1.35;
}

.auth-legacy-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 24px;
  overflow: hidden;
}

.auth-legacy-card h3 {
  margin: 0;
  color: #fff;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.auth-legacy-card .auth-image-placeholder {
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.04), rgba(2, 8, 16, 0.55)),
    url("./assets/stadium-level-4.png") center / cover no-repeat;
}

.auth-news-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: 10px;
  min-height: 160px;
  overflow: hidden;
  padding: 18px;
}

.auth-news-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #aebdcc;
  font-size: 0.84rem;
  font-weight: 900;
}

.auth-news-card strong {
  max-width: 270px;
  color: #fff;
  line-height: 1.35;
}

.auth-news-card em {
  color: #9daab5;
  font-style: normal;
}

.auth-news-thumb {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 138px;
  height: 118px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(90deg, transparent, rgba(2, 8, 16, 0.18)),
    url("./assets/news/press-conference.png") center / cover no-repeat;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-trust-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  min-height: 86px;
  padding: 18px 28px;
  background: rgba(4, 14, 24, 0.76);
}

.auth-trust-bar article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.auth-trust-bar article > span {
  color: #ffbe2f;
}

.auth-trust-bar svg {
  width: 34px;
  height: 34px;
}

.auth-trust-bar strong,
.auth-trust-bar em {
  display: block;
}

.auth-trust-bar strong {
  color: #ffbe2f;
  text-transform: uppercase;
}

.auth-trust-bar em {
  margin-top: 3px;
  color: #cbd5df;
  font-style: normal;
}

.auth-copyright {
  grid-column: 1 / -1;
  margin: -6px 0 0;
  color: rgba(255, 255, 255, 0.56);
  text-align: center;
  font-size: 0.82rem;
}

@media (max-width: 1180px) and (min-width: 761px) {
  .auth-screen {
    grid-template-columns: minmax(360px, 0.78fr) minmax(420px, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 14px 18px;
    align-items: center;
    min-height: 100svh;
    padding: 18px;
  }

  .auth-panel,
  .auth-art {
    min-height: calc(100svh - 132px);
  }

  .auth-showcase {
    grid-template-rows: 220px minmax(0, 1fr);
    gap: 12px;
  }

  .auth-panel {
    width: 100%;
    padding: 30px;
  }

  .auth-product-logo {
    margin-bottom: 18px;
  }

  .auth-product-logo strong {
    font-size: clamp(2.1rem, 4vw, 3.4rem);
  }

  .auth-form-divider {
    margin-bottom: 16px;
  }

  .auth-trailer-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .auth-trailer-card .auth-image-1 {
    display: none;
  }

  .auth-right-grid {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.82fr);
    grid-template-rows: 1fr 132px;
  }

  .auth-showcase .auth-feature-grid {
    padding: 14px;
  }

  .auth-showcase .auth-feature-grid article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }

  .auth-showcase .auth-feature-grid article > span {
    width: 40px;
    height: 40px;
  }

  .auth-showcase .auth-feature-grid p {
    font-size: 0.78rem;
  }

  .auth-legacy-card {
    padding: 16px;
  }

  .auth-trust-bar {
    min-height: 72px;
    padding: 12px 18px;
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .auth-screen {
    padding: 12px;
  }

  .auth-panel {
    padding: 28px 20px;
  }

  .auth-trailer-card,
  .auth-right-grid,
  .auth-trust-bar,
  .auth-social-grid {
    grid-template-columns: 1fr;
  }

  .auth-showcase .auth-feature-grid {
    grid-row: auto;
  }

  .auth-right-grid {
    grid-template-rows: auto;
  }

  .auth-trust-bar {
    gap: 12px;
    padding: 16px;
  }
}

/* Inicio body layout: match the compact reference without touching top/bottom navigation. */
.game.pcm-premium-shell .premium-home {
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  grid-template-rows: 292px 132px 178px;
  grid-template-areas:
    "match match match match match match match news news news news finance finance finance finance"
    "match match match match match match match news news news news store store store store"
    "calendar calendar calendar table table table training training training followers followers followers recent recent recent";
  gap: 14px;
  align-items: stretch;
}

.game.pcm-premium-shell .premium-match-card {
  grid-area: match;
}

.game.pcm-premium-shell .premium-news-card {
  grid-area: news;
}

.game.pcm-premium-shell .premium-finance-card {
  grid-area: finance;
}

.game.pcm-premium-shell .premium-store-banner {
  grid-area: store;
}

.game.pcm-premium-shell .premium-calendar-card {
  grid-area: calendar;
}

.game.pcm-premium-shell .premium-table-card {
  grid-area: table;
}

.game.pcm-premium-shell .premium-training-card {
  grid-area: training;
}

.game.pcm-premium-shell .premium-followers-card {
  grid-area: followers;
}

.game.pcm-premium-shell .premium-recent-card {
  grid-area: recent;
}

.game.pcm-premium-shell .premium-match-card,
.game.pcm-premium-shell .premium-match-content,
.game.pcm-premium-shell .premium-news-card {
  height: 438px;
  min-height: 438px;
  max-height: 438px;
}

.game.pcm-premium-shell .premium-finance-card {
  height: 292px;
  min-height: 292px;
  max-height: 292px;
}

.game.pcm-premium-shell .premium-store-banner {
  height: 132px;
  min-height: 132px;
  max-height: 132px;
  align-items: center;
}

.game.pcm-premium-shell .premium-calendar-card,
.game.pcm-premium-shell .premium-table-card,
.game.pcm-premium-shell .premium-training-card,
.game.pcm-premium-shell .premium-followers-card,
.game.pcm-premium-shell .premium-recent-card {
  height: 178px;
  min-height: 178px;
  max-height: 178px;
  overflow: hidden;
}

.game.pcm-premium-shell .premium-store-banner h3 {
  margin: 4px 0 12px;
}

.game.pcm-premium-shell .premium-store-banner .primary-btn {
  min-height: 34px;
  padding: 0 18px;
}

.game.pcm-premium-shell .premium-calendar-card .fixture-row,
.game.pcm-premium-shell .premium-recent-card .fixture-row {
  min-height: 40px;
  padding: 7px 0;
}

.game.pcm-premium-shell .premium-training-card .training-row {
  min-height: 48px;
  margin-top: 8px;
}

.game.pcm-premium-shell .premium-followers-card > strong {
  margin-top: 14px;
  font-size: 1.8rem;
}

@media (max-width: 1280px) {
  .game.pcm-premium-shell .premium-home {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "match match match match match match match match"
      "news news news news finance finance finance finance"
      "store store store store store store store store"
      "calendar calendar table table training training followers followers"
      "recent recent recent recent recent recent recent recent";
  }

  .game.pcm-premium-shell .premium-match-card,
  .game.pcm-premium-shell .premium-match-content,
  .game.pcm-premium-shell .premium-news-card,
  .game.pcm-premium-shell .premium-finance-card,
  .game.pcm-premium-shell .premium-store-banner,
  .game.pcm-premium-shell .premium-calendar-card,
  .game.pcm-premium-shell .premium-table-card,
  .game.pcm-premium-shell .premium-training-card,
  .game.pcm-premium-shell .premium-followers-card,
  .game.pcm-premium-shell .premium-recent-card {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

/* Plantilla body redesign. Navigation remains untouched. */
.game.pcm-premium-shell .squad-screen {
  display: grid;
  grid-template-columns: 250px minmax(680px, 1fr) 420px;
  gap: 14px;
  min-height: 650px;
}

.squad-coach-card,
.squad-pitch-panel,
.squad-bench-card,
.squad-roles-card {
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.88), rgba(4, 15, 26, 0.96)),
    rgba(3, 12, 22, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 38px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.squad-coach-card {
  display: grid;
  grid-template-rows: auto 250px auto auto auto 1fr;
  padding: 16px;
}

.coach-portrait {
  position: relative;
  display: grid;
  place-items: end stretch;
  margin: 10px -16px 0;
  padding: 0 0 8px;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.12), rgba(2, 8, 16, 0.86)),
    url("./assets/login/slide-despacho.png") center / cover no-repeat;
}

.coach-avatar {
  width: 172px;
  height: 210px;
  display: grid;
  place-items: center;
  margin-bottom: 0;
  color: #dce7ef;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(30, 42, 53, 0.92), rgba(10, 16, 24, 0.98));
  clip-path: polygon(18% 100%, 24% 42%, 34% 18%, 50% 10%, 66% 18%, 76% 42%, 82% 100%);
}

.coach-avatar svg {
  width: 74px;
  height: 74px;
  opacity: 0.72;
}

.coach-avatar-photo {
  width: 100%;
  height: 242px;
  margin: 0;
  overflow: hidden;
  clip-path: none;
  border: 1px solid rgba(255, 190, 47, 0.28);
  border-radius: 8px;
  background: rgba(2, 13, 24, 0.72);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
}

.coach-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.coach-name {
  display: grid;
  gap: 6px;
  padding: 18px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.coach-name strong {
  color: #fff;
  font-size: 1.12rem;
  text-transform: uppercase;
}

.coach-name span {
  color: #c6d1dc;
  font-size: 0.86rem;
}

.squad-priority-btn {
  width: 100%;
  margin: 10px 0 2px;
}

.squad-president-call {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
}

.squad-president-call-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.squad-president-call-toggle span {
  width: 18px;
  height: 18px;
  display: inline-grid;
}

.squad-president-call-toggle svg {
  width: 18px;
  height: 18px;
}

.squad-president-call-menu {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 190, 47, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(13, 21, 31, 0.94), rgba(4, 10, 18, 0.98)),
    rgba(3, 12, 22, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.squad-president-call-menu p,
.squad-president-call-menu em {
  margin: 0;
  color: #aebdcc;
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.35;
}

.squad-president-call-menu em {
  color: var(--gold-strong);
  font-weight: 800;
}

.squad-president-call-menu button {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: #fff;
  text-align: left;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.squad-president-call-menu button:hover:not(:disabled) {
  border-color: rgba(255, 190, 47, 0.34);
  background: rgba(255, 190, 47, 0.08);
}

.squad-president-call-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.squad-president-call-menu button strong {
  font-size: 0.82rem;
}

.squad-president-call-menu button span {
  color: #9fb3c8;
  font-size: 0.72rem;
}

.coach-metrics {
  display: grid;
  align-content: start;
}

.coach-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 46px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.coach-metrics span {
  color: #c7d2dc;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.coach-metrics strong {
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid currentColor;
  clip-path: polygon(50% 0, 92% 25%, 92% 75%, 50% 100%, 8% 75%, 8% 25%);
  font-weight: 1000;
}

.coach-metrics .metric-0 { color: #df5cff; }
.coach-metrics .metric-1 { color: #00a9ff; }
.coach-metrics .metric-2 { color: #75ef5f; }
.coach-metrics .metric-3 { color: #ffcb2f; }

.squad-pitch-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 14px;
}

.squad-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 4px 12px;
}

.squad-panel-head h3,
.squad-roles-card h3 {
  margin: 0;
  color: #fff;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.squad-pitch {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.18), rgba(2, 8, 16, 0.28)),
    radial-gradient(circle at 50% 54%, rgba(216, 255, 185, 0.08), transparent 34%),
    url("./assets/pitch/squad-field.png") center / cover no-repeat;
}

.squad-pitch::before {
  content: "";
  position: absolute;
  inset: 26px 42px;
  border: 0;
  border-radius: 2px;
}

.pitch-mark {
  display: none;
}

.pitch-center {
  left: 50%;
  top: 50%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.pitch-center::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -210px;
  bottom: -210px;
  width: 2px;
  background: rgba(255, 255, 255, 0.2);
}

.pitch-box-top {
  left: 34%;
  top: 26px;
  width: 32%;
  height: 88px;
}

.pitch-box-bottom {
  left: 34%;
  bottom: 26px;
  width: 32%;
  height: 88px;
}

.squad-player-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 138px;
  height: 124px;
  min-height: 124px;
  display: block;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(0, 148, 255, 0.58);
  border-radius: 7px;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(0, 93, 186, 0.96), rgba(4, 20, 40, 0.98) 62%, rgba(2, 12, 24, 0.98)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 36%);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 22px rgba(0, 148, 255, 0.24);
  text-align: left;
}

.squad-player-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, transparent 0 55%, rgba(0, 0, 0, 0.72) 72% 100%),
    linear-gradient(120deg, transparent 0 52%, rgba(0, 0, 0, 0.22) 52% 100%);
  pointer-events: none;
}

.squad-player-card::after {
  content: "☻";
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 3;
  color: #58e85b;
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 0 8px rgba(88, 232, 91, 0.5);
}

.squad-player-card.featured {
  border-color: rgba(255, 190, 47, 0.82);
  background:
    linear-gradient(145deg, rgba(0, 93, 186, 0.96), rgba(4, 20, 40, 0.98) 58%, rgba(88, 55, 2, 0.96)),
    radial-gradient(circle at 50% 20%, rgba(255, 209, 88, 0.2), transparent 38%);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(255, 190, 47, 0.22),
    0 0 18px rgba(255, 190, 47, 0.26);
}

.squad-player-card.adapted {
  border-color: rgba(255, 190, 47, 0.68);
  animation: squad-card-position-warning 1.05s ease-in-out infinite alternate;
}

@keyframes squad-card-position-warning {
  from {
    border-color: rgba(255, 203, 47, 0.86);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 1px rgba(255, 203, 47, 0.24),
      0 0 18px rgba(255, 203, 47, 0.26);
  }
  to {
    border-color: rgba(255, 64, 64, 0.9);
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 0 1px rgba(255, 72, 72, 0.32),
      0 0 24px rgba(255, 72, 72, 0.38);
  }
}

.squad-player-card.empty {
  align-content: center;
  justify-items: center;
  grid-template-columns: 1fr;
  text-align: center;
  opacity: 0.72;
}

.squad-player-card em {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 3;
  color: #f3f8ff;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
}

.squad-player-card .player-avatar-wrap,
.squad-player-card .player-avatar,
.squad-player-card .player-avatar-img {
  position: absolute;
  top: 5px;
  left: 50%;
  z-index: 2;
  width: 92px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 0;
}

.squad-player-card .player-avatar,
.squad-player-card .player-avatar-img {
  border: 0;
  background: transparent;
}

.squad-player-card .player-avatar-img {
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.62));
}

.squad-player-card .player-avatar {
  width: 76px;
  height: 76px;
  top: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
}

.squad-player-card span {
  position: absolute;
  left: 9px;
  right: 44px;
  bottom: 9px;
  z-index: 3;
  overflow: hidden;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 1000;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.squad-player-card .squad-role-request {
  position: absolute;
  left: -10px;
  top: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 114px;
  padding: 5px 6px 4px;
  border: 1px solid rgba(255, 203, 47, 0.72);
  border-radius: 4px;
  color: #fff;
  font-size: 0.57rem;
  font-weight: 1000;
  line-height: 1.05;
  background: linear-gradient(135deg, rgba(45, 20, 0, 0.98), rgba(108, 25, 20, 0.9));
  box-shadow: 0 0 14px rgba(255, 203, 47, 0.24);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  transform: translate(-100%, -50%);
  pointer-events: none;
  white-space: nowrap;
}

.squad-player-card.request-right .squad-role-request {
  right: -10px;
  left: auto;
  transform: translate(100%, -50%);
}

.squad-player-card .squad-role-request b {
  color: #ffcb2f;
  font: inherit;
}

.squad-player-card strong {
  position: absolute;
  right: 8px;
  bottom: 7px;
  z-index: 3;
  color: #fff;
  font-size: 1.56rem;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

.energy-good {
  --energy-color: #27e66a;
}

.energy-mid {
  --energy-color: #ffc94b;
}

.energy-low {
  --energy-color: #ff4f55;
}

.squad-player-card .player-energy-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  z-index: 4;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 13, 24, 0.74);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.34);
}

.squad-player-card .player-energy-meter b {
  display: block;
  width: var(--energy, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--energy-color, #27e66a);
  box-shadow: 0 0 10px color-mix(in srgb, var(--energy-color, #27e66a) 45%, transparent);
}

.squad-chemistry {
  position: absolute;
  left: 20px;
  bottom: 16px;
  z-index: 3;
  width: 260px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.squad-chemistry span {
  grid-column: 1 / -1;
  color: #d8e3ec;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.squad-chemistry div {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.squad-chemistry i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #00e078, #bbff40);
}

.squad-chemistry strong {
  color: var(--pcm-gold);
  font-size: 1.08rem;
}

.squad-team-metrics {
  width: min(520px, calc(100% - 190px));
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 8px;
}

.squad-team-metrics article {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 7px;
  background: rgba(2, 13, 24, 0.78);
}

.squad-team-metrics article span {
  grid-column: auto;
  color: #aebdcc;
  font-size: 0.64rem;
}

.squad-team-metrics article strong {
  color: #fff;
  font-size: 1.08rem;
  line-height: 1;
}

.squad-instructions {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
}

.squad-side {
  display: grid;
  gap: 14px;
  grid-template-rows: 1fr 0.78fr;
}

.squad-bench-card,
.squad-roles-card {
  padding: 14px;
}

.squad-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.squad-tabs button {
  min-height: 42px;
  color: #c8d3dd;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  text-transform: uppercase;
}

.squad-tabs button.active {
  color: #fff;
  border-color: rgba(0, 148, 255, 0.55);
  background: linear-gradient(180deg, rgba(0, 116, 227, 0.78), rgba(0, 59, 135, 0.8));
}

.bench-list {
  display: grid;
  gap: 0;
  margin-bottom: 12px;
}

.bench-row {
  min-height: 43px;
  display: grid;
  grid-template-columns: 28px 34px minmax(0, 1fr) 42px 38px 18px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  color: #fff;
  background: transparent;
  text-align: left;
}

.bench-row .player-avatar-wrap,
.bench-row .player-avatar,
.bench-row .player-avatar-img {
  width: 30px;
  height: 30px;
}

.bench-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bench-row em {
  color: #9fd2ff;
  font-style: normal;
}

.bench-row b {
  font-weight: 900;
}

.bench-row i {
  color: #59e45b;
  font-style: normal;
}

.role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.role-row span {
  color: #c6d1dc;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.role-row strong {
  color: #fff;
}

.squad-management-backdrop {
  z-index: 30;
}

.squad-management-modal {
  position: relative;
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100svh - 34px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 88% 0%, rgba(0, 148, 255, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(8, 30, 48, 0.98), rgba(3, 13, 24, 0.99)),
    #07111c;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.squad-management-modal .modal-close {
  top: 14px;
  right: 14px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.squad-management-head {
  display: grid;
  gap: 8px;
  padding: 22px 72px 18px 22px;
  border-bottom: 1px solid rgba(0, 148, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.12), transparent 66%),
    rgba(255, 255, 255, 0.02);
}

.squad-management-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
}

.squad-management-head p {
  max-width: 660px;
  margin: 0;
  color: #b8c8d7;
  font-weight: 800;
  line-height: 1.35;
}

.squad-management-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.squad-management-summary article {
  min-width: 124px;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 7px;
  background: rgba(2, 13, 24, 0.76);
}

.squad-management-summary span,
.squad-management-rating em {
  color: #aebdcc;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.squad-management-summary strong {
  color: #fff;
  font-size: 1.08rem;
}

.squad-management-table {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  overflow: auto;
}

.squad-management-row {
  min-height: 66px;
  display: grid;
  grid-template-columns: 46px minmax(170px, 1fr) 62px 76px 82px 126px 92px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(0, 148, 255, 0.15);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(2, 13, 24, 0.72);
  text-align: left;
}

.squad-management-row:hover {
  border-color: rgba(0, 148, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.16), rgba(255, 255, 255, 0.025)),
    rgba(2, 13, 24, 0.9);
}

.squad-management-row.starter {
  border-color: rgba(62, 208, 143, 0.2);
}

.squad-management-row.injured {
  border-color: rgba(255, 79, 85, 0.28);
  opacity: 0.82;
}

.squad-management-row .player-avatar-wrap,
.squad-management-row .player-avatar,
.squad-management-row .player-avatar-img {
  width: 42px;
  height: 42px;
}

.squad-management-player {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.squad-management-player strong {
  overflow: hidden;
  color: #fff;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.squad-management-player span {
  overflow: hidden;
  color: #aebdcc;
  font-size: 0.74rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-management-position,
.squad-management-role {
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 999px;
  color: #65d4ff;
  background: rgba(0, 148, 255, 0.09);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.squad-management-role {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

.squad-management-row.starter .squad-management-role {
  color: #29e484;
  border-color: rgba(41, 228, 132, 0.25);
  background: rgba(41, 228, 132, 0.1);
}

.squad-management-row.injured .squad-management-role {
  color: #ff7a7a;
  border-color: rgba(255, 79, 85, 0.26);
  background: rgba(255, 79, 85, 0.1);
}

.squad-management-rating {
  display: grid;
  gap: 2px;
}

.squad-management-rating b {
  color: #fff;
  font-size: 1.04rem;
  line-height: 1;
}

.squad-management-rating.effective b {
  color: #36e98d;
}

.squad-management-energy {
  position: relative;
  height: 30px;
  display: grid;
  align-items: center;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.squad-management-energy i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--energy, 100%);
  background: color-mix(in srgb, var(--energy-color, #27e66a) 45%, transparent);
}

.squad-management-energy b {
  position: relative;
  z-index: 1;
  justify-self: end;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 1000;
}

@media (max-width: 760px) {
  .squad-management-row {
    grid-template-columns: 42px minmax(0, 1fr) 54px 72px;
  }

  .squad-management-rating.effective,
  .squad-management-energy,
  .squad-management-role {
    display: none;
  }
}

@media (max-width: 1280px) {
  .game.pcm-premium-shell .squad-screen {
    grid-template-columns: 1fr;
  }

  .squad-coach-card {
    grid-template-rows: auto;
  }

  .coach-portrait {
    display: none;
  }
}

/* Mercado body redesign. Top and bottom navigation are intentionally untouched. */
.game.pcm-premium-shell .market-screen {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "hero hero hero hero hero hero hero recent recent recent recent recent"
    "targets targets targets search search list list list list list budget budget"
    "targets targets targets search search list list list list list budget budget";
  gap: 14px;
  min-height: 620px;
}

.market-hero-panel,
.market-recent-panel,
.market-objectives-panel,
.market-search-panel,
.market-list-panel,
.market-budget-panel {
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.88), rgba(4, 15, 26, 0.96)),
    rgba(3, 12, 22, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.market-hero-panel {
  grid-area: hero;
  min-height: 300px;
  display: grid;
  align-content: space-between;
  padding: 26px 28px 0;
  background:
    linear-gradient(90deg, rgba(2, 11, 22, 0.96) 0 34%, rgba(2, 11, 22, 0.7) 48%, rgba(2, 11, 22, 0.2)),
    linear-gradient(180deg, transparent 58%, rgba(2, 11, 22, 0.92)),
    url("./assets/market/market-banner.png") center right / cover no-repeat;
}

.market-hero-copy {
  max-width: 440px;
}

.market-hero-copy span,
.market-objectives-panel h3,
.market-search-panel h3,
.market-budget-panel h3,
.market-panel-head h3 {
  margin: 0;
  color: #0c9cff;
  font-size: 0.95rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.market-hero-copy h2 {
  margin: 14px 0 10px;
  color: #fff;
  font-size: 2.1rem;
  line-height: 1.05;
}

.market-hero-copy p,
.market-search-panel p {
  margin: 0 0 18px;
  color: #cbd6e1;
  font-size: 0.98rem;
  line-height: 1.55;
}

.market-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 -28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(4, 15, 26, 0.1), rgba(4, 15, 26, 0.82));
}

.market-hero-stats div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px 26px;
  border-right: 1px solid rgba(0, 148, 255, 0.18);
}

.market-hero-stats strong {
  color: #0c9cff;
  font-size: 2rem;
  line-height: 1;
}

.market-hero-stats span {
  color: #d8e2ea;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.market-hero-stats .market-rotation-stat strong {
  color: #ffc84a;
}

.market-recent-panel {
  grid-area: recent;
  padding: 18px 22px;
}

.market-coach-panel {
  position: relative;
  min-height: 300px;
  display: grid;
  align-content: end;
  padding: 24px;
  background:
    linear-gradient(90deg, rgba(2, 10, 20, 0.94) 0 28%, rgba(2, 10, 20, 0.54) 48%, rgba(2, 10, 20, 0.06)),
    linear-gradient(180deg, transparent 50%, rgba(2, 10, 20, 0.82)),
    url("./assets/market/coach-banner.png") center right / cover no-repeat;
}

.market-coach-banner-copy {
  max-width: 300px;
  display: grid;
  gap: 8px;
}

.market-coach-banner-copy span {
  color: #ffbf2b;
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.market-coach-banner-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  text-transform: uppercase;
}

.market-coach-banner-copy p {
  margin: 0 0 8px;
  color: #dce7ef;
  font-size: 0.92rem;
  line-height: 1.35;
}

.market-coach-banner-copy .primary-btn {
  width: fit-content;
  min-width: 160px;
}

.market-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.market-panel-head button,
.market-panel-head span {
  color: #fff;
  border: 0;
  background: transparent;
  font-weight: 900;
}

.market-panel-note {
  margin: -2px 0 16px;
  color: #9fb3c8;
  font-size: 0.8rem;
  line-height: 1.45;
}

.market-transfer-list,
.market-target-list,
.market-player-list {
  display: grid;
  gap: 10px;
}

.market-transfer-row {
  display: grid;
  grid-template-columns: 42px minmax(120px, 1fr) 46px 18px 46px minmax(74px, auto) 62px;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.market-transfer-row .player-avatar-wrap,
.market-transfer-row .player-avatar,
.market-transfer-row .player-avatar-img {
  width: 42px;
  height: 42px;
}

.market-transfer-row strong,
.market-target-card strong,
.market-player-main strong {
  color: #fff;
}

.market-transfer-row span,
.market-transfer-row em,
.market-target-card span,
.market-target-card em,
.market-player-main span,
.market-player-row small,
.market-budget-panel span,
.market-budget-panel small {
  color: #aebdcc;
  font-style: normal;
  font-size: 0.78rem;
}

.market-transfer-row b {
  color: #fff;
  text-align: center;
}

.market-money {
  color: #00df72 !important;
  text-align: right;
}

.market-objectives-panel {
  grid-area: targets;
  padding: 16px 18px;
}

.market-target-card {
  width: 100%;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 9px;
  border: 1px solid rgba(0, 148, 255, 0.12);
  border-radius: 8px;
  color: inherit;
  background:
    linear-gradient(145deg, rgba(10, 40, 64, 0.58), rgba(4, 16, 28, 0.82)),
    rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  text-align: left;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.market-target-card:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 196, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(13, 54, 86, 0.72), rgba(5, 20, 34, 0.92)),
    rgba(0, 148, 255, 0.04);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(0, 148, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.market-target-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-target-card .player-avatar-wrap,
.market-target-card .player-avatar,
.market-target-card .player-avatar-img {
  width: 44px;
  height: 44px;
}

.market-target-card div {
  display: grid;
  gap: 2px;
}

.market-target-card > b,
.market-rating {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  border: 3px solid #20d061;
  border-radius: 50%;
  color: #8cff95;
  font-weight: 1000;
}

.market-link-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 16px;
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 6px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0, 148, 255, 0.12), rgba(0, 18, 34, 0.52)),
    rgba(0, 18, 34, 0.42);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.market-link-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 196, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(0, 148, 255, 0.2), rgba(0, 32, 58, 0.68)),
    rgba(0, 18, 34, 0.58);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(0, 148, 255, 0.13);
}

.market-search-panel {
  grid-area: search;
  padding: 16px 18px;
}

.market-filter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.market-filter-control {
  display: grid;
  gap: 7px;
}

.market-filter-control span {
  color: #aebdcc;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.market-filter-control select {
  width: 100%;
  min-height: 46px;
  padding: 0 34px 0 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.055);
  font-weight: 900;
  color-scheme: dark;
}

.market-filter-control select option {
  color: #eef6ff;
  background: #081827;
}

.market-filter-control select:focus {
  outline: 2px solid rgba(0, 148, 255, 0.48);
  outline-offset: 2px;
}

.market-list-panel {
  grid-area: list;
  padding: 16px;
}

.market-player-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

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

.market-preview-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px 82px;
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(10, 36, 56, 0.88), rgba(5, 18, 31, 0.94)),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 24px rgba(0, 0, 0, 0.16);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.market-preview-player-row:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 196, 255, 0.35);
  background:
    linear-gradient(145deg, rgba(12, 47, 74, 0.96), rgba(6, 22, 38, 0.98)),
    rgba(0, 148, 255, 0.045);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(0, 148, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.market-preview-main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: left;
}

.market-preview-main .player-avatar-wrap,
.market-preview-main .player-avatar,
.market-preview-main .player-avatar-img {
  width: 36px;
  height: 36px;
}

.market-preview-main div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.market-preview-main strong,
.market-preview-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-preview-main strong {
  color: #fff;
  font-size: 0.9rem;
}

.market-preview-main span {
  color: #aebdcc;
  font-size: 0.72rem;
}

.market-preview-main em {
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 3px 8px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-preview-main em.positive {
  color: #00180b;
  background: linear-gradient(180deg, #35f58d, #05c769);
}

.market-preview-main em.neutral {
  color: #1b1300;
  background: linear-gradient(180deg, #ffd56a, #f3ad25);
}

.market-preview-main em.negative {
  color: #fff;
  background: linear-gradient(180deg, #ff7777, #d83b3b);
}

.market-preview-main em.bad {
  color: #fff;
  background: linear-gradient(180deg, #ff6868, #bf2e3c);
}

.market-preview-main em.acceptable {
  color: #1b1300;
  background: linear-gradient(180deg, #ffd56a, #f1a91d);
}

.market-preview-main em.good {
  color: #00180b;
  background: linear-gradient(180deg, #35f58d, #05c769);
}

.market-preview-main em.excellent {
  color: #00180b;
  background: linear-gradient(180deg, #72ffc1, #13df80);
  box-shadow: 0 0 12px rgba(53, 245, 141, 0.26);
}

.market-preview-main em.premium {
  color: #fff;
  background: linear-gradient(180deg, #b35cff, #7038d8);
  box-shadow: 0 0 14px rgba(181, 91, 255, 0.4);
}

.market-player-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 78px;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  padding: 10px;
  border: 1px solid rgba(0, 148, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(10, 34, 54, 0.76), rgba(5, 17, 30, 0.9)),
    rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.market-player-row:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 196, 255, 0.32);
  background:
    linear-gradient(145deg, rgba(12, 47, 74, 0.86), rgba(6, 22, 38, 0.96)),
    rgba(0, 148, 255, 0.04);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.2),
    0 0 18px rgba(0, 148, 255, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.market-player-main {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.market-player-main .player-avatar-wrap,
.market-player-main .player-avatar,
.market-player-main .player-avatar-img {
  width: 38px;
  height: 38px;
}

.market-player-main div,
.market-player-row div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.market-player-main strong,
.market-player-main span,
.market-player-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-player-main .market-synergy-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  overflow: visible;
  color: #f2fbff;
  white-space: normal;
}

.market-target-card .market-synergy-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.market-player-main .market-synergy-badge b,
.market-player-main .market-synergy-badge em,
.market-target-card .market-synergy-badge b,
.market-target-card .market-synergy-badge em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 20px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 1000;
  line-height: 1.05;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.16);
  white-space: nowrap;
}

.market-player-main .market-synergy-badge.positive b,
.market-target-card .market-synergy-badge.positive b {
  color: #00180b;
  border: 1px solid rgba(104, 255, 173, 0.4);
  background: linear-gradient(180deg, #35f58d, #05c769);
}

.market-player-main .market-synergy-badge.neutral b,
.market-target-card .market-synergy-badge.neutral b {
  color: #1b1300;
  border: 1px solid rgba(255, 221, 120, 0.45);
  background: linear-gradient(180deg, #ffd56a, #f3ad25);
}

.market-player-main .market-synergy-badge.negative b,
.market-target-card .market-synergy-badge.negative b {
  color: #fff;
  border: 1px solid rgba(255, 146, 146, 0.5);
  background: linear-gradient(180deg, #ff7777, #d83b3b);
}

.market-player-main .market-synergy-badge.bad b,
.market-target-card .market-synergy-badge.bad b {
  color: #fff;
  border: 1px solid rgba(255, 119, 119, 0.56);
  background: linear-gradient(180deg, #ff6868, #bf2e3c);
}

.market-player-main .market-synergy-badge.acceptable b,
.market-target-card .market-synergy-badge.acceptable b {
  color: #1b1300;
  border: 1px solid rgba(255, 221, 120, 0.5);
  background: linear-gradient(180deg, #ffd56a, #f1a91d);
}

.market-player-main .market-synergy-badge.good b,
.market-target-card .market-synergy-badge.good b {
  color: #00180b;
  border: 1px solid rgba(104, 255, 173, 0.42);
  background: linear-gradient(180deg, #35f58d, #05c769);
}

.market-player-main .market-synergy-badge.excellent b,
.market-target-card .market-synergy-badge.excellent b {
  color: #00180b;
  border: 1px solid rgba(145, 255, 195, 0.62);
  background: linear-gradient(180deg, #72ffc1, #13df80);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 15px rgba(53, 245, 141, 0.32);
}

.market-player-main .market-synergy-badge.premium b,
.market-target-card .market-synergy-badge.premium b {
  color: #fff;
  border: 1px solid rgba(211, 145, 255, 0.7);
  background: linear-gradient(180deg, #b35cff, #7038d8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 18px rgba(181, 91, 255, 0.44);
}

.market-player-main .market-synergy-badge em,
.market-target-card .market-synergy-badge em {
  color: #d8edf8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

.market-player-main .market-synergy-badge em.tag-positive,
.market-player-main .market-synergy-badge em.pa-boost,
.market-target-card .market-synergy-badge em.tag-positive,
.market-target-card .market-synergy-badge em.pa-boost {
  color: #00180b;
  border-color: rgba(53, 245, 141, 0.45);
  background: linear-gradient(180deg, #35f58d, #05c769);
}

.market-player-main .market-synergy-badge em.tag-warning,
.market-target-card .market-synergy-badge em.tag-warning {
  color: #1b1300;
  border-color: rgba(255, 213, 106, 0.48);
  background: linear-gradient(180deg, #ffd56a, #f3ad25);
}

.market-player-main .market-synergy-badge em.tag-negative,
.market-target-card .market-synergy-badge em.tag-negative {
  color: #fff;
  border-color: rgba(255, 119, 119, 0.5);
  background: linear-gradient(180deg, #ff7777, #d83b3b);
}

.market-player-main .market-synergy-badge em.tag-neutral,
.market-target-card .market-synergy-badge em.tag-neutral {
  color: #d8edf8;
  border-color: rgba(0, 148, 255, 0.24);
  background: rgba(0, 148, 255, 0.11);
}

.market-rating {
  width: 38px;
  height: 38px;
  border-width: 2px;
}

.market-player-row > div:not(:nth-of-type(3)) {
  display: none;
}

.market-negotiate-btn {
  min-height: 40px;
  border: 1px solid rgba(0, 224, 114, 0.52);
  border-radius: 7px;
  color: #00160b;
  background: linear-gradient(180deg, #20f07b, #00b85d);
  font-weight: 1000;
  box-shadow:
    0 10px 20px rgba(0, 224, 114, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.market-negotiate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 26px rgba(0, 224, 114, 0.18),
    0 0 18px rgba(0, 224, 114, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.market-negotiate-btn:disabled {
  opacity: 0.45;
}

.market-budget-panel {
  grid-area: budget;
  padding: 18px 20px;
}

.market-budget-panel strong {
  display: block;
  margin: 14px 0 18px;
  color: #00df72;
  font-size: 2rem;
  line-height: 1;
}

.market-budget-panel b {
  display: block;
  margin: 8px 0;
  color: #fff;
  font-size: 1.1rem;
}

.market-budget-line {
  height: 1px;
  margin: 18px 0;
  background: rgba(255, 255, 255, 0.1);
}

.market-full-backdrop {
  display: grid;
  place-items: center;
  padding: 24px;
}

.market-full-modal {
  position: relative;
  width: min(1120px, calc(100vw - 40px));
  max-height: min(780px, calc(100svh - 56px));
  padding: 20px;
  overflow: auto;
  border: 1px solid rgba(0, 148, 255, 0.34);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.96), rgba(3, 13, 24, 0.98)),
    #06111e;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.market-full-modal .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

.market-full-head {
  max-width: 680px;
  margin-bottom: 16px;
}

.market-full-head span {
  color: #ffc84a;
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.market-full-head h3 {
  margin: 5px 0;
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
}

.market-full-head p {
  margin: 0;
  color: #aebdcc;
  font-size: 0.9rem;
}

.market-full-grid {
  display: grid;
  gap: 8px;
}

.market-full-grid .market-player-row {
  grid-template-columns: minmax(220px, 1.6fr) 48px repeat(4, minmax(82px, 0.75fr)) 96px;
}

.market-full-grid .market-player-row > div {
  display: grid !important;
}

.market-full-grid .market-player-main {
  grid-template-columns: 42px minmax(0, 1fr);
}

.market-full-grid .market-player-main .player-avatar-wrap,
.market-full-grid .market-player-main .player-avatar,
.market-full-grid .market-player-main .player-avatar-img {
  width: 42px;
  height: 42px;
}

@media (max-width: 1280px) {
  .game.pcm-premium-shell .market-screen {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "recent"
      "search"
      "list"
      "targets"
      "budget";
  }

  .market-player-row {
    grid-template-columns: minmax(210px, 1fr) 52px repeat(2, minmax(80px, 0.5fr)) 96px;
  }

  .market-player-row div:nth-of-type(3),
  .market-player-row div:nth-of-type(4) {
    display: none;
  }

  .market-preview-list {
    grid-template-columns: 1fr;
  }

  .market-full-grid .market-player-row {
    grid-template-columns: minmax(210px, 1fr) 48px repeat(2, minmax(78px, 0.55fr)) 92px;
  }

  .market-full-grid .market-player-row > div:nth-of-type(3),
  .market-full-grid .market-player-row > div:nth-of-type(4) {
    display: none !important;
  }
}

/* Premium reward/player modal styling. */
.modal-backdrop {
  background:
    radial-gradient(circle at 50% 20%, rgba(0, 148, 255, 0.18), transparent 34%),
    rgba(1, 7, 13, 0.82);
  backdrop-filter: blur(12px);
}

.player-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100svh - 28px);
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(0, 148, 255, 0.32);
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.96), rgba(3, 13, 24, 0.98)),
    #07111c;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.player-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 148px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 148, 255, 0.18), transparent 58%, rgba(255, 190, 47, 0.11)),
    radial-gradient(circle at 18% 35%, rgba(255, 255, 255, 0.12), transparent 30%);
}

.player-modal .modal-close {
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.player-modal .player-hero {
  position: relative;
  z-index: 2;
  grid-template-columns: 86px minmax(0, 1fr) 68px;
  gap: 16px;
  min-height: 124px;
  padding: 24px 78px 22px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.player-modal .player-hero .player-avatar-wrap,
.player-modal .player-hero .player-avatar,
.player-modal .player-hero .player-avatar-img {
  width: 76px;
  height: 76px;
}

.player-modal .player-hero .player-avatar-img,
.player-modal .player-hero .player-avatar {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36);
}

.player-modal .player-hero h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0;
}

.player-modal .player-hero .muted {
  color: #b9c8d7;
  font-size: 0.95rem;
  font-weight: 800;
}

.player-modal .rating.big {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 190, 47, 0.62);
  border-radius: 8px;
  color: #10110b;
  background: linear-gradient(180deg, #ffd873, #ffb71c);
  box-shadow: 0 10px 24px rgba(255, 190, 47, 0.24);
  font-size: 1.45rem;
  font-weight: 1000;
}

.player-modal .player-detail-grid,
.player-modal .player-economy {
  padding: 18px 22px 0;
}

.player-modal .player-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
}

.player-modal .detail-stat,
.player-modal .player-economy > div {
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(2, 13, 24, 0.62);
}

.player-modal .detail-stat span,
.player-modal .player-economy span {
  color: #93a8bb;
  font-size: 0.75rem;
  font-weight: 1000;
}

.player-modal .detail-stat strong {
  margin-top: 6px;
  color: #f4f8ff;
  font-size: 1.35rem;
}

.player-modal .player-economy {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 0;
  padding-bottom: 0;
}

.player-modal .player-economy strong {
  color: #fff;
  font-size: 1rem;
}

.player-modal .player-energy-row {
  margin: 10px 22px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--energy-color, #27e66a) 13%, transparent), rgba(255, 255, 255, 0.02)),
    rgba(2, 13, 24, 0.62);
}

.player-modal .player-energy-row span {
  color: #93a8bb;
  font-size: 0.75rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.player-modal .player-energy-row strong {
  color: var(--energy-color, #27e66a);
  font-size: 1.08rem;
  font-weight: 1000;
}

.player-modal .player-internal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 22px 0;
}

.player-modal .player-internal-stat {
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)),
    rgba(5, 20, 34, 0.84);
}

.player-modal .player-internal-stat span {
  display: block;
  color: #93a8bb;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.player-modal .player-internal-stat strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #f4f8ff;
  font-size: 0.98rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-modal .player-internal-stat.good strong {
  color: #20e979;
}

.player-modal .player-internal-stat.mid strong {
  color: #ffd35a;
}

.player-modal .player-internal-stat.low strong {
  color: #ff6d6d;
}

.player-modal .transfer-note {
  margin: 18px 22px 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 190, 47, 0.35);
  border-radius: 8px;
  color: #cdd8e4;
  background:
    linear-gradient(90deg, rgba(255, 190, 47, 0.13), rgba(0, 224, 114, 0.07)),
    rgba(2, 13, 24, 0.72);
}

.player-modal .transfer-note strong {
  color: #ffd35a;
  font-size: 1.02rem;
}

.player-modal .transfer-note .primary-btn {
  min-width: 116px;
  min-height: 44px;
  border: 1px solid rgba(0, 224, 114, 0.5);
  color: #00160b;
  background: linear-gradient(180deg, #22ee7d, #00b85d);
  box-shadow: 0 10px 24px rgba(0, 224, 114, 0.16);
}

.player-modal .player-sale-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-color: rgba(255, 84, 84, 0.35);
  background:
    linear-gradient(90deg, rgba(255, 84, 84, 0.14), rgba(255, 190, 47, 0.08)),
    rgba(2, 13, 24, 0.72);
}

.player-modal .player-sale-note .danger-btn {
  min-width: 136px;
  min-height: 42px;
}

.coach-market-modal {
  width: min(980px, calc(100vw - 28px));
}

.coach-market-head {
  position: relative;
  z-index: 2;
  padding: 24px 78px 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.coach-market-head h3 {
  margin: 6px 0;
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
}

.coach-market-head p {
  max-width: 640px;
  margin: 0;
  color: #b9c8d7;
  line-height: 1.45;
}

.coach-market-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 22px 22px;
}

.coach-market-card {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(7, 28, 46, 0.82), rgba(3, 13, 24, 0.96)),
    rgba(2, 13, 24, 0.76);
}

.coach-market-card.active {
  border-color: rgba(255, 190, 47, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 190, 47, 0.16);
}

.coach-market-portrait {
  grid-row: span 3;
  min-height: 210px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(2, 13, 24, 0.72);
}

.coach-market-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.coach-market-info {
  display: grid;
  gap: 4px;
  align-content: start;
}

.coach-market-info span {
  color: #ffbf2b;
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-market-info h4 {
  margin: 0;
  color: #fff;
  font-size: 1.2rem;
}

.coach-market-info small {
  color: #9fb0bf;
  font-weight: 800;
}

.coach-market-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.coach-market-stats div {
  min-height: 64px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(0, 148, 255, 0.16);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.coach-market-stats span {
  color: #94aabd;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-market-stats strong {
  color: #f4f8ff;
  font-size: 1.25rem;
}

.coach-market-synergy {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(0, 148, 255, 0.12), rgba(2, 13, 24, 0.72)),
    rgba(255, 255, 255, 0.035);
}

.coach-market-synergy span {
  color: #b9c8d7;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.coach-market-synergy strong {
  grid-row: span 2;
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
}

.coach-market-synergy small {
  color: #8fa4b7;
  font-size: 0.72rem;
  font-weight: 900;
}

.coach-market-synergy.bad {
  border-color: rgba(255, 104, 104, 0.42);
  box-shadow: inset 0 0 18px rgba(191, 46, 60, 0.14);
}

.coach-market-synergy.bad strong,
.coach-market-synergy.bad small {
  color: #ff8585;
}

.coach-market-synergy.acceptable {
  border-color: rgba(255, 213, 106, 0.38);
  box-shadow: inset 0 0 18px rgba(243, 173, 37, 0.12);
}

.coach-market-synergy.acceptable strong,
.coach-market-synergy.acceptable small {
  color: #ffd56a;
}

.coach-market-synergy.good,
.coach-market-synergy.excellent {
  border-color: rgba(53, 245, 141, 0.38);
  box-shadow: inset 0 0 18px rgba(53, 245, 141, 0.12);
}

.coach-market-synergy.good strong,
.coach-market-synergy.good small,
.coach-market-synergy.excellent strong,
.coach-market-synergy.excellent small {
  color: #35f58d;
}

.coach-market-synergy.premium {
  border-color: rgba(181, 91, 255, 0.48);
  box-shadow: inset 0 0 20px rgba(181, 91, 255, 0.16), 0 0 16px rgba(181, 91, 255, 0.16);
}

.coach-market-synergy.premium strong,
.coach-market-synergy.premium small {
  color: #d59aff;
}

.coach-market-card > button {
  grid-column: 2;
  min-height: 42px;
}

@media (max-width: 760px) {
  .player-modal .player-hero,
  .player-modal .player-detail-grid,
  .player-modal .player-economy {
    grid-template-columns: 1fr;
  }

  .player-modal .player-hero {
    padding-right: 70px;
  }

  .player-modal .transfer-note {
    align-items: stretch;
    flex-direction: column;
  }

  .coach-market-grid,
  .coach-market-card {
    grid-template-columns: 1fr;
  }

  .coach-market-portrait,
  .coach-market-synergy,
  .coach-market-card > button {
    grid-column: auto;
    grid-row: auto;
  }

  .coach-market-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-modal .player-internal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-president-dashboard {
  gap: 12px;
}

.president-profile-hero {
  position: relative;
  min-height: 186px;
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.25fr) 180px;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  padding: 24px 28px;
  border: 1px solid rgba(0, 148, 255, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(2, 10, 19, 0.96) 0%, rgba(3, 18, 31, 0.78) 46%, rgba(2, 10, 19, 0.88) 100%),
    radial-gradient(circle at 78% 28%, rgba(255, 190, 47, 0.16), transparent 34%),
    url("./assets/login/slide-despacho.png") center 44% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 18px 50px rgba(0, 0, 0, 0.28);
}

.president-profile-hero::before,
.president-profile-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.president-profile-hero::before {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 13, 23, 0.18), rgba(5, 13, 23, 0.7)),
    radial-gradient(circle at 88% 22%, rgba(255, 190, 47, 0.2), transparent 24%);
}

.president-profile-hero::after {
  inset: 0;
  background: linear-gradient(90deg, transparent 0 72%, rgba(255, 190, 47, 0.1) 100%);
  opacity: 0.8;
}

.president-profile-hero > * {
  position: relative;
  z-index: 1;
}

.president-profile-identity {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.president-profile-avatar {
  width: 136px;
  height: 136px;
  overflow: hidden;
  border: 1px solid rgba(255, 190, 47, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 12%, rgba(255, 190, 47, 0.16), rgba(4, 16, 28, 0.95));
  box-shadow: 0 0 0 4px rgba(255, 190, 47, 0.08), 0 18px 32px rgba(0, 0, 0, 0.36);
}

.president-profile-avatar img,
.president-profile-avatar .president-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.president-profile-identity h3 {
  margin: 3px 0 2px;
  overflow-wrap: anywhere;
  color: #f8fbff;
  font-size: clamp(2.25rem, 4vw, 4.2rem);
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: lowercase;
}

.president-profile-identity p {
  margin: 0;
  color: rgba(245, 249, 255, 0.9);
  font-size: 1.05rem;
  font-weight: 1000;
}

.president-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.president-profile-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(235, 243, 255, 0.82);
  font-size: 0.75rem;
  font-weight: 1000;
}

.president-honors {
  min-width: 0;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.president-honor-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
}

.president-honor-list article {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 16px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.president-honor-list article:last-child {
  border-right: 0;
}

.president-honor-list i {
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 2.15rem;
  line-height: 1;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.36));
}

.president-honor-list i svg {
  width: 38px;
  height: 38px;
  color: #ffc84b;
}

.president-honor-list strong {
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.president-honor-list span {
  color: #f3f7ff;
  font-size: 0.73rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.president-honor-list em {
  color: #a7b8c8;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.president-profile-crest {
  justify-self: end;
  width: 142px;
  height: 142px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 190, 47, 0.55);
  border-radius: 18px 18px 42px 42px;
  background:
    linear-gradient(145deg, rgba(255, 190, 47, 0.2), rgba(1, 23, 44, 0.78)),
    rgba(2, 13, 24, 0.8);
  color: #ffc84b;
  font-size: 2.3rem;
  font-weight: 1000;
  box-shadow: 0 0 0 6px rgba(255, 190, 47, 0.055), inset 0 0 32px rgba(255, 190, 47, 0.08);
}

.president-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.president-stat {
  min-height: 98px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon note";
  align-content: center;
  gap: 2px 14px;
  padding: 16px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(8, 30, 48, 0.86), rgba(4, 15, 26, 0.94));
}

.president-stat i {
  grid-area: icon;
  align-self: center;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 2rem;
  opacity: 0.82;
}

.president-stat i svg,
.president-confidence-row i svg,
.president-history-row i svg,
.president-recent-row i svg {
  width: 26px;
  height: 26px;
  color: currentColor;
}

.president-stat span {
  grid-area: label;
  color: #94aabd;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.president-stat strong {
  grid-area: value;
  overflow: hidden;
  color: #fff;
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-stat em {
  grid-area: note;
  overflow: hidden;
  color: #a7b8c8;
  font-size: 0.73rem;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-profile-main {
  display: grid;
  grid-template-columns: minmax(340px, 0.86fr) minmax(360px, 0.82fr) minmax(380px, 0.94fr);
  gap: 12px;
}

.public-profile-page {
  display: grid;
  gap: 14px;
}

.public-profile-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
  align-items: end;
  gap: 14px;
}

.public-profile-search h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 1.25rem;
  text-transform: uppercase;
}

.public-profile-search-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.public-profile-search form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.public-profile-logout {
  min-width: 146px;
  justify-content: center;
}

.public-profile-logout svg {
  width: 16px;
  height: 16px;
}

.public-profile-search input {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 245, 225, 0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
}

.public-profile-search-message {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  color: #f3c66f;
  font-size: 0.82rem;
  font-weight: 800;
}

.public-profile-card {
  overflow: hidden;
  border: 1px solid rgba(216, 169, 90, 0.2);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(10, 12, 14, 0.96), rgba(4, 5, 6, 0.98));
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.38);
}

.public-profile-banner {
  position: relative;
  min-height: 220px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
}

.public-profile-banner video,
.public-profile-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(1.05);
}

.public-profile-banner-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.25) 58%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
}

.public-profile-identity,
.public-profile-rank {
  position: relative;
  z-index: 1;
}

.public-profile-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: min(680px, 72vw);
  padding: 12px 14px;
  border-left: 3px solid rgba(243, 198, 111, 0.86);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), transparent);
}

.public-profile-avatar {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(243, 198, 111, 0.44);
  border-radius: 50%;
  color: #f3c66f;
  background: rgba(0, 0, 0, 0.48);
  font-size: 1.35rem;
  font-weight: 1000;
}

.public-profile-avatar img,
.public-profile-avatar .president-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-profile-identity span,
.public-profile-rank span {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.public-profile-identity h3 {
  margin: 5px 0;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.82);
}

.public-profile-identity p {
  margin: 0;
  color: rgba(248, 239, 225, 0.78);
  font-weight: 900;
}

.public-profile-rank {
  min-width: 132px;
  padding: 14px;
  border: 1px solid rgba(255, 245, 225, 0.14);
  border-radius: 8px;
  text-align: right;
  background: rgba(0, 0, 0, 0.5);
}

.public-profile-rank strong {
  display: block;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.public-profile-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 245, 225, 0.08);
}

.public-profile-metrics article {
  min-height: 92px;
  padding: 14px;
  background: rgba(7, 9, 10, 0.98);
}

.public-profile-metrics span,
.public-profile-metrics em {
  display: block;
  color: rgba(248, 239, 225, 0.58);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.public-profile-metrics strong {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
}

.public-profile-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 14px;
}

.public-profile-trophies > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.public-profile-recent-list {
  display: grid;
  gap: 8px;
}

.public-profile-match-row {
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 245, 225, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.26);
}

.public-profile-match-row > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f3c66f;
  background: rgba(243, 198, 111, 0.12);
  font-size: 0.72rem;
  font-weight: 1000;
}

.public-profile-match-row strong,
.public-profile-match-row small,
.public-profile-match-row em,
.public-profile-match-row b {
  display: block;
}

.public-profile-match-row strong {
  color: #fff;
  font-size: 0.9rem;
}

.public-profile-match-row small {
  color: rgba(248, 239, 225, 0.56);
}

.public-profile-match-row em {
  color: #fff;
  font-style: normal;
  font-weight: 1000;
  text-align: right;
}

.public-profile-match-row b {
  color: rgba(248, 239, 225, 0.58);
  font-size: 0.64rem;
  text-transform: uppercase;
}

.public-profile-match-row.win em { color: #22c889; }
.public-profile-match-row.loss em { color: #f25757; }
.public-profile-match-row.draw em { color: #f3c66f; }

.president-confidence-card,
.president-recent-card,
.president-history-card,
.president-timeline-card,
.president-best-card {
  padding: 18px;
  border-color: rgba(0, 148, 255, 0.2);
  background:
    linear-gradient(145deg, rgba(8, 30, 48, 0.88), rgba(4, 15, 26, 0.96)),
    rgba(2, 13, 24, 0.8);
}

.president-confidence-list {
  display: grid;
  gap: 19px;
  margin-top: 24px;
}

.president-confidence-row {
  display: grid;
  grid-template-columns: 34px 82px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.president-confidence-row i {
  color: #b7c5d5;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 1.35rem;
}

.president-confidence-row span {
  color: #f4f8ff;
  font-size: 0.82rem;
  font-weight: 1000;
}

.president-confidence-row b {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}

.president-confidence-row b em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #177fff, #39dfcc);
}

.president-confidence-row strong {
  justify-self: end;
  color: #fff;
  font-size: 0.88rem;
}

.president-recent-list,
.president-history-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.president-recent-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 72px 24px;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.president-recent-row strong,
.president-history-row strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-recent-row span,
.president-history-row span {
  display: block;
  color: #9fb0bf;
  font-size: 0.7rem;
  font-weight: 800;
}

.president-recent-row em {
  display: grid;
  justify-items: end;
  color: #2cf08a;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 1000;
}

.president-recent-row em.loss {
  color: #ff6262;
}

.president-recent-row em.draw {
  color: #ffbf2b;
}

.president-recent-row em small {
  display: block;
  font-size: 0.68rem;
}

.president-recent-row i {
  color: #b7c5d5;
  display: grid;
  place-items: center;
  font-style: normal;
  opacity: 0.9;
}

.president-recent-card .store-outline-btn,
.president-history-card .secondary-btn,
.president-history-card .store-outline-btn,
.president-timeline-card .store-outline-btn {
  min-height: 34px;
}

.president-history-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 126px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.president-history-row.won {
  border-color: rgba(255, 190, 47, 0.45);
  background: linear-gradient(90deg, rgba(255, 190, 47, 0.1), rgba(255, 255, 255, 0.035));
}

.president-history-row i {
  display: grid;
  place-items: center;
  color: #ffbf2b;
  font-style: normal;
  font-size: 1.45rem;
}

.president-history-row em {
  display: grid;
  justify-items: end;
  color: #a7b8c8;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.president-history-row em b {
  margin-top: 3px;
  color: #ffbf2b;
  font-size: 0.86rem;
}

.president-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 12px;
}

.president-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.president-timeline::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, #1b86ff, #ffbf2b);
  opacity: 0.72;
}

.president-timeline div {
  position: relative;
  min-width: 0;
  padding-top: 26px;
}

.president-timeline div::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 3px solid #58b8ff;
  border-radius: 50%;
  background: #06131f;
  box-shadow: 0 0 0 4px rgba(27, 134, 255, 0.12);
}

.president-timeline strong {
  display: block;
  color: #1b9bff;
  font-size: 0.95rem;
}

.president-timeline span,
.president-timeline em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.president-timeline span {
  margin-top: 4px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 1000;
}

.president-timeline em {
  color: #9fb0bf;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.president-best-card {
  position: relative;
  overflow: hidden;
}

.president-best-card::after {
  content: "🏆";
  position: absolute;
  right: 28px;
  bottom: 18px;
  color: rgba(255, 190, 47, 0.25);
  font-size: 4.8rem;
}

.president-best-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 14px;
  color: #1b86ff;
  font-size: 2.4rem;
  line-height: 1;
}

.president-best-card p {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: #fff;
  font-weight: 1000;
}

@media (max-width: 1320px) {
  .president-profile-hero {
    grid-template-columns: 1fr;
  }

  .president-honors {
    padding-left: 0;
    border-left: 0;
  }

  .president-profile-crest {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 110px;
    height: 110px;
    opacity: 0.36;
  }

  .president-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .president-profile-main,
  .president-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .president-profile-hero {
    padding: 18px;
  }

  .president-profile-identity {
    grid-template-columns: 1fr;
  }

  .president-profile-avatar {
    width: 112px;
    height: 112px;
  }

  .president-honor-list,
  .president-stat-grid,
  .president-timeline {
    grid-template-columns: 1fr;
  }

  .president-honor-list article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
  }

  .president-confidence-row,
  .president-recent-row,
  .president-history-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .president-timeline::before {
    display: none;
  }
}

/* Login visibility guard: keeps the access panel above decorative layers. */
.auth-screen {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(380px, 620px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "nav nav"
    "login showcase"
    "trust trust"
    "copy copy" !important;
  align-items: center !important;
  min-height: 100svh !important;
  padding: 48px 5.6vw 18px !important;
  overflow-x: hidden !important;
}

.auth-screen .auth-landing-nav {
  grid-area: nav !important;
  position: relative !important;
  z-index: 80 !important;
  width: 100% !important;
}

.auth-screen .auth-scene-bg {
  display: none !important;
}

.auth-screen .auth-panel-wrap {
  grid-area: login !important;
  position: relative !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.auth-screen .auth-panel {
  position: relative !important;
  z-index: 51 !important;
  display: grid !important;
  width: min(100%, 620px) !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.auth-screen .auth-art {
  grid-area: showcase !important;
  position: relative !important;
  z-index: 10 !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.auth-screen .auth-trust-bar {
  grid-area: trust !important;
  position: relative !important;
  z-index: 50 !important;
  width: 100% !important;
}

.auth-screen .auth-copyright {
  grid-area: copy !important;
  position: relative !important;
  z-index: 50 !important;
}

@media (max-width: 980px) {
  .auth-screen {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "nav"
      "login"
      "showcase"
      "trust"
      "copy" !important;
    padding: 24px 18px 16px !important;
    overflow-y: auto !important;
  }

  .auth-screen .auth-panel {
    max-height: none;
  }
}

@media (max-width: 640px) {
  .auth-screen .auth-art {
    display: none !important;
  }
}

/* Public access page refresh. Scoped to auth only so the in-game shell remains untouched. */
.auth-screen:not(.auth-info-screen) {
  display: grid !important;
  grid-template-columns: minmax(430px, 0.52fr) minmax(0, 1fr) !important;
  grid-template-rows: 92px minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "nav nav"
    "login showcase"
    "trust trust"
    "footer footer" !important;
  gap: 18px !important;
  align-items: stretch !important;
  min-height: 100svh !important;
  padding: 0 18px 20px !important;
  color: #f4f8ff !important;
  background:
    radial-gradient(circle at 83% 7%, rgba(0, 111, 255, 0.17), transparent 24%),
    radial-gradient(circle at 14% 38%, rgba(0, 150, 255, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(0, 6, 13, 0.88), rgba(0, 8, 16, 0.98)),
    url("./assets/login/slide-liga.png") center / cover no-repeat !important;
  overflow-x: hidden !important;
}

.auth-screen:not(.auth-info-screen)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 6, 13, 0.88), rgba(0, 9, 19, 0.62) 48%, rgba(0, 6, 13, 0.94)),
    repeating-linear-gradient(135deg, transparent 0 68px, rgba(0, 132, 255, 0.035) 69px 70px);
}

.auth-screen:not(.auth-info-screen) .auth-landing-nav {
  grid-area: nav !important;
  display: grid !important;
  grid-template-columns: minmax(310px, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 26px !important;
  min-height: 92px !important;
  padding: 0 26px !important;
  border-bottom: 1px solid rgba(84, 139, 196, 0.25) !important;
  background: rgba(0, 7, 15, 0.72) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px) !important;
}

.auth-screen:not(.auth-info-screen) .auth-nav-brand {
  display: grid !important;
  grid-template-columns: auto 1px auto !important;
  align-items: center !important;
  gap: 28px !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  background: transparent !important;
  text-align: left !important;
}

.auth-screen:not(.auth-info-screen) .auth-nav-brand::before {
  content: none !important;
}

.auth-screen:not(.auth-info-screen) .auth-nav-brand strong {
  display: block !important;
  color: #f5f8ff !important;
  font-size: 2rem !important;
  font-style: italic !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.18) !important;
}

.auth-screen:not(.auth-info-screen) .auth-nav-brand strong::after {
  content: "";
  display: none !important;
}

.auth-screen:not(.auth-info-screen) .auth-nav-brand span {
  position: relative !important;
  display: block !important;
  color: #eef4ff !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.auth-screen:not(.auth-info-screen) .auth-nav-brand span::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 1px;
  height: 30px;
  background: rgba(185, 205, 232, 0.45);
  transform: translateY(-50%);
}

.auth-screen:not(.auth-info-screen) .auth-landing-nav nav {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 48px) !important;
  min-width: 0 !important;
}

.auth-screen:not(.auth-info-screen) .auth-landing-nav nav button {
  position: relative !important;
  min-width: 0 !important;
  padding: 34px 0 31px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f6f8fc !important;
  background: transparent !important;
  font-size: 0.95rem !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}

.auth-screen:not(.auth-info-screen) .auth-landing-nav nav button.active {
  color: #fff !important;
  box-shadow: none !important;
}

.auth-screen:not(.auth-info-screen) .auth-landing-nav nav button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #0057ff, #21a8ff);
  box-shadow: 0 0 16px rgba(0, 132, 255, 0.75);
}

.auth-nav-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 28px;
  border-left: 1px solid rgba(185, 205, 232, 0.22);
}

.auth-nav-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(141, 174, 211, 0.32);
  border-radius: 50%;
  color: #fff;
  background: rgba(2, 12, 24, 0.62);
}

.auth-nav-icon svg {
  width: 22px;
  height: 22px;
}

.auth-nav-icon i {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #1da7ff, #0057ff);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 1000;
}

.auth-screen:not(.auth-info-screen) .auth-panel-wrap {
  grid-area: login !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.auth-screen:not(.auth-info-screen) .auth-panel {
  width: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  align-content: center !important;
  padding: clamp(28px, 4.2vw, 58px) clamp(28px, 3.8vw, 52px) !important;
  border: 1px solid rgba(94, 138, 187, 0.45) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(135deg, rgba(0, 95, 255, 0.15), transparent 32%),
    linear-gradient(180deg, rgba(2, 15, 29, 0.92), rgba(1, 9, 18, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 26px 70px rgba(0, 0, 0, 0.46) !important;
}

.auth-screen:not(.auth-info-screen) .auth-product-logo strong {
  color: #fff !important;
  font-size: clamp(2.5rem, 4.3vw, 4.9rem) !important;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 26px rgba(0, 118, 255, 0.24) !important;
}

.auth-screen:not(.auth-info-screen) .auth-product-logo strong span:last-child,
.auth-screen:not(.auth-info-screen) .auth-product-logo strong em,
.auth-screen:not(.auth-info-screen) .auth-product-logo small b,
.auth-screen:not(.auth-info-screen) .auth-row .link-btn,
.auth-screen:not(.auth-info-screen) .auth-switch button,
.auth-screen:not(.auth-info-screen) .auth-trailer-card h2 span,
.auth-screen:not(.auth-info-screen) .auth-legacy-card h3 span,
.auth-screen:not(.auth-info-screen) .auth-news-card span {
  color: #087cff !important;
}

.auth-screen:not(.auth-info-screen) .auth-form h2 {
  color: #fff !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
}

.auth-screen:not(.auth-info-screen) .auth-panel .field input,
.auth-screen:not(.auth-info-screen) .auth-panel .locked-field {
  min-height: 48px !important;
  border-color: rgba(133, 166, 205, 0.3) !important;
  border-radius: 6px !important;
  background: rgba(0, 8, 17, 0.48) !important;
}

.auth-screen:not(.auth-info-screen) .auth-submit {
  color: #fff !important;
  background: linear-gradient(180deg, #168dff, #004dd8) !important;
  box-shadow: 0 13px 30px rgba(0, 92, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.auth-screen:not(.auth-info-screen) .auth-art {
  grid-area: showcase !important;
  min-height: 0 !important;
  display: block !important;
}

.auth-screen:not(.auth-info-screen) .auth-showcase {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(250px, 0.98fr) minmax(300px, 1.1fr) !important;
  gap: 18px !important;
}

.auth-screen:not(.auth-info-screen) .auth-trailer-card,
.auth-screen:not(.auth-info-screen) .auth-feature-grid,
.auth-screen:not(.auth-info-screen) .auth-legacy-card,
.auth-screen:not(.auth-info-screen) .auth-news-card,
.auth-screen:not(.auth-info-screen) .auth-trust-bar {
  border: 1px solid rgba(94, 138, 187, 0.42) !important;
  border-radius: 8px !important;
  background: rgba(3, 15, 29, 0.78) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.34) !important;
}

.auth-screen:not(.auth-info-screen) .auth-trailer-card {
  min-height: 250px !important;
  padding: clamp(28px, 4vw, 44px) !important;
  background:
    linear-gradient(90deg, rgba(0, 8, 18, 0.94), rgba(0, 13, 28, 0.7) 52%, rgba(0, 13, 28, 0.12)),
    url("./assets/login/slide-despacho.png") center right / cover no-repeat,
    linear-gradient(135deg, rgba(0, 93, 255, 0.25), rgba(0, 0, 0, 0.35)) !important;
}

.auth-screen:not(.auth-info-screen) .auth-trailer-card h2 {
  max-width: 430px;
  font-size: clamp(1.55rem, 2.4vw, 2.15rem) !important;
  line-height: 1.2 !important;
}

.auth-screen:not(.auth-info-screen) .auth-trailer-card button {
  border-color: rgba(24, 139, 255, 0.82) !important;
  color: #fff !important;
  background: rgba(0, 23, 52, 0.68) !important;
}

.auth-screen:not(.auth-info-screen) .auth-right-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) minmax(150px, 0.72fr) !important;
  gap: 18px !important;
}

.auth-screen:not(.auth-info-screen) .auth-showcase .auth-feature-grid {
  grid-row: 1 / 3 !important;
  padding: 20px 22px !important;
}

.auth-screen:not(.auth-info-screen) .auth-showcase .auth-feature-grid article {
  min-height: 0 !important;
  grid-template-columns: 50px minmax(0, 1fr) 18px !important;
  padding: 18px 0 !important;
}

.auth-screen:not(.auth-info-screen) .auth-showcase .auth-feature-grid article::after {
  content: ">";
  color: #087cff;
  font-size: 1.5rem;
  font-weight: 1000;
}

.auth-screen:not(.auth-info-screen) .auth-showcase .auth-feature-grid article > span {
  border-color: rgba(0, 126, 255, 0.42) !important;
  color: #087cff !important;
  background: rgba(0, 126, 255, 0.12) !important;
  border-radius: 50% !important;
}

.auth-screen:not(.auth-info-screen) .auth-legacy-card {
  padding: 24px !important;
}

.auth-screen:not(.auth-info-screen) .auth-legacy-card .auth-image-placeholder {
  border: 1px solid rgba(94, 138, 187, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(0, 10, 21, 0.08), rgba(0, 9, 18, 0.4)),
    url("./assets/stadium-level-4.png") center / cover no-repeat !important;
}

.auth-screen:not(.auth-info-screen) .auth-news-card {
  min-height: 150px !important;
}

.auth-screen:not(.auth-info-screen) .auth-news-thumb {
  background:
    linear-gradient(90deg, transparent, rgba(0, 10, 21, 0.25)),
    url("./assets/news/press-conference.png") center / cover no-repeat !important;
}

.auth-screen:not(.auth-info-screen) .auth-trust-bar {
  grid-area: trust !important;
  min-height: 112px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  padding: 18px 42px !important;
  background:
    linear-gradient(135deg, rgba(0, 95, 255, 0.14), transparent 20%, transparent 78%, rgba(0, 95, 255, 0.16)),
    rgba(3, 15, 29, 0.8) !important;
}

.auth-screen:not(.auth-info-screen) .auth-trust-bar article > span,
.auth-screen:not(.auth-info-screen) .auth-trust-bar strong {
  color: #087cff !important;
}

.auth-public-footer {
  grid-area: footer;
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 34px;
  padding: 0 18px;
  color: rgba(226, 235, 247, 0.68);
  font-size: 0.86rem;
}

.auth-public-footer p {
  margin: 0;
}

.auth-social-follow {
  display: flex;
  align-items: center;
  gap: 20px;
  text-transform: uppercase;
}

.auth-social-follow button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: rgba(238, 244, 255, 0.82);
  background: transparent;
  font-weight: 1000;
}

.auth-screen.auth-info-screen {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 92px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "nav"
    "info"
    "copy" !important;
  min-height: 100svh !important;
  padding: 0 18px 20px !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(0, 111, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(0, 8, 16, 0.9), rgba(0, 8, 16, 0.98)),
    url("./assets/login/slide-liga.png") center / cover no-repeat !important;
}

.auth-screen.auth-info-screen .auth-landing-nav {
  grid-area: nav !important;
  display: grid !important;
  grid-template-columns: minmax(310px, auto) minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 26px !important;
  min-height: 92px !important;
  padding: 0 26px !important;
  border-bottom: 1px solid rgba(84, 139, 196, 0.25) !important;
  background: rgba(0, 7, 15, 0.72) !important;
}

.auth-screen.auth-info-screen .auth-nav-brand {
  display: grid !important;
  grid-template-columns: auto 1px auto !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.auth-screen.auth-info-screen .auth-nav-brand strong {
  color: #fff !important;
  font-size: 2rem !important;
  font-style: italic !important;
  font-weight: 1000 !important;
}

.auth-screen.auth-info-screen .auth-nav-brand span {
  color: #eef4ff !important;
  font-size: 1rem !important;
}

.auth-screen.auth-info-screen .auth-landing-nav nav {
  display: flex !important;
  justify-content: flex-end !important;
  gap: clamp(18px, 3vw, 48px) !important;
}

.auth-screen.auth-info-screen .auth-landing-nav nav button {
  position: relative !important;
  padding: 34px 0 31px !important;
  border: 0 !important;
  background: transparent !important;
  color: #f6f8fc !important;
  font-weight: 1000 !important;
  text-transform: uppercase !important;
}

.auth-screen.auth-info-screen .auth-landing-nav nav button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #0057ff, #21a8ff);
}

.auth-screen.auth-info-screen .auth-info-shell {
  grid-area: info !important;
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 1480px) !important;
  margin: 22px auto 0 !important;
}

.game-preparation-screen .auth-topbar {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 0 26px;
  border: 1px solid rgba(84, 139, 196, 0.25);
  border-radius: 8px;
  background: rgba(0, 7, 15, 0.78);
}

.game-preparation-screen .auth-logo {
  color: #fff;
  font-size: 2rem;
  font-style: italic;
  font-weight: 1000;
  text-decoration: none;
}

.game-preparation-card {
  grid-area: info;
  align-self: center;
  justify-self: center;
  width: min(720px, 100%);
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid rgba(0, 148, 255, 0.3);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(2, 15, 30, 0.96), rgba(4, 9, 18, 0.88)),
    url("./assets/loading-president-club.png") center / cover no-repeat;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.game-preparation-card .auth-info-kicker {
  color: #ffc845;
  font-weight: 1000;
  text-transform: uppercase;
}

.game-preparation-card h1 {
  margin: 12px 0 12px;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.game-preparation-card p {
  margin: 0;
  color: #d9e7f7;
  font-size: 1.05rem;
  line-height: 1.55;
}

.game-preparation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.game-preparation-actions .primary-btn,
.game-preparation-actions .secondary-btn {
  min-height: 46px;
  padding: 0 22px;
  text-decoration: none;
}

.auth-screen.auth-info-screen .auth-copyright {
  grid-area: copy !important;
}

@media (max-width: 1180px) {
  .auth-screen:not(.auth-info-screen) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "nav"
      "login"
      "showcase"
      "trust"
      "footer" !important;
    padding: 0 16px 18px !important;
    overflow-y: auto !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-landing-nav,
  .auth-screen.auth-info-screen .auth-landing-nav {
    grid-template-columns: 1fr auto !important;
    min-height: auto !important;
    padding: 18px 8px !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-landing-nav nav,
  .auth-screen.auth-info-screen .auth-landing-nav nav {
    grid-column: 1 / -1;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding-top: 10px;
  }

  .auth-screen:not(.auth-info-screen) .auth-nav-brand span,
  .auth-screen.auth-info-screen .auth-nav-brand span {
    display: none !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-nav-brand {
    grid-template-columns: auto !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-panel,
  .auth-screen:not(.auth-info-screen) .auth-art {
    min-height: 0 !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-showcase {
    grid-template-rows: auto auto !important;
  }
}

@media (max-width: 760px) {
  .auth-screen:not(.auth-info-screen) .auth-panel {
    padding: 24px 18px !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-right-grid,
  .auth-screen:not(.auth-info-screen) .auth-trust-bar {
    grid-template-columns: 1fr !important;
  }

  .auth-screen:not(.auth-info-screen) .auth-trailer-card {
    grid-template-columns: 1fr !important;
  }

  .auth-public-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Despacho v2: compact command dashboard inspired by the latest reference. */
.office-dashboard-v2 {
  --office-blue: #0aa7ff;
  --office-cyan: #35d6ff;
  --office-gold: #ffc642;
  --office-green: #05e487;
  --office-purple: #a95cff;
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(360px, 0.86fr);
  grid-template-rows: minmax(255px, 1fr) minmax(265px, 1fr);
  grid-template-areas:
    "match daily"
    "match pass";
  gap: 12px;
  min-height: min(740px, calc(100svh - 226px));
}

.office-dashboard-v2 > section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 140, 255, 0.34);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(4, 28, 49, 0.86), rgba(1, 13, 24, 0.94)),
    rgba(1, 12, 23, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 36px rgba(0, 0, 0, 0.22);
}

.office-kicker,
.office-card-head h3 {
  margin: 0;
  color: var(--office-blue);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding: 0 14px;
}

.office-card-head small,
.office-card-head .link-btn {
  color: #bdd3e8;
  font-size: 0.68rem;
  font-weight: 800;
}

.office-next-match-v2 {
  grid-area: match;
  position: relative;
  display: grid;
  grid-template-rows: 54px minmax(260px, 1fr) 96px;
  padding: 22px 22px 0;
  background:
    linear-gradient(180deg, rgba(0, 10, 22, 0.08), rgba(0, 10, 22, 0.9)),
    url("./assets/match/stadium-bg.png") center 34% / cover no-repeat,
    url("./assets/login/slide-liga.png") center / cover no-repeat !important;
}

.office-next-match-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 9%, rgba(0, 166, 255, 0.35), transparent 18%),
    radial-gradient(circle at 75% 12%, rgba(0, 166, 255, 0.28), transparent 16%),
    linear-gradient(180deg, rgba(0, 11, 23, 0.1), rgba(0, 11, 23, 0.84));
}

.office-next-match-v2 > * {
  position: relative;
  z-index: 1;
}

.office-match-competition {
  grid-row: 1;
  justify-self: center;
  align-self: start;
  padding: 10px 22px;
  border-radius: 12px;
  color: var(--office-blue);
  background: rgba(0, 92, 161, 0.3);
  font-size: 0.64rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-match-clubs {
  grid-row: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  align-self: center;
  padding: 10px 34px 14px;
}

.office-match-clubs > b {
  color: #fff;
  font-size: clamp(2.7rem, 5vw, 4rem);
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 0 22px rgba(255, 255, 255, 0.36);
}

.office-match-club {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
}

.office-match-crest {
  width: clamp(92px, 11vw, 132px);
  height: clamp(92px, 11vw, 132px);
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(0, 153, 255, 0.34));
}

.match-ai-crest.office-match-crest {
  display: grid;
  place-items: center;
  border: 2px solid rgba(66, 171, 255, 0.42);
  border-radius: 18px;
  color: #e8f6ff;
  background: linear-gradient(180deg, rgba(31, 92, 153, 0.78), rgba(10, 29, 54, 0.95));
  font-size: 2rem;
  font-weight: 1000;
}

.office-match-club strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.office-match-club em {
  color: #b8c8d8;
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

.office-match-details {
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 -22px;
  border-top: 1px solid rgba(0, 130, 255, 0.2);
  background: rgba(0, 13, 27, 0.52);
}

.office-match-details span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 10px;
  border-right: 1px solid rgba(0, 130, 255, 0.18);
  color: #dceeff;
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.15;
}

.office-match-details svg {
  width: 15px;
  height: 15px;
  color: #9cb9d5;
}

.office-run {
  flex-wrap: wrap;
  text-transform: uppercase;
}

.office-run i {
  width: 19px;
  height: 19px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #dceeff;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 1000;
}

.office-run i.V { color: #00ff95; border-color: rgba(0, 255, 149, 0.56); }
.office-run i.E { color: #ffc642; border-color: rgba(255, 198, 66, 0.56); }
.office-run i.D { color: #ff5964; border-color: rgba(255, 89, 100, 0.56); }

.office-news-v2 {
  grid-area: news;
  padding: 10px 0 8px;
}

.office-news-stack {
  display: grid;
  gap: 0;
  padding: 0 14px;
}

.office-news-item {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid rgba(122, 165, 206, 0.16);
  color: #fff;
  background: transparent;
  text-align: left;
}

.office-news-item:last-child {
  border-bottom: 0;
}

.office-news-thumb {
  height: 48px;
  border: 1px solid rgba(0, 147, 255, 0.28);
  border-radius: 5px;
  background: url("./assets/news/press-conference.png") center / cover no-repeat;
}

.office-news-thumb.thumb-0 {
  background-image: url("./assets/players/cesar-calvo-club-3-0/avatar.png"), linear-gradient(135deg, rgba(0, 153, 255, 0.25), rgba(0, 0, 0, 0.4));
}

.office-news-thumb.thumb-1 {
  background-image: url("./assets/match/stadium-bg.png"), url("./assets/login/slide-liga.png");
}

.office-news-item strong,
.office-news-item em,
.office-news-item small {
  display: block;
}

.office-news-item strong {
  overflow: hidden;
  color: #f5f9ff;
  font-size: 0.86rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-news-item em {
  display: -webkit-box;
  overflow: hidden;
  color: #a9bed2;
  font-size: 0.73rem;
  font-style: normal;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.office-news-item small {
  color: #9cafc1;
  font-size: 0.66rem;
  text-align: right;
}

.office-market-v2 {
  grid-area: news;
  padding: 10px 12px 12px;
  background:
    linear-gradient(180deg, rgba(3, 29, 55, 0.84), rgba(1, 12, 23, 0.95)),
    radial-gradient(circle at 72% 12%, rgba(0, 117, 255, 0.2), transparent 34%),
    rgba(1, 12, 23, 0.94) !important;
}

.office-market-showcase {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  gap: 10px;
  height: calc(100% - 34px);
  min-height: 0;
}

.office-market-reasons {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

.office-market-reasons span {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 24, 46, 0.56);
  color: #dceeff;
}

.office-market-reasons svg {
  width: 22px;
  height: 22px;
  color: var(--office-blue);
  filter: drop-shadow(0 0 10px rgba(0, 153, 255, 0.45));
}

.office-market-reasons b {
  color: #c7dcf2;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.18;
}

.office-market-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.office-market-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  justify-items: start;
  align-content: start;
  gap: 3px;
  padding: 10px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 145, 255, 0.4);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(160deg, rgba(0, 84, 160, 0.26), rgba(2, 14, 31, 0.92) 58%),
    rgba(2, 15, 30, 0.95);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.office-market-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.12), transparent 22%),
    linear-gradient(145deg, transparent 42%, rgba(0, 170, 255, 0.12));
}

.office-market-card.gold {
  border-color: rgba(255, 196, 48, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 18px rgba(255, 186, 38, 0.16);
}

.office-market-card.purple {
  border-color: rgba(172, 87, 255, 0.72);
}

.office-market-card > * {
  position: relative;
  z-index: 1;
}

.office-market-rating {
  color: var(--office-gold);
  font-size: 1.1rem;
  font-weight: 1000;
  line-height: 1;
}

.office-market-role {
  color: #b8c9da;
  font-size: 0.58rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-market-player {
  position: absolute;
  top: 15px;
  right: 12px;
  width: 54px;
  height: 54px;
}

.office-market-player .player-avatar-wrap,
.office-market-player .player-avatar,
.office-market-player .player-avatar-img {
  width: 54px;
  height: 54px;
  border-color: rgba(0, 169, 255, 0.42);
}

.office-market-card strong {
  max-width: calc(100% - 58px);
  overflow: hidden;
  margin-top: 20px;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-market-card em,
.office-market-card small {
  display: block;
  max-width: calc(100% - 16px);
  overflow: hidden;
  color: #a8bbce;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-market-card small {
  color: #62eaff;
}

.office-market-statline {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 5px 0 2px;
}

.office-market-statline span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.office-market-statline b {
  color: #90aabe;
  font-size: 0.5rem;
  font-weight: 900;
}

.office-market-statline i {
  color: #0ff08e;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 1000;
}

.office-market-card footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.office-market-card footer span {
  color: var(--office-gold);
  font-size: 0.72rem;
  font-weight: 1000;
}

.office-market-card footer b {
  padding: 5px 8px;
  border: 1px solid rgba(0, 170, 255, 0.42);
  border-radius: 5px;
  color: #8feaff;
  background: rgba(0, 54, 101, 0.4);
  font-size: 0.56rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-daily-v2,
.office-pass-v2 {
  display: grid;
  align-content: stretch;
}

.office-daily-v2 {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.office-pass-v2 {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.office-daily-v2 { grid-area: daily; padding: 18px 20px 20px; }
.office-pass-v2 { grid-area: pass; padding: 18px 20px 20px; }
.office-objectives-v2 { grid-area: objectives; padding: 10px 12px 12px; }
.office-summary-v2 {
  grid-area: summary;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 10px 12px 12px;
}
.office-activity-v2 { grid-area: activity; padding: 10px 12px 12px; }

.office-mission-list,
.office-objective-list,
.office-activity-list {
  display: grid;
  gap: 8px;
}

.office-mission-list article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(5, 25, 44, 0.72);
}

.office-mission-list article > i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 2px solid var(--office-blue);
  border-radius: 50%;
  color: var(--office-blue);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 1000;
}

.office-mission-list article.complete > i {
  border-color: var(--office-green);
  color: var(--office-green);
}

.office-mission-list strong,
.office-objective-list strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-mission-list b,
.office-objective-list b,
.office-pass-xp b {
  height: 7px;
  display: block;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(123, 154, 184, 0.18);
}

.office-mission-list b span,
.office-objective-list b span,
.office-pass-xp b i {
  width: var(--v);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #0789ff, #17e7ff);
}

.office-mission-list article.complete b span {
  background: linear-gradient(90deg, #05bd72, #16f6a5);
}

.office-mission-list small,
.office-objective-list em {
  display: block;
  overflow: hidden;
  color: #9fb2c4;
  font-size: 0.64rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-mission-list small em {
  color: var(--office-cyan);
  font-style: normal;
}

.office-mission-list article > span,
.office-objective-list small {
  color: #d8e9f8;
  font-size: 0.72rem;
  font-weight: 1000;
}

.office-wide-btn {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  border: 1px solid rgba(0, 146, 255, 0.32);
  border-radius: 5px;
  color: #dceeff;
  background: rgba(0, 25, 49, 0.6);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-pass-main {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 10px 0 14px;
}

.office-level-badge {
  width: 94px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(174, 83, 255, 0.8);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 25%, rgba(191, 82, 255, 0.55), rgba(51, 18, 90, 0.95));
  box-shadow: 0 0 20px rgba(157, 76, 255, 0.32);
  font-size: 1.9rem;
  font-weight: 1000;
}

.office-level-badge span {
  margin-top: -16px;
  color: #d2b9ff;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.office-pass-xp span,
.office-pass-xp small {
  display: block;
  color: #d6e5f4;
  font-size: 0.64rem;
  font-weight: 900;
}

.office-pass-xp b i {
  background: linear-gradient(90deg, #6b39ff, #e069ff);
}

.office-pass-reward {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 10px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 6px;
  background: rgba(11, 27, 50, 0.72);
}

.office-pass-reward span,
.office-pass-reward em {
  display: block;
  color: #a9bed2;
  font-size: 0.64rem;
  font-style: normal;
}

.office-pass-reward strong {
  display: block;
  color: #fff;
  font-size: 0.82rem;
}

.office-pass-reward i {
  height: 54px;
  border: 2px solid rgba(255, 198, 66, 0.48);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 198, 66, 0.16), transparent),
    rgba(0, 10, 22, 0.35);
}

.office-pass-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.office-pass-track span {
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: #dceeff;
  background: rgba(11, 27, 50, 0.72);
  font-size: 0.72rem;
  font-weight: 1000;
}

.office-pass-track span.done {
  color: #072716;
  background: linear-gradient(180deg, #19f0a3, #04a863);
}

.office-pass-track span.active {
  border: 1px solid rgba(174, 83, 255, 0.82);
  color: #fff;
  background: rgba(94, 35, 155, 0.55);
  box-shadow: 0 0 16px rgba(174, 83, 255, 0.28);
}

.office-objective-list article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.office-objective-list article > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--office-cyan);
  background: rgba(0, 146, 255, 0.11);
}

.office-objective-list svg {
  width: 18px;
  height: 18px;
}

.office-objective-list b {
  height: 5px;
}

.office-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 100%;
  border: 1px solid rgba(122, 165, 206, 0.13);
  border-radius: 6px;
  overflow: hidden;
}

.office-summary-grid article {
  min-height: 86px;
  display: grid;
  place-items: center;
  gap: 7px;
  border-right: 1px solid rgba(122, 165, 206, 0.13);
  border-bottom: 1px solid rgba(122, 165, 206, 0.13);
  text-align: center;
}

.office-summary-grid article:nth-child(3n) {
  border-right: 0;
}

.office-summary-grid article:nth-last-child(-n+3) {
  border-bottom: 0;
}

.office-summary-grid span {
  color: #a8bbce;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.office-summary-grid strong {
  color: #fff;
  font-size: 1.7rem;
  font-weight: 1000;
}

.office-summary-grid .office-summary-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  font-size: 1rem;
}

.office-summary-grid .ring,
.office-summary-grid .blue,
.office-summary-grid .purple {
  height: 46px;
  width: 46px;
  display: grid;
  place-items: center;
  border: 2px solid var(--office-green);
  border-radius: 50%;
  color: var(--office-green);
  font-size: 1rem;
}

.office-summary-grid .blue {
  border-color: var(--office-blue);
  color: var(--office-blue);
}

.office-summary-grid .purple {
  border-color: var(--office-purple);
  color: var(--office-purple);
}

.office-activity-list button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  padding: 0;
  border: 0;
  color: #dceeff;
  background: transparent;
  text-align: left;
}

.office-activity-list svg {
  width: 16px;
  height: 16px;
  color: var(--office-blue);
}

.office-activity-list span {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.office-activity-list em {
  color: #8fa5b8;
  font-size: 0.62rem;
  font-style: normal;
  text-align: right;
}

.office-bonus-v2 {
  grid-area: bonus;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-color: rgba(255, 198, 66, 0.35) !important;
  background:
    linear-gradient(90deg, rgba(255, 198, 66, 0.16), transparent 45%, rgba(0, 100, 255, 0.1)),
    rgba(3, 15, 29, 0.94) !important;
}

.office-bonus-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.office-bonus-title > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--office-gold);
  border-radius: 50%;
  color: var(--office-gold);
  font-size: 1.2rem;
}

.office-bonus-title strong,
.office-bonus-title em {
  display: block;
}

.office-bonus-title strong {
  color: var(--office-gold);
  font-size: 0.88rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.office-bonus-title em {
  color: #dceeff;
  font-size: 0.72rem;
  font-style: normal;
}

.office-bonus-rewards {
  display: flex;
  gap: 12px;
}

.office-bonus-rewards span {
  min-width: 104px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(122, 165, 206, 0.24);
  border-radius: 6px;
  color: #eef8ff;
  background: rgba(3, 21, 39, 0.82);
  font-size: 0.82rem;
  font-weight: 1000;
}

.office-bonus-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.office-bonus-v2 .office-bonus-calendar-btn {
  min-width: 150px;
  min-height: 44px;
  border-color: rgba(0, 148, 255, 0.34);
  color: #dceeff;
  background: rgba(3, 21, 39, 0.82);
}

.office-bonus-v2 .primary-btn {
  min-width: 170px;
  min-height: 44px;
  color: #1a1204;
  background: linear-gradient(180deg, #ffe07c, #f2aa25);
}

@media (max-width: 1080px) {
  .office-dashboard-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    grid-template-areas:
      "match match"
      "daily pass";
  }

  .office-next-match-v2 {
    min-height: 250px;
  }

  .office-market-showcase {
    grid-template-columns: 1fr;
  }

  .office-market-reasons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .office-dashboard-v2 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "match"
      "daily"
      "pass";
  }

  .office-match-clubs,
  .office-match-details,
  .office-bonus-v2 {
    grid-template-columns: 1fr;
  }

  .office-bonus-rewards {
    flex-direction: column;
  }

  .office-bonus-actions {
    width: 100%;
    justify-content: stretch;
  }

  .office-bonus-actions .primary-btn,
  .office-bonus-actions .secondary-btn {
    flex: 1;
  }

  .office-market-cards,
  .office-market-reasons {
    grid-template-columns: 1fr;
  }

  .office-market-card {
    min-height: 150px;
  }
}

/* Final login nav placement override. */
.auth-screen {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "nav nav"
    "login showcase"
    "trust trust"
    "copy copy" !important;
}

.auth-screen .auth-landing-nav {
  grid-area: nav !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  align-self: start !important;
}

.auth-screen > .auth-panel-wrap {
  grid-area: login !important;
}

.auth-screen > .auth-art {
  grid-area: showcase !important;
}

.auth-screen > .auth-trust-bar {
  grid-area: trust !important;
}

.auth-screen > .auth-copyright {
  grid-area: copy !important;
}

@media (max-width: 980px) {
  .auth-screen {
    grid-template-areas:
      "nav"
      "login"
      "showcase"
      "trust"
      "copy" !important;
  }
}

.crest-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(760px, calc(100svh - 32px));
  overflow: auto;
}

.crest-modal-header {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  padding: 4px 46px 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.crest-modal-header img {
  width: 82px;
  height: 98px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
}

.crest-modal-header span,
.crest-picker-option small {
  color: #ffbe2f;
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.crest-modal-header h3 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
}

.crest-modal-header p {
  margin: 0;
  color: #b9c8d8;
}

.crest-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.crest-picker-option {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 172px;
  padding: 14px 10px 12px;
  color: #fff;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 27, 45, 0.94), rgba(2, 10, 18, 0.96));
  cursor: pointer;
}

.crest-picker-option img {
  width: 82px;
  height: 98px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.45));
}

.crest-picker-option span {
  color: #fff;
  font-weight: 1000;
  text-align: center;
}

.crest-picker-option.active {
  border-color: rgba(255, 190, 47, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 190, 47, 0.24),
    0 16px 34px rgba(255, 190, 47, 0.12);
}

.crest-picker-option.active small {
  color: #19ff8a;
}

.frame-modal {
  width: min(820px, calc(100vw - 28px));
  max-height: min(790px, calc(100svh - 32px));
  overflow: auto;
}

.frame-modal-header {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 20px;
  padding: 4px 46px 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.frame-modal-avatar {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.frame-modal-avatar img,
.frame-modal-avatar .president-frame,
.frame-modal-avatar .frame-core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.frame-modal-header span {
  color: #ffbe2f;
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.frame-modal-header h3 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: 1.6rem;
  text-transform: uppercase;
}

.frame-modal-header p {
  margin: 0;
  color: #b9c8d8;
}

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

.frame-modal-option {
  min-height: 142px;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  align-items: center;
  padding: 16px;
}

.frame-modal-option .frame-preview {
  width: 92px;
  height: 92px;
  margin: 0 auto;
}

.frame-modal-copy {
  display: grid;
  gap: 5px;
}

.frame-modal-copy strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 1000;
}

.frame-modal-copy span {
  color: #b9c8d8;
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .crest-modal-header,
  .crest-picker-grid,
  .frame-modal-header,
  .frame-picker-grid,
  .frame-modal-option {
    grid-template-columns: 1fr;
  }
}

/* Match broadcast interface. Scoped to partido only. */
.match-broadcast-screen {
  position: relative;
  min-height: min(720px, calc(100svh - 235px));
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 5, 12, 0.08), rgba(0, 5, 12, 0.54)),
    var(--match-stadium-bg) center / cover no-repeat,
    #010810;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.58);
}

.game.match-broadcast-active .content {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: block;
  min-height: 100svh;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.app-shell:has(.game.match-broadcast-active),
.game.match-broadcast-active {
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #000;
}

.game.match-broadcast-active .club-hero-topbar,
.game.match-broadcast-active .horizontal-nav-shell,
.game.match-broadcast-active .bottom-dock,
.game.match-broadcast-active .mobile-nav-menu {
  display: none;
}

.game.match-broadcast-active .main-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

.match-broadcast-screen.match-broadcast-live {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  background: #030405;
  box-shadow: inset 0 0 180px rgba(0, 0, 0, 0.46);
}

.match-broadcast-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.12) saturate(1.06) contrast(1.04);
  background: #030405;
}

.match-broadcast-screen.is-video-buffering::after {
  content: "Ajustando señal...";
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid rgba(243, 198, 111, 0.28);
  border-radius: 999px;
  color: #fff8ec;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
  pointer-events: none;
}

.match-broadcast-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 190, 47, 0.06), transparent 44%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
}

.match-tv-scoreboard {
  position: absolute;
  z-index: 3;
  top: 20px;
  left: 20px;
  width: min(455px, calc(100% - 40px));
  aspect-ratio: 1448 / 224;
  display: grid;
  grid-template-columns: 1.35fr 0.42fr 0.8fr 0.42fr 1.35fr;
  align-items: center;
  gap: 3px;
  padding: 0 34px;
  color: #fff;
  text-transform: uppercase;
  background: var(--scoreboard-src) center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55));
}

.match-tv-scoreboard strong,
.match-tv-scoreboard span,
.match-tv-scoreboard time {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-weight: 1000;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.match-tv-scoreboard strong {
  font-size: clamp(0.54rem, 0.78vw, 0.74rem);
  letter-spacing: 0;
}

.match-tv-scoreboard span {
  color: #f7fbff;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
}

.match-tv-scoreboard time {
  color: #48dfff;
  font-size: clamp(0.72rem, 1vw, 0.95rem);
}

.match-broadcast-center {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: min(650px, calc(100svh - 270px));
  padding: 86px 24px 130px;
}

.match-broadcast-live .match-broadcast-center {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding: 0;
  pointer-events: none;
}

.match-broadcast-live .match-live-stage {
  min-height: 100%;
  pointer-events: none;
}

.match-broadcast-live .match-central-panel {
  display: none;
}

.match-broadcast-live .match-event-panel,
.match-broadcast-live .match-player-spotlight,
.match-broadcast-live .match-broadcast-footer,
.match-broadcast-live .match-tv-scoreboard {
  pointer-events: auto;
}

.match-broadcast-prematch .match-broadcast-center {
  padding-top: 52px;
}

.match-live-stage {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: grid;
  place-items: center;
  margin: 0 auto;
}

.match-central-panel {
  position: relative;
  z-index: 2;
  width: clamp(520px, 52vw, 690px);
  min-height: 380px;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 62px 58px 50px;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(1, 8, 20, 0.46), rgba(1, 8, 20, 0.28)),
    var(--central-panel-src) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.62));
}

.match-central-panel::before {
  content: "";
  position: absolute;
  inset: 54px 42px 48px;
  border-radius: 8px;
  background: rgba(1, 8, 18, 0.18);
  pointer-events: none;
}

.match-central-panel > * {
  position: relative;
  z-index: 1;
}

.match-central-head,
.match-central-info,
.match-central-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}

.match-central-head span,
.match-central-head strong,
.match-central-head em,
.match-central-info span,
.match-central-metrics span {
  color: #d8f3ff;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.match-central-head strong,
.match-central-metrics strong,
.match-central-info strong {
  color: #ffbe2f;
}

.match-central-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.match-central-team {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.match-central-team img,
.match-ai-crest {
  width: 92px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.62));
}

.match-ai-crest {
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid rgba(0, 217, 255, 0.72);
  border-radius: 10px 10px 28px 28px;
  background:
    linear-gradient(90deg, #092f68 0 33%, #f7fbff 33% 66%, #092f68 66%),
    #061a33;
  clip-path: polygon(50% 0, 92% 12%, 86% 72%, 50% 100%, 14% 72%, 8% 12%);
  font-weight: 1000;
}

.match-central-team strong {
  max-width: 100%;
  overflow: hidden;
  padding: 6px 12px;
  color: #fff;
  border: 1px solid rgba(0, 217, 255, 0.14);
  border-radius: 6px;
  background: rgba(1, 8, 18, 0.44);
  font-size: clamp(0.92rem, 1.35vw, 1.18rem);
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.match-central-team span {
  padding: 3px 9px;
  color: #43dcff;
  border-radius: 999px;
  background: rgba(0, 217, 255, 0.08);
  font-weight: 1000;
}

.match-central-versus b {
  display: block;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
}

.match-central-versus small {
  display: block;
  margin-top: 8px;
  color: #ffbe2f;
  font-weight: 1000;
  text-transform: uppercase;
}

.match-central-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 8px;
}

.match-central-info span,
.match-central-metrics span {
  min-height: 38px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 217, 255, 0.12);
  border-radius: 6px;
  background: rgba(1, 8, 18, 0.48);
  line-height: 1.1;
  text-align: center;
}

.match-central-info strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-preview-panel {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.match-preview-compact {
  display: grid;
  gap: 7px;
  color: #fff;
}

.match-preview-label {
  color: #ffbe2f;
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.match-preview-bar {
  position: relative;
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 217, 255, 0.18);
  border-radius: 999px;
  background: rgba(4, 14, 26, 0.82);
}

.match-preview-bar span,
.match-preview-bar i,
.match-preview-bar b {
  position: absolute;
  inset-block: 0;
  display: block;
}

.match-preview-bar span {
  left: 0;
  width: var(--home);
  background: linear-gradient(90deg, #1f8cff, #45e0ff);
  box-shadow: 0 0 16px rgba(0, 157, 255, 0.42);
}

.match-preview-bar i {
  left: var(--home);
  width: max(6px, calc(100% - var(--home) - var(--away)));
  background: linear-gradient(90deg, rgba(255, 190, 47, 0.78), rgba(255, 220, 108, 0.88));
}

.match-preview-bar b {
  right: 0;
  width: var(--away);
  background: linear-gradient(90deg, #44d6ff, #1554d9);
  box-shadow: 0 0 16px rgba(0, 157, 255, 0.32);
}

.match-preview-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  color: #d8f3ff;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.match-preview-odds span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.match-breakdown-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
  padding: 9px 11px;
  border: 1px solid rgba(0, 217, 255, 0.14);
  border-radius: 7px;
  background: rgba(1, 8, 18, 0.5);
  text-align: left;
}

.match-breakdown-card strong,
.match-breakdown-card em {
  grid-column: 1 / -1;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.match-breakdown-card strong {
  color: #43dcff;
  font-size: 0.78rem;
}

.match-breakdown-card span {
  color: #c5d7e5;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.match-breakdown-card b {
  color: #ffbe2f;
}

.match-breakdown-card em {
  color: #fff;
  font-size: 0.78rem;
}

.match-central-events {
  display: grid;
  gap: 8px;
  text-align: left;
}

.match-central-events h3 {
  margin: 0;
  color: #43dcff;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.match-central-event {
  display: grid;
  grid-template-columns: 42px minmax(90px, 0.75fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(0, 217, 255, 0.16);
  border-radius: 6px;
  background: rgba(1, 10, 24, 0.58);
}

.match-central-event span {
  color: #ffbe2f;
  font-weight: 1000;
}

.match-central-event strong,
.match-central-event em {
  overflow: hidden;
  color: #fff;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-event-panel {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(8px, 2.3vw, 46px);
  width: clamp(235px, 24vw, 340px);
  min-height: 360px;
  display: grid;
  align-content: center;
  padding: 50px 30px 40px;
  color: #fff;
  transform: translateY(-50%);
  background:
    linear-gradient(180deg, rgba(1, 8, 20, 0.5), rgba(1, 8, 20, 0.3)),
    var(--central-panel-src) center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5));
}

.match-event-panel::before {
  content: "";
  position: absolute;
  inset: 48px 26px 38px;
  border-radius: 8px;
  background: rgba(1, 8, 18, 0.22);
  pointer-events: none;
}

.match-event-panel > * {
  position: relative;
  z-index: 1;
}

.match-event-rail {
  min-height: 250px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.match-event-rail h3 {
  margin: 0;
  color: #43dcff;
  font-size: 0.95rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.match-event-rail-list {
  display: grid;
  gap: 8px;
}

.match-event-rail-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 217, 255, 0.14);
  border-radius: 6px;
  background: rgba(0, 12, 28, 0.5);
}

.match-event-rail-row span {
  color: #ffbe2f;
  font-weight: 1000;
}

.match-event-rail-row strong,
.match-event-rail-row em {
  display: block;
  overflow: hidden;
  color: #fff;
  font-style: normal;
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-event-rail-row em {
  color: #d8f3ff;
  font-size: 0.82rem;
}

.match-event-rail p,
.match-event-rail small {
  margin: 0;
  color: #b8d5e7;
  font-weight: 900;
}

.match-goal-celebration {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: clamp(92px, 11vh, 128px);
  min-width: min(520px, calc(100% - 40px));
  max-width: calc(100% - 40px);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 18px 28px;
  border: 1px solid rgba(255, 190, 47, 0.62);
  border-radius: 9px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 204, 106, 0.24), transparent 54%),
    linear-gradient(135deg, rgba(34, 20, 5, 0.82), rgba(3, 5, 6, 0.72));
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(255, 190, 47, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  animation: matchGoalCelebrationIn 0.42s ease both;
}

.match-goal-celebration span {
  color: #ffbe2f;
  font-size: 0.78rem;
  font-weight: 1000;
}

.match-goal-celebration strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 2.55rem);
  font-weight: 1000;
  line-height: 0.95;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-goal-celebration em {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.78);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-goal-video-celebration,
.match-closing-overlay {
  position: fixed;
  z-index: 260;
  inset: 0;
  width: 100vw;
  height: 100svh;
  min-width: 100vw;
  min-height: 100svh;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #050403;
  box-shadow: none;
  transform: none;
  backdrop-filter: none;
  pointer-events: none;
  overflow: hidden;
  animation: matchCinematicFadeIn 0.24s ease both;
}

.match-goal-cinematic,
.match-closing-cinematic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.match-goal-video-caption,
.match-closing-caption {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 72px);
  width: min(760px, calc(100% - 40px));
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 14px 22px;
  border: 1px solid rgba(255, 190, 47, 0.42);
  border-radius: 9px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(22, 13, 3, 0.72), rgba(3, 5, 6, 0.6));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.match-goal-video-caption span,
.match-closing-caption span {
  color: #ffbe2f;
  font-size: 0.8rem;
  font-weight: 1000;
}

.match-goal-video-caption strong,
.match-closing-caption strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.3rem, 2.8vw, 2.35rem);
  font-weight: 1000;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-goal-video-caption em {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.82);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-closing-hud {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vh, 54px);
  width: min(1120px, calc(100% - 44px));
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
  gap: 14px;
  align-items: stretch;
  transform: translateX(-50%);
}

.match-closing-hud .match-closing-caption {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  min-width: 0;
  align-content: center;
  transform: none;
}

.match-closing-metrics {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 13px 16px;
  border: 1px solid rgba(255, 190, 47, 0.38);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, rgba(22, 13, 3, 0.74), rgba(3, 5, 6, 0.62));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.match-closing-metrics > span {
  color: #ffbe2f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.match-closing-metrics article {
  display: grid;
  gap: 5px;
}

.match-closing-metrics header,
.match-closing-metrics em {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.match-closing-metrics header span,
.match-closing-metrics em {
  color: rgba(255, 248, 232, 0.78);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.match-closing-metrics header strong {
  color: #19dd85;
  font-size: 0.86rem;
  font-weight: 1000;
}

.match-closing-metrics article.negative header strong {
  color: #ff5d58;
}

.match-closing-metrics article.neutral header strong {
  color: #f3c66f;
}

.match-closing-metrics i {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.match-closing-metrics b {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
}

.match-closing-metrics .before {
  background: rgba(255, 255, 255, 0.24);
}

.match-closing-metrics .after {
  background: linear-gradient(90deg, #f3c66f, #19dd85);
  box-shadow: 0 0 16px rgba(25, 221, 133, 0.28);
}

.match-closing-metrics article.negative .after {
  background: linear-gradient(90deg, #f3c66f, #ff5d58);
  box-shadow: 0 0 16px rgba(255, 93, 88, 0.28);
}

.match-start-button {
  justify-self: center;
  min-width: 220px;
}

.match-player-spotlight {
  position: absolute;
  z-index: 4;
  left: 18px;
  bottom: 28px;
  width: min(660px, calc(100% - 36px));
  aspect-ratio: 1387 / 407;
  display: block;
  padding: 0;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-26px);
  background: var(--player-panel-src) center / 100% 100% no-repeat;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55));
}

.match-player-spotlight.visible {
  opacity: 1;
  transform: translateX(0);
}

.match-player-spotlight.visible.enter {
  animation: matchPlayerSpotlightIn 0.45s ease both;
}

.match-player-spotlight.visible.leaving {
  animation: matchPlayerSpotlightOut 0.65s ease both;
}

.match-player-avatar,
.match-player-avatar .match-player-avatar-frame,
.match-player-avatar .match-player-face,
.match-player-avatar .match-player-fallback {
  width: 100%;
  height: 100%;
}

.match-player-avatar {
  position: absolute;
  left: 6.2%;
  top: 23.8%;
  width: 13.8%;
  height: 47%;
  display: grid;
  place-items: center;
}

.match-player-avatar .match-player-avatar-frame,
.match-player-avatar .match-player-face,
.match-player-avatar .match-player-fallback {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  object-fit: cover;
}

.match-player-avatar .match-player-avatar-frame {
  border: 2px solid rgba(0, 217, 255, 0.7);
  background: rgba(6, 23, 51, 0.72);
  box-shadow:
    0 0 18px rgba(0, 217, 255, 0.32),
    inset 0 0 24px rgba(0, 217, 255, 0.12);
}

.match-player-avatar .match-player-face {
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 160ms ease;
}

.match-player-avatar .match-player-face.is-loaded {
  opacity: 1;
}

.match-player-avatar .match-player-fallback {
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 2.2vw, 1.65rem);
  font-weight: 1000;
  background: rgba(4, 22, 48, 0.46);
}

.match-player-copy,
.match-player-stat {
  position: absolute;
  min-width: 0;
  text-transform: uppercase;
}

.match-player-copy {
  left: 34%;
  top: 50%;
  width: 24.5%;
  transform: translateY(-50%);
}

.match-player-copy strong {
  display: block;
  overflow: hidden;
  color: #fff;
  font-size: clamp(0.72rem, 1.02vw, 0.96rem);
  font-weight: 1000;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

.match-player-copy span,
.match-player-stat span {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #9fdcff;
  font-size: clamp(0.52rem, 0.68vw, 0.66rem);
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-player-stat {
  left: 70.5%;
  top: 50%;
  width: 19.5%;
  transform: translateY(-50%);
}

.match-player-stat strong {
  display: block;
  color: #fff;
  font-size: clamp(0.56rem, 0.78vw, 0.74rem);
  font-weight: 1000;
  line-height: 1.08;
  text-align: left;
  text-wrap: balance;
}

.match-player-stat span {
  margin-top: 6px;
  text-align: left;
}

.match-broadcast-footer {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  width: min(520px, calc(100% - 44px));
  transform: translateX(-50%);
}

.match-broadcast-footer .match-plan {
  margin-top: 8px;
  color: #d8f3ff;
  font-size: 0.78rem;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
}

@keyframes matchPlayerSpotlightIn {
  from {
    opacity: 0;
    transform: translateX(-42px) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes matchPlayerSpotlightOut {
  from {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-34px) translateY(8px);
  }
}

@keyframes matchGoalCelebrationIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes matchCinematicFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 920px) {
  .national-cup-hero,
  .national-cup-round {
    display: grid;
  }

  .national-cup-grid {
    grid-template-columns: 1fr;
  }

  .national-cup-prize {
    min-width: 0;
  }

  .national-cup-next {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .calendar-next-hero,
  .calendar-command-grid {
    grid-template-columns: 1fr;
  }

  .calendar-next-hero {
    min-height: 0;
    padding: 18px;
  }

  .calendar-next-clubs {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
  }

  .calendar-next-crest {
    width: 72px;
    height: 72px;
  }

  .calendar-next-side {
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .calendar-command-panel {
    min-height: 0;
  }

  .match-broadcast-screen {
    min-height: 720px;
  }

  .match-live-stage {
    display: grid;
    gap: 14px;
  }

  .match-central-panel {
    width: 100%;
    padding: 34px 24px 42px;
  }

  .match-event-panel {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    transform: none;
  }

  .match-central-info {
    grid-template-columns: 1fr;
  }

  .match-central-teams {
    grid-template-columns: 1fr;
  }

  .match-central-versus {
    order: 2;
  }

  .match-player-spotlight {
    width: min(560px, calc(100% - 36px));
  }
}

@media (max-width: 620px) {
  .match-tv-scoreboard {
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    padding: 0 22px;
  }

  .match-central-info,
  .match-central-metrics {
    display: grid;
  }

  .match-breakdown-grid,
  .match-preview-odds {
    grid-template-columns: 1fr;
  }
}

/* Login navigation pages. */
.auth-landing-nav {
  grid-column: 1 / -1;
  grid-row: 1;
  width: min(1400px, 100%);
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 148, 255, 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(4, 20, 34, 0.82), rgba(2, 10, 18, 0.88)),
    rgba(1, 9, 16, 0.82);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.auth-nav-brand {
  min-width: 210px;
  padding: 10px 14px;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  text-transform: uppercase;
}

.auth-nav-brand strong {
  display: block;
  font-size: 1rem;
  font-style: italic;
  font-weight: 1000;
  line-height: 1;
}

.auth-nav-brand span {
  color: var(--pcm-gold);
}

.auth-landing-nav nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.auth-landing-nav nav button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #eaf4ff;
  background: rgba(255, 255, 255, 0.035);
  font-weight: 1000;
  text-transform: uppercase;
}

.auth-landing-nav nav button.active {
  color: #120d02;
  border-color: rgba(255, 190, 47, 0.62);
  background: linear-gradient(180deg, #ffda72, #e99f1f);
  box-shadow: 0 0 24px rgba(255, 190, 47, 0.24);
}

.auth-screen > .auth-panel-wrap {
  grid-column: 1;
  grid-row: 2;
}

.auth-screen > .auth-art {
  grid-column: 2;
  grid-row: 2;
}

.auth-screen > .auth-trust-bar {
  grid-column: 1 / -1;
  grid-row: 3;
}

.auth-screen > .auth-copyright {
  grid-column: 1 / -1;
  grid-row: 4;
}

.auth-info-screen {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch;
  padding-top: 22px;
}

.auth-info-shell {
  grid-column: 1 / -1;
  grid-row: 2;
  width: min(1400px, 100%);
  justify-self: center;
  display: grid;
  gap: 18px;
}

.auth-info-screen > .auth-copyright {
  grid-row: 3;
}

.auth-info-hero {
  min-height: 250px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(0, 148, 255, 0.25);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.94), rgba(2, 8, 16, 0.46)),
    url("./assets/login/slide-despacho.png") center / cover no-repeat;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.auth-info-hero.legal {
  background:
    linear-gradient(90deg, rgba(2, 8, 16, 0.95), rgba(2, 8, 16, 0.52)),
    url("./assets/login/slide-estadisticas.png") center / cover no-repeat;
}

.auth-info-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.2rem);
  text-transform: uppercase;
}

.auth-info-hero p {
  max-width: 760px;
  margin: 0;
  color: #d6e2ee;
  font-size: 1.03rem;
  line-height: 1.55;
}

.auth-help-grid,
.auth-legal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.auth-help-grid article,
.auth-legal-grid article {
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(0, 148, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(6, 28, 48, 0.84), rgba(2, 10, 18, 0.94)),
    rgba(255, 255, 255, 0.035);
}

.auth-help-grid article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 190, 47, 0.24);
  border-radius: 8px;
  color: var(--pcm-gold);
  background: rgba(255, 190, 47, 0.08);
}

.auth-help-grid svg {
  width: 25px;
  height: 25px;
}

.auth-help-grid h3,
.auth-legal-grid h3 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
}

.auth-help-grid p,
.auth-legal-grid p {
  margin: 0;
  color: #bfd0dd;
  line-height: 1.48;
}

.auth-community-shell {
  max-height: calc(100svh - 150px);
  overflow: auto;
}

.auth-community-preview {
  min-height: 680px;
}

.auth-community-preview .community-composer input:disabled {
  opacity: 1;
}

@media (max-width: 1100px) {
  .auth-screen > .auth-panel-wrap,
  .auth-screen > .auth-art,
  .auth-screen > .auth-trust-bar,
  .auth-screen > .auth-copyright,
  .auth-info-shell {
    grid-column: 1;
    grid-row: auto;
  }

  .auth-landing-nav {
    align-items: stretch;
    flex-direction: column;
  }

  .auth-landing-nav nav {
    justify-content: stretch;
  }

  .auth-landing-nav nav button {
    flex: 1 1 140px;
  }

  .auth-help-grid,
  .auth-legal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .auth-info-hero {
    min-height: 220px;
    padding: 24px;
  }

  .auth-help-grid,
  .auth-legal-grid {
    grid-template-columns: 1fr;
  }
}

.player-profile-modal {
  width: min(1120px, calc(100vw - 28px));
  max-height: calc(100svh - 20px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(31, 147, 255, 0.45);
  border-radius: 16px;
  color: #f6fbff;
  background:
    radial-gradient(circle at 16% 4%, rgba(0, 132, 255, 0.24), transparent 28%),
    linear-gradient(180deg, rgba(1, 15, 34, 0.97), rgba(0, 9, 22, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72), inset 0 0 58px rgba(0, 151, 255, 0.08);
}

.player-profile-modal::before {
  display: none;
}

.player-profile-back,
.player-profile-edit {
  position: absolute;
  z-index: 5;
  top: 16px;
}

.player-profile-back {
  left: 16px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 204, 106, 0.28);
  border-radius: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  font-size: 1.85rem;
  line-height: 1;
}

.player-profile-modal .player-profile-edit {
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.player-profile-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(220px, 0.55fr) minmax(270px, 0.7fr);
  gap: 14px;
  align-items: stretch;
}

.player-profile-identity {
  min-height: 214px;
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.player-profile-wall {
  position: relative;
  min-height: 214px;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 9, 22, 0.12), rgba(0, 9, 22, 0.58)),
    url("./assets/players/player-card-wallpaper.png") center / cover no-repeat;
}

.player-profile-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 7, 19, 0.72));
  pointer-events: none;
}

.player-profile-portrait-wrap {
  position: absolute;
  z-index: 1;
  inset: 6px 0 0 -10px;
  display: grid;
  place-items: end center;
}

.player-profile-portrait,
.player-profile-fallback {
  width: 112%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.52));
}

.player-profile-fallback {
  display: block;
}

.player-profile-shirt-rating {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 14px;
  min-width: 44px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 204, 106, 0.45);
  border-radius: 10px;
  color: #ffe17b;
  background: linear-gradient(180deg, rgba(116, 91, 18, 0.92), rgba(42, 34, 10, 0.95));
  font-size: 1.25rem;
  font-weight: 1000;
  text-align: center;
}

.player-profile-name {
  min-width: 0;
  padding-top: 8px;
}

.player-profile-name h3 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(1.75rem, 3.1vw, 3rem);
  line-height: 0.9;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
}

.player-profile-name h3 strong {
  display: block;
}

.player-profile-name p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  color: #d8e5ef;
  font-size: 0.94rem;
  font-weight: 900;
}

.position-pill {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  padding: 4px 7px;
  border-radius: 5px;
  color: #bff2ff;
  background: linear-gradient(180deg, #0a74c7, #05457b);
  font-weight: 1000;
}

.flag-mini {
  font-size: 1.08rem;
}

.player-profile-overall,
.player-profile-contract,
.player-profile-card,
.player-profile-panel,
.player-profile-action {
  border: 1px solid rgba(34, 139, 229, 0.35);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(6, 31, 63, 0.82), rgba(2, 14, 31, 0.9)),
    rgba(0, 15, 35, 0.72);
  box-shadow: inset 0 0 28px rgba(0, 132, 255, 0.06);
}

.player-profile-overall {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  position: relative;
}

.player-profile-overall > span,
.player-profile-contract > span,
.player-profile-card > span,
.player-profile-panel > span {
  color: #c6d2df;
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.player-profile-gauge {
  width: 124px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #081a36 0 54%, transparent 55%),
    conic-gradient(#4bd5ff var(--overall), rgba(54, 90, 125, 0.34) 0);
  box-shadow: 0 0 38px rgba(0, 174, 255, 0.24);
}

.player-profile-gauge strong {
  display: block;
  color: #fff;
  font-size: 3.15rem;
  line-height: 0.9;
}

.player-profile-gauge em {
  color: #c7d5e3;
  font-style: normal;
  font-weight: 900;
}

.player-profile-overall p,
.player-profile-contract p,
.player-profile-card p,
.player-profile-panel p {
  margin: 0;
  color: #b7c7d7;
  line-height: 1.45;
}

.player-profile-overall b {
  color: #25f08f;
  font-size: 1.05rem;
}

.player-profile-contract {
  padding: 16px;
}

.contract-club {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.contract-club b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-weight: 1000;
}

.contract-club strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 1rem;
}

.player-profile-contract dl {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.player-profile-contract dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.player-profile-contract dt {
  color: #aebdcc;
  font-size: 0.78rem;
  font-weight: 800;
}

.player-profile-contract dd {
  margin: 0;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 900;
}

.player-profile-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.player-profile-card {
  min-height: 106px;
  display: grid;
  align-content: space-between;
  gap: 7px;
  padding: 12px;
}

.player-profile-card strong {
  color: #fff;
  font-size: 1.72rem;
  line-height: 1;
}

.player-profile-card strong em {
  margin-left: 4px;
  color: #c8d6e4;
  font-size: 0.82rem;
  font-style: normal;
}

.player-profile-card > i {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.player-profile-card > i::before {
  content: "";
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: #19ef88;
}

.player-profile-card.mid > i::before {
  background: #ffc443;
}

.player-profile-card.low > i::before {
  background: #ff4e68;
}

.player-profile-card.good p,
.player-profile-card.good strong,
.player-profile-card.compatibility.good strong {
  color: #26f18d;
}

.player-profile-card.mid p,
.player-profile-card.mid strong {
  color: #ffc443;
}

.player-profile-card.low p,
.player-profile-card.low strong {
  color: #ff6178;
}

.player-profile-card.compatibility strong,
.player-profile-card.role-card strong {
  font-size: 1rem;
  text-transform: uppercase;
}

.mini-pitch {
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 6px;
  border: 1px solid rgba(129, 255, 146, 0.24);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(41, 104, 45, 0.45), rgba(12, 54, 33, 0.5));
}

.mini-pitch i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #56ff76;
  box-shadow: 0 0 12px rgba(86, 255, 118, 0.8);
}

.role-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.role-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.role-dots i.active {
  background: #29a9ff;
}

.player-profile-lower {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.player-profile-panel {
  min-height: 88px;
  padding: 12px;
}

.player-profile-panel.traits {
  grid-column: span 3;
}

.player-profile-panel.coach-report {
  position: relative;
  grid-column: span 5;
  padding-right: 64px;
}

.player-profile-panel.coach-report strong {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(63, 241, 150, 0.5);
  border-radius: 50%;
  color: #32f68f;
  font-size: 1.15rem;
}

.player-profile-panel.traits div,
.player-profile-panel.interest div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.player-profile-panel.traits b,
.player-profile-panel.interest b {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid rgba(30, 185, 255, 0.22);
  border-radius: 7px;
  color: #eaf7ff;
  background: rgba(20, 117, 179, 0.16);
}

.player-profile-panel.attributes {
  grid-column: span 6;
  grid-row: auto;
}

.player-profile-panel.evolution,
.player-profile-panel.comparison {
  grid-column: span 2;
}

.player-profile-panel.interest {
  grid-column: span 4;
}

.player-profile-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin-top: 8px;
}

.player-profile-attrs div {
  display: grid;
  grid-template-columns: 1fr 72px 28px;
  align-items: center;
  gap: 8px;
}

.player-profile-attrs em {
  color: #c7d4df;
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.player-profile-attrs i {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #16bdfd var(--v), rgba(255, 255, 255, 0.09) 0);
}

.player-profile-attrs strong {
  color: #fff;
  text-align: right;
}

.evolution svg {
  width: 100%;
  height: 58px;
  margin-top: 6px;
}

.player-profile-rank {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 5px 8px;
  border-radius: 7px;
  color: #dce8f4;
}

.player-profile-rank.current {
  color: #61e7ff;
  background: linear-gradient(90deg, rgba(0, 132, 255, 0.32), rgba(0, 132, 255, 0.05));
}

.player-profile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.player-profile-action {
  min-height: 48px;
  display: grid;
  place-items: center;
  padding: 10px;
  color: #fff;
  font-size: clamp(0.72rem, 1.4vw, 0.9rem);
  font-weight: 1000;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.player-profile-action span {
  display: block;
  margin-top: 4px;
  color: #ffd15d;
  font-size: 0.72rem;
  line-height: 1.05;
  text-transform: none;
}

.player-profile-action.primary {
  color: #60cfff;
  border-color: rgba(0, 147, 255, 0.55);
}

.player-profile-action.gold {
  color: #ffd15d;
  border-color: rgba(255, 204, 106, 0.55);
  background: linear-gradient(180deg, rgba(121, 84, 12, 0.68), rgba(36, 25, 6, 0.9));
}

.player-profile-action.danger {
  color: #ff7c8c;
  border-color: rgba(255, 83, 109, 0.48);
  background: linear-gradient(180deg, rgba(92, 20, 33, 0.7), rgba(30, 7, 14, 0.88));
}

@media (max-width: 1100px) {
  .player-profile-top,
  .player-profile-lower {
    grid-template-columns: 1fr;
  }

  .player-profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-profile-panel.coach-report {
    grid-column: span 1;
  }
}

@media (max-width: 720px) {
  .player-profile-modal {
    width: min(100vw - 14px, 640px);
    padding: 18px;
  }

  .player-profile-identity {
    grid-template-columns: 1fr;
  }

  .player-profile-wall {
    min-height: 280px;
  }

  .player-profile-metrics,
  .player-profile-actions,
  .player-profile-attrs {
    grid-template-columns: 1fr;
  }
}

/* Extra compact player sheet: designed to fit above the fixed bottom navigation. */
.player-profile-modal {
  width: min(860px, calc(100vw - 24px));
  max-height: min(760px, calc(100svh - 126px));
  padding: 12px;
  border-radius: 12px;
}

.player-profile-top {
  grid-template-columns: minmax(0, 1fr) 156px 238px;
  gap: 9px;
}

.player-profile-identity {
  min-height: 150px;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
}

.player-profile-wall {
  min-height: 150px;
  border-radius: 10px;
}

.player-profile-portrait-wrap {
  inset: 5px 0 0 -7px;
}

.player-profile-portrait,
.player-profile-fallback {
  width: 118%;
}

.player-profile-shirt-rating {
  left: 8px;
  bottom: 9px;
  min-width: 36px;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 1rem;
}

.player-profile-name {
  padding-top: 4px;
}

.player-profile-name h3 {
  margin-bottom: 8px;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
}

.player-profile-name p {
  gap: 7px;
  margin: 5px 0;
  font-size: 0.78rem;
}

.position-pill {
  min-width: 28px;
  padding: 3px 6px;
}

.player-profile-overall {
  gap: 5px;
  padding: 10px;
}

.player-profile-overall > span,
.player-profile-contract > span,
.player-profile-card > span,
.player-profile-panel > span {
  font-size: 0.68rem;
}

.player-profile-gauge {
  width: 84px;
}

.player-profile-gauge strong {
  font-size: 2.25rem;
}

.player-profile-gauge em,
.player-profile-overall p {
  font-size: 0.72rem;
}

.player-profile-contract {
  padding: 10px 12px;
}

.contract-club {
  gap: 8px;
  margin: 7px 0 8px;
}

.contract-club b {
  width: 34px;
  height: 34px;
  font-size: 0.7rem;
}

.contract-club p {
  font-size: 0.75rem;
}

.contract-club strong {
  font-size: 0.82rem;
}

.player-profile-contract dl {
  gap: 4px;
  padding-top: 7px;
}

.player-profile-contract dt,
.player-profile-contract dd {
  font-size: 0.68rem;
}

.player-profile-metrics {
  gap: 7px;
  margin-top: 7px;
}

.player-profile-card {
  min-height: 76px;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
}

.player-profile-card strong {
  font-size: 1.28rem;
}

.player-profile-card strong em,
.player-profile-card p {
  font-size: 0.68rem;
}

.player-profile-card > i {
  height: 4px;
}

.player-profile-card.compatibility strong,
.player-profile-card.role-card strong {
  font-size: 0.78rem;
}

.mini-pitch {
  height: 18px;
  padding: 3px;
}

.mini-pitch i,
.role-dots i {
  width: 5px;
  height: 5px;
}

.player-profile-lower {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.player-profile-panel {
  min-height: 62px;
  padding: 9px;
  border-radius: 8px;
}

.player-profile-panel.traits {
  grid-column: span 3;
}

.player-profile-panel.coach-report {
  grid-column: span 5;
  min-height: 62px;
  padding-right: 50px;
}

.player-profile-panel.coach-report strong {
  right: 9px;
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
}

.player-profile-panel.traits div {
  gap: 5px;
  margin-top: 6px;
}

.player-profile-panel.traits b {
  min-height: 23px;
  padding: 4px 7px;
  font-size: 0.72rem;
}

.player-profile-panel.attributes {
  grid-column: span 5;
}

.player-profile-panel.comparison {
  grid-column: span 3;
}

.player-profile-panel.evolution,
.player-profile-panel.interest {
  display: none;
}

.player-profile-attrs {
  gap: 4px 8px;
  margin-top: 6px;
}

.player-profile-attrs div {
  grid-template-columns: 1fr 46px 24px;
  gap: 6px;
}

.player-profile-attrs em,
.player-profile-attrs strong,
.player-profile-panel p {
  font-size: 0.66rem;
}

.player-profile-attrs i {
  height: 4px;
}

.player-profile-rank {
  margin-top: 3px;
  padding: 4px 6px;
  font-size: 0.72rem;
}

.player-profile-actions {
  gap: 7px;
  margin-top: 8px;
}

.player-profile-action {
  min-height: 38px;
  padding: 7px;
  border-radius: 8px;
  font-size: 0.74rem;
}

.player-profile-action span {
  margin-top: 2px;
  font-size: 0.64rem;
}

@media (max-width: 920px) {
  .player-profile-modal {
    width: min(100vw - 16px, 720px);
    max-height: calc(100svh - 24px);
  }

  .player-profile-top,
  .player-profile-lower {
    grid-template-columns: 1fr;
  }

  .player-profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-profile-panel.traits,
  .player-profile-panel.coach-report,
  .player-profile-panel.attributes,
  .player-profile-panel.comparison {
    grid-column: auto;
  }
}

/* Reference-style player dossier: closer to the premium card mockup. */
.player-profile-modal {
  width: min(780px, calc(100vw - 24px));
  max-height: calc(100svh - 112px);
  padding: 14px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 132, 255, 0.24), transparent 26%),
    linear-gradient(180deg, rgba(0, 14, 34, 0.98), rgba(0, 8, 20, 0.99));
}

.player-profile-top {
  grid-template-columns: minmax(0, 1.42fr) minmax(140px, 0.54fr) minmax(205px, 0.74fr);
  min-height: 180px;
  gap: 10px;
  padding: 10px;
  background:
    linear-gradient(90deg, rgba(0, 10, 24, 0.1), rgba(0, 10, 24, 0.48) 52%, rgba(0, 10, 24, 0.84)),
    url("./assets/players/player-profile-banner.png") center / cover no-repeat;
}

.player-profile-identity {
  min-height: 168px;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 10px;
}

.player-profile-wall {
  min-height: 168px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.player-profile-wall::after {
  display: none;
}

.player-profile-portrait-wrap {
  inset: -4px -6px 0 -18px;
  overflow: hidden;
  border-radius: 0 0 8px 8px;
  background: transparent;
}

.player-profile-portrait,
.player-profile-fallback {
  width: 108%;
  filter:
    drop-shadow(0 0 16px rgba(26, 176, 255, 0.45))
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.6));
  -webkit-mask-image:
    radial-gradient(ellipse 58% 72% at 50% 42%, #000 0 58%, rgba(0, 0, 0, 0.82) 66%, transparent 78%);
  mask-image:
    radial-gradient(ellipse 58% 72% at 50% 42%, #000 0 58%, rgba(0, 0, 0, 0.82) 66%, transparent 78%);
}

.player-profile-shirt-rating {
  left: auto;
  right: 12px;
  bottom: 12px;
  min-width: 48px;
  padding: 8px 10px;
  border-color: rgba(255, 203, 51, 0.58);
  background: linear-gradient(180deg, rgba(130, 105, 13, 0.96), rgba(39, 32, 8, 0.98));
  font-size: 1.22rem;
  box-shadow: 0 0 18px rgba(255, 198, 45, 0.22), inset 0 0 12px rgba(255, 207, 79, 0.12);
}

.player-profile-overall .player-profile-shirt-rating {
  top: 10px;
  right: auto;
  bottom: auto;
  left: 10px;
  z-index: 2;
}

.player-profile-name {
  align-self: center;
  padding-top: 0;
}

.player-profile-name h3 {
  margin-bottom: 9px;
  font-size: clamp(1.58rem, 3.2vw, 2.55rem);
  line-height: 0.86;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.player-profile-name p {
  margin: 6px 0;
  font-size: 0.82rem;
  color: #eef7ff;
}

.player-profile-overall,
.player-profile-contract {
  border-color: rgba(31, 137, 255, 0.48);
  background:
    radial-gradient(circle at 50% 35%, rgba(0, 126, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(5, 28, 58, 0.84), rgba(1, 12, 28, 0.9));
}

.player-profile-overall {
  padding: 12px;
}

.player-profile-gauge {
  width: 106px;
  box-shadow: 0 0 34px rgba(0, 174, 255, 0.34);
}

.player-profile-gauge strong {
  font-size: 3rem;
}

.player-profile-contract {
  padding: 12px;
}

.contract-club {
  margin: 9px 0 10px;
}

.contract-club b {
  width: 36px;
  height: 36px;
}

.player-profile-contract dl {
  gap: 5px;
}

.player-profile-metrics {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.player-profile-card {
  min-height: 126px;
  padding: 12px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 35%, rgba(0, 132, 255, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(5, 29, 61, 0.86), rgba(2, 13, 30, 0.94));
}

.player-profile-metric-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.player-profile-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1be8ff;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.22), rgba(0, 67, 133, 0.18));
  box-shadow: 0 0 18px rgba(0, 210, 255, 0.28);
  font-size: 1.35rem;
  line-height: 1;
}

.player-profile-card.potencial .player-profile-icon {
  color: #ffc443;
  background: radial-gradient(circle, rgba(255, 196, 67, 0.26), rgba(88, 57, 0, 0.18));
  box-shadow: 0 0 18px rgba(255, 196, 67, 0.24);
}

.player-profile-card.moral .player-profile-icon {
  color: #bb63ff;
  background: radial-gradient(circle, rgba(187, 99, 255, 0.28), rgba(64, 21, 99, 0.2));
  box-shadow: 0 0 18px rgba(187, 99, 255, 0.26);
}

.player-profile-card.energia .player-profile-icon {
  color: #26f18d;
  background: radial-gradient(circle, rgba(38, 241, 141, 0.25), rgba(13, 80, 47, 0.18));
  box-shadow: 0 0 18px rgba(38, 241, 141, 0.24);
}

.player-profile-card strong {
  font-size: 2rem;
}

.player-profile-card.compatibility,
.player-profile-card.role-card {
  text-align: center;
}

.player-profile-card.compatibility strong,
.player-profile-card.role-card strong {
  font-size: 0.95rem;
}

.mini-pitch {
  height: 28px;
}

.player-profile-lower {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.player-profile-panel {
  min-height: 76px;
  padding: 11px;
}

.player-profile-panel.traits,
.player-profile-panel.coach-report {
  grid-column: span 3;
}

.player-profile-panel.attributes {
  grid-column: span 3;
}

.player-profile-panel.evolution,
.player-profile-panel.comparison,
.player-profile-panel.interest {
  display: block;
  grid-column: span 3;
}

.player-profile-panel.interest {
  min-height: 72px;
}

.player-profile-attrs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.player-profile-attrs div {
  grid-template-columns: 1fr 50px 24px;
}

.evolution svg {
  height: 76px;
}

.player-profile-actions {
  margin-top: 9px;
}

.player-profile-action {
  min-height: 54px;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .player-profile-modal {
    width: min(100vw - 16px, 720px);
    max-height: calc(100svh - 20px);
  }

  .player-profile-top,
  .player-profile-lower {
    grid-template-columns: 1fr;
  }

  .player-profile-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-profile-panel.traits,
  .player-profile-panel.coach-report,
  .player-profile-panel.attributes,
  .player-profile-panel.evolution,
  .player-profile-panel.comparison,
  .player-profile-panel.interest {
    grid-column: auto;
  }
}

.stadium-cinematic-screen {
  position: relative;
  min-height: 0;
  height: min(820px, calc(100svh - 92px));
  overflow: hidden;
  border: 1px solid rgba(239, 188, 92, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 14%, rgba(239, 188, 92, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(19, 14, 8, 0.96), rgba(5, 7, 8, 0.98) 52%, rgba(31, 24, 15, 0.94));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  color: #fff8ea;
  padding: clamp(10px, 1.25vw, 18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1vw, 12px);
}

.stadium-cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.34;
  filter: brightness(1.22) contrast(1.08) saturate(0.92);
}

.stadium-cinematic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.92), rgba(5, 6, 7, 0.46) 50%, rgba(5, 6, 7, 0.9)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.78));
}

.stadium-cinematic-bg video,
.stadium-feature-card video,
.stadium-cinematic-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stadium-cinematic-header,
.stadium-cinematic-layout,
.stadium-lower-grid {
  position: relative;
  z-index: 1;
}

.stadium-cinematic-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 0;
}

.stadium-cinematic-header span,
.stadium-panel-title span,
.stadium-review-panel span,
.stadium-value-panel span,
.stadium-feature-copy span {
  color: #f4c45e;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.stadium-cinematic-header h2 {
  margin: 2px 0 6px;
  font-size: clamp(1.9rem, 4.2vw, 4.35rem);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
}

.stadium-cinematic-header p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 248, 232, 0.78);
  font-size: clamp(0.82rem, 1vw, 1rem);
  line-height: 1.32;
}

.stadium-cinematic-header aside {
  min-width: 150px;
  border: 1px solid rgba(244, 196, 94, 0.32);
  border-radius: 8px;
  background: rgba(15, 12, 8, 0.74);
  padding: 12px;
  text-align: right;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stadium-cinematic-header aside strong {
  display: block;
  color: #ffd36a;
  font-size: 1.55rem;
  line-height: 1;
}

.stadium-cinematic-header aside span {
  color: rgba(255, 248, 232, 0.66);
}

.stadium-cinematic-header aside .stadium-test-credits-btn {
  margin-top: 10px;
}

.stadium-cinematic-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(360px, 0.78fr);
  gap: clamp(10px, 1.25vw, 16px);
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.stadium-feature-card {
  position: relative;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  overflow: hidden;
  border: 1px solid rgba(244, 196, 94, 0.36);
  border-radius: 8px;
  background: #050505;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-align: left;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.46);
}

.stadium-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.74));
}

.stadium-feature-card:hover video {
  transform: scale(1.03);
  filter: brightness(1.16) saturate(1.06);
}

.stadium-feature-card video {
  display: block;
  transform: scale(1.005);
  transition: transform 520ms ease, filter 520ms ease;
  filter: brightness(1.06) contrast(1.04);
}

.stadium-feature-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255, 211, 106, 0.16) 49%, transparent 57% 100%);
  transform: translateX(-60%);
  animation: stadiumPreviewSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

.stadium-feature-copy {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  z-index: 3;
}

.stadium-feature-copy strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(1.45rem, 2.7vw, 3rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.stadium-feature-copy em {
  display: block;
  margin-top: 8px;
  color: rgba(255, 248, 232, 0.74);
  font-style: normal;
  font-weight: 800;
}

.stadium-control-panel,
.stadium-review-panel,
.stadium-value-panel,
.stadium-mini-facility {
  border: 1px solid rgba(244, 196, 94, 0.24);
  border-radius: 8px;
  background: rgba(9, 10, 9, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.stadium-control-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(12px, 1.1vw, 16px);
  min-height: 0;
  overflow: hidden;
}

.stadium-panel-title {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 248, 232, 0.12);
  padding-bottom: 10px;
}

.stadium-panel-title strong {
  color: #fff1c9;
  font-size: 0.95rem;
  text-align: right;
}

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

.stadium-stat-grid article {
  min-height: 62px;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 10px;
}

.stadium-stat-grid span,
.stadium-ticket-editor span,
.stadium-mini-facility span {
  display: block;
  color: rgba(255, 248, 232, 0.62);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stadium-stat-grid strong {
  display: block;
  margin-top: 5px;
  color: #fff9ee;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1;
}

.stadium-stat-grid em,
.stadium-ticket-editor em,
.stadium-mini-facility em {
  display: block;
  margin-top: 6px;
  color: #f4c45e;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
}

.stadium-mini-facility em,
.stadium-mini-facility strong,
.stadium-mini-facility span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.stadium-mini-facility em {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.stadium-ticket-editor {
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  border: 1px solid rgba(244, 196, 94, 0.18);
  border-radius: 8px;
  background: rgba(31, 24, 13, 0.56);
  padding: 10px;
}

.stadium-ticket-editor strong {
  display: block;
  margin-top: 4px;
  color: #ffd36a;
  font-size: 1.35rem;
}

.stadium-ticket-buttons {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}

.stadium-ticket-buttons input[type="range"] {
  accent-color: #f4c45e;
  width: 100%;
}

.stadium-upgrade-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background: rgba(3, 4, 4, 0.72);
  padding: 10px;
}

.stadium-upgrade-card p {
  margin: 0;
  color: rgba(255, 248, 232, 0.74);
  line-height: 1.24;
  font-size: 0.82rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stadium-work-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.stadium-work-progress i {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c8932f, #ffe08a);
  box-shadow: 0 0 18px rgba(244, 196, 94, 0.45);
}

.stadium-upgrade-card .facility-actions,
.stadium-upgrade-card .facilities-detail-upgrade {
  width: 100%;
}

.stadium-upgrade-card .primary-btn,
.stadium-upgrade-card .secondary-btn,
.stadium-ticket-buttons .secondary-btn,
.stadium-test-credits-btn {
  min-height: 36px;
  border-color: rgba(244, 196, 94, 0.36);
  background: linear-gradient(180deg, #ffd36a, #d99a2f);
  color: #0b0905;
  font-weight: 900;
}

.stadium-test-credits-btn {
  width: 100%;
  border: 1px solid rgba(244, 196, 94, 0.46);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22), 0 0 18px rgba(244, 196, 94, 0.12);
}

.stadium-upgrade-card .secondary-btn:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.48);
}

.stadium-lower-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.58fr) minmax(190px, 0.38fr) minmax(520px, 1fr);
  gap: 10px;
  margin-top: 0;
  min-height: 94px;
}

.stadium-review-panel,
.stadium-value-panel {
  padding: 10px 12px;
  overflow: hidden;
}

.stadium-review-panel strong,
.stadium-value-panel strong {
  display: block;
  margin-top: 4px;
  color: #fff9ee;
  font-size: 1rem;
  line-height: 1.18;
}

.stadium-review-panel p,
.stadium-value-panel p {
  margin: 8px 0 0;
  color: rgba(255, 248, 232, 0.7);
  line-height: 1.28;
  font-size: 0.86rem;
}

.stadium-mini-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.stadium-mini-facility {
  min-height: 94px;
  padding: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.stadium-mini-facility strong {
  display: block;
  margin-top: 6px;
  color: #fff9ee;
  font-size: 0.95rem;
}

.stadium-mini-facility small {
  display: inline-flex;
  margin-top: 6px;
  padding: 3px 7px;
  border: 1px solid rgba(244, 196, 94, 0.24);
  border-radius: 999px;
  color: #ffd36a;
  background: rgba(244, 196, 94, 0.08);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stadium-mini-facility.active {
  border-color: rgba(255, 211, 106, 0.66);
  background:
    linear-gradient(145deg, rgba(77, 54, 18, 0.56), rgba(8, 8, 7, 0.84)),
    rgba(9, 10, 9, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(244, 196, 94, 0.15);
}

.stadium-mini-facility.locked {
  cursor: not-allowed;
  opacity: 0.58;
}

.stadium-mini-facility:not(.locked):hover {
  transform: translateY(-1px);
  border-color: rgba(255, 211, 106, 0.52);
}

.stadium-mini-facility.working {
  border-color: rgba(255, 115, 73, 0.44);
}

.stadium-cinematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  overflow: hidden;
  background: #000;
}

.stadium-cinematic-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 28%, rgba(0, 0, 0, 0.58)),
    radial-gradient(circle at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.42));
}

.stadium-cinematic-video {
  position: absolute;
  inset: 0;
  filter: brightness(1.08) contrast(1.05);
}

.stadium-cinematic-close,
.stadium-cinematic-info {
  position: absolute;
  z-index: 2;
}

.stadium-cinematic-close {
  top: 22px;
  left: 22px;
  border: 1px solid rgba(244, 196, 94, 0.44);
  border-radius: 8px;
  background: rgba(12, 10, 6, 0.78);
  color: #ffe3a0;
  padding: 12px 16px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.stadium-cinematic-info {
  left: 28px;
  bottom: 26px;
  width: min(560px, calc(100vw - 56px));
  border-left: 3px solid #f4c45e;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.22));
  padding: 18px 22px;
  color: #fff9ee;
}

.stadium-cinematic-info span {
  color: #f4c45e;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.stadium-cinematic-info strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.stadium-cinematic-info em {
  display: block;
  margin-top: 8px;
  color: rgba(255, 248, 232, 0.76);
  font-style: normal;
  font-weight: 800;
}

@keyframes stadiumPreviewSweep {
  0%, 55% {
    transform: translateX(-66%);
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  88%, 100% {
    transform: translateX(66%);
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .stadium-cinematic-layout,
  .stadium-lower-grid {
    grid-template-columns: 1fr;
  }

  .stadium-feature-card {
    min-height: 260px;
  }

  .stadium-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .stadium-cinematic-screen {
    padding: 14px;
  }

  .stadium-cinematic-header,
  .stadium-panel-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .stadium-cinematic-header aside {
    width: 100%;
    text-align: left;
  }

  .stadium-stat-grid,
  .stadium-mini-grid,
  .stadium-ticket-buttons {
    grid-template-columns: 1fr;
  }

  .stadium-feature-card {
    min-height: 260px;
  }
}

.player-profile-top {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(20, 150, 255, 0.32);
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 10, 24, 0.18), rgba(0, 10, 24, 0.58) 56%, rgba(0, 10, 24, 0.78)),
    url("./assets/players/player-profile-banner.png") center / cover no-repeat;
  box-shadow: inset 0 0 46px rgba(0, 145, 255, 0.16);
}

.player-profile-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 174, 255, 0.08), rgba(0, 0, 0, 0.14));
  pointer-events: none;
}

.player-profile-top > * {
  position: relative;
  z-index: 1;
}

.player-profile-wall {
  background: transparent;
}

.player-profile-clean-avatar {
  width: 112%;
  height: 100%;
  display: block;
  filter:
    drop-shadow(0 0 14px rgba(26, 176, 255, 0.42))
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.62));
  background: transparent;
}

.player-profile-avatar-img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 112%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  filter:
    drop-shadow(0 0 14px rgba(26, 176, 255, 0.42))
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.62));
}

.player-profile-overall,
.player-profile-contract {
  background:
    linear-gradient(180deg, rgba(5, 29, 61, 0.78), rgba(1, 12, 29, 0.86)),
    rgba(0, 15, 35, 0.62);
  backdrop-filter: blur(2px);
}

/* Club profile header: replaces the old top resource strip without touching navigation. */
.game.pcm-premium-shell .club-hero-topbar {
  position: relative;
  min-height: 164px;
  display: grid;
  grid-template-columns: minmax(520px, 1.3fr) minmax(420px, 0.95fr) minmax(500px, auto);
  align-items: center;
  gap: 18px;
  padding: 14px 24px;
  overflow: visible;
  border-bottom: 1px solid rgba(0, 148, 255, 0.24);
  background:
    linear-gradient(90deg, rgba(0, 7, 15, 0.98) 0%, rgba(2, 13, 28, 0.94) 42%, rgba(8, 10, 28, 0.94) 72%, rgba(1, 7, 13, 0.98) 100%),
    #010914;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 18px 46px rgba(0, 0, 0, 0.26);
}

.game.pcm-premium-shell .club-hero-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 190, 47, 0.1), transparent 20%),
    radial-gradient(circle at 30% 48%, rgba(154, 74, 255, 0.14), transparent 18%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(0, 140, 255, 0.04) 48%, rgba(255, 190, 47, 0.035));
  pointer-events: none;
}

.game.pcm-premium-shell .club-hero-topbar > *:not(.club-hero-bg) {
  position: relative;
  z-index: 1;
}

.club-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 28%, rgba(0, 0, 0, 0.5) 82%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

.club-hero-identity {
  display: grid;
  grid-template-columns: 112px 104px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  overflow: visible;
}

.club-hero-crest {
  width: 112px;
  height: 132px;
  display: grid;
  place-items: center;
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter:
    drop-shadow(0 0 14px rgba(255, 190, 47, 0.2))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}

.club-hero-crest::before {
  content: none;
}

.club-hero-crest::after {
  content: "★";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--pcm-gold);
  font-size: 21px;
  text-shadow: 0 0 14px rgba(255, 190, 47, 0.75);
}

.club-hero-crest .club-crest-img,
.club-hero-crest img,
.club-hero-crest svg {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 112px;
  object-fit: contain;
}

.club-hero-crest span {
  display: none;
}

.club-president-card {
  width: 104px;
  height: 104px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  overflow: visible;
}

.profile-frame {
  position: relative;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.profile-frame .profile-avatar {
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  background: transparent;
  box-shadow: none;
  flex: none;
  aspect-ratio: auto;
  overflow: visible;
}

.profile-frame .profile-border {
  position: absolute;
  width: 104px;
  height: 104px;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
}

.profile-frame .profile-level {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  min-width: 40px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(138, 70, 255, 0.95), rgba(45, 18, 89, 0.98));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 950;
  box-shadow: 0 0 18px rgba(166, 83, 255, 0.38);
}

.club-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.club-hero-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.club-hero-name h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.45rem, 1.85vw, 2.25rem);
  line-height: 0.98;
  font-weight: 950;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-hero-edit {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 13, 28, 0.58);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.club-hero-copy p,
.club-hero-copy span {
  margin: 4px 0 0;
  color: rgba(229, 241, 255, 0.78);
  font-weight: 700;
}

.club-hero-copy > span {
  display: block;
}

.club-division-chip {
  margin-top: 8px;
  display: inline-grid;
  grid-template-columns: 32px auto;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border: 1px solid rgba(174, 91, 255, 0.36);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(76, 23, 116, 0.62), rgba(8, 19, 38, 0.68)),
    rgba(4, 12, 25, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 20px rgba(154, 74, 255, 0.16);
}

.club-division-chip svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1px solid rgba(174, 91, 255, 0.48);
  border-radius: 8px;
  color: #ba6dff;
  background: rgba(80, 27, 121, 0.28);
  box-shadow: 0 0 18px rgba(174, 91, 255, 0.24);
}

.club-division-chip strong {
  display: block;
  color: #d683ff;
  font-size: 0.9rem;
  font-weight: 950;
  text-transform: uppercase;
}

.club-division-chip em {
  display: block;
  color: rgba(216, 229, 247, 0.72);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.club-admin-pill {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(0, 174, 255, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 116, 255, 0.22), rgba(3, 16, 34, 0.76)),
    rgba(2, 12, 25, 0.8);
  color: #dff5ff;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.club-admin-pill svg {
  width: 17px;
  height: 17px;
  color: var(--pcm-blue);
}

.club-admin-pill span {
  margin: 0;
  color: inherit;
  font-weight: inherit;
}

.club-admin-pill:hover {
  border-color: rgba(0, 174, 255, 0.68);
  background:
    linear-gradient(180deg, rgba(0, 116, 255, 0.32), rgba(3, 16, 34, 0.86)),
    rgba(2, 12, 25, 0.9);
}

.club-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(94px, 1fr));
  align-items: end;
  gap: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.club-hero-stats article {
  min-height: 58px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding: 0 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.club-hero-stats article:last-child {
  border-right: 0;
}

.club-hero-stats svg {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  color: var(--pcm-blue);
  filter: drop-shadow(0 0 12px rgba(0, 174, 255, 0.34));
}

.club-hero-stats article:nth-child(2) svg,
.club-hero-stats article:nth-child(3) svg,
.club-hero-stats article:nth-child(4) svg {
  color: var(--pcm-gold);
  filter: drop-shadow(0 0 12px rgba(255, 190, 47, 0.32));
}

.club-hero-stats strong {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 950;
  white-space: nowrap;
}

.club-hero-stats span {
  color: rgba(216, 229, 247, 0.68);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.club-hero-actions {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(136px, 0.85fr) minmax(138px, 0.85fr) minmax(150px, 0.9fr) 48px;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.club-wallet-card {
  min-height: 56px;
  display: grid;
  align-content: center;
  position: relative;
  padding: 10px 14px 10px 44px;
  border: 1px solid rgba(0, 148, 255, 0.28);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(5, 24, 49, 0.9), rgba(1, 10, 23, 0.88)),
    rgba(2, 13, 29, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.club-wallet-card::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border-radius: 6px;
  border: 1px solid currentColor;
  box-shadow: 0 0 18px currentColor;
}

.club-wallet-card.budget {
  color: #00ff9c;
}

.club-wallet-card.credits {
  color: var(--pcm-gold);
  padding-right: 42px;
}

.club-wallet-card span {
  color: rgba(232, 242, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.club-wallet-card strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 950;
  white-space: nowrap;
}

.club-wallet-card button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 190, 47, 0.15);
  color: var(--pcm-gold);
  font-size: 1.25rem;
  font-weight: 950;
  cursor: pointer;
}

.club-hero-play,
.club-hero-advance,
.club-hero-settings {
  min-height: 56px;
  border-radius: 7px;
  font-weight: 950;
  text-transform: uppercase;
  cursor: pointer;
}

.club-hero-play {
  border: 1px solid rgba(255, 214, 104, 0.75);
  background: linear-gradient(180deg, #ffd66a, #eaa51f);
  color: #160f04;
  box-shadow: 0 0 22px rgba(255, 190, 47, 0.3);
}

.nav-btn.match-ready,
.presidential-menu-item.match-ready,
.club-hero-play.match-ready,
.presidential-next-play.match-ready {
  animation: matchReadyPulse 1.15s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 201, 82, 0.32), 0 0 22px rgba(255, 184, 55, 0.28);
}

.match-nav-alert {
  background: #f9bd42 !important;
  color: #201305 !important;
}

@keyframes matchReadyPulse {
  0%,
  100% {
    filter: brightness(1);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.28);
    transform: translateY(-1px);
  }
}

.club-hero-advance,
.club-hero-settings {
  border: 1px solid rgba(90, 143, 200, 0.32);
  background: rgba(4, 16, 32, 0.82);
  color: #fff;
}

.club-hero-settings {
  width: 48px;
  display: grid;
  place-items: center;
  padding: 0;
}

.club-hero-settings svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 1500px) {
  .game.pcm-premium-shell .club-hero-topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .club-hero-actions {
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 900px) {
  .game.pcm-premium-shell .club-hero-topbar {
    padding: 12px;
  }

  .club-hero-identity {
    grid-template-columns: 78px 82px minmax(0, 1fr);
    gap: 12px;
  }

  .club-hero-crest {
    width: 78px;
    height: 96px;
  }

  .club-hero-crest .club-crest-img,
  .club-hero-crest img,
  .club-hero-crest svg {
    width: 64px;
    height: 78px;
  }

  .club-president-card {
    width: 82px;
    height: 82px;
  }

  .profile-frame {
    width: 82px;
    height: 82px;
  }

  .profile-frame .profile-avatar {
    width: 64px;
    height: 64px;
  }

  .profile-frame .profile-border {
    width: 82px;
    height: 82px;
  }

  .profile-frame .profile-level {
    min-width: 36px;
    height: 24px;
    bottom: -4px;
    font-size: 0.78rem;
  }

  .club-hero-stats,
  .club-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .club-hero-settings {
    width: auto;
  }
}

.player-performance-record {
  display: grid;
  align-content: start;
  gap: 8px;
}

.player-performance-record > span {
  margin: 0;
}

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

.player-season-stats article {
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(0, 148, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(0, 148, 255, 0.12), rgba(0, 148, 255, 0.025)),
    rgba(2, 13, 24, 0.62);
}

.player-season-stats em,
.player-career-stats b {
  color: #aebdcc;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.player-season-stats strong {
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
}

.player-career-stats {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 190, 47, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 190, 47, 0.08), transparent),
    rgba(2, 13, 24, 0.48);
}

.player-career-stats b {
  color: #ffcb2f;
}

.player-career-stats p {
  margin: 0;
  color: #cbd8e4;
  font-size: 0.72rem;
  font-weight: 850;
}

.player-career-stats strong {
  color: #fff;
  font-size: 0.9rem;
}

/* Presidential selection v2 */
.president-scrim {
  background:
    radial-gradient(circle at 78% 10%, rgba(0, 94, 190, 0.22), transparent 34%),
    radial-gradient(circle at 16% 22%, rgba(255, 185, 54, 0.1), transparent 26%),
    linear-gradient(135deg, rgba(0, 8, 18, 0.96), rgba(0, 2, 9, 0.94));
  backdrop-filter: blur(9px);
}

.president-selection {
  width: min(1480px, calc(100vw - 48px));
  max-height: calc(100svh - 34px);
  overflow: auto;
  gap: 26px;
  padding: 28px;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(0, 119, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(0, 10, 22, 0.98), rgba(1, 3, 10, 0.98));
  box-shadow: 0 36px 120px rgba(0, 0, 0, 0.74);
}

.president-selection-head {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.president-selection-mark {
  width: 76px;
  height: 86px;
  display: grid;
  place-items: center;
  color: var(--gold-strong);
  filter: drop-shadow(0 0 18px rgba(255, 190, 47, 0.22));
}

.president-selection-mark svg {
  width: 72px;
  height: 72px;
}

.president-selection-head span {
  color: var(--gold-strong);
  font-size: 1rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.president-selection-head h3 {
  margin: 5px 0 8px;
  color: #fff;
  font-size: clamp(2.35rem, 4vw, 3.95rem);
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.08);
}

.president-selection-head p {
  margin: 0;
  color: #aeb9c8;
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 850;
}

.president-choice-grid {
  gap: clamp(18px, 2vw, 30px);
}

.president-choice {
  min-height: 0;
  display: block;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translateY(0) scale(1);
  transition: transform 220ms ease, filter 220ms ease;
}

.president-choice:not(.locked):hover {
  border-color: transparent;
  background: transparent;
  transform: translateY(-8px) scale(1.018);
}

.president-choice.selected {
  transform: translateY(-4px) scale(1.012);
}

.president-choice .president-portrait {
  position: relative;
  overflow: visible;
  aspect-ratio: 469 / 678;
  border-radius: 16px;
  background: transparent;
}

.president-choice .president-portrait::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: 16px;
  opacity: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 34px rgba(0, 148, 255, 0.22);
  transition: opacity 220ms ease, box-shadow 220ms ease;
}

.president-choice-blue .president-portrait::after {
  box-shadow: 0 0 0 2px rgba(0, 148, 255, 0.35), 0 0 38px rgba(0, 148, 255, 0.42);
}

.president-choice-gold .president-portrait::after {
  box-shadow: 0 0 0 2px rgba(255, 190, 47, 0.35), 0 0 38px rgba(255, 190, 47, 0.34);
}

.president-choice-purple .president-portrait::after {
  box-shadow: 0 0 0 2px rgba(211, 77, 255, 0.35), 0 0 38px rgba(211, 77, 255, 0.34);
}

.president-choice:hover .president-portrait::after,
.president-choice.selected .president-portrait::after {
  opacity: 1;
}

.president-choice .president-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  filter: brightness(0.96) saturate(1.02);
  transition: filter 220ms ease, transform 220ms ease;
}

.president-choice:hover .president-portrait img,
.president-choice.selected .president-portrait img {
  filter: brightness(1.08) saturate(1.12);
}

.president-selection-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 10px;
  background: rgba(2, 13, 24, 0.72);
}

.president-selection-note {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.president-selection-note i {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 3px solid #006dff;
  border-radius: 50%;
  color: #36a3ff;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 1000;
  box-shadow: 0 0 18px rgba(0, 109, 255, 0.22);
}

.president-selection-note p {
  margin: 0;
  color: #c6d2e0;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.35;
}

.president-selection-note strong,
.president-selection-note span {
  display: block;
}

.president-selection-note span {
  margin-top: 4px;
  color: #8e9bab;
}

.president-continue-btn {
  min-height: 62px;
  border-radius: 9px;
  font-size: 1.25rem;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .president-selection {
    width: calc(100vw - 18px);
    padding: 18px;
    gap: 18px;
  }

  .president-selection-head {
    grid-template-columns: 1fr;
  }

  .president-selection-mark {
    display: none;
  }

  .president-choice-grid {
    grid-template-columns: 1fr;
  }

  .president-choice {
    display: block;
    grid-template-columns: none;
  }

  .president-choice .president-portrait {
    grid-row: auto;
    max-width: 430px;
    margin: 0 auto;
  }

  .president-selection-footer {
    grid-template-columns: 1fr;
  }
}

/* Player rarity layer */
.rarity-basic {
  --rarity-color: #149cff;
  --rarity-soft: rgba(20, 156, 255, 0.18);
  --rarity-glow: rgba(20, 156, 255, 0.28);
}

.rarity-good {
  --rarity-color: #20e878;
  --rarity-soft: rgba(32, 232, 120, 0.18);
  --rarity-glow: rgba(32, 232, 120, 0.3);
}

.rarity-elite {
  --rarity-color: #ffba38;
  --rarity-soft: rgba(255, 186, 56, 0.22);
  --rarity-glow: rgba(255, 186, 56, 0.34);
}

.rarity-special {
  --rarity-color: #b864ff;
  --rarity-soft: rgba(184, 100, 255, 0.24);
  --rarity-glow: rgba(184, 100, 255, 0.46);
}

.player-rarity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--rarity-color, #149cff) 74%, transparent);
  border-radius: 999px;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--rarity-color, #149cff) 22%, rgba(4, 15, 30, 0.96)), rgba(4, 15, 30, 0.86));
  box-shadow: 0 0 12px var(--rarity-glow, rgba(20, 156, 255, 0.25));
  text-transform: uppercase;
  white-space: nowrap;
}

.player-rarity-badge::before {
  content: "◆";
  margin-right: 5px;
  color: var(--rarity-color, #149cff);
  font-size: 0.62rem;
  text-shadow: 0 0 8px var(--rarity-glow, rgba(20, 156, 255, 0.25));
}

.player-rarity-badge.compact {
  padding: 3px 6px;
  font-size: 0.55rem;
}

.player-rarity-badge.rarity-special {
  color: #f6e9ff;
  border-color: rgba(220, 154, 255, 0.92);
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.26), transparent 36%),
    linear-gradient(135deg, rgba(111, 23, 181, 0.96), rgba(34, 13, 68, 0.92));
  animation: player-special-badge-glow 2.2s ease-in-out infinite;
}

.player-rarity-particles {
  position: absolute;
  inset: -1px;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.player-rarity-particles::before,
.player-rarity-particles::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.54;
  background:
    radial-gradient(circle at 18% 26%, rgba(229, 176, 255, 0.85) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 16%, rgba(151, 77, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 78%, rgba(190, 96, 255, 0.7) 0 1px, transparent 2px);
  background-size: 86px 74px;
  animation: player-special-particles 4.8s linear infinite;
}

.player-rarity-particles::after {
  opacity: 0.28;
  filter: blur(1px);
  animation-duration: 7s;
  animation-direction: reverse;
}

@keyframes player-special-particles {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(9px, -8px, 0) rotate(8deg);
  }
}

@keyframes player-special-card-glow {
  0%,
  100% {
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(184, 100, 255, 0.34),
      0 0 18px rgba(184, 100, 255, 0.28);
  }
  50% {
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.56),
      0 0 0 1px rgba(228, 174, 255, 0.74),
      0 0 34px rgba(184, 100, 255, 0.52);
  }
}

@keyframes player-special-badge-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(184, 100, 255, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(221, 158, 255, 0.65));
  }
}

.squad-player-card.rarity-basic {
  background:
    linear-gradient(145deg, rgba(0, 93, 186, 0.96), rgba(4, 20, 40, 0.98) 62%, rgba(2, 12, 24, 0.98)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 36%);
}

.squad-player-card.rarity-good {
  border-color: rgba(32, 232, 120, 0.72);
  background:
    radial-gradient(circle at 50% 20%, rgba(120, 255, 177, 0.2), transparent 38%),
    linear-gradient(145deg, rgba(8, 137, 72, 0.98), rgba(5, 40, 33, 0.98) 58%, rgba(2, 18, 18, 0.98));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 22px rgba(32, 232, 120, 0.22);
}

.squad-player-card.rarity-elite {
  border-color: rgba(255, 186, 56, 0.86);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 224, 132, 0.26), transparent 38%),
    linear-gradient(145deg, rgba(171, 111, 15, 0.98), rgba(66, 38, 8, 0.98) 58%, rgba(20, 15, 5, 0.98));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 24px rgba(255, 186, 56, 0.3);
}

.squad-player-card.rarity-special {
  border-color: rgba(205, 135, 255, 0.94);
  background:
    radial-gradient(circle at 52% 18%, rgba(236, 190, 255, 0.32), transparent 36%),
    radial-gradient(circle at 82% 72%, rgba(117, 38, 201, 0.42), transparent 38%),
    linear-gradient(145deg, rgba(96, 28, 169, 0.98), rgba(38, 16, 84, 0.98) 58%, rgba(12, 7, 28, 0.98));
  animation: player-special-card-glow 2.4s ease-in-out infinite;
}

.squad-player-card .player-rarity-particles {
  inset: 0;
  z-index: 1;
}

.squad-player-card .player-rarity-badge {
  position: absolute;
  top: 28px;
  right: 7px;
  left: auto;
  bottom: auto;
  z-index: 5;
  max-width: 58px;
  min-width: 0;
  padding: 2px 5px;
  overflow: hidden;
  font-size: 0.48rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.squad-player-card .player-rarity-badge:not(.rarity-special) {
  display: none;
}

.squad-player-card .player-rarity-badge::before {
  margin-right: 3px;
  font-size: 0.46rem;
}

.squad-player-card strong.rarity-basic,
.squad-player-card strong.rarity-good,
.squad-player-card strong.rarity-elite,
.squad-player-card strong.rarity-special,
.bench-row b.rarity-basic,
.bench-row b.rarity-good,
.bench-row b.rarity-elite,
.bench-row b.rarity-special,
.squad-management-rating b.rarity-basic,
.squad-management-rating b.rarity-good,
.squad-management-rating b.rarity-elite,
.squad-management-rating b.rarity-special,
.rating.rarity-basic,
.rating.rarity-good,
.rating.rarity-elite,
.rating.rarity-special,
.market-rating.rarity-basic,
.market-rating.rarity-good,
.market-rating.rarity-elite,
.market-rating.rarity-special,
.office-market-rating.rarity-basic,
.office-market-rating.rarity-good,
.office-market-rating.rarity-elite,
.office-market-rating.rarity-special,
.market-target-card > b.rarity-basic,
.market-target-card > b.rarity-good,
.market-target-card > b.rarity-elite,
.market-target-card > b.rarity-special {
  color: #fff;
  border-color: color-mix(in srgb, var(--rarity-color, #149cff) 78%, transparent);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--rarity-color, #149cff) 38%, #061426), rgba(5, 16, 31, 0.96));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rarity-color, #149cff) 24%, transparent),
    0 0 16px var(--rarity-glow, rgba(20, 156, 255, 0.25));
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.squad-player-card strong.rarity-basic,
.squad-player-card strong.rarity-good,
.squad-player-card strong.rarity-elite,
.squad-player-card strong.rarity-special {
  right: 6px;
  bottom: 6px;
  padding: 3px 5px 2px;
  border: 1px solid color-mix(in srgb, var(--rarity-color, #149cff) 76%, transparent);
  border-radius: 7px;
  font-size: 1.42rem;
}

.market-player-row,
.market-target-card,
.market-preview-player-row,
.office-market-card,
.bench-row,
.squad-management-row,
.player-profile-modal {
  position: relative;
  overflow: hidden;
}

.market-player-row.rarity-good,
.market-target-card.rarity-good,
.market-preview-player-row.rarity-good,
.office-market-card.rarity-good,
.bench-row.rarity-good,
.squad-management-row.rarity-good {
  border-color: rgba(32, 232, 120, 0.42);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26), 0 0 18px rgba(32, 232, 120, 0.12);
}

.market-player-row.rarity-elite,
.market-target-card.rarity-elite,
.market-preview-player-row.rarity-elite,
.office-market-card.rarity-elite,
.bench-row.rarity-elite,
.squad-management-row.rarity-elite {
  border-color: rgba(255, 186, 56, 0.55);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 22px rgba(255, 186, 56, 0.16);
}

.market-player-row.rarity-special,
.market-target-card.rarity-special,
.market-preview-player-row.rarity-special,
.office-market-card.rarity-special,
.bench-row.rarity-special,
.squad-management-row.rarity-special,
.player-profile-modal.rarity-special {
  border-color: rgba(205, 135, 255, 0.76);
  animation: player-special-card-glow 2.6s ease-in-out infinite;
}

.market-player-row > :not(.player-rarity-particles),
.market-target-card > :not(.player-rarity-particles),
.market-preview-player-row > :not(.player-rarity-particles),
.office-market-card > :not(.player-rarity-particles),
.bench-row > :not(.player-rarity-particles),
.squad-management-row > :not(.player-rarity-particles),
.player-profile-modal > :not(.player-rarity-particles) {
  position: relative;
  z-index: 2;
}

.market-player-main .player-rarity-badge,
.market-target-card .player-rarity-badge,
.market-preview-main .player-rarity-badge,
.office-market-card .player-rarity-badge {
  width: fit-content;
  margin-top: 5px;
}

.office-market-card .player-rarity-badge:not(.rarity-special),
.market-preview-player-row .player-rarity-badge:not(.rarity-special),
.market-player-row .player-rarity-badge:not(.rarity-special) {
  opacity: 0.84;
}

.player-profile-special {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 6px;
}

.player-profile-special span:last-child {
  color: #d7e8ff;
  font-size: 0.75rem;
  font-weight: 800;
}

.player-profile-overall.rarity-good .player-profile-gauge {
  --overall-color: #20e878;
}

.player-profile-overall.rarity-elite .player-profile-gauge {
  --overall-color: #ffba38;
}

.player-profile-overall.rarity-special .player-profile-gauge {
  --overall-color: #b864ff;
}

.player-profile-overall.rarity-good .player-profile-gauge,
.player-profile-overall.rarity-elite .player-profile-gauge,
.player-profile-overall.rarity-special .player-profile-gauge {
  background:
    radial-gradient(circle, #081a36 0 54%, transparent 55%),
    conic-gradient(var(--overall-color) var(--overall), rgba(54, 90, 125, 0.34) 0);
  box-shadow: 0 0 42px color-mix(in srgb, var(--overall-color) 34%, transparent);
}

/* Modal scale pass: keep gameplay navigation behind and reduce oversized overlays */
.president-scrim,
.daily-mission-scrim {
  z-index: 180;
}

.president-selection,
.president-intro,
.daily-mission-popup {
  z-index: 181;
}

.president-intro {
  isolation: isolate;
}

.president-intro-video {
  position: relative;
  z-index: 2;
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

.president-selection {
  width: min(1160px, calc(100vw - 40px));
  max-height: calc(100svh - 26px);
  gap: 16px;
  padding: 22px;
}

.president-selection-head {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
}

.president-selection-mark {
  width: 54px;
  height: 62px;
}

.president-selection-mark svg {
  width: 52px;
  height: 52px;
}

.president-selection-head span {
  font-size: 0.82rem;
}

.president-selection-head h3 {
  margin: 3px 0 6px;
  font-size: clamp(1.85rem, 3vw, 2.85rem);
}

.president-selection-head p {
  font-size: clamp(0.9rem, 1.05vw, 1.08rem);
}

.president-choice-grid {
  gap: clamp(14px, 1.4vw, 22px);
}

.president-choice {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}

.president-choice:not(.locked):hover {
  transform: translateY(-5px) scale(1.012);
}

.president-choice.selected {
  transform: translateY(-3px) scale(1.008);
}

.president-choice .president-portrait {
  max-height: min(50svh, 462px);
}

.president-selection-footer {
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 14px;
  padding: 12px 16px;
}

.president-selection-note {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
}

.president-selection-note i {
  width: 42px;
  height: 42px;
  border-width: 2px;
  font-size: 1.12rem;
}

.president-selection-note p {
  font-size: 0.86rem;
  line-height: 1.3;
}

.president-continue-btn {
  min-height: 50px;
  font-size: 1rem;
}

.daily-mission-popup {
  width: min(990px, calc(100vw - 36px));
  max-height: calc(100svh - 28px);
  gap: 12px;
  padding: 22px;
}

.daily-popup-close {
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  font-size: 1.75rem;
}

.daily-popup-head {
  grid-template-columns: 70px minmax(0, 1fr) 240px;
  gap: 14px;
  padding-right: 42px;
}

.daily-popup-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}

.daily-popup-icon img {
  width: 68px;
  height: 68px;
}

.daily-mission-popup h3 {
  font-size: clamp(1.75rem, 2.35vw, 2.35rem);
}

.daily-mission-popup p {
  font-size: 0.88rem;
  line-height: 1.32;
}

/* Final modal layering: gameplay overlays must sit above the fixed bottom dock. */
.modal-backdrop,
.daily-mission-scrim,
.president-scrim,
.day-overlay,
.goal-video-overlay {
  z-index: 220 !important;
}

.player-modal,
.player-profile-modal,
.office-popup,
.season-celebration-popup,
.player-growth-popup,
.player-match-popup,
.daily-mission-popup,
.president-selection,
.president-intro,
.coach-market-modal,
.crest-modal,
.frame-modal,
.market-full-modal,
.squad-management-modal,
.presidential-customize-modal {
  z-index: 221 !important;
}

.bottom-dock,
.game.pcm-premium-shell .bottom-dock {
  z-index: 60;
}

.daily-popup-timer {
  min-height: 58px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
}

.daily-popup-timer img {
  width: 38px;
  height: 38px;
}

.daily-popup-timer span {
  font-size: 0.64rem;
}

.daily-popup-timer strong {
  font-size: 1.12rem;
}

.daily-mission-popup .daily-reward-grid {
  gap: 8px;
}

.daily-bonus-card {
  min-height: 220px;
  grid-template-rows: auto 72px minmax(0, 1fr) auto;
  gap: 6px;
  padding: 12px 8px 10px;
}

.daily-bonus-day {
  font-size: 1.05rem;
}

.daily-bonus-art img,
.daily-bonus-card.active .daily-bonus-art img {
  width: 72px;
  height: 72px;
}

.daily-bonus-item img {
  width: 20px;
  height: 20px;
}

.daily-bonus-item strong {
  font-size: 0.95rem;
}

.daily-bonus-item span,
.daily-bonus-items em {
  font-size: 0.62rem;
}

.daily-bonus-items {
  gap: 5px;
}

.daily-bonus-card footer {
  min-height: 30px;
  padding-top: 8px;
}

.daily-card-claim {
  min-height: 34px;
  font-size: 0.78rem;
}

.daily-weekly-box {
  grid-template-columns: minmax(210px, 260px) 1fr;
  gap: 12px;
  padding: 12px;
}

.daily-weekly-copy {
  grid-template-columns: 1fr 96px;
  gap: 8px;
}

.daily-weekly-copy span {
  font-size: 1.05rem;
}

.daily-weekly-copy h4 {
  margin: 2px 0 5px;
  font-size: 0.72rem;
}

.daily-weekly-copy p {
  font-size: 0.78rem;
  line-height: 1.28;
}

.daily-weekly-copy img {
  width: 96px;
  height: 76px;
}

.daily-weekly-rewards {
  gap: 8px;
}

.daily-weekly-rewards article {
  min-height: 110px;
  gap: 3px;
  padding: 9px;
}

.daily-weekly-rewards article strong {
  font-size: 0.92rem;
}

.daily-weekly-rewards article img {
  width: 48px;
  height: 40px;
}

.daily-weekly-rewards article b {
  font-size: 0.84rem;
}

.daily-weekly-rewards article span {
  font-size: 0.6rem;
}

.daily-bonus-warning {
  padding: 7px 12px;
  font-size: 0.78rem !important;
}

/* Header president avatar mask: keep the centered frame but prevent square photo bleed */
.profile-frame .profile-avatar {
  width: 108px;
  height: 108px;
  clip-path: circle(49% at 50% 50%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0 49%, transparent 50%);
  mask-image: radial-gradient(circle at center, #000 0 49%, transparent 50%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (max-width: 760px) {
  .profile-frame .profile-avatar {
    width: 84px;
    height: 84px;
  }
}

@media (max-width: 980px) {
  .president-selection {
    width: calc(100vw - 18px);
    max-height: calc(100svh - 18px);
    padding: 16px;
    gap: 14px;
  }

  .president-choice {
    max-width: 330px;
  }

  .president-selection-footer {
    grid-template-columns: 1fr;
  }

  .daily-mission-popup {
    width: calc(100vw - 18px);
    max-height: calc(100svh - 18px);
    padding: 16px;
  }

  .daily-popup-head {
    grid-template-columns: 1fr;
    padding-right: 36px;
  }

  .daily-mission-popup .daily-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-bonus-card {
    min-height: 205px;
  }

  .daily-weekly-box,
  .daily-weekly-copy,
  .daily-weekly-rewards {
    grid-template-columns: 1fr;
  }
}

/* Club events section */
.club-events-page {
  display: grid;
  gap: 18px;
  color: #eef6ff;
}

.club-events-header {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(85, 169, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(5, 22, 36, 0.96), rgba(7, 40, 58, 0.86)),
    radial-gradient(circle at 78% 18%, rgba(215, 180, 106, 0.18), transparent 34%);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.club-events-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: clamp(1.55rem, 2.2vw, 2.35rem);
  line-height: 1;
}

.club-events-header h2 span,
.club-event-info-line i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(215, 180, 106, 0.46);
  border-radius: 999px;
  color: var(--pcm-gold);
  background: rgba(215, 180, 106, 0.1);
  font-size: 0.8rem;
}

.club-events-header p {
  max-width: 680px;
  margin: 10px 0 0;
  color: rgba(230, 241, 255, 0.74);
  font-size: 0.98rem;
}

.club-events-history-btn {
  flex: 0 0 auto;
  min-height: 44px;
}

.club-events-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.club-events-sidebar,
.club-event-detail,
.club-event-history-modal {
  border: 1px solid rgba(85, 169, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(7, 20, 32, 0.94), rgba(3, 11, 20, 0.97)),
    rgba(2, 10, 18, 0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.club-events-sidebar {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.club-event-group {
  display: grid;
  gap: 10px;
}

.club-event-group h3 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(238, 246, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.club-event-group h3 b {
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #0b1119;
  background: var(--pcm-gold);
  font-size: 0.72rem;
}

.club-event-list-card {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(85, 169, 255, 0.18);
  border-radius: 8px;
  color: #eef6ff;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

button.club-event-list-card {
  cursor: pointer;
}

.club-event-list-card:hover,
.club-event-list-card.selected {
  border-color: rgba(215, 180, 106, 0.7);
  background: rgba(215, 180, 106, 0.08);
}

.club-event-list-card.active-card {
  position: relative;
  overflow: hidden;
  padding: 0 0 14px;
}

.club-event-list-card.active-card img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.02);
}

.club-event-list-card.active-card strong,
.club-event-list-card.active-card small {
  padding: 0 14px;
}

.club-event-list-card.active-card strong {
  font-size: 1rem;
}

.club-event-list-card.active-card small {
  color: rgba(230, 241, 255, 0.68);
}

.club-event-list-card.active-card em {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: var(--pcm-gold);
  font-style: normal;
  font-size: 1.35rem;
}

.club-event-new-pill {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #0b1119;
  background: var(--pcm-gold);
  font-size: 0.62rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.club-event-list-card.mini-card,
.club-event-list-card.completed-card {
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  padding: 12px;
}

.club-event-list-card.mini-card i,
.club-event-list-card.completed-card i {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--pcm-gold);
  background: rgba(215, 180, 106, 0.1);
  font-style: normal;
  font-weight: 1000;
}

.club-event-list-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.club-event-list-card span strong,
.club-event-list-card span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.club-event-list-card span small,
.club-event-empty-list {
  color: rgba(230, 241, 255, 0.58);
}

.club-event-empty-list {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(85, 169, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.86rem;
}

.club-event-help {
  min-height: 42px;
  border: 1px solid rgba(85, 169, 255, 0.22);
  border-radius: 8px;
  color: #bcdcff;
  background: rgba(85, 169, 255, 0.07);
  font-weight: 900;
}

.club-event-detail {
  overflow: hidden;
}

.club-event-detail.empty {
  min-height: 360px;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
}

.club-event-detail.empty h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.45rem;
}

.club-event-detail.empty p {
  max-width: 520px;
  margin: 0;
  color: rgba(230, 241, 255, 0.64);
}

.club-event-hero {
  min-height: 280px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(2, 8, 14, 0.18), rgba(2, 8, 14, 0.92)),
    var(--event-banner) center / cover no-repeat;
}

.club-event-hero-copy {
  max-width: 760px;
}

.club-event-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(215, 180, 106, 0.44);
  border-radius: 999px;
  color: var(--pcm-gold);
  background: rgba(2, 8, 14, 0.68);
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.club-event-hero h3 {
  margin: 12px 0 10px;
  color: #ffffff;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1;
}

.club-event-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(238, 246, 255, 0.78);
  font-size: 1rem;
  line-height: 1.55;
}

.club-event-expiry {
  flex: 0 0 auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #ffffff;
  background: rgba(2, 8, 14, 0.72);
  font-size: 0.78rem;
  font-weight: 900;
}

.club-event-decisions,
.club-event-outcomes,
.club-event-info-line {
  padding: 22px;
}

.club-event-decisions h4,
.club-event-outcomes h4 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: 1rem;
}

.club-event-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.club-event-choice {
  min-height: 190px;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(85, 169, 255, 0.2);
  border-radius: 8px;
  color: #eef6ff;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.club-event-choice:hover {
  transform: translateY(-1px);
  border-color: rgba(215, 180, 106, 0.68);
  background: rgba(215, 180, 106, 0.08);
}

.club-event-choice i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  font-style: normal;
  font-weight: 1000;
}

.club-event-choice.choice-success i {
  color: #8af0c0;
  background: rgba(34, 197, 94, 0.12);
}

.club-event-choice.choice-warning i {
  color: #ffd37a;
  background: rgba(245, 158, 11, 0.13);
}

.club-event-choice.choice-danger i {
  color: #ff9c9c;
  background: rgba(239, 68, 68, 0.13);
}

.club-event-choice strong {
  color: #ffffff;
  font-size: 1.02rem;
}

.club-event-choice span {
  color: rgba(230, 241, 255, 0.68);
  line-height: 1.45;
}

.club-event-choice em,
.club-event-choice b {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 1000;
}

.club-event-choice em {
  color: rgba(238, 246, 255, 0.72);
  background: rgba(255, 255, 255, 0.06);
  font-style: normal;
}

.club-event-choice b {
  color: var(--pcm-gold);
  background: rgba(215, 180, 106, 0.1);
}

.club-event-outcomes {
  border-top: 1px solid rgba(85, 169, 255, 0.16);
}

.club-event-outcomes > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.club-event-outcomes article {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(85, 169, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.028);
}

.club-event-outcomes article i {
  color: var(--pcm-gold);
  font-style: normal;
}

.club-event-outcomes article strong {
  color: #ffffff;
}

.club-event-outcomes article span {
  color: rgba(230, 241, 255, 0.58);
  font-size: 0.82rem;
}

.club-event-info-line {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(85, 169, 255, 0.16);
  color: rgba(230, 241, 255, 0.66);
}

.club-event-history-backdrop {
  z-index: 220 !important;
}

.club-event-history-modal {
  width: min(880px, calc(100vw - 28px));
  max-height: min(780px, calc(100svh - 36px));
  overflow: auto;
  padding: 22px;
}

.club-event-history-modal header {
  padding-right: 42px;
}

.club-event-history-modal header span {
  color: var(--pcm-gold);
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.club-event-history-modal header h3 {
  margin: 6px 0;
  color: #ffffff;
  font-size: 1.45rem;
}

.club-event-history-modal header p {
  margin: 0;
  color: rgba(230, 241, 255, 0.64);
}

.club-event-history-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.club-event-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(85, 169, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.club-event-history-row strong {
  color: #ffffff;
}

.club-event-history-row span,
.club-event-history-row small {
  color: rgba(230, 241, 255, 0.62);
}

@media (max-width: 1100px) {
  .club-events-layout,
  .club-event-choice-grid,
  .club-event-outcomes > div {
    grid-template-columns: 1fr;
  }

  .club-events-sidebar {
    order: 2;
  }
}

@media (max-width: 720px) {
  .club-events-header,
  .club-event-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 18px;
  }

  .club-events-header h2,
  .club-event-hero h3 {
    font-size: 1.55rem;
  }

  .club-event-decisions,
  .club-event-outcomes,
  .club-event-info-line {
    padding: 16px;
  }
}

/* Club events reference layout pass */
.club-events-page {
  gap: 10px;
  min-height: calc(100svh - 128px);
  color: #edf6ff;
}

.club-events-header {
  min-height: 58px;
  padding: 8px 4px 14px;
  border: 0;
  border-bottom: 1px solid rgba(46, 131, 210, 0.24);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.club-events-header h2 {
  gap: 9px;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
}

.club-events-header h2 span {
  width: 20px;
  height: 20px;
  color: rgba(232, 242, 255, 0.76);
  border-color: rgba(232, 242, 255, 0.42);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
}

.club-events-header p {
  margin-top: 4px;
  color: rgba(220, 235, 255, 0.76);
  font-size: 0.82rem;
}

.club-events-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(31, 120, 198, 0.5);
  border-radius: 6px;
  color: #edf6ff;
  background: rgba(5, 23, 42, 0.92);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.club-events-history-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.club-events-layout {
  grid-template-columns: minmax(250px, 292px) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  min-height: 540px;
  border: 1px solid rgba(35, 114, 190, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(4, 16, 30, 0.98), rgba(2, 10, 19, 0.98)),
    rgba(2, 10, 18, 0.98);
}

.club-events-sidebar,
.club-event-detail {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.club-events-sidebar {
  align-content: start;
  gap: 18px;
  padding: 18px 14px;
  border-right: 1px solid rgba(43, 128, 205, 0.22);
  max-height: 540px;
  overflow-y: auto;
  scrollbar-color: rgba(123, 92, 255, 0.58) rgba(255, 255, 255, 0.04);
}

.club-event-group {
  gap: 10px;
}

.club-event-group h3 {
  justify-content: flex-start;
  gap: 9px;
  padding: 0 2px;
  color: rgba(218, 233, 255, 0.78);
  font-size: 0.69rem;
  letter-spacing: 0.01em;
}

.club-event-group h3 b {
  min-width: 20px;
  height: 20px;
  color: #ffffff;
  background: #123150;
  font-size: 0.65rem;
}

.club-event-group:first-child h3 b {
  background: #c43357;
}

.club-event-list-card {
  border-color: rgba(33, 122, 200, 0.32);
  border-radius: 7px;
  background: rgba(3, 18, 34, 0.74);
}

.club-event-list-card:hover,
.club-event-list-card.selected {
  border-color: rgba(158, 78, 255, 0.96);
  background: rgba(74, 26, 136, 0.24);
  box-shadow:
    0 0 0 1px rgba(158, 78, 255, 0.34),
    0 0 26px rgba(153, 56, 255, 0.24);
}

.club-event-list-card.queued-card {
  border-color: rgba(33, 122, 200, 0.32);
  background: rgba(3, 18, 34, 0.74);
  box-shadow: none;
  cursor: pointer;
}

.club-event-list-card.queued-card:hover,
.club-event-list-card.queued-card.selected {
  border-color: rgba(255, 190, 47, 0.52);
  background: rgba(255, 190, 47, 0.08);
  box-shadow: 0 0 18px rgba(255, 190, 47, 0.12);
}

.club-event-list-card.queued-card small {
  color: rgba(215, 232, 255, 0.54);
}

.club-event-list-card.locked-card {
  border-color: rgba(255, 190, 47, 0.42);
  background: rgba(3, 18, 34, 0.82);
}

.club-event-list-card.locked-card img {
  filter: saturate(0.78) contrast(0.98) brightness(0.78);
}

.club-event-list-card.locked-card .club-event-new-pill {
  background: #7b5a18;
}

.club-event-list-card.active-card {
  min-height: 128px;
  gap: 0;
  padding: 0;
}

.club-event-list-card.active-card img {
  height: 78px;
  aspect-ratio: auto;
  opacity: 0.86;
}

.club-event-list-card.active-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 11, 24, 0.1), rgba(3, 11, 24, 0.88) 65%),
    linear-gradient(90deg, rgba(122, 41, 255, 0.28), transparent 55%);
  pointer-events: none;
}

.club-event-list-card.active-card > strong,
.club-event-list-card.active-card small,
.club-event-list-card.active-card em,
.club-event-new-pill {
  position: relative;
  z-index: 1;
}

.club-event-list-card.active-card > strong {
  margin-top: -14px;
  padding: 0 14px;
  color: #ffffff;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.club-event-list-card.active-card small {
  padding: 5px 14px 13px;
  color: rgba(222, 238, 255, 0.72);
  font-size: 0.72rem;
}

.club-event-list-card.active-card small strong,
.club-event-list-card.mini-card small strong {
  color: #ff4f62;
  font-weight: 1000;
}

.club-event-list-card.active-card em {
  right: 12px;
  bottom: 23px;
  color: #ffffff;
}

.club-event-new-pill {
  top: 0;
  left: 0;
  padding: 7px 9px;
  border: 0;
  border-radius: 0 0 6px 0;
  color: #ffffff;
  background: #e52d5c;
}

.club-event-list-card.mini-card,
.club-event-list-card.completed-card {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 72px;
  padding: 10px;
}

.club-event-list-card.mini-card i,
.club-event-list-card.completed-card i {
  width: 46px;
  height: 46px;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 1.28rem;
}

.club-event-list-card.mini-card.theme-sponsor i {
  color: #f2c335;
}

.club-event-list-card.mini-card.theme-talent i {
  color: #19d789;
}

.club-event-list-card.mini-card.theme-press i {
  color: #2da6ff;
}

.club-event-list-card.completed-card i {
  color: #19d76f;
}

.club-event-list-card span strong {
  color: #ffffff;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.club-event-list-card span small,
.club-event-empty-list {
  color: rgba(215, 232, 255, 0.66);
  font-size: 0.72rem;
}

.club-event-help {
  min-height: 40px;
  border-color: rgba(25, 153, 235, 0.5);
  border-radius: 6px;
  color: #e8f5ff;
  background: rgba(5, 22, 39, 0.9);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.club-event-help::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #0ea5ff;
  border-radius: 999px;
  color: #0ea5ff;
}

.club-event-detail {
  min-width: 0;
  padding: 0 18px 18px;
  background:
    radial-gradient(circle at 78% 15%, rgba(146, 54, 255, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(2, 11, 22, 0.2), rgba(1, 8, 16, 0.48));
}

.club-event-hero {
  position: relative;
  min-height: 218px;
  align-items: center;
  padding: 28px 36px 24px 18px;
  background:
    linear-gradient(90deg, rgba(3, 12, 27, 0.96) 0%, rgba(3, 12, 27, 0.88) 33%, rgba(3, 12, 27, 0.28) 72%, rgba(3, 12, 27, 0.76) 100%),
    var(--event-banner) right center / auto 100% no-repeat;
}

.club-event-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 1px solid rgba(46, 131, 210, 0.22);
  pointer-events: none;
}

.club-event-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 570px;
}

.club-event-kicker {
  min-height: 30px;
  padding: 0 14px;
  border-color: rgba(177, 92, 255, 0.78);
  border-radius: 6px;
  color: #f3e9ff;
  background: rgba(80, 30, 140, 0.76);
  font-size: 0.72rem;
}

.club-event-hero h3 {
  margin: 18px 0 12px;
  font-size: clamp(1.85rem, 2.6vw, 2.55rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.club-event-hero p {
  max-width: 560px;
  color: rgba(224, 238, 255, 0.82);
  font-size: 0.86rem;
  line-height: 1.55;
}

.club-event-expiry {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 22px;
  border: 0;
  border-radius: 0;
  color: rgba(232, 242, 255, 0.82);
  background: transparent;
  font-size: 0.78rem;
}

.club-event-expiry strong {
  color: #ff354b;
}

.club-event-crest-mark {
  position: absolute;
  z-index: 1;
  right: 95px;
  top: 76px;
  width: 76px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 205, 120, 0.36);
  border-radius: 0 0 34px 34px;
  color: #f1c774;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.01)),
    rgba(14, 12, 22, 0.58);
  font-size: 1.5rem;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.club-event-decisions,
.club-event-outcomes,
.club-event-info-line {
  padding: 0;
}

.club-event-decisions {
  margin-top: -14px;
  position: relative;
  z-index: 2;
}

.club-event-decisions h4,
.club-event-outcomes h4 {
  margin: 0 0 10px;
  color: #ba82ff;
  font-size: 0.83rem;
  text-transform: uppercase;
}

.club-event-choice-grid {
  grid-template-columns: repeat(3, minmax(168px, 1fr));
  gap: 14px;
}

.club-event-choice {
  min-height: 164px;
  place-items: center;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 8px;
  padding: 16px 14px 15px;
  border-radius: 7px;
  background: rgba(2, 18, 31, 0.82);
  text-align: center;
}

.club-event-choice.choice-success {
  border-color: rgba(10, 210, 114, 0.72);
}

.club-event-choice.choice-warning {
  border-color: rgba(218, 146, 21, 0.72);
}

.club-event-choice.choice-danger {
  border-color: rgba(218, 47, 70, 0.72);
}

.club-event-choice:hover {
  background: rgba(8, 32, 52, 0.95);
}

.club-event-detail.locked .club-event-hero {
  filter: saturate(0.88);
}

.club-event-choice.locked,
.club-event-choice.locked:hover {
  cursor: not-allowed;
  transform: none;
  opacity: 0.58;
  border-color: rgba(104, 132, 162, 0.32);
  background: rgba(4, 15, 27, 0.72);
}

.club-event-choice.locked i,
.club-event-choice.locked em,
.club-event-choice.locked b span {
  color: rgba(217, 229, 245, 0.58);
}

.club-event-choice i {
  width: 48px;
  height: 48px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 1.28rem;
}

.club-event-choice.choice-success i {
  color: #18e083;
  background: rgba(24, 224, 131, 0.12);
}

.club-event-choice.choice-warning i {
  color: #e8af25;
  background: rgba(232, 175, 37, 0.13);
}

.club-event-choice.choice-danger i {
  color: #ff4b5d;
  background: rgba(255, 75, 93, 0.12);
}

.club-event-choice strong {
  font-size: 0.78rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.club-event-choice span {
  max-width: 210px;
  color: rgba(225, 239, 255, 0.76);
  font-size: 0.76rem;
}

.club-event-choice em {
  min-height: auto;
  padding: 0;
  color: #19d789;
  background: transparent;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.club-event-choice.choice-warning em {
  color: #ffbd37;
}

.club-event-choice.choice-danger em {
  color: #ff4b5d;
}

.club-event-choice b {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  width: 100%;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
}

.club-event-choice b span {
  display: inline-flex;
  align-items: center;
  color: #19d789;
  font-size: 0.75rem;
  font-weight: 1000;
  white-space: nowrap;
}

.club-event-choice b span.money {
  color: #23e484;
}

.club-event-choice b span.social {
  color: #60e29f;
}

.club-event-choice b span.negative {
  color: #ff4f62;
}

.club-event-outcomes {
  margin-top: 16px;
  border-top: 0;
}

.club-event-outcomes > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.club-event-outcomes article {
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  min-height: 62px;
  padding: 10px;
  border-color: rgba(33, 122, 200, 0.26);
  border-radius: 7px;
  background: rgba(3, 18, 34, 0.78);
}

.club-event-outcomes article i {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: #1ee37a;
  font-size: 0.95rem;
}

.club-event-outcomes article.outcome-1 i {
  color: #f0c246;
}

.club-event-outcomes article.outcome-2 i {
  color: #ff8a2d;
}

.club-event-outcomes article.outcome-3 i {
  color: #ff4f62;
}

.club-event-outcomes article strong {
  color: #21df80;
  font-size: 0.7rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.club-event-outcomes article.outcome-1 strong {
  color: #e8c655;
}

.club-event-outcomes article.outcome-2 strong {
  color: #ff8a2d;
}

.club-event-outcomes article.outcome-3 strong {
  color: #ff4f62;
}

.club-event-outcomes article span {
  color: rgba(225, 239, 255, 0.68);
  font-size: 0.68rem;
  line-height: 1.24;
}

.club-event-info-line {
  margin-top: 16px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(33, 122, 200, 0.28);
  border-radius: 7px;
  background: rgba(3, 18, 34, 0.65);
  color: rgba(220, 235, 255, 0.7);
  font-size: 0.72rem;
}

.club-event-info-line i {
  width: 18px;
  height: 18px;
  color: #18a8ff;
  border-color: #18a8ff;
  background: transparent;
  font-size: 0.68rem;
}

@media (max-width: 1180px) {
  .club-events-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .club-event-choice-grid,
  .club-event-outcomes > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .club-events-layout {
    grid-template-columns: 1fr;
  }

  .club-events-sidebar {
    order: 0;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid rgba(43, 128, 205, 0.22);
  }

  .club-event-detail {
    padding: 0 14px 16px;
  }

  .club-event-hero {
    min-height: 280px;
    padding: 58px 18px 26px;
    background:
      linear-gradient(180deg, rgba(3, 12, 27, 0.38), rgba(3, 12, 27, 0.96) 74%),
      var(--event-banner) center top / cover no-repeat;
  }

  .club-event-crest-mark {
    display: none;
  }
}

@media (max-width: 620px) {
  .club-events-header {
    align-items: stretch;
    flex-direction: column;
    padding: 4px 0 12px;
  }

  .club-events-header h2 {
    font-size: 1.25rem;
  }

  .club-event-choice-grid,
  .club-event-outcomes > div {
    grid-template-columns: 1fr;
  }

  .club-event-hero h3 {
    font-size: 1.35rem;
  }
}

/* Presidential guide refresh */
.guide-scrim {
  z-index: 90;
  background:
    radial-gradient(circle at 50% 12%, rgba(22, 118, 255, 0.16), transparent 28%),
    rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(5px) saturate(0.92);
  pointer-events: none;
}

.guide-scrim-tour {
  background:
    radial-gradient(circle at 50% 7%, rgba(23, 128, 255, 0.18), transparent 24%),
    radial-gradient(circle at 52% 82%, rgba(215, 180, 106, 0.12), transparent 28%),
    rgba(0, 0, 0, 0.76);
  pointer-events: none;
}

.guide-arrow {
  display: none !important;
}

.guide-dialog,
.guide-coach {
  pointer-events: auto;
  border: 1px solid rgba(45, 139, 255, 0.48);
  border-radius: 8px;
  color: #eef6ff;
  background:
    linear-gradient(145deg, rgba(6, 24, 42, 0.98), rgba(2, 10, 18, 0.98)),
    rgba(3, 12, 22, 0.96);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.66),
    0 0 42px rgba(20, 109, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.guide-dialog-pending {
  z-index: 96;
  width: min(720px, calc(100vw - 36px));
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  padding: 20px;
  border-color: rgba(215, 180, 106, 0.46);
  background:
    radial-gradient(circle at 12% 22%, rgba(215, 180, 106, 0.18), transparent 32%),
    linear-gradient(145deg, rgba(8, 25, 42, 0.98), rgba(2, 9, 18, 0.99));
}

.guide-avatar-frame {
  width: 112px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    conic-gradient(from 20deg, rgba(215, 180, 106, 0.25), rgba(31, 146, 255, 0.9), rgba(215, 180, 106, 0.82), rgba(31, 146, 255, 0.55), rgba(215, 180, 106, 0.25));
  box-shadow: 0 0 28px rgba(31, 146, 255, 0.22);
}

.guide-avatar-frame img,
.guide-dialog img,
.guide-coach img {
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  display: block;
  object-fit: cover;
  border: 3px solid rgba(4, 13, 24, 0.96);
  border-radius: 999px;
}

.guide-dialog-copy,
.guide-coach-copy {
  min-width: 0;
}

.guide-dialog h3,
.guide-coach h3 {
  margin: 4px 0 8px;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.guide-dialog p,
.guide-coach p {
  margin: 0 0 14px;
  color: rgba(226, 238, 255, 0.78);
  font-size: 0.98rem;
  line-height: 1.48;
}

.guide-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.guide-preview-list li {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(45, 139, 255, 0.34);
  border-radius: 999px;
  color: #bcdcff;
  background: rgba(45, 139, 255, 0.08);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

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

.guide-actions .primary-btn,
.guide-actions .secondary-btn {
  min-height: 42px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.guide-actions .primary-btn {
  border-color: rgba(255, 214, 128, 0.78);
  color: #0b1018;
  background: linear-gradient(180deg, #ffd76b, #ffb82f);
  box-shadow: 0 0 28px rgba(255, 184, 47, 0.26);
}

.guide-actions .secondary-btn {
  border-color: rgba(45, 139, 255, 0.36);
  color: #eaf4ff;
  background: rgba(6, 22, 38, 0.92);
}

.guide-mode .guide-focus {
  position: relative;
  z-index: 94;
  border-color: rgba(72, 166, 255, 0.98) !important;
  box-shadow:
    0 0 0 2px rgba(72, 166, 255, 0.22),
    0 0 0 6px rgba(72, 166, 255, 0.08),
    0 0 44px rgba(23, 128, 255, 0.52),
    inset 0 -3px 0 rgba(255, 194, 71, 0.82) !important;
}

.guide-mode .nav-btn.guide-focus {
  color: #ffffff;
  background:
    linear-gradient(180deg, rgba(8, 57, 104, 0.86), rgba(2, 18, 34, 0.92)),
    rgba(14, 85, 159, 0.46);
}

.guide-mode .bottom-dock .nav-btn.guide-focus {
  transform: translateY(-3px);
}

.guide-coach {
  z-index: 96;
  right: 24px;
  bottom: 116px;
  width: min(560px, calc(100vw - 48px));
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
}

.guide-coach .guide-avatar-frame {
  width: 96px;
}

.guide-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.guide-kicker {
  color: var(--pcm-gold, #d7b46a);
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.guide-step-head b {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(45, 139, 255, 0.4);
  border-radius: 999px;
  color: #7fc1ff;
  background: rgba(45, 139, 255, 0.1);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.guide-progress {
  overflow: hidden;
  height: 7px;
  margin: 0 0 14px;
  border: 1px solid rgba(45, 139, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.guide-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1688ff, #ffd166);
  box-shadow: 0 0 16px rgba(22, 136, 255, 0.5);
}

@media (max-width: 760px) {
  .guide-dialog-pending,
  .guide-coach {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    width: calc(100vw - 20px);
    padding: 14px;
  }

  .guide-avatar-frame,
  .guide-coach .guide-avatar-frame {
    width: 72px;
  }

  .guide-dialog h3,
  .guide-coach h3 {
    font-size: 1rem;
  }

  .guide-dialog p,
  .guide-coach p {
    font-size: 0.86rem;
  }

  .guide-actions {
    grid-template-columns: 1fr;
  }

  .guide-coach {
    left: 10px;
    right: 10px;
    bottom: 98px;
  }
}

/* Mobile landscape shell. Desktop/tablet desktop layouts stay on the existing rules above. */
.mobile-nav-menu,
.mobile-landscape-prompt {
  display: none;
}

.media-preload-overlay {
  position: fixed;
  inset: 0;
  z-index: 560;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  color: #fff8ec;
  background:
    radial-gradient(circle at 50% 42%, rgba(216, 169, 90, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(4, 4, 3, 0.96));
  backdrop-filter: blur(12px);
}

.media-preload-card {
  width: min(430px, 92vw);
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(243, 198, 111, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(circle at 95% 0%, rgba(243, 198, 111, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(22, 17, 10, 0.92), rgba(5, 5, 4, 0.96));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.media-preload-kicker {
  color: #f3c66f;
  font-size: 0.7rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.media-preload-card strong {
  color: #fff;
  font-size: clamp(1.15rem, 3vw, 1.65rem);
  line-height: 1;
  text-transform: uppercase;
}

.media-preload-card p {
  margin: 0;
  color: rgba(255, 248, 236, 0.7);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
}

.media-preload-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.13);
}

.media-preload-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e3a832, #ffd36a);
  box-shadow: 0 0 18px rgba(243, 198, 111, 0.38);
  transition: width 0.22s ease;
}

.media-preload-card em {
  color: #f3c66f;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 1000;
  text-align: right;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  html,
  body,
  #app {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .app-shell,
  .game.pcm-premium-shell {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .game.pcm-premium-shell .content {
    height: 100dvh;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  .game.pcm-premium-shell .club-hero-topbar {
    height: 54px;
    min-height: 54px;
    grid-template-columns: minmax(190px, 1fr) minmax(180px, 0.74fr) minmax(180px, auto);
    gap: 6px;
    padding: max(4px, env(safe-area-inset-top)) 8px 4px max(8px, env(safe-area-inset-left));
    overflow: hidden;
    border-bottom-color: rgba(0, 148, 255, 0.16);
  }

  .game.pcm-premium-shell .club-hero-topbar::before,
  .club-hero-bg {
    display: none;
  }

  .club-hero-identity {
    grid-template-columns: 40px 40px minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
  }

  .club-hero-crest {
    width: 40px;
    height: 46px;
  }

  .club-hero-crest::after {
    top: -2px;
    font-size: 11px;
  }

  .club-hero-crest .club-crest-img,
  .club-hero-crest img,
  .club-hero-crest svg {
    width: 34px;
    height: 40px;
  }

  .club-president-card,
  .profile-frame,
  .profile-frame .profile-border {
    width: 40px;
    height: 40px;
  }

  .profile-frame .profile-avatar {
    width: 31px;
    height: 31px;
  }

  .profile-frame .profile-level,
  .club-division-chip,
  .club-hero-copy > span {
    display: none;
  }

  .club-hero-name {
    gap: 5px;
  }

  .club-hero-name h2 {
    max-width: 100%;
    font-size: 0.84rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .club-hero-edit {
    width: 19px;
    height: 19px;
    min-width: 19px;
    font-size: 0.68rem;
  }

  .club-hero-copy p {
    margin-top: 2px;
    font-size: 0.56rem;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .club-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
  }

  .club-hero-stats article {
    min-height: 36px;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 2px;
    padding: 4px;
  }

  .club-hero-stats svg {
    display: none;
  }

  .club-hero-stats strong {
    font-size: 0.68rem;
  }

  .club-hero-stats span {
    max-width: 100%;
    font-size: 0.5rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .club-hero-actions {
    grid-template-columns: minmax(92px, 1fr) minmax(82px, 0.8fr) 32px;
    gap: 4px;
    min-width: 0;
  }

  .club-wallet-card,
  .club-hero-play,
  .club-hero-advance,
  .club-hero-settings {
    min-height: 36px;
    height: 36px;
    border-radius: 6px;
  }

  .club-hero-play,
  .club-hero-advance {
    display: none !important;
  }

  .club-wallet-card {
    gap: 2px;
    padding: 5px 7px;
    border-color: rgba(120, 157, 194, 0.22);
    color: #d8e8f7;
    background: rgba(4, 16, 30, 0.5);
    box-shadow: none;
  }

  .club-wallet-card::before {
    content: none;
  }

  .club-wallet-card.budget,
  .club-wallet-card.credits {
    color: #d8e8f7;
  }

  .club-wallet-card span {
    font-size: 0.5rem;
  }

  .club-wallet-card strong {
    font-size: 0.66rem;
    white-space: nowrap;
  }

  .club-wallet-card button {
    width: 20px;
    height: 20px;
    right: 5px;
    border: 1px solid rgba(120, 157, 194, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: #d8e8f7;
    box-shadow: none;
    font-size: 0.75rem;
  }

  .club-hero-play,
  .club-hero-advance {
    padding: 0 7px;
    font-size: 0.6rem;
    line-height: 1;
  }

  .club-hero-settings {
    width: 32px;
    padding: 0;
  }

  .club-hero-settings svg {
    width: 17px;
    height: 17px;
  }

  .horizontal-nav-shell,
  .game.pcm-premium-shell .bottom-dock {
    display: none !important;
  }

  .mobile-nav-menu {
    position: relative;
    z-index: 80;
    display: block;
    height: 34px;
    margin: 3px 8px 4px;
  }

  .mobile-nav-menu summary {
    height: 34px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(255, 190, 47, 0.36);
    border-radius: 7px;
    color: #fff;
    background:
      linear-gradient(180deg, rgba(8, 33, 60, 0.96), rgba(2, 12, 22, 0.98)),
      rgba(2, 12, 22, 0.96);
    font-weight: 1000;
    text-transform: uppercase;
    list-style: none;
  }

  .mobile-nav-menu summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-menu summary::after {
    content: "v";
    justify-self: end;
    color: var(--pcm-gold);
  }

  .mobile-nav-menu[open] summary::after {
    content: "^";
  }

  .mobile-nav-menu summary span {
    color: var(--pcm-gold);
    font-size: 0.6rem;
  }

  .mobile-nav-menu summary strong {
    min-width: 0;
    font-size: 0.66rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-panel {
    position: absolute;
    top: 38px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    max-height: calc(100dvh - 96px);
    padding: 6px;
    overflow: auto;
    border: 1px solid rgba(0, 148, 255, 0.24);
    border-radius: 9px;
    background:
      linear-gradient(180deg, rgba(3, 17, 31, 0.98), rgba(1, 8, 16, 0.99)),
      rgba(1, 8, 16, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48);
  }

  .mobile-nav-panel .nav-btn {
    min-height: 34px;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    justify-items: start;
    padding: 5px;
    border: 1px solid rgba(0, 148, 255, 0.14);
    border-radius: 7px;
    font-size: 0.5rem;
    line-height: 1;
    text-align: left;
  }

  .mobile-nav-panel .nav-btn svg,
  .mobile-nav-panel .nav-icon-img {
    width: 16px;
    height: 16px;
  }

  .mobile-nav-panel .nav-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav-panel .mission-nav-alert {
    top: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    font-size: 0.58rem;
  }

  .game.pcm-premium-shell .main-stage {
    min-height: 0;
    height: calc(100dvh - 95px);
    padding: 5px 8px 7px !important;
    overflow: visible !important;
  }

  .game.pcm-premium-shell .main-stage > * {
    max-height: 100%;
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
  }

  .office-dashboard,
  .missions-page,
  .club-events-page,
  .calendar-page,
  .store-page,
  .market-page,
  .finances-page,
  .squad-page,
  .stadium-page,
  .league-page,
  .ranking-page {
    height: 100%;
    min-height: 0;
  }

  .modal-backdrop,
  .market-full-modal,
  .squad-management-modal,
  .coach-market-modal,
  .crest-modal,
  .frame-modal {
    max-height: 100dvh;
  }

  .guide-dialog-pending,
  .guide-coach,
  .daily-mission-popup {
    max-height: calc(100dvh - 18px);
    overflow: auto;
  }

  .president-selection,
  .president-intro,
  .daily-mission-popup,
  .player-modal,
  .player-profile-modal,
  .market-full-modal,
  .squad-management-modal,
  .coach-market-modal,
  .crest-modal,
  .frame-modal,
  .office-popup,
  .season-celebration-popup,
  .player-growth-popup,
  .player-match-popup {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 12px) !important;
    overflow: auto !important;
  }

  .president-selection {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px !important;
  }

  .president-selection-head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
  }

  .president-selection-mark {
    display: grid;
    width: 32px;
    height: 36px;
  }

  .president-selection-mark svg {
    width: 30px;
    height: 30px;
  }

  .president-selection-head span {
    font-size: 0.58rem;
  }

  .president-selection-head h3 {
    margin: 1px 0 2px;
    font-size: 1.02rem;
    line-height: 1;
  }

  .president-selection-head p {
    font-size: 0.64rem;
    line-height: 1.15;
  }

  .president-choice-grid {
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: center;
    overflow: hidden;
  }

  .president-choice {
    width: min(100%, 138px) !important;
    max-width: 138px !important;
  }

  .president-choice .president-portrait {
    max-height: min(38dvh, 170px) !important;
    border-radius: 9px;
  }

  .president-choice .president-portrait img {
    border-radius: 9px;
  }

  .president-selection-footer {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
  }

  .president-selection-note {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
  }

  .president-selection-note i {
    width: 28px;
    height: 28px;
    border-width: 2px;
    font-size: 0.8rem;
  }

  .president-selection-note p {
    font-size: 0.6rem;
    line-height: 1.15;
  }

  .president-selection-note span {
    display: none;
  }

  .president-continue-btn {
    min-height: 34px;
    font-size: 0.68rem;
  }

  .president-intro {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px !important;
  }

  .president-intro-ring,
  .president-intro-video {
    width: 140px !important;
    height: 140px !important;
    max-height: 42dvh;
  }

  .president-intro h3 {
    font-size: 1.1rem;
    line-height: 1;
  }

  .president-intro p {
    font-size: 0.68rem;
    line-height: 1.22;
  }

  .daily-mission-popup {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 7px !important;
    padding: 8px !important;
  }

  .daily-popup-close {
    top: 6px;
    right: 7px;
    width: 26px;
    height: 26px;
    font-size: 1.35rem;
  }

  .daily-popup-head {
    grid-template-columns: 42px minmax(0, 1fr) 158px !important;
    gap: 8px !important;
    padding-right: 30px;
  }

  .daily-popup-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
  }

  .daily-popup-icon img {
    width: 42px !important;
    height: 42px !important;
  }

  .daily-mission-popup h3 {
    margin: 0 0 2px;
    font-size: 1.05rem !important;
    line-height: 1;
  }

  .daily-mission-popup p {
    font-size: 0.62rem !important;
    line-height: 1.15;
  }

  .daily-popup-timer {
    min-height: 38px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px;
  }

  .daily-popup-timer img {
    width: 26px;
    height: 26px;
  }

  .daily-popup-timer span {
    font-size: 0.48rem;
  }

  .daily-popup-timer strong {
    font-size: 0.82rem;
  }

  .daily-mission-popup .daily-reward-grid {
    min-height: 0;
    gap: 4px !important;
    overflow: hidden;
  }

  .daily-bonus-card,
  .daily-mission-popup .daily-step {
    min-height: 82px !important;
    padding: 5px !important;
    border-radius: 7px !important;
  }

  .daily-bonus-card {
    grid-template-rows: auto 34px minmax(0, 1fr) auto !important;
  }

  .daily-bonus-day {
    font-size: 0.68rem !important;
  }

  .daily-bonus-art img,
  .daily-bonus-card.active .daily-bonus-art img {
    width: 34px !important;
    height: 34px !important;
  }

  .daily-bonus-item strong,
  .daily-mission-popup .daily-step strong {
    font-size: 0.56rem !important;
  }

  .daily-bonus-item span,
  .daily-bonus-items em,
  .daily-mission-popup .daily-step span {
    font-size: 0.48rem !important;
  }

  .daily-card-claim,
  .daily-popup-claim {
    min-height: 28px !important;
    font-size: 0.58rem !important;
  }

  .daily-weekly-box,
  .daily-popup-reward {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 0.55fr) !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  .daily-bonus-warning {
    margin: 0 !important;
    font-size: 0.56rem !important;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: portrait) and (max-width: 760px) {
  html,
  body,
  #app {
    height: 100dvh;
    overflow: hidden;
  }

  .game.pcm-premium-shell .content > :not(.mobile-landscape-prompt) {
    visibility: hidden;
    pointer-events: none;
  }

  .mobile-landscape-prompt {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
      radial-gradient(circle at 50% 20%, rgba(0, 148, 255, 0.22), transparent 34%),
      linear-gradient(180deg, #020912, #01050a);
  }

  .mobile-landscape-prompt div {
    width: min(320px, 100%);
    display: grid;
    gap: 12px;
    justify-items: center;
    padding: 22px;
    border: 1px solid rgba(255, 190, 47, 0.4);
    border-radius: 10px;
    color: #fff;
    text-align: center;
    background: rgba(4, 17, 31, 0.92);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  }

  .mobile-landscape-phone {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 190, 47, 0.38);
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.24);
    box-shadow: 0 0 34px rgba(255, 190, 47, 0.16);
    font-size: 2.55rem !important;
    line-height: 1;
    animation: phoneLandscapeHint 1.7s ease-in-out infinite;
  }

  .mobile-landscape-prompt strong {
    font-size: 1.25rem;
    text-transform: uppercase;
  }

  .mobile-landscape-prompt span {
    color: rgba(230, 240, 255, 0.76);
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .mobile-landscape-prompt button {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(255, 190, 47, 0.65);
    border-radius: 8px;
    color: #07111d;
    background: linear-gradient(180deg, #ffd36a, #ffb52d);
    font-size: 0.8rem;
    font-weight: 1000;
    text-transform: uppercase;
  }
}

@keyframes phoneLandscapeHint {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  45%, 70% {
    transform: rotate(90deg) translateY(-2px);
  }
}

/* Final desktop facilities map pass: reference-style single screen. */
@media (min-width: 901px) {
  .game.pcm-premium-shell .main-stage:has(.facilities-map-screen) {
    padding-top: 6px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .facilities-map-screen {
    height: min(690px, calc(100svh - 205px));
    min-height: 430px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 48% 42%, rgba(0, 88, 150, 0.13), transparent 34%),
      linear-gradient(180deg, rgba(1, 9, 18, 0.2), rgba(1, 7, 14, 0.92));
  }

  .facilities-map-header {
    min-height: 44px;
    padding: 0;
    align-items: start;
  }

  .facilities-map-header h2 {
    font-size: 1.78rem;
    letter-spacing: 0;
  }

  .facilities-map-header p {
    max-width: 520px;
    margin-top: 4px;
    color: rgba(226, 236, 246, 0.78);
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .facilities-map-layout {
    height: 100%;
    min-height: 0;
    grid-template-columns: 184px minmax(0, 1fr) 286px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 0;
  }

  .facilities-summary-panel,
  .facilities-detail-panel {
    min-height: 0;
    padding: 11px;
    border-color: rgba(0, 148, 255, 0.18);
    border-radius: 8px;
    background: rgba(2, 12, 23, 0.72);
    box-shadow: none;
  }

  .facilities-summary-panel {
    align-self: start;
    gap: 0;
  }

  .facilities-summary-panel article {
    min-height: 62px;
    padding: 9px 8px;
  }

  .facilities-summary-panel span,
  .facilities-detail-panel span,
  .facilities-detail-metrics span {
    color: #a8c5e8;
    font-size: 0.63rem;
  }

  .facilities-summary-panel strong {
    font-size: 1rem;
  }

  .facilities-map-screen .stadium-map-panel {
    grid-area: auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .facilities-map-screen .stadium-map-stage {
    position: relative;
    width: min(100%, calc((100svh - 262px) * 1.778));
    max-width: 1220px;
    max-height: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: #07111d;
    box-shadow:
      inset 0 0 0 1px rgba(0, 148, 255, 0.14),
      0 24px 70px rgba(0, 0, 0, 0.32);
  }

  .facilities-map-screen .stadium-map-base,
  .facilities-map-screen .stadium-map-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center;
  }

  .facilities-map-screen .stadium-map-base {
    z-index: 1;
  }

  .facilities-map-screen .stadium-map-layer {
    z-index: 2;
    pointer-events: none;
  }

  .facilities-map-screen .facility-map-card {
    z-index: 4;
    left: var(--map-x);
    top: var(--map-y);
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    height: 36px;
    min-height: 36px;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 2px;
    border-radius: 10px;
    background: rgba(3, 10, 18, 0.66);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  }

  .facilities-map-screen .facility-map-card > span {
    width: 30px;
    height: 30px;
  }

  .facilities-map-screen .facility-map-card svg {
    width: 17px;
    height: 17px;
  }

  .facilities-map-screen .facility-map-card.selected {
    transform: translate(-50%, -50%) scale(1.08);
  }

  .facilities-map-screen .facility-map-card strong {
    color: #fff;
    font-size: 0.68rem;
  }

  .facilities-map-screen .facility-map-card em {
    max-width: 122px;
    color: #d8e4f2;
    font-size: 0.6rem;
  }

  .facilities-map-screen .official-store-card {
    z-index: 4;
    left: 83.2%;
    top: 51.4%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    min-width: 184px;
    max-width: 210px;
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 8px 10px;
    border-color: rgba(255, 190, 47, 0.54);
    background: rgba(3, 10, 18, 0.86);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    text-align: left;
  }

  .facilities-map-screen .stadium-main-card {
    z-index: 4;
    left: 47.2%;
    top: 43.8%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    min-width: 160px;
    max-width: 190px;
    min-height: 56px;
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 8px 10px;
    text-align: left;
  }

  .facilities-map-screen .official-store-card > span {
    width: 36px;
    height: 36px;
    color: var(--pcm-gold);
    background: rgba(255, 190, 47, 0.16);
  }

  .facilities-map-screen .official-store-card strong {
    color: #fff;
    font-size: 0.82rem;
  }

  .facilities-map-screen .official-store-card em {
    max-width: 150px;
    color: #d8e4f2;
    font-size: 0.67rem;
  }

  .facilities-detail-panel {
    align-self: stretch;
    gap: 5px;
    overflow: hidden;
  }

  .facilities-detail-head {
    align-items: center;
  }

  .facilities-detail-head span {
    color: #b15cff;
    font-size: 0.96rem;
  }

  .facilities-detail-head strong {
    margin-top: 0;
    color: #e7eef8;
    font-size: 0.88rem;
  }

  .facilities-detail-image {
    border-color: rgba(166, 91, 255, 0.5);
    border-radius: 8px;
  }

  .facilities-detail-image img,
  .facilities-detail-image svg {
    aspect-ratio: 16 / 7.1;
    object-fit: cover;
  }

  .facilities-map-screen .facility-map-mini-preview {
    aspect-ratio: 16 / 7.1;
  }

  .facilities-detail-panel p {
    color: rgba(226, 236, 246, 0.74);
    font-size: 0.7rem;
    line-height: 1.18;
  }

  .facilities-detail-section-title {
    margin-top: 1px;
    font-size: 0.62rem;
  }

  .facilities-detail-metrics {
    gap: 2px;
  }

  .facilities-detail-metrics article {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    padding: 3px 0;
  }

  .facilities-detail-upgrade {
    min-height: 34px;
  }
}

/* Desktop facilities fit: make the map own the available viewport instead of
   sitting inside three narrow columns. */
@media (min-width: 901px) {
  .game.pcm-premium-shell:has(.facilities-map-screen),
  .game.pcm-premium-shell:has(.facilities-map-screen) .content {
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-topbar {
    height: 70px;
    min-height: 70px;
    grid-template-columns: minmax(390px, 1fr) minmax(340px, 0.75fr) minmax(520px, auto);
    gap: 12px;
    padding: 6px 22px;
    overflow: hidden;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-identity {
    grid-template-columns: 52px 52px minmax(0, 1fr);
    gap: 10px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-crest {
    width: 52px;
    height: 58px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-crest::after {
    top: -3px;
    font-size: 12px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-crest .club-crest-img,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-crest img,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-crest svg {
    width: 42px;
    height: 50px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-president-card,
  .game.pcm-premium-shell:has(.facilities-map-screen) .profile-frame,
  .game.pcm-premium-shell:has(.facilities-map-screen) .profile-frame .profile-border {
    width: 52px;
    height: 52px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .profile-frame .profile-avatar {
    width: 40px;
    height: 40px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .profile-frame .profile-level {
    width: 24px;
    min-width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-division-chip,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-copy > span {
    display: none;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-name h2 {
    font-size: 1.05rem;
    line-height: 1;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-copy p {
    margin-top: 3px;
    font-size: 0.68rem;
    line-height: 1;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-stats article {
    min-height: 44px;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 6px;
    padding: 0 10px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-stats svg {
    width: 22px;
    height: 22px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-stats strong {
    font-size: 0.88rem;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-stats span {
    font-size: 0.54rem;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-actions {
    grid-template-columns: minmax(132px, 1fr) minmax(118px, 0.85fr) minmax(112px, 0.75fr) minmax(122px, 0.8fr) 42px;
    gap: 7px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-wallet-card,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-play,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-advance,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-settings {
    height: 42px;
    min-height: 42px;
    border-radius: 6px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-wallet-card {
    padding: 7px 10px 7px 34px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-wallet-card::before {
    left: 10px;
    width: 16px;
    height: 16px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-wallet-card span {
    font-size: 0.52rem;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .club-wallet-card strong,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-play,
  .game.pcm-premium-shell:has(.facilities-map-screen) .club-hero-advance {
    font-size: 0.76rem;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .horizontal-nav-shell {
    padding: 0 22px;
  }

  .game.pcm-premium-shell .top-app-nav {
    grid-template-columns: repeat(7, minmax(96px, 1fr));
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .top-app-nav {
    height: 58px;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .top-app-nav .nav-btn {
    gap: 8px;
    font-size: 0.84rem;
  }

  .game.pcm-premium-shell:has(.facilities-map-screen) .top-app-nav .nav-btn svg {
    width: 21px;
    height: 21px;
  }

  .game.pcm-premium-shell .bottom-dock {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .game.pcm-premium-shell .main-stage:has(.facilities-map-screen) {
    min-height: 0;
    padding: 4px 10px 0;
    overflow: hidden;
  }

  .facilities-map-screen {
    position: relative;
    height: clamp(420px, calc(100svh - 236px), 760px);
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 50% 50%, rgba(0, 148, 255, 0.1), transparent 36%),
      linear-gradient(180deg, rgba(2, 12, 22, 0.22), rgba(1, 7, 14, 0.72));
  }

  .facilities-map-header {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: min(440px, 36vw);
    min-height: 0;
    padding: 0;
    pointer-events: none;
  }

  .facilities-map-header h2 {
    font-size: clamp(1.35rem, 1.65vw, 1.8rem);
  }

  .facilities-map-header p {
    max-width: 420px;
    margin-top: 3px;
    font-size: 0.74rem;
    line-height: 1.22;
  }

  .facilities-map-layout {
    position: relative;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding: 0;
  }

  .facilities-map-screen .stadium-map-panel {
    height: 100%;
    min-height: 0;
    place-items: center;
    overflow: visible;
  }

  .facilities-map-screen .stadium-map-stage {
    width: auto;
    height: 100%;
    max-width: min(100%, 1360px);
    max-height: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    transform: translateX(-28px);
    box-shadow:
      inset 0 0 0 1px rgba(0, 148, 255, 0.15),
      0 22px 70px rgba(0, 0, 0, 0.34);
  }

  .facilities-summary-panel {
    position: absolute;
    left: 0;
    top: 62px;
    z-index: 8;
    width: 176px;
    padding: 10px;
    background: rgba(2, 12, 23, 0.78);
    backdrop-filter: blur(10px);
  }

  .facilities-summary-panel article {
    min-height: 50px;
    padding: 7px 8px;
  }

  .facilities-detail-panel {
    position: absolute;
    top: 62px;
    right: 0;
    bottom: 0;
    z-index: 8;
    width: 278px;
    padding: 10px;
    background: rgba(2, 12, 23, 0.8);
    backdrop-filter: blur(10px);
  }

  .facilities-detail-image img,
  .facilities-detail-image svg,
  .facilities-map-screen .facility-map-mini-preview {
    aspect-ratio: 16 / 6.8;
  }

  .facilities-detail-panel p {
    font-size: 0.68rem;
    line-height: 1.14;
  }

  .facilities-detail-metrics article {
    min-height: 22px;
    padding: 2px 0;
  }

  .facilities-detail-upgrade {
    min-height: 34px;
  }
}

.admin-dashboard {
  display: grid;
  gap: 14px;
  min-height: calc(100svh - 246px);
}

.admin-hero,
.admin-warning,
.admin-panel,
.admin-kpi {
  border: 1px solid rgba(0, 148, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(5, 24, 44, 0.86), rgba(1, 10, 20, 0.94)),
    rgba(2, 10, 18, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 40px rgba(0, 0, 0, 0.22);
}

.admin-hero {
  min-height: 124px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px;
  background:
    radial-gradient(circle at 8% 0%, rgba(0, 174, 255, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(6, 29, 52, 0.9), rgba(1, 10, 20, 0.96));
}

.admin-hero h2 {
  margin: 4px 0 6px;
  color: #fff;
  font-size: 1.75rem;
  text-transform: uppercase;
}

.admin-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(218, 232, 246, 0.78);
  font-size: 0.95rem;
  line-height: 1.35;
}

.admin-hero-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 210px;
}

.admin-hero-actions em {
  color: rgba(218, 232, 246, 0.68);
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-source-pill {
  display: inline-grid;
  place-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 190, 47, 0.38);
  border-radius: 999px;
  background: rgba(255, 190, 47, 0.12);
  color: var(--pcm-gold);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-source-pill.online {
  border-color: rgba(0, 255, 156, 0.42);
  background: rgba(0, 255, 156, 0.12);
  color: #2effae;
}

.admin-warning {
  padding: 12px 14px;
  border-color: rgba(255, 190, 47, 0.38);
  color: #ffd977;
  font-weight: 800;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.admin-kpi {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.admin-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--pcm-blue);
  box-shadow: 0 0 18px rgba(0, 174, 255, 0.55);
}

.admin-kpi.peak::before,
.admin-kpi.views::before {
  background: var(--pcm-gold);
  box-shadow: 0 0 18px rgba(255, 190, 47, 0.48);
}

.admin-kpi.accounts::before {
  background: #2effae;
  box-shadow: 0 0 18px rgba(46, 255, 174, 0.44);
}

.admin-kpi.inactive::before {
  background: #ff4e6d;
  box-shadow: 0 0 18px rgba(255, 78, 109, 0.44);
}

.admin-kpi span,
.admin-panel-head span {
  color: #83cfff;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-kpi strong {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 950;
}

.admin-kpi em {
  color: rgba(218, 232, 246, 0.7);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 800;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 12px;
}

.admin-panel {
  min-width: 0;
  padding: 16px;
}

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.admin-panel-head h3 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.admin-bars,
.admin-list,
.admin-health-list {
  display: grid;
  gap: 9px;
}

.admin-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(127, 164, 190, 0.14);
  border-radius: 7px;
  background: rgba(1, 12, 24, 0.62);
}

.admin-bar-row strong,
.admin-list strong,
.admin-health-list strong {
  display: block;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 950;
}

.admin-bar-row em,
.admin-list span,
.admin-health-list span {
  color: rgba(218, 232, 246, 0.68);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.admin-bar-row > span {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(127, 164, 190, 0.16);
}

.admin-bar-row i {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pcm-blue), var(--pcm-gold));
  box-shadow: 0 0 16px rgba(0, 174, 255, 0.32);
}

.admin-list article,
.admin-health-list article {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(127, 164, 190, 0.14);
  border-radius: 7px;
  background: rgba(1, 12, 24, 0.62);
}

.admin-list em {
  flex: 0 0 auto;
  color: #dff5ff;
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-health-list article {
  align-items: flex-start;
  flex-direction: column;
}

.admin-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(127, 164, 190, 0.22);
  border-radius: 7px;
  color: rgba(218, 232, 246, 0.68);
  font-weight: 800;
}

@media (max-width: 1360px) {
  .admin-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .admin-hero,
  .admin-grid,
  .admin-kpi-grid {
    grid-template-columns: 1fr;
  }

  .admin-hero {
    display: grid;
  }

  .admin-hero-actions {
    justify-items: start;
  }
}

/* Inicio presidencial: cinematic home after president selection. */
.game.pcm-premium-shell.presidential-home-active {
  min-height: 100svh;
  overflow: hidden;
  background: #030507;
}

.game.pcm-premium-shell.presidential-subview-active {
  --pcm-blue: #d8a95a;
  --pcm-blue-soft: rgba(216, 169, 90, 0.26);
  --pcm-gold: #f3c66f;
  --pcm-panel: rgba(15, 13, 11, 0.74);
  --pcm-panel-strong: rgba(13, 11, 9, 0.9);
  --panel: rgba(15, 13, 11, 0.82);
  --panel-strong: rgba(13, 11, 9, 0.94);
  --panel-soft: rgba(255, 235, 205, 0.055);
  min-height: 100svh;
  overflow: hidden;
  background: #030507;
}

.game.pcm-premium-shell.presidential-home-active .club-hero-topbar,
.game.pcm-premium-shell.presidential-home-active .horizontal-nav-shell,
.game.pcm-premium-shell.presidential-home-active .bottom-dock,
.game.pcm-premium-shell.presidential-home-active .mobile-nav-menu,
.game.pcm-premium-shell.presidential-home-active .friends-widget,
.game.pcm-premium-shell.presidential-subview-active .club-hero-topbar,
.game.pcm-premium-shell.presidential-subview-active .horizontal-nav-shell,
.game.pcm-premium-shell.presidential-subview-active .bottom-dock,
.game.pcm-premium-shell.presidential-subview-active .mobile-nav-menu,
.game.pcm-premium-shell.presidential-subview-active .friends-widget {
  display: none !important;
}

.game.pcm-premium-shell.presidential-home-active .content {
  min-height: 100svh;
  padding: 0;
}

.game.pcm-premium-shell.presidential-subview-active .content {
  position: relative;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

.game.pcm-premium-shell.presidential-home-active .main-stage {
  height: 100svh;
  padding: 0;
  overflow: hidden;
}

.game.pcm-premium-shell.presidential-subview-active .main-stage {
  position: relative;
  z-index: 1;
  height: 100svh;
  padding: clamp(14px, 1.6vw, 24px);
  overflow: auto;
}

.presidential-shell-backdrop,
.presidential-shell-video,
.presidential-shell-shade {
  position: absolute;
  inset: 0;
}

.presidential-shell-backdrop {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 24%, rgba(243, 198, 111, 0.1), transparent 30%),
    linear-gradient(135deg, #040608, #0d0a06 52%, #020304);
}

.presidential-shell-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.24) saturate(1.12) contrast(1);
  transform: scale(1.018);
  animation: presidentialVideoBreath 18s ease-in-out infinite alternate;
}

.presidential-shell-shade {
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 3, 6, 0.58), rgba(1, 3, 6, 0.1) 38%, rgba(1, 3, 6, 0.48)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.62));
  backdrop-filter: blur(1px);
}

.presidential-floating-view {
  min-height: calc(100svh - clamp(28px, 3.2vw, 48px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  animation: presidentialSubviewIn 0.42s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.presidential-floating-pulse {
  display: none;
}

.presidential-back-btn {
  justify-self: start;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid rgba(216, 169, 90, 0.34);
  border-radius: 7px;
  color: #f9d08a;
  background: rgba(5, 10, 15, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 30px rgba(0, 0, 0, 0.28);
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease;
  animation: presidentialBackIn 0.5s ease both;
}

.presidential-back-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(243, 198, 111, 0.58);
  background: rgba(18, 14, 10, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(216, 169, 90, 0.13);
}

.presidential-back-btn svg {
  width: 19px;
  height: 19px;
}

.presidential-floating-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: clamp(10px, 1vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(2, 11, 20, 0.86), rgba(1, 8, 15, 0.9)),
    rgba(1, 8, 15, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 28px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
  animation: presidentialBodyIn 0.48s cubic-bezier(0.2, 0.82, 0.25, 1) both;
  transition:
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.presidential-floating-body > * {
  max-width: none;
}

.presidential-floating-body > *:first-child {
  animation: presidentialContentIn 0.5s cubic-bezier(0.22, 0.8, 0.28, 1) both;
}

.game.pcm-premium-shell.presidential-subview-active .primary-btn,
.game.pcm-premium-shell.presidential-subview-active .secondary-btn,
.game.pcm-premium-shell.presidential-subview-active button,
.game.pcm-premium-shell.presidential-subview-active .market-transfer-list article,
.game.pcm-premium-shell.presidential-subview-active .market-target-list article,
.game.pcm-premium-shell.presidential-subview-active .market-player-list article,
.game.pcm-premium-shell.presidential-subview-active .panel,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi,
.game.pcm-premium-shell.presidential-subview-active .finance-panel {
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.game.pcm-premium-shell.presidential-subview-active .market-transfer-list article:hover,
.game.pcm-premium-shell.presidential-subview-active .market-target-list article:hover,
.game.pcm-premium-shell.presidential-subview-active .market-player-list article:hover,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi:hover,
.game.pcm-premium-shell.presidential-subview-active .panel:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 198, 111, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.06),
    0 22px 48px rgba(0, 0, 0, 0.32) !important;
}

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

@keyframes presidentialBodyIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

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

@keyframes presidentialBackIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes presidentialVideoBreath {
  from {
    transform: scale(1.018);
    filter: brightness(1.2) saturate(1.1) contrast(1);
  }
  to {
    transform: scale(1.04);
    filter: brightness(1.3) saturate(1.14) contrast(1.01);
  }
}

.game.pcm-premium-shell.presidential-subview-active .presidential-floating-body,
.game.pcm-premium-shell.presidential-subview-active .panel,
.game.pcm-premium-shell.presidential-subview-active .table-wrap,
.game.pcm-premium-shell.presidential-subview-active .market-hero-panel,
.game.pcm-premium-shell.presidential-subview-active .market-recent-panel,
.game.pcm-premium-shell.presidential-subview-active .market-objectives-panel,
.game.pcm-premium-shell.presidential-subview-active .market-search-panel,
.game.pcm-premium-shell.presidential-subview-active .market-list-panel,
.game.pcm-premium-shell.presidential-subview-active .market-budget-panel,
.game.pcm-premium-shell.presidential-subview-active .profile-hero,
.game.pcm-premium-shell.presidential-subview-active .profile-card,
.game.pcm-premium-shell.presidential-subview-active .finance-hero,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi,
.game.pcm-premium-shell.presidential-subview-active .finance-panel,
.game.pcm-premium-shell.presidential-subview-active .national-cup-hero,
.game.pcm-premium-shell.presidential-subview-active .national-cup-card,
.game.pcm-premium-shell.presidential-subview-active .national-cup-round,
.game.pcm-premium-shell.presidential-subview-active .store-page > section,
.game.pcm-premium-shell.presidential-subview-active .facility-card,
.game.pcm-premium-shell.presidential-subview-active .league-card,
.game.pcm-premium-shell.presidential-subview-active .ranking-card {
  border-color: rgba(216, 169, 90, 0.22) !important;
  background:
    linear-gradient(145deg, rgba(22, 18, 14, 0.78), rgba(6, 8, 10, 0.9)),
    rgba(9, 9, 8, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.28) !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-hero-panel {
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.96) 0 33%, rgba(12, 10, 8, 0.68) 54%, rgba(12, 10, 8, 0.16)),
    linear-gradient(180deg, transparent 54%, rgba(10, 8, 7, 0.9)),
    url("./assets/market/market-banner.png") center right / cover no-repeat !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-coach-panel {
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.94) 0 28%, rgba(12, 10, 8, 0.54) 48%, rgba(12, 10, 8, 0.08)),
    linear-gradient(180deg, transparent 50%, rgba(10, 8, 7, 0.82)),
    url("./assets/market/coach-banner.png") center right / cover no-repeat !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-hero-copy span,
.game.pcm-premium-shell.presidential-subview-active .market-objectives-panel h3,
.game.pcm-premium-shell.presidential-subview-active .market-search-panel h3,
.game.pcm-premium-shell.presidential-subview-active .market-budget-panel h3,
.game.pcm-premium-shell.presidential-subview-active .market-panel-head h3,
.game.pcm-premium-shell.presidential-subview-active .section-heading span,
.game.pcm-premium-shell.presidential-subview-active .panel-kicker,
.game.pcm-premium-shell.presidential-subview-active .national-cup-round span,
.game.pcm-premium-shell.presidential-subview-active .national-cup-round b,
.game.pcm-premium-shell.presidential-subview-active .national-cup-next span,
.game.pcm-premium-shell.presidential-subview-active .finance-hero-score span,
.game.pcm-premium-shell.presidential-subview-active .finance-panel-head span,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi span {
  color: #f3c66f !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-hero-stats {
  border-color: rgba(216, 169, 90, 0.14) !important;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.1), rgba(10, 8, 7, 0.78)) !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-hero-stats div,
.game.pcm-premium-shell.presidential-subview-active .market-transfer-list article,
.game.pcm-premium-shell.presidential-subview-active .market-target-list article,
.game.pcm-premium-shell.presidential-subview-active .market-player-list article,
.game.pcm-premium-shell.presidential-subview-active .finance-row-list article,
.game.pcm-premium-shell.presidential-subview-active .finance-ledger-list article,
.game.pcm-premium-shell.presidential-subview-active .national-cup-prize {
  border-color: rgba(216, 169, 90, 0.14) !important;
  background: rgba(13, 11, 9, 0.54) !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-hero-stats strong,
.game.pcm-premium-shell.presidential-subview-active .market-budget-panel strong,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi.budget strong,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi.positive strong,
.game.pcm-premium-shell.presidential-subview-active .finance-panel-head > strong,
.game.pcm-premium-shell.presidential-subview-active .finance-panel-head strong.positive,
.game.pcm-premium-shell.presidential-subview-active .finance-kpi.health strong,
.game.pcm-premium-shell.presidential-subview-active .finance-hero-score strong,
.game.pcm-premium-shell.presidential-subview-active .national-cup-prize strong,
.game.pcm-premium-shell.presidential-subview-active .continental-cup-prize strong {
  color: #f3c66f !important;
}

.game.pcm-premium-shell.presidential-subview-active select,
.game.pcm-premium-shell.presidential-subview-active input,
.game.pcm-premium-shell.presidential-subview-active textarea {
  border-color: rgba(216, 169, 90, 0.18) !important;
  background: rgba(12, 10, 8, 0.76) !important;
}

.game.pcm-premium-shell.presidential-subview-active .league-clean-layout {
  gap: 10px;
}

.game.pcm-premium-shell.presidential-subview-active .league-standings-panel {
  padding: 11px 12px !important;
  max-height: min(64vh, 650px);
  overflow: auto;
  scrollbar-width: thin;
}

.game.pcm-premium-shell.presidential-subview-active .league-standings-panel h3 {
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.game.pcm-premium-shell.presidential-subview-active .league-standings-panel .compact-stat-table th,
.game.pcm-premium-shell.presidential-subview-active .league-standings-panel .compact-stat-table td {
  padding: 7px 10px;
  font-size: 0.82rem;
  line-height: 1.15;
}

.game.pcm-premium-shell.presidential-subview-active .league-action-strip {
  gap: 8px;
}

.game.pcm-premium-shell.presidential-subview-active .league-detail-btn {
  min-height: 38px;
  padding: 7px 9px;
  font-size: 0.72rem;
  line-height: 1.12;
}

.game.pcm-premium-shell.presidential-subview-active .league-detail-panel.table-wrap {
  padding: 10px 12px !important;
}

.game.pcm-premium-shell.presidential-subview-active .league-detail-panel h3 {
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.game.pcm-premium-shell.presidential-subview-active .squad-coach-card,
.game.pcm-premium-shell.presidential-subview-active .squad-pitch-panel,
.game.pcm-premium-shell.presidential-subview-active .squad-bench-card,
.game.pcm-premium-shell.presidential-subview-active .squad-roles-card,
.game.pcm-premium-shell.presidential-subview-active .squad-team-metrics article,
.game.pcm-premium-shell.presidential-subview-active .formation-panel,
.game.pcm-premium-shell.presidential-subview-active .squad-president-call-menu {
  border-color: rgba(216, 169, 90, 0.2) !important;
  background:
    linear-gradient(145deg, rgba(20, 16, 12, 0.78), rgba(6, 8, 10, 0.9)),
    rgba(9, 9, 8, 0.78) !important;
}

.game.pcm-premium-shell.presidential-subview-active .squad-tabs button {
  border-color: rgba(216, 169, 90, 0.16) !important;
  color: rgba(247, 239, 225, 0.76) !important;
  background: rgba(16, 13, 10, 0.66) !important;
}

.game.pcm-premium-shell.presidential-subview-active .squad-president-call-menu button {
  border-color: rgba(216, 169, 90, 0.14) !important;
  background: rgba(13, 11, 9, 0.54) !important;
}

.game.pcm-premium-shell.presidential-subview-active .squad-tabs button.active {
  border-color: rgba(243, 198, 111, 0.58) !important;
  color: #140f08 !important;
  background: linear-gradient(180deg, #f3c66f, #b98232) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 18px rgba(216, 169, 90, 0.2) !important;
}

.game.pcm-premium-shell.presidential-subview-active .bench-row em,
.game.pcm-premium-shell.presidential-subview-active .squad-panel-head h3,
.game.pcm-premium-shell.presidential-subview-active .squad-roles-card h3 {
  color: #f3c66f !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-target-list > *,
.game.pcm-premium-shell.presidential-subview-active .market-transfer-list > *,
.game.pcm-premium-shell.presidential-subview-active .market-player-list > *,
.game.pcm-premium-shell.presidential-subview-active .mission-summary-card,
.game.pcm-premium-shell.presidential-subview-active .mission-featured-card,
.game.pcm-premium-shell.presidential-subview-active .missions-level-panel,
.game.pcm-premium-shell.presidential-subview-active .missions-main-panel,
.game.pcm-premium-shell.presidential-subview-active .mission-daily-panel,
.game.pcm-premium-shell.presidential-subview-active .mission-card,
.game.pcm-premium-shell.presidential-subview-active .mission-objective-tile,
.game.pcm-premium-shell.presidential-subview-active .stadium-map-panel,
.game.pcm-premium-shell.presidential-subview-active .stadium-hero-panel,
.game.pcm-premium-shell.presidential-subview-active .stadium-ticket-panel,
.game.pcm-premium-shell.presidential-subview-active .stadium-works-panel,
.game.pcm-premium-shell.presidential-subview-active .stadium-facilities-panel,
.game.pcm-premium-shell.presidential-subview-active .stadium-map-upgrade-card,
.game.pcm-premium-shell.presidential-subview-active .stadium-ticket-upgrade,
.game.pcm-premium-shell.presidential-subview-active .facility-detail-panel,
.game.pcm-premium-shell.presidential-subview-active .facility-upgrade-card,
.game.pcm-premium-shell.presidential-subview-active .daily-reward-panel,
.game.pcm-premium-shell.presidential-subview-active .daily-office-panel,
.game.pcm-premium-shell.presidential-subview-active .daily-construction-panel {
  border-color: rgba(216, 169, 90, 0.22) !important;
  background:
    linear-gradient(145deg, rgba(20, 16, 12, 0.78), rgba(6, 8, 10, 0.9)),
    rgba(9, 9, 8, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.05),
    0 18px 42px rgba(0, 0, 0, 0.26) !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-target-list > *:hover,
.game.pcm-premium-shell.presidential-subview-active .market-transfer-list > *:hover,
.game.pcm-premium-shell.presidential-subview-active .market-player-list > *:hover,
.game.pcm-premium-shell.presidential-subview-active .mission-card:hover,
.game.pcm-premium-shell.presidential-subview-active .mission-objective-tile:hover,
.game.pcm-premium-shell.presidential-subview-active .facility-card:hover {
  border-color: rgba(243, 198, 111, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.06),
    0 22px 48px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(216, 169, 90, 0.12) !important;
}

.game.pcm-premium-shell.presidential-subview-active .rating,
.game.pcm-premium-shell.presidential-subview-active .market-rating,
.game.pcm-premium-shell.presidential-subview-active .player-rating,
.game.pcm-premium-shell.presidential-subview-active .squad-management-rating b,
.game.pcm-premium-shell.presidential-subview-active .mission-xp-ring,
.game.pcm-premium-shell.presidential-subview-active .missions-level-panel .mission-xp-ring {
  border-color: rgba(243, 198, 111, 0.76) !important;
  color: #f3c66f !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(243, 198, 111, 0.28), rgba(20, 15, 9, 0.94) 64%),
    rgba(12, 10, 8, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.14),
    0 0 16px rgba(216, 169, 90, 0.24) !important;
}

.game.pcm-premium-shell.presidential-subview-active .progress,
.game.pcm-premium-shell.presidential-subview-active .mission-progress,
.game.pcm-premium-shell.presidential-subview-active .missions-main-progress b,
.game.pcm-premium-shell.presidential-subview-active .mission-daily-progress b,
.game.pcm-premium-shell.presidential-subview-active .stadium-progress,
.game.pcm-premium-shell.presidential-subview-active .store-pass-progress {
  background: rgba(255, 245, 225, 0.13) !important;
}

.game.pcm-premium-shell.presidential-subview-active .progress span,
.game.pcm-premium-shell.presidential-subview-active .mission-progress span,
.game.pcm-premium-shell.presidential-subview-active .missions-main-progress b i,
.game.pcm-premium-shell.presidential-subview-active .mission-daily-progress b i,
.game.pcm-premium-shell.presidential-subview-active .stadium-progress i,
.game.pcm-premium-shell.presidential-subview-active .store-pass-progress i {
  background: linear-gradient(90deg, #b98232, #f3c66f) !important;
}

.game.pcm-premium-shell.presidential-subview-active .finance-hero,
.game.pcm-premium-shell.presidential-subview-active .national-cup-hero,
.game.pcm-premium-shell.presidential-subview-active .continental-cup-hero {
  background:
    radial-gradient(circle at 78% 12%, rgba(243, 198, 111, 0.18), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(185, 130, 50, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(24, 19, 14, 0.82), rgba(6, 8, 10, 0.92)),
    rgba(9, 9, 8, 0.82) !important;
}

.game.pcm-premium-shell.presidential-subview-active .finance-hero-score,
.game.pcm-premium-shell.presidential-subview-active .national-cup-prize {
  border-color: rgba(243, 198, 111, 0.22) !important;
  background: linear-gradient(145deg, rgba(243, 198, 111, 0.1), rgba(12, 10, 8, 0.58)) !important;
}

.game.pcm-premium-shell.presidential-subview-active .finance-hero-score i::before,
.game.pcm-premium-shell.presidential-subview-active .finance-mini-bar span,
.game.pcm-premium-shell.presidential-subview-active .national-cup-progress i {
  background: linear-gradient(90deg, #8f5f25, #f3c66f, #d8a95a) !important;
}

.game.pcm-premium-shell.presidential-subview-active .finance-mini-bar.warning span {
  background: linear-gradient(90deg, #f3c66f, #c98b3d, #9f3f34) !important;
}

.game.pcm-premium-shell.presidential-subview-active .national-cup-round.played {
  border-color: rgba(216, 169, 90, 0.34) !important;
}

.game.pcm-premium-shell.presidential-subview-active .continental-cup-requirements {
  border-color: rgba(243, 198, 111, 0.3) !important;
}

.game.pcm-premium-shell.presidential-subview-active .market-target-list .rating,
.game.pcm-premium-shell.presidential-subview-active .market-player-list .rating {
  outline: 1px solid rgba(243, 198, 111, 0.34);
  outline-offset: 2px;
}

.presidential-home {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  color: #f5efe4;
  background:
    radial-gradient(circle at 24% 24%, rgba(243, 198, 111, 0.1), transparent 30%),
    linear-gradient(135deg, #040608, #0d0a06 52%, #020304);
}

.presidential-home-video,
.presidential-home-shade {
  position: absolute;
  inset: 0;
}

.presidential-home-video {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.08) saturate(1.1) contrast(1.02);
}

.presidential-home-shade {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 3, 6, 0.72) 0%, rgba(1, 3, 6, 0.16) 27%, rgba(1, 3, 6, 0.12) 59%, rgba(1, 3, 6, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.02) 21%, rgba(0, 0, 0, 0.18) 74%, rgba(0, 0, 0, 0.72) 100%);
}

.presidential-customize-btn {
  position: relative;
  z-index: 4;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid rgba(216, 169, 90, 0.34);
  border-radius: 8px;
  color: #f8efe1;
  background:
    linear-gradient(145deg, rgba(18, 15, 10, 0.72), rgba(3, 4, 5, 0.76)),
    rgba(0, 0, 0, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.3);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 1000;
  text-transform: uppercase;
  transform: none;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.presidential-customize-btn:hover {
  border-color: rgba(243, 198, 111, 0.58);
  color: #f3c66f;
}

.presidential-customize-btn span {
  width: 18px;
  height: 18px;
  display: inline-grid;
}

.presidential-customize-btn svg {
  width: 18px;
  height: 18px;
}

.presidential-customize-modal {
  position: relative;
  width: min(980px, calc(100vw - 34px));
  max-height: min(760px, calc(100svh - 34px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid rgba(216, 169, 90, 0.28);
  border-radius: 10px;
  color: #f8efe1;
  background:
    radial-gradient(circle at 74% 0%, rgba(243, 198, 111, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(18, 15, 10, 0.96), rgba(5, 6, 7, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.07),
    0 34px 90px rgba(0, 0, 0, 0.56);
}

.presidential-customize-modal header {
  max-width: 560px;
}

.presidential-customize-modal h3 {
  margin: 6px 0;
  color: #fff;
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
  line-height: 1;
  text-transform: uppercase;
}

.presidential-customize-modal p {
  margin: 0;
  color: rgba(248, 239, 225, 0.7);
  line-height: 1.45;
}

.presidential-customize-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  overflow: auto;
  padding: 2px;
}

.presidential-customize-option {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 245, 225, 0.12);
  border-radius: 9px;
  color: #f8efe1;
  text-align: left;
  background:
    linear-gradient(145deg, rgba(24, 20, 14, 0.74), rgba(7, 8, 9, 0.92)),
    rgba(9, 9, 8, 0.84);
  cursor: default;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.presidential-customize-option:hover,
.presidential-customize-option.selected {
  transform: translateY(-2px);
  border-color: rgba(243, 198, 111, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.08),
    0 22px 48px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(216, 169, 90, 0.14);
}

.presidential-customize-president-btn {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.presidential-customize-portrait {
  min-height: 0;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.presidential-customize-portrait img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.presidential-customize-president-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
}

.presidential-customize-president-copy strong,
.presidential-customize-president-copy em {
  min-width: 0;
}

.presidential-customize-president-copy b {
  grid-row: 1 / 3;
  grid-column: 2;
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(243, 198, 111, 0.46);
  border-radius: 7px;
  color: #05070a;
  background: linear-gradient(180deg, #ffe572, #f1b937);
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.presidential-customize-card-skins {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.presidential-customize-option strong {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
}

.presidential-customize-option em {
  color: #f3c66f;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
}

.presidential-customize-skins {
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 2px;
}

.presidential-customize-skins > div:first-child {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.presidential-customize-skins strong {
  color: #fff8ec;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.presidential-customize-skin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.presidential-customize-skin {
  min-width: 0;
  display: grid;
  grid-template-rows: 78px minmax(48px, auto) auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255, 245, 225, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.presidential-customize-skin.active {
  border-color: rgba(243, 198, 111, 0.56);
  box-shadow: inset 0 0 0 1px rgba(243, 198, 111, 0.12);
}

.presidential-customize-skin.locked {
  opacity: 0.64;
}

.presidential-customize-skin-media {
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.38);
}

.presidential-customize-skin-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.presidential-customize-skin-media span {
  color: #f3c66f;
}

.presidential-customize-skin-media svg {
  width: 38px;
  height: 38px;
}

.presidential-customize-skin small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 248, 236, 0.62);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.25;
}

.presidential-customize-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.presidential-settings-backdrop {
  z-index: 1200;
}

.presidential-settings-modal {
  position: relative;
  width: min(520px, calc(100vw - 28px));
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid rgba(216, 169, 90, 0.3);
  border-radius: 10px;
  color: #f8efe1;
  background:
    radial-gradient(circle at 92% 0%, rgba(243, 198, 111, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(18, 15, 10, 0.96), rgba(4, 5, 6, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.07),
    0 34px 90px rgba(0, 0, 0, 0.58);
}

.presidential-settings-modal header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.presidential-settings-modal header > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 169, 90, 0.32);
  border-radius: 9px;
  color: #f3c66f;
  background: rgba(216, 169, 90, 0.12);
}

.presidential-settings-modal header svg {
  width: 24px;
  height: 24px;
}

.presidential-settings-modal small,
.presidential-settings-row em,
.presidential-settings-toggle em,
.presidential-settings-select em {
  color: rgba(255, 248, 236, 0.62);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.presidential-settings-modal h3 {
  margin: 2px 0 0;
  color: #fff8ec;
  font-size: 1.45rem;
  line-height: 1;
  text-transform: uppercase;
}

.presidential-settings-list {
  display: grid;
  gap: 10px;
}

.presidential-settings-row,
.presidential-settings-toggle,
.presidential-settings-select {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(255, 245, 225, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.presidential-settings-row {
  grid-template-columns: minmax(0, 1fr) minmax(120px, 190px) 48px;
}

.presidential-settings-toggle,
.presidential-settings-select {
  grid-template-columns: minmax(0, 1fr) auto;
}

.presidential-settings-row span,
.presidential-settings-toggle span,
.presidential-settings-select span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.presidential-settings-row strong,
.presidential-settings-toggle strong,
.presidential-settings-select strong {
  color: #fff8ec;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.presidential-settings-row input[type="range"] {
  width: 100%;
  accent-color: #f3c66f;
}

.presidential-settings-row b {
  color: #f3c66f;
  font-size: 0.82rem;
  text-align: right;
}

.presidential-settings-toggle input {
  width: 48px;
  height: 26px;
  accent-color: #d8a95a;
}

.presidential-settings-select select {
  min-width: 150px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(216, 169, 90, 0.22);
  border-radius: 7px;
  color: #fff8ec;
  background: rgba(12, 10, 8, 0.86);
  font-weight: 900;
}

.presidential-sidebar {
  position: absolute;
  left: clamp(16px, 1.55vw, 30px);
  top: clamp(18px, 2.4vw, 42px);
  bottom: clamp(46px, 5.7vw, 86px);
  width: clamp(260px, 18vw, 340px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}

.presidential-brand,
.presidential-menu-item,
.presidential-quickbar button,
.presidential-news-panel button,
.presidential-market-table button,
.presidential-ranking-launcher,
.presidential-coach-event-card,
.presidential-construction-widget,
.presidential-bottom-strip button {
  border: 0;
  color: inherit;
  font: inherit;
}

.presidential-brand {
  display: block;
  padding: 0;
  background: transparent;
  text-align: left;
}

.presidential-brand img {
  width: min(286px, 100%);
  height: auto;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 18px rgba(255, 220, 130, 0.12));
}

.presidential-menu-toggle {
  display: none;
}

.presidential-menu {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
  overflow: auto;
  padding: 4px 4px 6px 0;
  scrollbar-width: thin;
}

.presidential-menu-item {
  position: relative;
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(8, 11, 14, 0.48), rgba(8, 11, 14, 0.16));
  text-align: left;
  backdrop-filter: blur(10px);
}

.presidential-competition-menu {
  display: grid;
}

.presidential-competition-menu > summary {
  list-style: none;
  cursor: pointer;
}

.presidential-competition-menu > summary::-webkit-details-marker {
  display: none;
}

.presidential-competition-menu > summary::after {
  content: "v";
  position: absolute;
  right: 14px;
  color: rgba(255, 248, 236, 0.72);
  font-size: 1rem;
  transition: transform 0.18s ease;
}

.presidential-competition-menu[open] > summary::after {
  transform: rotate(180deg);
}

.presidential-submenu {
  display: grid;
  gap: 4px;
  padding: 5px 0 4px 58px;
}

.presidential-submenu button {
  min-height: 36px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 248, 236, 0.76);
  background: rgba(4, 8, 12, 0.36);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
}

.presidential-submenu button.active,
.presidential-submenu button:hover {
  border-color: rgba(216, 169, 90, 0.32);
  color: #f7cc7b;
  background: rgba(216, 169, 90, 0.12);
}

.presidential-submenu svg {
  width: 18px;
  height: 18px;
}

.presidential-menu-item.active,
.presidential-menu-item:hover {
  border-color: rgba(218, 170, 88, 0.4);
  background:
    linear-gradient(90deg, rgba(218, 170, 88, 0.28), rgba(13, 14, 14, 0.22)),
    rgba(9, 9, 8, 0.36);
  box-shadow: inset 3px 0 0 #d8a95a;
}

.presidential-menu-item.has-alert::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e34232;
  box-shadow: 0 0 12px rgba(227, 66, 50, 0.75);
}

.presidential-menu-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #d8a95a;
}

.presidential-menu-icon svg {
  width: 25px;
  height: 25px;
}

.presidential-menu-liga {
  width: 34px;
  height: 26px;
  object-fit: contain;
}

.presidential-menu-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.presidential-menu-copy strong,
.presidential-menu-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-menu-copy strong {
  color: #fff8ec;
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.presidential-menu-copy em {
  color: rgba(238, 232, 219, 0.72);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
}

.presidential-beta-notice {
  position: absolute;
  left: 50%;
  bottom: 88px;
  z-index: 18;
  width: min(620px, calc(100vw - 760px));
  min-width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(243, 198, 111, 0.28);
  border-radius: 8px;
  color: rgba(255, 248, 236, 0.78);
  background:
    linear-gradient(90deg, rgba(216, 169, 90, 0.16), rgba(255, 255, 255, 0.035)),
    rgba(6, 7, 7, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.28);
  text-align: center;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.presidential-beta-notice strong {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.presidential-beta-notice span {
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
}

.presidential-quickbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(3, 7, 11, 0.74);
  backdrop-filter: blur(14px);
}

.presidential-quickbar button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(246, 240, 230, 0.78);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.presidential-quickbar button:last-child {
  border-right: 0;
}

.presidential-quickbar svg {
  width: 20px;
  height: 20px;
}

.presidential-news-panel {
  position: absolute;
  top: clamp(96px, 13vh, 156px);
  right: clamp(360px, 24vw, 460px);
  width: min(360px, 24vw);
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(3, 10, 14, 0.56);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.presidential-news-panel span,
.presidential-market-table span,
.presidential-bottom-strip span,
.presidential-summary-card h3,
.presidential-kpis span,
.presidential-next-match > span,
.presidential-finances span {
  color: rgba(255, 249, 238, 0.86);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.presidential-news-panel strong {
  display: block;
  margin: 8px 0 5px;
  color: #fff;
  font-size: 0.96rem;
  line-height: 1.12;
  text-transform: uppercase;
}

.presidential-news-panel em {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(237, 230, 218, 0.74);
  font-size: 0.76rem;
  font-style: normal;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.presidential-news-panel button,
.presidential-market-table header button {
  justify-self: start;
  padding: 8px 12px;
  border: 1px solid rgba(216, 169, 90, 0.32);
  border-radius: 5px;
  background: rgba(216, 169, 90, 0.08);
  color: #f7cc7b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.presidential-market-table {
  position: absolute;
  right: clamp(374px, 25vw, 496px);
  bottom: clamp(130px, 17vh, 190px);
  width: min(360px, 23vw);
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(4, 9, 13, 0.64);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.presidential-market-table header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.presidential-market-table button:not(header button) {
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: transparent;
  text-align: left;
}

.presidential-market-table button:last-child {
  border-bottom: 0;
}

.presidential-market-table .player-avatar-wrap,
.presidential-market-table .player-avatar,
.presidential-market-table .player-avatar-img {
  width: 36px;
  height: 36px;
}

.presidential-market-table strong,
.presidential-market-table em,
.presidential-market-price {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-market-table strong {
  color: #fff;
  font-size: 0.78rem;
}

.presidential-market-table em {
  grid-column: 2;
  color: rgba(235, 229, 217, 0.62);
  font-size: 0.62rem;
  font-style: normal;
}

.presidential-market-price {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: #f5c36a;
  font-size: 0.72rem;
  font-weight: 900;
}

.presidential-right-rail {
  position: absolute;
  top: clamp(24px, 2.6vw, 44px);
  right: clamp(18px, 1.55vw, 30px);
  width: clamp(300px, 20vw, 360px);
  display: grid;
  gap: 16px;
}

.presidential-profile-card,
.presidential-summary-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(3, 9, 13, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(13px);
}

.presidential-profile-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto 58px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.presidential-alert {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.76);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.presidential-alert svg {
  width: 23px;
  height: 23px;
}

.presidential-alert span {
  position: absolute;
  top: -7px;
  right: -3px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #e34232;
  font-size: 0.7rem;
  font-weight: 1000;
}

.presidential-profile-card strong,
.presidential-profile-card em,
.presidential-profile-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-profile-card strong {
  color: #fff;
  font-size: 0.95rem;
}

.presidential-profile-card em {
  color: rgba(236, 229, 218, 0.62);
  font-size: 0.72rem;
  font-style: normal;
}

.presidential-profile-card small {
  margin-top: 2px;
  color: rgba(247, 204, 123, 0.76);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.presidential-profile-card > b {
  color: #fff;
  font-size: 0.86rem;
  font-weight: 1000;
  white-space: nowrap;
}

.presidential-top-crest {
  width: 46px;
  height: 54px;
  object-fit: contain;
}

.presidential-top-crest-button {
  width: 56px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.presidential-top-crest-button:hover,
.presidential-top-crest-button:focus-visible {
  border-color: rgba(247, 204, 123, 0.46);
  background: rgba(247, 204, 123, 0.08);
  outline: none;
}

.presidential-top-crest-button .presidential-top-crest {
  pointer-events: none;
}

.presidential-summary-card {
  padding: 20px 22px 22px;
}

.presidential-store-card {
  min-height: 74px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(216, 169, 90, 0.32);
  border-radius: 7px;
  color: #fff8ec;
  background:
    linear-gradient(135deg, rgba(216, 169, 90, 0.18), rgba(3, 9, 13, 0.64)),
    rgba(3, 9, 13, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 42px rgba(0, 0, 0, 0.26);
  text-align: left;
  backdrop-filter: blur(13px);
}

.presidential-store-card > span {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #f7cc7b;
}

.presidential-store-card.has-alert > span::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e34232;
  box-shadow: 0 0 12px rgba(227, 66, 50, 0.75);
}

.presidential-store-card svg {
  width: 25px;
  height: 25px;
}

.presidential-shop-launcher,
.presidential-ranking-launcher {
  position: relative;
  min-height: 96px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(216, 169, 90, 0.36);
  border-radius: 8px;
  color: #fff8ec;
  text-align: left;
  background: rgba(7, 6, 5, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.3);
  isolation: isolate;
  backdrop-filter: blur(12px);
}

.presidential-shop-launcher::before,
.presidential-ranking-launcher::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(4, 5, 6, 0.84), rgba(4, 5, 6, 0.26) 56%, rgba(4, 5, 6, 0.58)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.64));
}

.presidential-shop-launcher img,
.presidential-ranking-launcher img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  filter: brightness(0.92) saturate(1.08) contrast(1.04);
  transform: scale(1.02);
  transition: transform 0.28s ease, filter 0.28s ease;
}

.presidential-ranking-launcher img {
  object-position: center 42%;
  filter: brightness(0.88) saturate(1.05) contrast(1.04);
}

.presidential-shop-launcher:hover img,
.presidential-ranking-launcher:hover img {
  transform: scale(1.055);
  filter: brightness(0.98) saturate(1.1) contrast(1.04);
}

.presidential-shop-launcher > span,
.presidential-ranking-launcher > span {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243, 198, 111, 0.32);
  border-radius: 8px;
  color: #f3c66f;
  background: rgba(3, 4, 5, 0.62);
}

.presidential-shop-launcher.has-alert > span::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e34232;
  box-shadow: 0 0 12px rgba(227, 66, 50, 0.8);
}

.presidential-shop-launcher svg,
.presidential-ranking-launcher svg {
  width: 24px;
  height: 24px;
}

.presidential-shop-launcher strong,
.presidential-shop-launcher em,
.presidential-ranking-launcher strong,
.presidential-ranking-launcher em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-shop-launcher strong,
.presidential-ranking-launcher strong {
  color: #fff8ec;
  font-size: 0.96rem;
  text-transform: uppercase;
}

.presidential-shop-launcher em,
.presidential-ranking-launcher em {
  color: rgba(243, 198, 111, 0.84);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.presidential-store-hub-backdrop {
  z-index: 1220;
}

.presidential-store-hub-modal {
  position: relative;
  width: min(1040px, calc(100vw - 34px));
  max-height: min(760px, calc(100svh - 34px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(216, 169, 90, 0.28);
  border-radius: 10px;
  color: #f8efe1;
  background:
    radial-gradient(circle at 94% 0%, rgba(243, 198, 111, 0.14), transparent 32%),
    linear-gradient(145deg, rgba(17, 14, 10, 0.98), rgba(4, 5, 6, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.07),
    0 34px 90px rgba(0, 0, 0, 0.58);
}

.presidential-store-hub-modal > .modal-close {
  z-index: 5;
}

.presidential-store-hub-hero {
  position: relative;
  min-height: 142px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(255, 245, 225, 0.1);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.34);
  isolation: isolate;
}

.presidential-store-hub-hero img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  filter: brightness(0.72) saturate(1.05);
}

.presidential-store-hub-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.28) 55%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.68));
}

.presidential-store-hub-hero span,
.presidential-store-hub-heading span {
  color: #f3c66f;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.presidential-store-hub-hero h3 {
  margin: 4px 0 6px;
  color: #fff8ec;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.presidential-store-hub-hero p,
.presidential-store-hub-heading p,
.presidential-store-placeholder p {
  margin: 0;
  color: rgba(255, 248, 236, 0.74);
  font-size: 0.88rem;
  font-weight: 700;
}

.presidential-store-hub-hero b {
  padding: 10px 14px;
  border: 1px solid rgba(243, 198, 111, 0.28);
  border-radius: 8px;
  color: #f3c66f;
  background: rgba(5, 5, 4, 0.72);
  font-size: 0.86rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.presidential-store-hub-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 14px;
}

.presidential-store-hub-sections,
.presidential-store-hub-content {
  min-height: 0;
  overflow: auto;
  border: 1px solid rgba(255, 245, 225, 0.1);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.22);
}

.presidential-store-hub-sections {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
}

.presidential-store-hub-sections button {
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 245, 225, 0.08);
  border-radius: 8px;
  color: rgba(255, 248, 236, 0.82);
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.presidential-store-hub-sections button.active {
  border-color: rgba(243, 198, 111, 0.46);
  color: #fff8ec;
  background: linear-gradient(90deg, rgba(216, 169, 90, 0.2), rgba(255, 255, 255, 0.04));
  box-shadow: inset 3px 0 0 #f3c66f;
}

.presidential-store-hub-sections button.locked {
  opacity: 0.58;
}

.presidential-store-hub-sections button > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #f3c66f;
}

.presidential-store-hub-sections svg {
  width: 23px;
  height: 23px;
}

.presidential-store-hub-sections strong,
.presidential-store-hub-sections em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-store-hub-sections strong {
  color: inherit;
  font-size: 0.84rem;
  text-transform: uppercase;
}

.presidential-store-hub-sections em {
  color: rgba(255, 248, 236, 0.58);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
}

.presidential-store-hub-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.presidential-store-hub-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.presidential-store-hub-heading h4 {
  margin: 2px 0 4px;
  color: #fff8ec;
  font-size: 1.45rem;
  text-transform: uppercase;
}

.presidential-store-crest-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  overflow: auto;
  padding: 2px 6px 8px 2px;
}

.presidential-store-crest-grid .store-shelf-product {
  min-height: 222px;
  grid-template-rows: auto minmax(32px, auto) 108px auto;
  gap: 7px;
  padding: 12px 10px;
}

.presidential-store-crest-grid .store-shelf-product h4 {
  min-height: 34px;
  font-size: 0.88rem;
  line-height: 1.08;
}

.presidential-store-crest-grid .store-product-art {
  height: 108px;
}

.presidential-store-crest-grid .store-product-art.crest-product img {
  height: 68%;
  max-width: 56%;
}

.presidential-store-crest-grid .store-price-btn {
  min-height: 38px;
  font-size: 0.84rem;
}

.presidential-store-placeholder {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1px dashed rgba(243, 198, 111, 0.22);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}

.presidential-store-placeholder > span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243, 198, 111, 0.26);
  border-radius: 14px;
  color: #f3c66f;
  background: rgba(216, 169, 90, 0.09);
}

.presidential-store-placeholder svg {
  width: 34px;
  height: 34px;
}

.presidential-store-placeholder strong {
  color: #fff8ec;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.presidential-coach-event-card {
  position: absolute;
  left: clamp(350px, 25vw, 500px);
  bottom: clamp(94px, 10.5vw, 134px);
  z-index: 5;
  width: min(370px, 30vw);
  min-height: 88px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid rgba(243, 198, 111, 0.68);
  border-radius: 9px;
  color: #fff8ec;
  text-align: left;
  background:
    radial-gradient(circle at 12% 44%, rgba(243, 198, 111, 0.24), transparent 42%),
    linear-gradient(145deg, rgba(44, 30, 14, 0.8), rgba(5, 7, 8, 0.78)),
    rgba(5, 7, 8, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 18px rgba(216, 169, 90, 0.18);
  backdrop-filter: blur(13px);
  cursor: pointer;
  animation: presidentialCoachPulse 1.35s ease-in-out infinite;
}

.presidential-coach-event-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(243, 198, 111, 0.42);
  opacity: 0.6;
  pointer-events: none;
  animation: presidentialCoachRing 1.35s ease-in-out infinite;
}

.presidential-press-event-card {
  bottom: clamp(194px, 18vw, 242px);
  background:
    radial-gradient(circle at 12% 44%, rgba(243, 198, 111, 0.2), transparent 42%),
    radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(35, 26, 17, 0.82), rgba(5, 7, 8, 0.78)),
    rgba(5, 7, 8, 0.72);
}

.presidential-assembly-event-card {
  bottom: clamp(294px, 25vw, 348px);
  width: min(470px, 36vw);
  min-height: 116px;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 20px;
  border-color: rgba(255, 99, 78, 0.88);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 99, 78, 0.14), transparent 24%, rgba(243, 198, 111, 0.1) 68%, transparent),
    radial-gradient(circle at 10% 48%, rgba(255, 99, 78, 0.36), transparent 37%),
    radial-gradient(circle at 86% 18%, rgba(243, 198, 111, 0.22), transparent 36%),
    linear-gradient(145deg, rgba(74, 18, 13, 0.92), rgba(7, 7, 7, 0.86) 58%, rgba(29, 17, 9, 0.88)),
    rgba(5, 7, 8, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 34px rgba(255, 99, 78, 0.1),
    0 24px 58px rgba(0, 0, 0, 0.46),
    0 0 28px rgba(255, 99, 78, 0.32),
    0 0 58px rgba(243, 198, 111, 0.16);
  animation: presidentialAssemblyAlarm 1.15s ease-in-out infinite;
}

.presidential-assembly-event-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0%, transparent 32%, rgba(255, 236, 180, 0.2) 46%, transparent 60%, transparent 100%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: presidentialAssemblySweep 2.4s ease-in-out infinite;
}

.presidential-assembly-event-card::after {
  border-color: rgba(255, 99, 78, 0.72);
  box-shadow:
    0 0 0 1px rgba(243, 198, 111, 0.18),
    0 0 24px rgba(255, 99, 78, 0.42);
  animation: presidentialAssemblyRing 1.15s ease-in-out infinite;
}

.presidential-assembly-event-card > * {
  position: relative;
  z-index: 1;
}

.presidential-assembly-event-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: #ffe5a6;
  background:
    radial-gradient(circle at 45% 35%, rgba(255, 226, 150, 0.24), transparent 52%),
    rgba(255, 99, 78, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(243, 198, 111, 0.32),
    0 0 22px rgba(255, 99, 78, 0.42);
  animation: presidentialAssemblyIconPulse 1.15s ease-in-out infinite;
}

.presidential-assembly-event-icon::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #ff4d3d;
  box-shadow: 0 0 16px rgba(255, 77, 61, 0.95);
  animation: presidentialAssemblyBeacon 0.8s ease-in-out infinite;
}

.presidential-assembly-event-copy {
  min-width: 0;
}

.presidential-assembly-event-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.presidential-assembly-event-topline b {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255, 99, 78, 0.5);
  border-radius: 999px;
  color: #ffd27c;
  background: rgba(255, 99, 78, 0.12);
  font-size: 0.68rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(255, 99, 78, 0.18);
}

.presidential-assembly-event-card .presidential-assembly-event-copy strong {
  margin-top: 4px;
  white-space: normal;
  line-height: 0.95;
  font-size: clamp(1.18rem, 1.55vw, 1.48rem);
  text-shadow:
    0 0 16px rgba(255, 99, 78, 0.36),
    0 1px 0 rgba(0, 0, 0, 0.5);
}

.presidential-assembly-event-card .presidential-assembly-event-copy em {
  margin-top: 4px;
  color: #ffd27c;
  white-space: normal;
  line-height: 1.15;
}

.presidential-assembly-pressure {
  position: relative;
  display: block;
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.presidential-assembly-pressure i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4d3d, #f3c66f);
  box-shadow: 0 0 16px rgba(255, 99, 78, 0.72);
  animation: presidentialAssemblyPressure 0.9s ease-in-out infinite;
}

.presidential-coach-event-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #ffe0a0;
  filter: drop-shadow(0 0 10px rgba(243, 198, 111, 0.45));
}

.presidential-coach-event-icon svg {
  width: 28px;
  height: 28px;
}

.presidential-coach-event-card small,
.presidential-coach-event-card strong,
.presidential-coach-event-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-coach-event-card small {
  color: #f3c66f;
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.presidential-coach-event-card strong {
  margin-top: 2px;
  color: #fff;
  font-size: clamp(1rem, 1.2vw, 1.16rem);
  font-weight: 1000;
  text-transform: uppercase;
}

.presidential-coach-event-card em {
  color: #f3c66f;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.presidential-construction-widget {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 118px;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid rgba(243, 198, 111, 0.34);
  border-radius: 9px;
  color: #fff8ec;
  text-align: left;
  background: rgba(6, 6, 5, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 225, 0.08),
    0 20px 48px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(216, 169, 90, 0.12);
  isolation: isolate;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.presidential-construction-widget video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(1.08) contrast(1.04);
  transform: scale(1.02);
  transition:
    transform 0.28s ease,
    filter 0.28s ease;
}

.presidential-construction-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.78)),
    linear-gradient(90deg, rgba(4, 5, 6, 0.82), rgba(4, 5, 6, 0.22) 58%, rgba(4, 5, 6, 0.62));
}

.presidential-construction-widget:hover video {
  transform: scale(1.055);
  filter: brightness(1.04) saturate(1.12) contrast(1.05);
}

.presidential-construction-glow {
  position: absolute;
  inset: auto 18px 0 18px;
  z-index: -1;
  height: 34%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(243, 198, 111, 0.26), transparent 68%);
  filter: blur(12px);
  opacity: 0.85;
  animation: presidentialConstructionGlow 1.8s ease-in-out infinite;
}

.presidential-construction-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.presidential-construction-copy span,
.presidential-construction-widget small {
  color: #f3c66f;
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.presidential-construction-copy strong {
  overflow: hidden;
  color: #fff8ec;
  font-size: 0.96rem;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.presidential-construction-copy em {
  color: rgba(255, 248, 236, 0.82);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.presidential-construction-copy em b {
  color: #f3c66f;
}

.presidential-construction-copy i {
  position: relative;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 245, 225, 0.16);
}

.presidential-construction-copy i b {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #9f6a2c, #f3c66f);
  box-shadow: 0 0 14px rgba(243, 198, 111, 0.4);
}

.presidential-construction-widget small {
  justify-self: start;
  margin-top: 7px;
  padding: 4px 8px;
  border: 1px solid rgba(243, 198, 111, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
}

@keyframes presidentialConstructionGlow {
  0%,
  100% {
    opacity: 0.52;
    transform: scaleX(0.92);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.04);
  }
}

@keyframes presidentialCoachPulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 18px 42px rgba(0, 0, 0, 0.28),
      0 0 10px rgba(216, 169, 90, 0.14);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 50px rgba(0, 0, 0, 0.34),
      0 0 26px rgba(243, 198, 111, 0.38);
  }
}

@keyframes presidentialCoachRing {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(1);
  }
  50% {
    opacity: 0.86;
    transform: scale(1.018);
  }
}

@keyframes presidentialAssemblyAlarm {
  0%,
  100% {
    transform: translateY(0) scale(1);
    border-color: rgba(255, 99, 78, 0.78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 28px rgba(255, 99, 78, 0.08),
      0 22px 50px rgba(0, 0, 0, 0.42),
      0 0 18px rgba(255, 99, 78, 0.2);
  }
  50% {
    transform: translateY(-2px) scale(1.012);
    border-color: rgba(255, 200, 100, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      inset 0 0 42px rgba(255, 99, 78, 0.16),
      0 28px 62px rgba(0, 0, 0, 0.48),
      0 0 42px rgba(255, 99, 78, 0.48),
      0 0 76px rgba(243, 198, 111, 0.2);
  }
}

@keyframes presidentialAssemblyRing {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(1);
  }
  50% {
    opacity: 0.96;
    transform: scale(1.026);
  }
}

@keyframes presidentialAssemblySweep {
  0%,
  36% {
    transform: translateX(-120%);
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  78%,
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes presidentialAssemblyIconPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 99, 78, 0.35));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255, 99, 78, 0.72));
  }
}

@keyframes presidentialAssemblyBeacon {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(0.86);
  }
  50% {
    opacity: 1;
    transform: scale(1.22);
  }
}

@keyframes presidentialAssemblyPressure {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.45);
  }
}

.presidential-store-card strong,
.presidential-store-card em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-store-card strong {
  font-size: 0.92rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.presidential-store-card em {
  color: rgba(238, 232, 219, 0.7);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 800;
}

.presidential-summary-card h3 {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.92rem;
}

.presidential-kpis {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 18px;
  margin-bottom: 20px;
}

.presidential-kpis article {
  min-width: 0;
}

.presidential-kpis strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: clamp(1.45rem, 3vw, 3rem);
  font-weight: 400;
}

.presidential-kpis em {
  color: rgba(236, 229, 218, 0.7);
  font-size: 0.7rem;
  font-style: normal;
  text-transform: uppercase;
}

.presidential-kpis i {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  margin-right: 4px;
  border-radius: 50%;
  color: #06100b;
  background: #10b674;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 1000;
}

.presidential-kpis i.E {
  background: #d9a335;
}

.presidential-kpis i.D {
  background: #c83a32;
  color: #fff;
}

.presidential-next-match {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.presidential-next-match div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.presidential-match-crest {
  justify-self: center;
  width: 54px;
  height: 64px;
  object-fit: contain;
}

.match-ai-crest.presidential-match-crest {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  font-weight: 900;
}

.presidential-next-match b {
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.presidential-next-match em {
  color: rgba(236, 229, 218, 0.66);
  font-size: 0.72rem;
  font-style: normal;
  text-align: right;
  text-transform: uppercase;
}

.presidential-match-deadline {
  display: block;
  margin-top: -4px;
  color: #f3c66f;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: right;
}

.presidential-next-play {
  justify-self: stretch;
  min-height: 34px;
  border: 1px solid rgba(255, 214, 104, 0.72);
  border-radius: 7px;
  background: linear-gradient(180deg, #ffd66a, #eaa51f);
  color: #160f04;
  font-size: 0.72rem;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
}

.presidential-finances {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 98px;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
}

.presidential-finances strong,
.presidential-finances em {
  display: block;
}

.presidential-finances strong {
  margin: 7px 0 10px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 500;
}

.presidential-finances em {
  margin-top: 5px;
  color: rgba(236, 229, 218, 0.7);
  font-size: 0.76rem;
  font-style: normal;
}

.presidential-finances i {
  width: 88px;
  height: 88px;
  display: block;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(3, 9, 13, 1) 0 43%, transparent 45%),
    conic-gradient(#188f62 0 calc(var(--budget) * 1%), #d6a33b 0 calc((var(--budget) + var(--income)) * 1%), #b93732 0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.presidential-bottom-strip {
  position: absolute;
  left: clamp(16px, 1.55vw, 30px);
  right: clamp(18px, 1.55vw, 30px);
  bottom: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.4vw, 24px);
  padding: 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(3, 7, 10, 0.72);
  backdrop-filter: blur(14px);
}

.presidential-bottom-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 0.88fr 1.22fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(2, 5, 8, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 245, 225, 0.06);
}

.presidential-bottom-actions button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(246, 240, 230, 0.82);
  background: transparent;
  font-size: 0.76rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.presidential-bottom-actions button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-bottom-actions button:last-child {
  border-right: 0;
}

.presidential-bottom-actions svg {
  width: 20px;
  height: 20px;
}

.presidential-bottom-strip section {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(76px, 1fr));
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
}

.presidential-pulse-metric {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.presidential-pulse-metric span,
.presidential-pulse-metric strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-pulse-metric span {
  color: rgba(255, 249, 238, 0.72);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.presidential-pulse-metric strong {
  color: #fff8ec;
  font-size: 0.9rem;
  font-weight: 1000;
}

.presidential-pulse-metric i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.presidential-pulse-metric b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #b88435, #f3c66f);
  box-shadow: 0 0 14px rgba(243, 198, 111, 0.22);
}

.presidential-bottom-strip > button {
  min-width: 0;
  overflow: hidden;
  padding: 0 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 249, 238, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presidential-bottom-strip div {
  display: flex;
  align-items: center;
  gap: 18px;
  color: rgba(255, 249, 238, 0.68);
  font-size: 0.76rem;
}

.presidential-bottom-strip strong,
.presidential-bottom-strip em {
  color: rgba(255, 249, 238, 0.78);
  font-style: normal;
  font-weight: 700;
}

@media (min-width: 1024px) and (min-height: 520px) {
  .presidential-sidebar {
    bottom: 74px;
    gap: 10px;
  }

  .presidential-ranking-launcher {
    min-height: 78px;
    max-height: 86px;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .presidential-ranking-launcher > span {
    width: 34px;
    height: 34px;
  }

  .presidential-ranking-launcher svg {
    width: 20px;
    height: 20px;
  }

  .presidential-ranking-launcher strong {
    font-size: 0.78rem;
  }

  .presidential-ranking-launcher em {
    font-size: 0.58rem;
  }

  .presidential-bottom-strip {
    box-sizing: border-box;
    min-height: 0;
    height: 58px;
    gap: 14px;
    padding: 6px 16px;
  }

  .presidential-bottom-actions {
    min-width: 228px;
  }

  .presidential-bottom-actions button {
    min-height: 38px;
    gap: 7px;
    font-size: 0.66rem;
  }

  .presidential-bottom-actions svg {
    width: 17px;
    height: 17px;
  }

  .presidential-bottom-strip section {
    grid-template-columns: repeat(6, minmax(72px, 1fr));
    gap: 9px;
  }

  .presidential-pulse-metric {
    gap: 3px;
    padding: 0 10px;
  }

  .presidential-pulse-metric span,
  .presidential-bottom-strip div {
    font-size: 0.58rem;
  }

  .presidential-pulse-metric strong,
  .presidential-bottom-strip strong,
  .presidential-bottom-strip em {
    font-size: 0.7rem;
  }
}

@media (max-width: 1240px) {
  .presidential-news-panel,
  .presidential-market-table {
    display: none;
  }

  .presidential-sidebar {
    width: 292px;
  }

  .presidential-bottom-strip {
    left: clamp(16px, 1.55vw, 30px);
  }

  .presidential-coach-event-card {
    left: 334px;
    width: min(350px, calc(100vw - 660px));
  }

  .presidential-press-event-card {
    bottom: clamp(190px, 17vw, 230px);
  }

  .presidential-assembly-event-card {
    width: min(420px, calc(100vw - 660px));
    bottom: clamp(292px, 25vw, 340px);
  }
}

@media (max-width: 900px) {
  .presidential-home {
    min-height: 100svh;
    overflow: auto;
  }

  .presidential-sidebar,
  .presidential-right-rail,
  .presidential-coach-event-card,
  .presidential-bottom-strip {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    margin: 16px;
  }

  .presidential-coach-event-card {
    min-height: 84px;
    order: 2;
  }

  .presidential-press-event-card {
    order: 3;
  }

  .presidential-sidebar {
    height: auto;
    max-height: none;
  }

  .presidential-menu {
    max-height: 52svh;
  }

  .presidential-bottom-strip,
  .presidential-bottom-strip section {
    grid-template-columns: 1fr;
  }

  .presidential-bottom-actions {
    min-width: 0;
    width: 100%;
  }
}

/* Mobile presidential pass: clean vertical layout and section panels. */
@media (max-width: 900px) {
  html,
  body,
  #app,
  .app-shell {
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .mobile-landscape-prompt {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-home-active,
  .game.pcm-premium-shell.presidential-subview-active {
    min-height: 100dvh;
    overflow: auto;
  }

  .game.pcm-premium-shell.presidential-home-active .content,
  .game.pcm-premium-shell.presidential-subview-active .content,
  .game.pcm-premium-shell.presidential-home-active .main-stage,
  .game.pcm-premium-shell.presidential-subview-active .main-stage {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .game.pcm-premium-shell.presidential-subview-active .main-stage {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .presidential-home {
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .presidential-home-video {
    position: fixed;
    filter: brightness(1.02) saturate(1.04) contrast(1.02);
    transform: scale(1.02);
  }

  .presidential-home-shade {
    position: fixed;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.14) 26%, rgba(0, 0, 0, 0.84)),
      linear-gradient(90deg, rgba(2, 3, 4, 0.54), rgba(2, 3, 4, 0.18), rgba(2, 3, 4, 0.54));
  }

  .presidential-customize-btn {
    position: relative;
    top: auto;
    left: auto;
    order: 0;
    width: 100%;
    min-height: 38px;
    justify-content: center;
    align-self: stretch;
    transform: none;
    margin: 3px 0 0;
    padding: 0 14px;
    font-size: 0.75rem;
  }

  .presidential-sidebar,
  .presidential-right-rail,
  .presidential-bottom-strip,
  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .presidential-sidebar {
    order: 1;
    height: auto;
    max-height: none;
    padding: 10px;
    border-radius: 9px;
    background: rgba(8, 8, 7, 0.62);
  }

  .presidential-brand {
    width: min(250px, 58vw);
    margin: 0 auto 10px;
  }

  .presidential-brand img {
    max-height: 82px;
    object-fit: contain;
  }

  .presidential-menu {
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding-right: 0;
  }

  .presidential-menu-item,
  .presidential-competition-menu > summary.presidential-menu-item {
    min-height: 58px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    padding: 8px 10px;
    border-radius: 8px;
  }

  .presidential-menu-icon {
    width: 30px;
    height: 30px;
  }

  .presidential-menu-icon svg {
    width: 18px;
    height: 18px;
  }

  .presidential-menu-copy strong {
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .presidential-menu-copy em {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .presidential-competition-menu {
    grid-column: 1 / -1;
  }

  .presidential-submenu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 8px 0 0;
  }

  .presidential-submenu button {
    min-height: 38px;
    border-radius: 7px;
    font-size: 0.7rem;
  }

  .presidential-quickbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
    border-radius: 8px;
  }

  .presidential-quickbar button {
    min-height: 42px;
    font-size: 0.66rem;
  }

  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card {
    order: 2;
    min-height: 72px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px;
    border-radius: 9px;
  }

  .presidential-right-rail {
    order: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .presidential-profile-card,
  .presidential-summary-card,
  .presidential-store-card,
  .presidential-shop-launcher,
  .presidential-ranking-launcher {
    border-radius: 9px;
  }

  .presidential-profile-card {
    min-height: 74px;
    grid-template-columns: 36px minmax(0, 1fr) auto 54px;
    padding: 10px;
  }

  .presidential-summary-card {
    padding: 12px;
  }

  .presidential-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .presidential-next-match,
  .presidential-finances {
    padding: 10px 0;
  }

  .presidential-store-card,
  .presidential-shop-launcher,
  .presidential-ranking-launcher {
    min-height: 62px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 10px;
  }

  .presidential-shop-launcher,
  .presidential-ranking-launcher {
    min-height: 78px;
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 12px;
  }

  .presidential-store-hub-modal {
    display: block !important;
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    overflow-y: auto !important;
    padding: 10px;
  }

  .presidential-store-hub-hero {
    min-height: 118px;
    grid-template-columns: 1fr;
    align-items: end;
    padding: 14px;
  }

  .presidential-store-hub-hero h3 {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .presidential-store-hub-hero b {
    justify-self: start;
  }

  .presidential-store-hub-grid {
    display: block !important;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px;
  }

  .presidential-store-hub-sections {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    max-height: none !important;
    margin: 12px 0;
  }

  .presidential-store-hub-sections button {
    min-height: 56px;
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .presidential-store-hub-content {
    position: relative;
    z-index: 1;
    overflow: visible;
    margin-top: 0;
  }

  .presidential-store-hub-heading {
    display: grid;
  }

  .presidential-store-crest-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .presidential-bottom-strip {
    order: 4;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border-radius: 9px;
    background: rgba(6, 6, 6, 0.7);
  }

  .presidential-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
  }

  .presidential-bottom-actions button {
    min-height: 44px;
    font-size: 0.68rem;
  }

  .presidential-settings-row,
  .presidential-settings-toggle,
  .presidential-settings-select {
    grid-template-columns: 1fr;
  }

  .presidential-settings-select select {
    width: 100%;
  }

  .presidential-pulse-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .presidential-pulse-strip > span {
    grid-column: 1 / -1;
  }

  .presidential-pulse-metric {
    min-width: 0;
  }

  .presidential-pulse-metric span,
  .presidential-pulse-metric strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .presidential-floating-view {
    min-height: auto;
    gap: 8px;
  }

  .presidential-back-btn {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 20;
    min-height: 40px;
    width: fit-content;
    max-width: 100%;
    border-radius: 8px;
  }

  .presidential-floating-body {
    overflow: visible;
    padding: 8px;
    border-radius: 9px;
    background:
      linear-gradient(180deg, rgba(18, 14, 10, 0.78), rgba(4, 5, 5, 0.84)),
      rgba(7, 7, 6, 0.78);
  }

  .game.pcm-premium-shell.presidential-subview-active .market-page,
  .game.pcm-premium-shell.presidential-subview-active .finance-page,
  .game.pcm-premium-shell.presidential-subview-active .store-page,
  .game.pcm-premium-shell.presidential-subview-active .missions-page,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-page,
  .game.pcm-premium-shell.presidential-subview-active .continental-cup-page,
  .game.pcm-premium-shell.presidential-subview-active .league-page,
  .game.pcm-premium-shell.presidential-subview-active .ranking-page,
  .game.pcm-premium-shell.presidential-subview-active .squad-page,
  .game.pcm-premium-shell.presidential-subview-active .calendar-page {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .panel,
  .game.pcm-premium-shell.presidential-subview-active .finance-kpi,
  .game.pcm-premium-shell.presidential-subview-active .finance-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-hero-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-recent-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-objectives-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-search-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-list-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-hero,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-card,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-round,
  .game.pcm-premium-shell.presidential-subview-active .continental-cup-hero,
  .game.pcm-premium-shell.presidential-subview-active .stadium-cinematic-screen {
    border-radius: 9px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-coach-panel,
  .game.pcm-premium-shell.presidential-subview-active .finance-hero,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-hero,
  .game.pcm-premium-shell.presidential-subview-active .continental-cup-hero {
    min-height: auto !important;
    padding: 14px !important;
    background-position: center right !important;
  }

  .game.pcm-premium-shell.presidential-subview-active h1,
  .game.pcm-premium-shell.presidential-subview-active h2 {
    font-size: clamp(1.45rem, 8vw, 2.25rem) !important;
    line-height: 1.02 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active h3 {
    font-size: clamp(1rem, 5vw, 1.28rem) !important;
    line-height: 1.12 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active p,
  .game.pcm-premium-shell.presidential-subview-active em,
  .game.pcm-premium-shell.presidential-subview-active span {
    overflow-wrap: anywhere;
  }

  .stadium-cinematic-screen {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    grid-template-rows: auto auto auto auto;
    padding: 10px;
  }

  .stadium-cinematic-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .stadium-cinematic-header aside {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    text-align: left;
  }

  .stadium-cinematic-header aside .stadium-test-credits-btn {
    grid-row: 1 / span 2;
    grid-column: 2;
    width: auto;
    min-width: 136px;
    margin-top: 0;
  }

  .stadium-cinematic-layout {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .stadium-feature-card {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .stadium-control-panel {
    overflow: visible;
  }

  .stadium-ticket-editor {
    grid-template-columns: 1fr;
  }

  .stadium-lower-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .stadium-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stadium-mini-facility {
    min-height: 86px;
  }
}

@media (max-width: 430px) {
  .presidential-menu {
    grid-template-columns: 1fr;
  }

  .presidential-submenu,
  .presidential-quickbar,
  .presidential-pulse-strip,
  .presidential-kpis,
  .stadium-stat-grid,
  .stadium-mini-grid {
    grid-template-columns: 1fr;
  }

  .presidential-profile-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .presidential-profile-card .presidential-top-crest {
    display: none;
  }

  .stadium-cinematic-header aside {
    grid-template-columns: 1fr;
  }

  .stadium-cinematic-header aside .stadium-test-credits-btn {
    grid-row: auto;
    grid-column: auto;
    width: 100%;
  }
}

/* iPhone/Safari landscape rescue: the browser chrome leaves a short viewport,
   so the presidential desktop absolute layout must become a compact document flow. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  html,
  body,
  #app,
  .app-shell,
  .game.pcm-premium-shell.presidential-home-active {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100%;
  }

  .game.pcm-premium-shell.presidential-home-active .content,
  .game.pcm-premium-shell.presidential-home-active .main-stage {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .presidential-home {
    height: auto !important;
    min-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 0.86fr) minmax(360px, 1.14fr);
    align-items: start;
    gap: 8px;
    overflow: visible !important;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .presidential-home-video,
  .presidential-home-shade {
    position: fixed !important;
  }

  .presidential-home-video {
    filter: brightness(1.08) saturate(1.08) contrast(1.02);
    transform: scale(1.012);
  }

  .presidential-home-shade {
    background:
      linear-gradient(90deg, rgba(1, 3, 6, 0.58), rgba(1, 3, 6, 0.18) 48%, rgba(1, 3, 6, 0.64)),
      linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.08) 34%, rgba(0, 0, 0, 0.72));
  }

  .presidential-customize-btn {
    position: relative !important;
    top: auto;
    left: auto;
    z-index: 20;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 7px;
    font-size: 0.66rem;
    transform: none;
  }

  .presidential-sidebar,
  .presidential-right-rail,
  .presidential-bottom-strip,
  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card,
  .presidential-construction-widget {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .presidential-sidebar {
    grid-column: 1;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 7px;
    height: auto !important;
    max-height: none !important;
    padding: 8px;
    border: 1px solid rgba(243, 198, 111, 0.16);
    border-radius: 9px;
    background: rgba(5, 7, 8, 0.64);
    backdrop-filter: blur(12px);
  }

  .presidential-brand {
    width: min(172px, 42vw);
    margin: 0;
  }

  .presidential-brand img {
    max-height: 58px;
    width: 100%;
  }

  .presidential-menu {
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    overflow: visible !important;
    padding: 0;
  }

  .presidential-menu-item,
  .presidential-competition-menu > summary.presidential-menu-item {
    min-height: 42px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px;
    border-radius: 7px;
  }

  .presidential-menu-icon {
    width: 23px;
    height: 23px;
  }

  .presidential-menu-icon svg,
  .presidential-submenu svg {
    width: 15px;
    height: 15px;
  }

  .presidential-menu-copy strong {
    font-size: 0.61rem;
    line-height: 1;
  }

  .presidential-menu-copy em {
    display: block;
    font-size: 0.48rem;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .presidential-competition-menu {
    grid-column: 1 / -1;
  }

  .presidential-submenu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px 0 0;
  }

  .presidential-submenu button {
    min-height: 30px;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px;
    padding: 4px 6px;
    font-size: 0.52rem;
  }

  .presidential-quickbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .presidential-quickbar button {
    min-height: 36px;
    gap: 5px;
    font-size: 0.55rem;
  }

  .presidential-quickbar svg {
    width: 16px;
    height: 16px;
  }

  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card {
    grid-column: 1;
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    border-radius: 9px;
  }

  .presidential-construction-widget {
    min-height: 112px;
    padding: 10px;
    border-radius: 9px;
  }

  .presidential-construction-copy strong {
    font-size: 0.88rem;
  }

  .presidential-construction-copy em {
    font-size: 0.62rem;
  }

  .presidential-coach-event-icon {
    width: 34px;
    height: 34px;
  }

  .presidential-coach-event-icon svg {
    width: 22px;
    height: 22px;
  }

  .presidential-coach-event-card small {
    font-size: 0.52rem;
  }

  .presidential-coach-event-card strong {
    font-size: 0.78rem;
  }

  .presidential-coach-event-card em {
    font-size: 0.56rem;
  }

  .presidential-right-rail {
    grid-column: 2;
    grid-row: 1 / span 5;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .presidential-profile-card {
    grid-column: 1 / -1;
    min-height: 58px;
    grid-template-columns: 32px minmax(0, 1fr) auto 42px;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
  }

  .presidential-alert {
    width: 30px;
    height: 30px;
  }

  .presidential-alert svg {
    width: 19px;
    height: 19px;
  }

  .presidential-alert span {
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    font-size: 0.58rem;
  }

  .presidential-profile-card strong {
    font-size: 0.78rem;
  }

  .presidential-profile-card em,
  .presidential-profile-card small {
    font-size: 0.56rem;
  }

  .presidential-profile-card > b {
    font-size: 0.7rem;
  }

  .presidential-top-crest {
    width: 36px;
    height: 42px;
  }

  .presidential-summary-card {
    grid-column: 1 / -1;
    padding: 11px;
    border-radius: 9px;
  }

  .presidential-summary-card h3 {
    margin-bottom: 9px;
    padding-bottom: 8px;
    font-size: 0.75rem;
  }

  .presidential-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 9px;
  }

  .presidential-kpis strong {
    margin-top: 4px;
    font-size: 1.15rem;
  }

  .presidential-kpis span,
  .presidential-kpis em,
  .presidential-next-match > span,
  .presidential-finances span,
  .presidential-finances em {
    font-size: 0.56rem;
  }

  .presidential-next-match {
    gap: 6px;
    padding: 8px 0;
  }

  .presidential-next-match div {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 6px;
  }

  .presidential-match-crest {
    width: 38px;
    height: 44px;
  }

  .presidential-next-match b {
    font-size: 0.74rem;
  }

  .presidential-finances {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px;
    padding-top: 8px;
  }

  .presidential-finances strong {
    margin: 4px 0;
    font-size: 0.86rem;
  }

  .presidential-finances i {
    width: 56px;
    height: 56px;
  }

  .presidential-store-card,
  .presidential-shop-launcher,
  .presidential-ranking-launcher {
    min-height: 50px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    border-radius: 9px;
  }

  .presidential-shop-launcher,
  .presidential-ranking-launcher {
    min-height: 64px;
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .presidential-store-card strong,
  .presidential-shop-launcher strong,
  .presidential-ranking-launcher strong {
    font-size: 0.66rem;
  }

  .presidential-store-card em,
  .presidential-shop-launcher em,
  .presidential-ranking-launcher em {
    font-size: 0.52rem;
  }

  .presidential-store-card svg,
  .presidential-shop-launcher svg,
  .presidential-ranking-launcher svg {
    width: 18px;
    height: 18px;
  }

  .presidential-bottom-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(3, 6, 8, 0.78);
    backdrop-filter: blur(12px);
  }

  .presidential-bottom-actions {
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .presidential-bottom-actions button {
    min-height: 36px;
    gap: 5px;
    font-size: 0.55rem;
  }

  .presidential-bottom-actions svg {
    width: 16px;
    height: 16px;
  }

  .presidential-bottom-strip section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .presidential-pulse-strip > span {
    grid-column: 1 / -1;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .presidential-pulse-metric {
    padding: 0;
    border-left: 0;
    gap: 3px;
  }

  .presidential-pulse-metric span {
    font-size: 0.52rem;
  }

  .presidential-pulse-metric strong {
    font-size: 0.72rem;
  }

  .presidential-pulse-metric i {
    height: 4px;
  }

  .presidential-bottom-strip div {
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    font-size: 0.56rem;
  }

  .presidential-bottom-strip div span {
    max-width: min(64vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) and (max-width: 760px) {
  .presidential-home {
    grid-template-columns: 1fr;
  }

  .presidential-right-rail,
  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card,
  .presidential-bottom-strip {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  .game.pcm-premium-shell.presidential-home-active,
  .game.pcm-premium-shell.presidential-home-active .content,
  .game.pcm-premium-shell.presidential-home-active .main-stage {
    height: 100dvh !important;
    min-height: 360px !important;
    overflow: hidden !important;
  }

  .presidential-home {
    height: 100dvh !important;
    min-height: 360px !important;
    grid-template-columns: minmax(212px, 0.74fr) minmax(270px, 0.88fr) minmax(250px, 0.78fr) !important;
    grid-template-rows: minmax(0, 1fr) 48px !important;
    gap: 6px !important;
    padding:
      max(5px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      max(5px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
  }

  .presidential-sidebar {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    gap: 5px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  .presidential-brand img {
    max-height: 42px !important;
  }

  .presidential-menu {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .presidential-menu-item,
  .presidential-competition-menu > summary.presidential-menu-item {
    min-height: 29px !important;
    grid-template-columns: 21px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 4px 6px !important;
  }

  .presidential-menu-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .presidential-menu-icon svg,
  .presidential-submenu svg {
    width: 13px !important;
    height: 13px !important;
  }

  .presidential-menu-copy strong {
    font-size: 0.52rem !important;
  }

  .presidential-menu-copy em {
    display: none !important;
  }

  .presidential-competition-menu > summary::after {
    right: 6px !important;
    font-size: 0.7rem !important;
  }

  .presidential-submenu {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px 0 0 !important;
  }

  .presidential-submenu button {
    min-height: 24px !important;
    grid-template-columns: 13px minmax(0, 1fr) !important;
    gap: 3px !important;
    padding: 3px 4px !important;
    font-size: 0.46rem !important;
  }

  .presidential-ranking-launcher,
  .presidential-customize-btn {
    min-height: 34px !important;
    border-radius: 7px !important;
    font-size: 0.55rem !important;
  }

  .presidential-ranking-launcher {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .presidential-ranking-launcher strong,
  .presidential-ranking-launcher em {
    font-size: 0.54rem !important;
  }

  .presidential-customize-btn {
    padding: 0 8px !important;
  }

  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card {
    grid-column: 2 !important;
    grid-row: auto !important;
    min-height: 52px !important;
    align-self: start !important;
  }

  .presidential-right-rail {
    grid-column: 3 !important;
    grid-row: 1 !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .presidential-profile-card {
    min-height: 42px !important;
    grid-template-columns: 26px minmax(0, 1fr) auto 30px !important;
    gap: 5px !important;
    padding: 6px 7px !important;
  }

  .presidential-profile-card strong,
  .presidential-profile-card > b {
    font-size: 0.62rem !important;
  }

  .presidential-profile-card em,
  .presidential-profile-card small {
    font-size: 0.48rem !important;
  }

  .presidential-top-crest {
    width: 28px !important;
    height: 34px !important;
  }

  .presidential-summary-card {
    max-height: 168px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .presidential-summary-card h3 {
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
    font-size: 0.62rem !important;
  }

  .presidential-kpis,
  .presidential-next-match,
  .presidential-finances {
    margin-bottom: 5px !important;
    padding: 5px 0 !important;
  }

  .presidential-kpis strong {
    font-size: 0.92rem !important;
  }

  .presidential-match-crest {
    width: 28px !important;
    height: 34px !important;
  }

  .presidential-next-match div {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) !important;
  }

  .presidential-finances {
    grid-template-columns: minmax(0, 1fr) 42px !important;
  }

  .presidential-finances em,
  .presidential-next-match em {
    display: none !important;
  }

  .presidential-finances i {
    width: 40px !important;
    height: 40px !important;
  }

  .presidential-construction-widget {
    min-height: 58px !important;
    padding: 7px !important;
    border-radius: 8px !important;
  }

  .presidential-construction-copy strong {
    font-size: 0.66rem !important;
  }

  .presidential-construction-copy em {
    font-size: 0.5rem !important;
  }

  .presidential-shop-launcher,
  .presidential-store-card {
    min-height: 44px !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .presidential-shop-launcher strong,
  .presidential-store-card strong {
    font-size: 0.58rem !important;
  }

  .presidential-shop-launcher em,
  .presidential-store-card em {
    font-size: 0.48rem !important;
  }

  .presidential-bottom-strip {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    height: 48px !important;
    min-height: 48px !important;
    grid-template-columns: 150px minmax(0, 1fr) minmax(150px, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 8px !important;
    overflow: hidden !important;
  }

  .presidential-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .presidential-bottom-actions button {
    min-height: 32px !important;
    font-size: 0.5rem !important;
  }

  .presidential-bottom-strip section {
    grid-template-columns: repeat(6, minmax(48px, 1fr)) !important;
    gap: 5px !important;
  }

  .presidential-pulse-strip > span {
    display: none !important;
  }

  .presidential-pulse-metric span {
    max-width: 100%;
    font-size: 0.43rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .presidential-pulse-metric strong {
    font-size: 0.58rem !important;
  }

  .presidential-bottom-strip div {
    font-size: 0.48rem !important;
    justify-content: end !important;
  }

  .presidential-bottom-strip div span {
    max-width: 118px !important;
  }

  .game.match-broadcast-active .content,
  .game.match-broadcast-active .main-stage,
  .match-broadcast-screen.match-broadcast-live {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  .match-tv-scoreboard {
    top: max(7px, env(safe-area-inset-top)) !important;
    left: max(7px, env(safe-area-inset-left)) !important;
    width: min(360px, calc(100vw - 14px)) !important;
    padding: 0 24px !important;
  }

  .match-event-panel {
    display: none !important;
  }

  .match-player-spotlight {
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(44px, env(safe-area-inset-bottom)) !important;
    transform: scale(0.82) !important;
    transform-origin: right bottom !important;
  }

  .match-broadcast-footer {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

.transfer-negotiation-cinematic {
  position: fixed;
  inset: 0;
  z-index: 260;
  isolation: isolate;
  overflow: hidden;
  color: #fff7e8;
  background: #020202;
}

.transfer-negotiation-video,
.transfer-negotiation-vignette {
  position: absolute;
  inset: 0;
}

.transfer-negotiation-video {
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1.08) saturate(1.08) contrast(1.04);
  transition: opacity 0.24s ease, filter 0.24s ease;
}

.transfer-negotiation-video.is-loading {
  opacity: 0;
  filter: blur(8px) brightness(0.6);
}

.transfer-negotiation-vignette {
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.12) 42%, rgba(0, 0, 0, 0.72)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.04) 35%, rgba(0, 0, 0, 0.8));
}

.transfer-negotiation-topbar {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(22px, env(safe-area-inset-left));
  right: max(22px, env(safe-area-inset-right));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(243, 198, 111, 0.24);
  border-radius: 9px;
  background: rgba(5, 5, 4, 0.46);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.transfer-negotiation-topbar span,
.negotiation-offer-panel header span,
.transfer-negotiation-subtitles span {
  color: #f3c66f;
  font-size: 0.68rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.transfer-negotiation-topbar strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.transfer-negotiation-topbar button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: rgba(255, 248, 236, 0.82);
  background: rgba(0, 0, 0, 0.34);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.transfer-negotiation-subtitles {
  position: absolute;
  left: max(32px, env(safe-area-inset-left));
  bottom: max(34px, env(safe-area-inset-bottom));
  width: min(820px, calc(100vw - 560px));
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px 22px;
  border-left: 3px solid #f3c66f;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0));
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

.transfer-negotiation-subtitles p {
  max-width: 780px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.2rem, 2.2vw, 2.05rem);
  font-weight: 1000;
  line-height: 1.08;
}

.negotiation-offer-panel {
  position: absolute;
  top: max(92px, calc(env(safe-area-inset-top) + 74px));
  right: max(26px, env(safe-area-inset-right));
  bottom: max(26px, env(safe-area-inset-bottom));
  width: min(470px, 34vw);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(243, 198, 111, 0.24);
  border-radius: 10px;
  background:
    radial-gradient(circle at 96% 0%, rgba(243, 198, 111, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(18, 15, 10, 0.86), rgba(2, 3, 4, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 34px 90px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  animation: negotiationPanelIn 0.38s cubic-bezier(0.22, 0.8, 0.26, 1) both;
}

.negotiation-offer-panel h3 {
  margin: 4px 0;
  color: #fff;
  font-size: 1.32rem;
  line-height: 1;
  text-transform: uppercase;
}

.negotiation-offer-panel p {
  margin: 0;
  color: rgba(255, 248, 236, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.negotiation-player-strip {
  min-height: 72px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.negotiation-player-strip .player-avatar-wrap,
.negotiation-player-strip .player-avatar,
.negotiation-player-strip .player-avatar-img {
  width: 48px;
  height: 48px;
}

.negotiation-player-strip div {
  min-width: 0;
}

.negotiation-player-strip strong,
.negotiation-player-strip em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.negotiation-player-strip strong {
  color: #f3c66f;
  font-size: 1rem;
}

.negotiation-player-strip em {
  color: rgba(255, 248, 236, 0.66);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
}

.negotiation-player-strip > b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243, 198, 111, 0.48);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 50% 35%, rgba(243, 198, 111, 0.32), rgba(24, 16, 8, 0.95));
  box-shadow: 0 0 18px rgba(243, 198, 111, 0.22);
  font-size: 1rem;
}

.negotiation-slider-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: auto;
  padding-right: 3px;
}

.negotiation-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 44px;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.negotiation-slider-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.negotiation-slider-row strong,
.negotiation-slider-row em,
.negotiation-slider-row i {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.negotiation-slider-row strong {
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.negotiation-slider-row em {
  color: rgba(255, 248, 236, 0.58);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.negotiation-slider-row input {
  width: 100%;
  accent-color: #f3c66f;
}

.negotiation-slider-row b {
  color: #f3c66f;
  font-size: 0.74rem;
  text-align: right;
}

.negotiation-slider-row i {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 1.08rem;
  font-style: normal;
  font-weight: 1000;
}

.negotiation-panel-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.negotiation-panel-footer.has-counter {
  grid-template-columns: 0.95fr 1.1fr 1.05fr;
}

.negotiation-panel-footer small,
.negotiation-panel-footer em {
  grid-column: 1 / -1;
  color: rgba(255, 248, 236, 0.66);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

.negotiation-panel-footer em,
.negotiation-panel-footer .negotiation-budget-warning {
  color: #ff9d7d;
}

.negotiation-panel-footer button {
  min-height: 42px;
  border-radius: 7px;
  font-size: 0.76rem;
}

.negotiation-panel-footer .is-counter-accept {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 0 22px rgba(243, 198, 111, 0.22);
}

@keyframes negotiationPanelIn {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@media (max-width: 980px), (max-height: 620px) {
  .transfer-negotiation-topbar {
    top: max(8px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    min-height: 40px;
    padding: 7px 8px;
  }

  .transfer-negotiation-topbar span {
    display: none;
  }

  .transfer-negotiation-topbar strong {
    font-size: 0.74rem;
  }

  .transfer-negotiation-topbar button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.58rem;
  }

  .transfer-negotiation-subtitles {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    min-height: 62px;
    padding: 10px 12px;
  }

  .transfer-negotiation-subtitles p {
    font-size: clamp(0.9rem, 3.2vw, 1.35rem);
  }

  .negotiation-offer-panel {
    top: max(54px, calc(env(safe-area-inset-top) + 48px));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(88px, env(safe-area-inset-bottom));
    width: min(430px, 44vw);
    gap: 7px;
    padding: 10px;
  }

  .negotiation-offer-panel h3 {
    font-size: 0.95rem;
  }

  .negotiation-offer-panel p,
  .negotiation-offer-panel header span {
    font-size: 0.58rem;
  }

  .negotiation-player-strip {
    min-height: 50px;
    grid-template-columns: 38px minmax(0, 1fr) 36px;
    gap: 8px;
    padding: 7px;
  }

  .negotiation-player-strip .player-avatar-wrap,
  .negotiation-player-strip .player-avatar,
  .negotiation-player-strip .player-avatar-img {
    width: 36px;
    height: 36px;
  }

  .negotiation-player-strip strong {
    font-size: 0.76rem;
  }

  .negotiation-player-strip em {
    font-size: 0.54rem;
  }

  .negotiation-player-strip > b {
    width: 34px;
    height: 34px;
    font-size: 0.76rem;
  }

  .negotiation-slider-list {
    gap: 6px;
  }

  .negotiation-slider-row {
    grid-template-columns: minmax(0, 1fr) 86px 36px;
    gap: 6px;
    padding: 7px;
  }

  .negotiation-slider-row strong {
    font-size: 0.62rem;
  }

  .negotiation-slider-row em {
    font-size: 0.5rem;
  }

  .negotiation-slider-row b {
    font-size: 0.58rem;
  }

  .negotiation-slider-row i {
    font-size: 0.78rem;
  }

  .negotiation-panel-footer {
    gap: 6px;
  }

  .negotiation-panel-footer.has-counter {
    grid-template-columns: 1fr;
  }

  .negotiation-panel-footer small,
  .negotiation-panel-footer em {
    font-size: 0.5rem;
  }

  .negotiation-panel-footer button {
    min-height: 34px;
    font-size: 0.58rem;
  }
}

@media (max-width: 720px) {
  .negotiation-offer-panel {
    left: max(8px, env(safe-area-inset-left));
    width: auto;
  }
}

/* Mobile responsive consolidation: portrait phones are first-class targets. */
@media (max-width: 768px) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body,
  #app,
  .app-shell {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    margin: 0;
    touch-action: manipulation;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  video {
    background: #020405;
    object-fit: cover;
  }

  button,
  [role="button"],
  input,
  select,
  textarea,
  .primary-btn,
  .secondary-btn,
  .danger-btn {
    min-height: 44px;
    font-size: 0.82rem;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }

  .mobile-landscape-prompt {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .game.pcm-premium-shell .content > :not(.mobile-landscape-prompt) {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .game,
  .game.pcm-premium-shell,
  .game.pcm-premium-shell.presidential-home-active,
  .game.pcm-premium-shell.presidential-subview-active,
  .game.pcm-premium-shell .content,
  .game.pcm-premium-shell .main-stage {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .game.pcm-premium-shell .content {
    padding: 0 !important;
  }

  .game.pcm-premium-shell .main-stage {
    padding: 8px !important;
  }

  .club-hero-topbar {
    position: relative;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin: 8px;
    padding: 10px;
    border-radius: 10px;
  }

  .club-hero-identity,
  .club-hero-actions,
  .club-hero-stats {
    min-width: 0;
    width: 100%;
  }

  .club-hero-identity {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 9px;
  }

  .club-president-card {
    display: none;
  }

  .club-hero-copy h2 {
    max-width: 100%;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .club-hero-stats,
  .club-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .club-hero-actions > * {
    width: 100%;
  }

  .horizontal-nav-shell,
  .bottom-dock,
  .app-nav {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .top-app-nav,
  .bottom-dock {
    display: flex !important;
    gap: 6px;
    padding: 6px 8px;
  }

  .nav-btn {
    min-width: 96px;
    min-height: 44px;
    flex: 0 0 auto;
    padding: 8px;
    border-radius: 8px;
  }

  .mobile-nav-menu {
    display: block !important;
    margin: 8px;
  }

  .mobile-nav-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: min(68dvh, 520px);
    overflow: auto;
  }

  .presidential-home {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow: visible !important;
  }

  .presidential-home-video,
  .presidential-shell-video,
  .presidential-home-shade {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
  }

  .presidential-home-video {
    object-fit: cover;
    object-position: center top;
    transform: none !important;
  }

  .presidential-shell-video {
    left: 0 !important;
    right: auto !important;
    object-fit: cover;
    object-position: center;
    transform: none !important;
  }

  .presidential-sidebar,
  .presidential-right-rail,
  .presidential-bottom-strip,
  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .presidential-sidebar {
    order: 1;
    padding: 10px;
    border-radius: 10px;
  }

  .presidential-brand {
    width: min(230px, 64vw);
    margin: 0 auto 8px;
  }

  .presidential-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 56dvh;
    overflow-y: auto;
    padding-right: 2px;
  }

  .presidential-menu-item,
  .presidential-competition-menu > summary.presidential-menu-item {
    min-width: 0;
    min-height: 58px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .presidential-menu-copy strong,
  .presidential-menu-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .presidential-menu-copy strong {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .presidential-menu-copy em {
    display: -webkit-box;
    font-size: 0.62rem;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .presidential-competition-menu {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .presidential-submenu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    max-height: 180px;
    overflow-y: auto;
  }

  .presidential-submenu button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
  }

  .presidential-customize-btn,
  .presidential-ranking-launcher,
  .presidential-shop-launcher,
  .presidential-store-card {
    width: 100%;
    min-width: 0;
  }

  .presidential-right-rail {
    order: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .presidential-profile-card,
  .presidential-summary-card,
  .presidential-store-card,
  .presidential-shop-launcher,
  .presidential-ranking-launcher,
  .presidential-bottom-strip {
    border-radius: 10px;
  }

  .presidential-kpis,
  .presidential-pulse-strip,
  .presidential-bottom-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .presidential-bottom-strip {
    order: 4;
    grid-template-columns: 1fr !important;
    gap: 8px;
    padding: 10px;
  }

  .presidential-pulse-strip > span {
    grid-column: 1 / -1;
  }

  .presidential-floating-view,
  .presidential-floating-body {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .presidential-floating-body {
    padding: 8px;
  }

  .presidential-back-btn {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 40;
    width: 100%;
    max-width: 100% !important;
    min-height: 46px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .office-dashboard,
  .office-dashboard-v2,
  .market-page,
  .market-screen,
  .squad-page,
  .squad-screen,
  .stadium-page,
  .stadium-screen,
  .stadium-cinematic-screen,
  .league-page,
  .national-cup-page,
  .continental-cup-page,
  .ranking-page,
  .store-page,
  .calendar-page,
  .missions-page,
  .club-events-page,
  .news-page-shell,
  .finance-page,
  .finances-page,
  .marketing-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  .panel,
  .market-hero-panel,
  .market-recent-panel,
  .market-objectives-panel,
  .market-search-panel,
  .market-list-panel,
  .market-budget-panel,
  .market-coach-panel,
  .squad-coach-card,
  .squad-pitch-panel,
  .squad-bench-card,
  .squad-roles-card,
  .stadium-map-panel,
  .stadium-hero-panel,
  .stadium-ticket-panel,
  .stadium-works-panel,
  .stadium-facilities-panel,
  .finance-hero,
  .finance-panel,
  .marketing-command-panel,
  .marketing-members-panel,
  .marketing-progress-panel,
  .marketing-commercial-panel,
  .marketing-shirts-panel,
  .store-page > section,
  .club-event-detail,
  .club-events-sidebar,
  .national-cup-hero,
  .national-cup-card,
  .national-cup-round,
  .continental-cup-hero,
  .news-video-card {
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  .market-hero-panel,
  .market-coach-panel,
  .finance-hero,
  .marketing-command-panel,
  .national-cup-hero,
  .continental-cup-hero {
    min-height: auto !important;
    padding: 14px !important;
    background-position: center right !important;
  }

  .market-hero-stats,
  .market-filter-grid,
  .market-target-list,
  .market-transfer-list,
  .market-player-list,
  .market-preview-list,
  .finance-kpi-grid,
  .finance-grid,
  .marketing-command-stats,
  .marketing-member-grid,
  .marketing-channel-grid,
  .store-grid,
  .store-shop,
  .store-product-row,
  .store-offer-list,
  .store-showcase,
  .store-main-banner,
  .store-banner-items,
  .store-category-list,
  .store-main,
  .store-sidebar,
  .store-offers-panel,
  .presidential-store-hub-grid,
  .presidential-store-crest-grid,
  .club-events-layout,
  .club-event-choice-grid,
  .club-event-outcomes > div,
  .national-cup-grid,
  .national-cup-rounds,
  .stadium-cinematic-layout,
  .stadium-lower-grid,
  .stadium-ticket-editor,
  .stadium-progress-grid,
  .stadium-facility-grid,
  .facility-grid,
  .calendar-competition-cards,
  .missions-grid,
  .league-trophy-showcase,
  .league-pyramid,
  .squad-layout,
  .squad-main-grid,
  .squad-bench-list,
  .player-detail-grid,
  .player-economy,
  .player-internal-grid {
    grid-template-columns: 1fr !important;
  }

  .store-page,
  .store-shop,
  .store-main,
  .store-sidebar,
  .store-offers-panel,
  .store-product-row,
  .store-offer-list,
  .presidential-store-hub-content,
  .presidential-store-hub-sections {
    width: 100%;
  }

  .store-tabs,
  .store-category-list,
  .presidential-store-hub-sections,
  .market-filter-grid,
  .calendar-type-tabs,
  .league-tabs {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .store-tabs button,
  .store-category-list button,
  .presidential-store-hub-sections button,
  .calendar-type-tabs button,
  .league-tabs button {
    flex: 0 0 auto;
    min-width: max-content;
    min-height: 44px;
  }

  .presidential-customize-btn,
  .stadium-test-credits-btn,
  .link-btn,
  .nav-btn,
  .secondary-btn,
  .primary-btn,
  .danger-btn,
  .facilities-detail-upgrade,
  .stadium-ticket-editor button {
    min-height: 44px !important;
  }

  .market-player-row,
  .market-preview-player-row,
  .market-transfer-row,
  .market-target-card {
    grid-template-columns: 1fr !important;
    gap: 8px;
    align-items: stretch;
  }

  .market-player-main,
  .market-preview-main {
    min-width: 0;
    width: 100%;
  }

  .market-negotiate-btn,
  .market-link-btn,
  .store-price-btn,
  .store-offer-card button {
    width: 100%;
  }

  .squad-player-grid,
  .formation-grid,
  .lineup-grid {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pitch,
  .squad-pitch,
  .formation-pitch,
  .squad-field {
    min-width: 0;
    max-width: 100%;
  }

  .stadium-feature-card,
  .stadium-cinematic-video,
  .stadium-cinematic-bg video,
  .stadium-feature-card video,
  .news-video-card video,
  .pcm-newsroom-video video,
  .goal-video-card video,
  .president-cinematic-video,
  .match-broadcast-video,
  .match-goal-cinematic video,
  .match-closing-cinematic video,
  .transfer-negotiation-video {
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
  }

  .stadium-feature-card,
  .news-video-card,
  .pcm-newsroom-video {
    aspect-ratio: 16 / 9;
    min-height: 0 !important;
  }

  .stadium-cinematic-screen {
    padding: 10px !important;
  }

  .stadium-cinematic-header,
  .stadium-cinematic-header aside,
  .stadium-stat-grid,
  .stadium-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .facilities-map-screen .stadium-map-stage {
    min-height: 280px;
    overflow: hidden;
  }

  .league-table,
  .standings-table,
  .calendar-league-panel,
  .ai-club-squad-table,
  table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  .club-event-detail,
  .club-events-sidebar {
    padding: 12px !important;
  }

  .club-event-hero,
  .club-event-list-card,
  .club-event-choice,
  .calendar-upcoming-row,
  .calendar-recent-row,
  .calendar-competition-card {
    min-width: 0;
    width: 100%;
  }

  .president-cinematic-stage,
  .press-cinematic-stage,
  .assembly-cinematic-stage,
  .goal-video-card,
  .match-goal-cinematic,
  .match-closing-cinematic {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .president-cinematic-options,
  .press-cinematic-options,
  .assembly-cinematic-options {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-height: 42dvh;
    overflow-y: auto;
  }

  .press-question-subtitle,
  .press-president-subtitle,
  .transfer-negotiation-subtitles {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
  }

  .transfer-negotiation-topbar,
  .negotiation-offer-panel {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  .negotiation-offer-panel {
    top: 62px !important;
    bottom: max(92px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
  }

  .modal-backdrop,
  .presidential-store-hub-backdrop,
  .market-full-backdrop,
  .president-cinematic-overlay,
  .goal-video-overlay,
  .stadium-cinematic-overlay {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .player-modal,
  .player-profile-modal,
  .market-full-modal,
  .squad-management-modal,
  .coach-market-modal,
  .crest-modal,
  .frame-modal,
  .presidential-customize-modal,
  .presidential-settings-modal,
  .presidential-store-hub-modal,
  .club-event-history-modal,
  .office-popup,
  .season-celebration-popup,
  .player-growth-popup,
  .player-match-popup,
  .president-selection,
  .president-intro {
    width: min(100%, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 12px !important;
  }

  .modal-close {
    min-width: 42px;
    min-height: 42px;
  }

  .president-selection {
    padding: 12px !important;
  }

  .president-choice-grid {
    grid-template-columns: 1fr !important;
    overflow-y: auto;
  }

  .president-choice {
    width: 100% !important;
    max-width: none !important;
  }

  .president-selection-footer,
  .president-intro {
    grid-template-columns: 1fr !important;
  }

  .president-intro-video,
  .president-intro-ring {
    width: min(70vw, 260px) !important;
    height: min(70vw, 260px) !important;
    justify-self: center;
  }

  h1,
  h2,
  h3 {
    overflow-wrap: anywhere;
  }

  h1,
  .game.pcm-premium-shell.presidential-subview-active h1 {
    font-size: clamp(1.55rem, 8vw, 2.3rem) !important;
    line-height: 1.04 !important;
  }

  h2,
  .game.pcm-premium-shell.presidential-subview-active h2 {
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
    line-height: 1.06 !important;
  }

  h3,
  .game.pcm-premium-shell.presidential-subview-active h3 {
    font-size: clamp(1rem, 5vw, 1.28rem) !important;
    line-height: 1.12 !important;
  }

  p,
  small,
  em,
  .muted,
  .market-player-main span,
  .market-player-main em,
  .store-product p,
  .club-event-detail p,
  .news-page-shell p {
    font-size: clamp(0.72rem, 3.2vw, 0.9rem);
    line-height: 1.35;
  }
}

@media (max-width: 480px) {
  .game.pcm-premium-shell .main-stage,
  .presidential-floating-body {
    padding: 6px !important;
  }

  .club-hero-stats,
  .club-hero-actions,
  .presidential-kpis,
  .presidential-pulse-strip,
  .presidential-bottom-actions,
  .market-hero-stats,
  .finance-kpi-grid,
  .marketing-command-stats,
  .marketing-member-grid,
  .stadium-stat-grid,
  .stadium-mini-grid {
    grid-template-columns: 1fr !important;
  }

  .presidential-menu {
    grid-template-columns: 1fr;
    max-height: 52dvh;
  }

  .presidential-submenu,
  .mobile-nav-panel {
    grid-template-columns: 1fr !important;
  }

  .presidential-profile-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  .presidential-profile-card .presidential-top-crest {
    display: none;
  }

  .store-hero,
  .store-main-banner,
  .presidential-store-hub-hero {
    min-height: auto !important;
    padding: 14px !important;
  }

  .store-product,
  .store-shelf-product,
  .store-offer-card,
  .presidential-store-hub-sections button {
    min-height: 72px;
  }

  .squad-player-card,
  .bench-row,
  .market-player-row,
  .market-preview-player-row,
  .club-event-choice,
  .calendar-upcoming-row {
    padding: 10px !important;
  }

  .president-cinematic-choice,
  .press-cinematic-options .president-cinematic-choice,
  .assembly-cinematic-options .president-cinematic-choice {
    min-height: 58px;
    padding: 10px;
  }
}

@media (max-width: 430px) {
  .presidential-home {
    gap: 8px;
    padding-inline: max(8px, env(safe-area-inset-left));
  }

  .presidential-brand {
    width: min(210px, 70vw);
  }

  .presidential-sidebar,
  .presidential-summary-card,
  .presidential-bottom-strip,
  .presidential-floating-body {
    border-radius: 9px !important;
  }

  .presidential-menu-item,
  .presidential-competition-menu > summary.presidential-menu-item {
    min-height: 54px;
  }

  .presidential-store-hub-sections,
  .store-tabs,
  .store-category-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .presidential-store-hub-sections button,
  .store-tabs button,
  .store-category-list button {
    width: 100%;
    min-width: 0 !important;
  }

  .stadium-cinematic-header aside .stadium-test-credits-btn {
    width: 100%;
  }
}

@media (max-width: 390px) {
  .presidential-menu-copy em,
  .presidential-store-card em,
  .presidential-shop-launcher em,
  .presidential-ranking-launcher em {
    font-size: 0.58rem;
  }

  .presidential-profile-card,
  .presidential-store-card,
  .presidential-shop-launcher,
  .presidential-ranking-launcher {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .presidential-profile-card > b,
  .presidential-alert {
    grid-column: 1;
  }

  .market-hero-copy h2,
  .finance-hero h2,
  .marketing-command-copy h2 {
    font-size: 1.55rem !important;
  }
}

@media (max-width: 360px) {
  .game.pcm-premium-shell .main-stage,
  .presidential-home,
  .presidential-floating-body {
    padding-inline: 6px !important;
  }

  .presidential-sidebar,
  .presidential-summary-card,
  .presidential-bottom-strip,
  .panel,
  .market-hero-panel,
  .store-page > section,
  .stadium-cinematic-screen {
    padding: 9px !important;
  }

  button,
  [role="button"],
  .primary-btn,
  .secondary-btn {
    min-height: 46px;
  }

  .presidential-menu-icon {
    width: 28px;
    height: 28px;
  }

  .presidential-menu-copy strong {
    font-size: 0.72rem;
  }

  .presidential-menu-copy em {
    font-size: 0.54rem;
  }
}

@media (max-width: 768px) {
  .presidential-store-hub-modal {
    display: block !important;
  }

  .presidential-store-hub-grid {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .presidential-store-hub-sections {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    margin: 12px 0 !important;
  }

  .presidential-store-hub-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .presidential-competition-menu:not([open]) .presidential-submenu {
    display: none !important;
  }

  .presidential-competition-menu[open] .presidential-submenu {
    display: grid !important;
    margin-top: 6px;
  }
}

@media (max-width: 430px) {
  .presidential-store-hub-sections {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  html,
  body,
  #app,
  .app-shell,
  .game.pcm-premium-shell.presidential-home-active,
  .game.pcm-premium-shell.presidential-subview-active,
  .game.pcm-premium-shell.presidential-home-active .content,
  .game.pcm-premium-shell.presidential-subview-active .content,
  .game.pcm-premium-shell.presidential-home-active .main-stage,
  .game.pcm-premium-shell.presidential-subview-active .main-stage {
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-home-active .content,
  .game.pcm-premium-shell.presidential-home-active .main-stage,
  .game.pcm-premium-shell.presidential-subview-active .content,
  .game.pcm-premium-shell.presidential-subview-active .main-stage {
    padding: 0 !important;
  }

  .presidential-home {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .presidential-home-video,
  .presidential-shell-video,
  .presidential-home-shade {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }

  .presidential-sidebar {
    position: absolute !important;
    inset: 8px auto auto 8px !important;
    width: clamp(260px, 32vw, 292px) !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    gap: 7px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .presidential-brand {
    display: none !important;
  }

  .presidential-menu-toggle {
    position: relative;
    z-index: 70;
    width: 100%;
    min-height: 42px;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    border: 1px solid rgba(243, 198, 111, 0.34);
    border-radius: 9px;
    color: #fff8ec;
    background:
      linear-gradient(135deg, rgba(216, 169, 90, 0.24), rgba(5, 7, 9, 0.74)),
      rgba(0, 0, 0, 0.38);
    box-shadow:
      inset 0 1px 0 rgba(255, 245, 225, 0.08),
      0 12px 26px rgba(0, 0, 0, 0.24);
    text-align: left;
    text-transform: uppercase;
  }

  .presidential-menu-toggle::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(243, 198, 111, 0.9);
    border-bottom: 2px solid rgba(243, 198, 111, 0.9);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
  }

  .presidential-menu-toggle.is-open::after {
    transform: translateY(3px) rotate(225deg);
  }

  .presidential-menu-toggle-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 7px;
    border-radius: 8px;
    color: #f3c66f;
    background: rgba(0, 0, 0, 0.34);
    box-shadow: inset 0 0 0 1px rgba(243, 198, 111, 0.18);
  }

  .presidential-menu-toggle-icon i {
    width: 100%;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
  }

  .presidential-menu-toggle strong,
  .presidential-menu-toggle em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .presidential-menu-toggle strong {
    font-size: 0.66rem;
    font-weight: 1000;
  }

  .presidential-menu-toggle em {
    display: none;
  }

  .presidential-menu {
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 65;
    width: min(414px, calc(100vw - 318px));
    display: none !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start;
    gap: 5px !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 7px !important;
    border: 1px solid rgba(243, 198, 111, 0.28);
    border-radius: 11px;
    background:
      linear-gradient(145deg, rgba(14, 12, 9, 0.96), rgba(3, 5, 7, 0.94)),
      rgba(0, 0, 0, 0.72);
    box-shadow:
      inset 0 1px 0 rgba(255, 245, 225, 0.08),
      0 20px 44px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(18px);
  }

  .presidential-menu.is-open {
    display: grid !important;
    animation: presidential-menu-pop 0.16s ease-out;
  }

  @keyframes presidential-menu-pop {
    from {
      opacity: 0;
      transform: translateY(-5px) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .presidential-menu-item,
  .presidential-competition-menu > summary.presidential-menu-item {
    min-height: 36px !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    border-color: rgba(255, 245, 225, 0.08) !important;
    background:
      linear-gradient(90deg, rgba(216, 169, 90, 0.1), rgba(255, 255, 255, 0.035)),
      rgba(5, 8, 10, 0.62) !important;
  }

  .presidential-menu-item:hover,
  .presidential-menu-item.active,
  .presidential-competition-menu > summary.presidential-menu-item:hover {
    border-color: rgba(243, 198, 111, 0.44) !important;
    background:
      linear-gradient(90deg, rgba(216, 169, 90, 0.26), rgba(255, 255, 255, 0.055)),
      rgba(11, 10, 8, 0.7) !important;
    box-shadow: inset 3px 0 0 #f3c66f;
  }

  .presidential-menu-icon {
    width: 22px !important;
    height: 22px !important;
  }

  .presidential-menu-icon svg,
  .presidential-submenu svg {
    width: 15px !important;
    height: 15px !important;
  }

  .presidential-menu-copy strong {
    font-size: 0.64rem !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .presidential-menu-copy em {
    display: none !important;
  }

  .presidential-beta-notice {
    position: absolute;
    left: 50%;
    bottom: 50px;
    z-index: 24;
    width: min(390px, calc(100vw - 330px));
    min-width: 310px;
    box-sizing: border-box;
    gap: 6px;
    padding: 5px 9px !important;
    border-radius: 7px !important;
    transform: translateX(-50%);
    background:
      linear-gradient(90deg, rgba(216, 169, 90, 0.18), rgba(255, 255, 255, 0.04)),
      rgba(5, 7, 8, 0.78) !important;
  }

  .presidential-beta-notice strong {
    font-size: 0.55rem !important;
  }

  .presidential-beta-notice span {
    font-size: 0.54rem !important;
    line-height: 1.15 !important;
  }

  .presidential-competition-menu {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .presidential-competition-menu > summary::after {
    right: 7px;
    font-size: 0.68rem;
  }

  .presidential-competition-menu:not([open]) .presidential-submenu {
    display: none !important;
  }

  .presidential-competition-menu[open] .presidential-submenu {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    max-height: none !important;
    margin-top: 4px;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .presidential-submenu button {
    min-height: 26px !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 3px 5px !important;
    font-size: 0.54rem !important;
  }

  .presidential-ranking-launcher,
  .presidential-customize-btn {
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
  }

  .presidential-sidebar > .presidential-ranking-launcher,
  .presidential-sidebar > .presidential-customize-btn {
    display: none !important;
  }

  .presidential-ranking-launcher {
    grid-template-columns: 26px minmax(0, 1fr) !important;
    background:
      linear-gradient(90deg, rgba(216, 169, 90, 0.12), rgba(2, 5, 8, 0.74)),
      rgba(0, 0, 0, 0.54) !important;
  }

  .presidential-ranking-launcher img {
    display: none !important;
  }

  .presidential-ranking-launcher > span,
  .presidential-store-card > span,
  .presidential-shop-launcher > span {
    width: 26px !important;
    height: 26px !important;
  }

  .presidential-ranking-launcher strong,
  .presidential-customize-btn strong,
  .presidential-shop-launcher strong,
  .presidential-store-card strong {
    font-size: 0.62rem !important;
  }

  .presidential-ranking-launcher em,
  .presidential-shop-launcher em,
  .presidential-store-card em {
    font-size: 0.52rem !important;
  }

  .presidential-right-rail {
    position: absolute !important;
    inset: 6px 6px 76px auto !important;
    width: clamp(232px, 32vw, 292px) !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-content: start;
    gap: 5px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .presidential-profile-card {
    min-height: 48px !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    gap: 7px !important;
    padding: 6px 8px !important;
  }

  .presidential-profile-card .presidential-top-crest {
    display: none !important;
  }

  .presidential-alert {
    width: 26px !important;
    height: 26px !important;
  }

  .presidential-alert svg {
    width: 17px !important;
    height: 17px !important;
  }

  .presidential-alert span {
    width: 16px !important;
    height: 16px !important;
    font-size: 0.52rem !important;
  }

  .presidential-profile-card strong {
    font-size: 0.68rem !important;
  }

  .presidential-profile-card em,
  .presidential-profile-card small,
  .presidential-profile-card > b {
    font-size: 0.54rem !important;
  }

  .presidential-summary-card {
    max-height: clamp(128px, 41dvh, 178px);
    padding: 7px 8px !important;
    overflow: hidden !important;
  }

  .presidential-summary-card h3 {
    display: none !important;
  }

  .presidential-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .presidential-kpis article {
    min-height: 42px !important;
    padding: 6px !important;
  }

  .presidential-kpis span,
  .presidential-next-match span,
  .presidential-finances span {
    font-size: 0.5rem !important;
  }

  .presidential-kpis strong {
    font-size: 0.82rem !important;
  }

  .presidential-next-match {
    padding: 6px 0 !important;
  }

  .presidential-next-match div {
    gap: 6px !important;
  }

  .presidential-next-play {
    min-height: 24px !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
    font-size: 0.52rem !important;
  }

  .market-page > *,
  .market-screen > *,
  .stadium-page > *,
  .stadium-screen > *,
  .store-page > *,
  .calendar-page > *,
  .club-events-page > *,
  .finance-page > *,
  .finances-page > *,
  .marketing-screen > *,
  .missions-page > *,
  .ranking-page > *,
  .league-page > *,
  .national-cup-page > *,
  .continental-cup-page > * {
    grid-column: auto !important;
  }

  .presidential-match-crest {
    width: 28px !important;
    height: 28px !important;
  }

  .presidential-finances {
    display: none !important;
  }

  .presidential-construction-widget {
    min-height: 42px !important;
    padding: 6px 8px !important;
  }

  .presidential-shop-launcher,
  .presidential-store-card {
    min-height: 42px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 6px 8px !important;
  }

  .presidential-advance-card {
    display: none !important;
  }

  .presidential-bottom-strip {
    position: absolute !important;
    left: 6px !important;
    right: 6px !important;
    bottom: 4px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: 42px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) max-content !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 4px 8px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 7px !important;
    background: linear-gradient(90deg, rgba(3, 6, 8, 0.84), rgba(3, 6, 8, 0.56), rgba(3, 6, 8, 0.84)) !important;
  }

  .presidential-bottom-actions {
    min-width: 0 !important;
    width: 292px !important;
    display: grid !important;
    grid-template-columns: 84px 70px 132px !important;
    gap: 5px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .presidential-bottom-actions button {
    min-height: 30px !important;
    gap: 5px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(255, 245, 225, 0.12) !important;
    border-radius: 6px !important;
    background: rgba(4, 7, 10, 0.62) !important;
    font-size: 0.54rem !important;
    white-space: nowrap;
  }

  .presidential-bottom-actions button + button {
    border-left: 1px solid rgba(255, 245, 225, 0.12) !important;
  }

  .presidential-bottom-actions svg {
    width: 15px !important;
    height: 15px !important;
  }

  .presidential-pulse-strip {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 3px !important;
    overflow: hidden !important;
  }

  .presidential-pulse-strip > span {
    font-size: 0.46rem !important;
    line-height: 1 !important;
    white-space: normal !important;
  }

  .presidential-pulse-strip .presidential-pulse-metric {
    gap: 2px !important;
    padding: 0 3px !important;
  }

  .presidential-pulse-strip .presidential-pulse-metric span {
    font-size: 0.43rem !important;
    line-height: 1 !important;
  }

  .presidential-pulse-strip .presidential-pulse-metric strong {
    font-size: 0.54rem !important;
    line-height: 1 !important;
  }

  .presidential-pulse-strip .presidential-pulse-metric i {
    height: 3px !important;
  }

  .presidential-bottom-strip > div {
    min-width: 0;
    display: flex !important;
    justify-content: flex-end;
    gap: 8px !important;
    font-size: 0.5rem !important;
    text-align: right;
  }

  .presidential-bottom-strip > div span,
  .presidential-bottom-strip > div em {
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .presidential-bottom-strip > div strong {
    color: #fff8ec;
    font-size: 0.58rem !important;
    white-space: nowrap;
  }

  .presidential-coach-event-card,
  .presidential-press-event-card,
  .presidential-assembly-event-card {
    position: absolute !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: clamp(168px, 21vw, 194px) !important;
    min-height: 34px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 5px 8px !important;
    border-radius: 7px !important;
    background:
      linear-gradient(90deg, rgba(216, 169, 90, 0.16), rgba(4, 7, 10, 0.72)),
      rgba(0, 0, 0, 0.5) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 245, 225, 0.07),
      0 10px 22px rgba(0, 0, 0, 0.22) !important;
  }

  .presidential-coach-event-card {
    top: 146px !important;
  }

  .presidential-press-event-card {
    top: 186px !important;
  }

  .presidential-assembly-event-card {
    top: 226px !important;
  }

  .presidential-coach-event-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .presidential-coach-event-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .presidential-coach-event-card strong,
  .presidential-press-event-card strong,
  .presidential-assembly-event-card strong {
    font-size: 0.58rem !important;
    line-height: 1.05;
  }

  .presidential-coach-event-card em,
  .presidential-press-event-card em,
  .presidential-assembly-event-card em,
  .presidential-coach-event-card small,
  .presidential-press-event-card small,
  .presidential-assembly-event-card small {
    font-size: 0.46rem !important;
    line-height: 1.05;
  }

  .presidential-coach-event-card em,
  .presidential-press-event-card em,
  .presidential-assembly-event-card em {
    display: none !important;
  }

  .presidential-floating-view {
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: grid !important;
    grid-template-rows: 36px minmax(0, 1fr);
    gap: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  .presidential-back-btn {
    position: relative !important;
    top: auto !important;
    z-index: 20;
    width: min(220px, 36vw) !important;
    min-height: 34px !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    font-size: 0.62rem !important;
  }

  .presidential-floating-body {
    height: 100% !important;
    max-height: none !important;
    padding: 8px !important;
    overflow: auto !important;
    border-radius: 8px !important;
  }

  .office-dashboard,
  .office-dashboard-v2,
  .market-page,
  .market-screen,
  .squad-page,
  .squad-screen,
  .stadium-page,
  .stadium-screen,
  .league-page,
  .national-cup-page,
  .continental-cup-page,
  .ranking-page,
  .store-page,
  .calendar-page,
  .missions-page,
  .club-events-page,
  .news-page-shell,
  .finance-page,
  .finances-page,
  .marketing-screen {
    gap: 8px !important;
  }

  .panel,
  .market-hero-panel,
  .market-recent-panel,
  .market-objectives-panel,
  .market-search-panel,
  .market-list-panel,
  .market-budget-panel,
  .market-coach-panel,
  .squad-coach-card,
  .squad-pitch-panel,
  .squad-bench-card,
  .squad-roles-card,
  .stadium-map-panel,
  .stadium-hero-panel,
  .stadium-ticket-panel,
  .stadium-works-panel,
  .stadium-facilities-panel,
  .finance-hero,
  .finance-panel,
  .marketing-command-panel,
  .marketing-members-panel,
  .marketing-progress-panel,
  .marketing-commercial-panel,
  .marketing-shirts-panel,
  .store-page > section,
  .club-event-detail,
  .club-events-sidebar,
  .national-cup-hero,
  .national-cup-card,
  .continental-cup-hero,
  .news-video-card {
    border-radius: 8px !important;
    padding: 8px !important;
  }

  .market-hero-panel,
  .finance-hero,
  .marketing-command-panel,
  .national-cup-hero,
  .continental-cup-hero {
    min-height: auto !important;
  }

  .store-grid,
  .store-shop,
  .store-product-row,
  .store-offer-list,
  .store-showcase,
  .store-banner-items,
  .market-hero-stats,
  .finance-kpi-grid,
  .stadium-stat-grid,
  .stadium-mini-grid,
  .marketing-command-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .presidential-store-hub-modal {
    width: min(760px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  .presidential-store-hub-hero {
    min-height: 84px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 10px !important;
  }

  .presidential-store-hub-hero h3 {
    font-size: clamp(1.4rem, 4.4vw, 2.2rem) !important;
  }

  .presidential-store-hub-grid {
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .presidential-store-hub-sections,
  .presidential-store-hub-content {
    min-height: 0 !important;
    overflow: auto !important;
  }

  .presidential-store-hub-sections {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    margin: 0 !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .game.pcm-premium-shell.presidential-subview-active .main-stage {
    padding: 4px !important;
  }

  .presidential-floating-view {
    grid-template-rows: 30px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  .presidential-back-btn {
    width: min(178px, 30vw) !important;
    min-height: 30px !important;
    padding: 3px 8px !important;
    border-radius: 7px !important;
    font-size: 0.54rem !important;
  }

  .presidential-back-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  .presidential-floating-body {
    padding: 5px !important;
    font-size: 0.72rem !important;
  }

  .presidential-floating-body h1,
  .presidential-floating-body h2,
  .presidential-floating-body h3,
  .market-hero-copy h2,
  .finance-hero h2,
  .marketing-command-copy h2,
  .store-hero h2,
  .stadium-hero-panel h2,
  .national-cup-hero h2,
  .continental-cup-hero h2 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    font-size: clamp(0.92rem, 2.45vw, 1.38rem) !important;
    line-height: 1.05 !important;
  }

  .presidential-floating-body p,
  .presidential-floating-body em,
  .presidential-floating-body small,
  .market-hero-copy p,
  .finance-hero p,
  .marketing-command-copy p,
  .store-hero p,
  .stadium-hero-panel p,
  .national-cup-hero p,
  .continental-cup-hero p {
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
  }

  .market-hero-panel,
  .market-coach-panel,
  .finance-hero,
  .marketing-command-panel,
  .national-cup-hero,
  .continental-cup-hero,
  .stadium-hero-panel,
  .store-hero,
  .store-main-banner {
    min-height: 0 !important;
    padding: 8px !important;
    background-size: auto 100% !important;
  }

  .market-hero-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) !important;
    align-items: stretch !important;
  }

  .market-hero-copy {
    gap: 5px !important;
  }

  .market-hero-stats,
  .finance-kpi-grid,
  .marketing-command-stats,
  .stadium-stat-grid,
  .stadium-mini-grid,
  .store-banner-items {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .market-hero-stats article,
  .finance-kpi-grid article,
  .marketing-command-stats article,
  .stadium-stat-grid article,
  .stadium-mini-grid article,
  .store-banner-items article,
  .calendar-competition-card,
  .missions-xp-card,
  .club-event-list-card,
  .national-cup-card {
    min-height: 42px !important;
    padding: 6px !important;
  }

  .panel,
  .market-hero-panel,
  .market-recent-panel,
  .market-objectives-panel,
  .market-search-panel,
  .market-list-panel,
  .market-budget-panel,
  .market-coach-panel,
  .squad-coach-card,
  .squad-pitch-panel,
  .squad-bench-card,
  .squad-roles-card,
  .stadium-map-panel,
  .stadium-ticket-panel,
  .stadium-works-panel,
  .stadium-facilities-panel,
  .finance-panel,
  .marketing-members-panel,
  .marketing-progress-panel,
  .marketing-commercial-panel,
  .marketing-shirts-panel,
  .store-page > section,
  .club-event-detail,
  .club-events-sidebar {
    padding: 6px !important;
    gap: 6px !important;
  }

  .market-player-row,
  .market-preview-player-row,
  .market-transfer-row,
  .market-target-card,
  .squad-player-card,
  .bench-row,
  .calendar-upcoming-row,
  .calendar-recent-row,
  .club-event-choice {
    min-height: 38px !important;
    padding: 5px 6px !important;
    gap: 5px !important;
  }

  .market-negotiate-btn,
  .market-link-btn,
  .store-price-btn,
  .secondary-btn,
  .primary-btn,
  .link-btn {
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 0.58rem !important;
  }

  .store-grid,
  .store-shop,
  .store-product-row,
  .store-offer-list,
  .store-showcase,
  .club-events-layout,
  .squad-layout,
  .stadium-cinematic-layout,
  .facility-grid,
  .calendar-competition-cards,
  .missions-grid {
    gap: 6px !important;
  }

  .league-table,
  .standings-table,
  .calendar-league-panel,
  .ai-club-squad-table,
  table {
    font-size: 0.62rem !important;
  }

  th,
  td {
    padding: 4px 6px !important;
  }

  .market-page,
  .market-screen,
  .stadium-page,
  .stadium-screen,
  .store-page,
  .calendar-page,
  .club-events-page,
  .finance-page,
  .finances-page,
  .marketing-screen,
  .missions-page,
  .ranking-page,
  .league-page,
  .national-cup-page,
  .continental-cup-page {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 6px !important;
  }

  .market-hero-panel,
  .market-coach-panel {
    min-height: 88px !important;
    max-height: 112px !important;
    overflow: hidden !important;
  }

  .market-hero-copy p,
  .market-coach-panel p,
  .market-objectives-panel p,
  .market-recent-panel p,
  .store-hero p,
  .stadium-hero-panel p,
  .finance-hero p,
  .marketing-command-copy p {
    display: none !important;
  }

  .market-hero-copy h2,
  .market-coach-panel h2,
  .market-coach-panel h3 {
    font-size: clamp(0.9rem, 2.15vw, 1.16rem) !important;
  }

  .market-hero-stats article strong,
  .finance-kpi-grid article strong,
  .stadium-stat-grid article strong,
  .marketing-command-stats article strong {
    font-size: 0.9rem !important;
  }

  .market-search-panel,
  .market-list-panel,
  .market-budget-panel,
  .market-objectives-panel,
  .market-recent-panel {
    max-height: 172px !important;
    overflow: auto !important;
  }

  .market-target-list,
  .market-transfer-list,
  .market-player-list,
  .market-preview-list,
  .store-product-row,
  .store-offer-list,
  .club-event-list,
  .calendar-upcoming-list,
  .calendar-recent-list,
  .missions-list {
    max-height: 118px !important;
    overflow: auto !important;
  }

  .market-filter-grid,
  .store-tabs,
  .store-category-list,
  .calendar-type-tabs,
  .league-tabs {
    gap: 5px !important;
  }

  .market-filter-grid label,
  .market-filter-grid select,
  .market-filter-grid input {
    min-height: 28px !important;
    font-size: 0.58rem !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-body {
    min-height: 0 !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen {
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    grid-template-areas:
      "hero recent"
      "search list"
      "targets budget" !important;
    grid-auto-flow: row dense !important;
    grid-auto-rows: auto !important;
    gap: 6px !important;
    min-height: 0 !important;
    align-content: start !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen > .market-hero-panel {
    grid-area: hero !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen > .market-coach-panel {
    grid-area: recent !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen > .market-objectives-panel {
    grid-area: targets !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen > .market-search-panel {
    grid-area: search !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen > .market-list-panel {
    grid-area: list !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-screen > .market-budget-panel {
    grid-area: budget !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-coach-panel {
    min-height: 78px !important;
    max-height: 88px !important;
    padding: 6px 8px !important;
    align-content: space-between !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-copy,
  .game.pcm-premium-shell.presidential-subview-active .market-coach-banner-copy {
    max-width: 66% !important;
    gap: 3px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-copy span,
  .game.pcm-premium-shell.presidential-subview-active .market-coach-banner-copy span,
  .game.pcm-premium-shell.presidential-subview-active .market-objectives-panel h3,
  .game.pcm-premium-shell.presidential-subview-active .market-search-panel h3,
  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel h3,
  .game.pcm-premium-shell.presidential-subview-active .market-panel-head h3 {
    font-size: 0.56rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-copy h2,
  .game.pcm-premium-shell.presidential-subview-active .market-coach-banner-copy h3 {
    margin: 1px 0 !important;
    font-size: 0.82rem !important;
    line-height: 0.98 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-copy .primary-btn,
  .game.pcm-premium-shell.presidential-subview-active .market-coach-banner-copy .primary-btn {
    width: fit-content !important;
    min-width: 104px !important;
    min-height: 24px !important;
    padding: 3px 8px !important;
    font-size: 0.52rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 2px -8px -6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-stats div {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    min-width: 0 !important;
    padding: 3px 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-stats strong {
    font-size: 0.72rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-hero-stats span {
    overflow: hidden !important;
    font-size: 0.42rem !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-search-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-list-panel {
    max-height: 126px !important;
    padding: 6px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-objectives-panel,
  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel {
    max-height: 108px !important;
    padding: 6px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-panel-head {
    gap: 5px !important;
    margin-bottom: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-panel-head span,
  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel span,
  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel small,
  .game.pcm-premium-shell.presidential-subview-active .market-filter-control span {
    font-size: 0.5rem !important;
    line-height: 1.05 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 5px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-filter-control {
    gap: 3px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-filter-control select {
    min-height: 24px !important;
    padding: 0 18px 0 7px !important;
    border-radius: 5px !important;
    font-size: 0.54rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-preview-list {
    grid-template-columns: 1fr !important;
    max-height: 72px !important;
    gap: 4px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-target-list {
    max-height: 50px !important;
    gap: 4px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-preview-player-row,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card,
  .game.pcm-premium-shell.presidential-subview-active .market-player-row {
    min-height: 32px !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-preview-main,
  .game.pcm-premium-shell.presidential-subview-active .market-player-main {
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-preview-main .player-avatar-wrap,
  .game.pcm-premium-shell.presidential-subview-active .market-preview-main .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .market-preview-main .player-avatar-img,
  .game.pcm-premium-shell.presidential-subview-active .market-player-main .player-avatar-wrap,
  .game.pcm-premium-shell.presidential-subview-active .market-player-main .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .market-player-main .player-avatar-img,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card .player-avatar-wrap,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card .player-avatar-img {
    width: 28px !important;
    height: 28px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-preview-main strong,
  .game.pcm-premium-shell.presidential-subview-active .market-player-main strong,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card strong {
    font-size: 0.62rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-preview-main span,
  .game.pcm-premium-shell.presidential-subview-active .market-player-main span,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card span,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card em {
    font-size: 0.48rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-rating,
  .game.pcm-premium-shell.presidential-subview-active .market-target-card > b {
    width: 28px !important;
    height: 28px !important;
    border-width: 2px !important;
    font-size: 0.58rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-link-btn,
  .game.pcm-premium-shell.presidential-subview-active .market-negotiate-btn {
    min-height: 24px !important;
    margin-top: 5px !important;
    padding: 3px 7px !important;
    font-size: 0.52rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel strong {
    margin: 3px 0 5px !important;
    font-size: 1rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-budget-panel b {
    margin: 3px 0 !important;
    font-size: 0.72rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-budget-line {
    margin: 5px 0 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-screen,
  .game.pcm-premium-shell.presidential-subview-active .stadium-page,
  .game.pcm-premium-shell.presidential-subview-active .stadium-screen,
  .game.pcm-premium-shell.presidential-subview-active .store-page,
  .game.pcm-premium-shell.presidential-subview-active .calendar-page,
  .game.pcm-premium-shell.presidential-subview-active .club-events-page,
  .game.pcm-premium-shell.presidential-subview-active .news-page-shell,
  .game.pcm-premium-shell.presidential-subview-active .finance-page,
  .game.pcm-premium-shell.presidential-subview-active .finances-page,
  .game.pcm-premium-shell.presidential-subview-active .marketing-screen,
  .game.pcm-premium-shell.presidential-subview-active .ranking-page,
  .game.pcm-premium-shell.presidential-subview-active .league-page,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-page,
  .game.pcm-premium-shell.presidential-subview-active .continental-cup-page {
    min-height: 0 !important;
    align-content: start !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-coach-card,
  .game.pcm-premium-shell.presidential-subview-active .squad-pitch-panel,
  .game.pcm-premium-shell.presidential-subview-active .squad-bench-card,
  .game.pcm-premium-shell.presidential-subview-active .squad-roles-card,
  .game.pcm-premium-shell.presidential-subview-active .stadium-map-panel,
  .game.pcm-premium-shell.presidential-subview-active .stadium-hero-panel,
  .game.pcm-premium-shell.presidential-subview-active .stadium-ticket-panel,
  .game.pcm-premium-shell.presidential-subview-active .stadium-works-panel,
  .game.pcm-premium-shell.presidential-subview-active .stadium-facilities-panel,
  .game.pcm-premium-shell.presidential-subview-active .store-hero,
  .game.pcm-premium-shell.presidential-subview-active .store-main-banner,
  .game.pcm-premium-shell.presidential-subview-active .finance-hero,
  .game.pcm-premium-shell.presidential-subview-active .finance-panel,
  .game.pcm-premium-shell.presidential-subview-active .marketing-command-panel,
  .game.pcm-premium-shell.presidential-subview-active .marketing-members-panel,
  .game.pcm-premium-shell.presidential-subview-active .marketing-progress-panel,
  .game.pcm-premium-shell.presidential-subview-active .marketing-commercial-panel,
  .game.pcm-premium-shell.presidential-subview-active .marketing-shirts-panel,
  .game.pcm-premium-shell.presidential-subview-active .club-events-sidebar,
  .game.pcm-premium-shell.presidential-subview-active .club-event-detail,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-hero,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-card,
  .game.pcm-premium-shell.presidential-subview-active .continental-cup-hero,
  .game.pcm-premium-shell.presidential-subview-active .news-video-card {
    max-height: 172px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .store-hero,
  .game.pcm-premium-shell.presidential-subview-active .store-main-banner,
  .game.pcm-premium-shell.presidential-subview-active .stadium-hero-panel,
  .game.pcm-premium-shell.presidential-subview-active .finance-hero,
  .game.pcm-premium-shell.presidential-subview-active .marketing-command-panel,
  .game.pcm-premium-shell.presidential-subview-active .national-cup-hero,
  .game.pcm-premium-shell.presidential-subview-active .continental-cup-hero {
    max-height: 96px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .store-category-list,
  .game.pcm-premium-shell.presidential-subview-active .store-shop,
  .game.pcm-premium-shell.presidential-subview-active .store-product-grid,
  .game.pcm-premium-shell.presidential-subview-active .store-offer-list,
  .game.pcm-premium-shell.presidential-subview-active .store-showcase,
  .game.pcm-premium-shell.presidential-subview-active .calendar-upcoming-list,
  .game.pcm-premium-shell.presidential-subview-active .calendar-recent-list,
  .game.pcm-premium-shell.presidential-subview-active .club-event-list,
  .game.pcm-premium-shell.presidential-subview-active .missions-list,
  .game.pcm-premium-shell.presidential-subview-active .ranking-list,
  .game.pcm-premium-shell.presidential-subview-active .news-grid,
  .game.pcm-premium-shell.presidential-subview-active .news-feed,
  .game.pcm-premium-shell.presidential-subview-active .news-portal-list {
    max-height: 126px !important;
    overflow: auto !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) {
  .game.pcm-premium-shell.presidential-subview-active .squad-screen {
    grid-template-columns: 154px minmax(0, 1fr) 214px !important;
    grid-auto-rows: minmax(0, auto) !important;
    gap: 6px !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-coach-card,
  .game.pcm-premium-shell.presidential-subview-active .squad-side {
    max-height: 342px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-pitch-panel {
    max-height: 342px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .coach-portrait,
  .game.pcm-premium-shell.presidential-subview-active .squad-president-call-card p,
  .game.pcm-premium-shell.presidential-subview-active .squad-panel-head .muted {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .coach-name strong,
  .game.pcm-premium-shell.presidential-subview-active .squad-panel-head h3,
  .game.pcm-premium-shell.presidential-subview-active .squad-roles-card h3 {
    font-size: 0.68rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .coach-name span,
  .game.pcm-premium-shell.presidential-subview-active .coach-metrics span,
  .game.pcm-premium-shell.presidential-subview-active .role-row span,
  .game.pcm-premium-shell.presidential-subview-active .role-row strong {
    font-size: 0.5rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .coach-metrics {
    gap: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .coach-metrics div,
  .game.pcm-premium-shell.presidential-subview-active .role-row {
    min-height: 28px !important;
    padding: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-pitch {
    min-height: 0 !important;
    height: 262px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card {
    width: 56px !important;
    min-height: 42px !important;
    padding: 3px !important;
    gap: 1px !important;
    border-radius: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-img {
    width: 20px !important;
    height: 20px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card span,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card small {
    max-width: 100% !important;
    font-size: 0.43rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong {
    font-size: 0.58rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-chemistry {
    gap: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-chemistry article {
    min-height: 30px !important;
    padding: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .bench-list {
    max-height: 122px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .bench-row {
    min-height: 32px !important;
    padding: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-command-screen {
    display: grid !important;
    grid-template-rows: 104px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-hero {
    min-height: 0 !important;
    max-height: 104px !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.9fr) minmax(110px, 0.45fr) !important;
    gap: 6px !important;
    padding: 7px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-meta p,
  .game.pcm-premium-shell.presidential-subview-active .calendar-next-side small {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-meta strong,
  .game.pcm-premium-shell.presidential-subview-active .calendar-next-team strong,
  .game.pcm-premium-shell.presidential-subview-active .calendar-next-side strong {
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-facts {
    gap: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-facts span,
  .game.pcm-premium-shell.presidential-subview-active .calendar-next-side span,
  .game.pcm-premium-shell.presidential-subview-active .calendar-next-vs span {
    font-size: 0.5rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-crest {
    width: 38px !important;
    height: 38px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-command-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    max-height: 238px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-command-panel {
    max-height: 238px !important;
    padding: 6px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-panel-head {
    gap: 5px !important;
    margin-bottom: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-panel-head h3 {
    font-size: 0.64rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-list,
  .game.pcm-premium-shell.presidential-subview-active .calendar-competition-stack {
    max-height: 192px !important;
    gap: 4px !important;
    overflow: auto !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-list-row,
  .game.pcm-premium-shell.presidential-subview-active .calendar-competition-card {
    min-height: 38px !important;
    padding: 4px !important;
    border-radius: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-date-chip {
    width: 34px !important;
    min-width: 34px !important;
    padding: 3px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-date-chip span,
  .game.pcm-premium-shell.presidential-subview-active .calendar-date-chip em,
  .game.pcm-premium-shell.presidential-subview-active .calendar-row-main span,
  .game.pcm-premium-shell.presidential-subview-active .calendar-row-main em {
    font-size: 0.45rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-date-chip strong,
  .game.pcm-premium-shell.presidential-subview-active .calendar-row-main strong {
    font-size: 0.62rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-row-crest,
  .game.pcm-premium-shell.presidential-subview-active .calendar-score-pill {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }
}

/* President choice: two-card layout without empty desktop/mobile-landscape space */
.president-selection {
  width: min(960px, calc(100vw - 56px)) !important;
  grid-template-rows: auto minmax(0, auto) auto;
}

.president-choice-grid {
  width: min(100%, 700px);
  margin: 0 auto;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  justify-content: center;
}

.president-selection-footer {
  grid-template-columns: minmax(0, 1fr) 180px !important;
}

.president-selection-note {
  max-width: 760px;
}

@media (min-width: 1180px) and (min-height: 620px) {
  .president-selection {
    width: min(900px, calc(100vw - 64px)) !important;
  }

  .president-choice-grid {
    width: min(100%, 660px);
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .store-shop {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 6px !important;
    min-height: 0 !important;
  }

  .store-offers-panel {
    display: none !important;
  }

  .store-category-card {
    padding: 6px !important;
  }

  .store-category-list {
    gap: 4px !important;
    margin-top: 6px !important;
  }

  .store-category-list button {
    min-height: 30px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 0 6px !important;
  }

  .store-category-list svg {
    width: 16px !important;
    height: 16px !important;
  }

  .store-category-list strong {
    font-size: 0.58rem !important;
  }

  .store-main-banner {
    min-height: 86px !important;
    grid-template-columns: minmax(0, 1fr) 150px !important;
    padding: 8px 34px !important;
  }

  .store-banner-copy {
    gap: 3px !important;
  }

  .store-banner-copy span,
  .store-banner-copy p,
  .store-banner-copy .primary-btn {
    display: none !important;
  }

  .store-banner-items {
    min-height: 62px !important;
    gap: 7px !important;
  }

  .store-showcase-item,
  .store-showcase-item.office,
  .store-showcase-item.stadium,
  .store-showcase-item.frame {
    width: 54px !important;
    height: 58px !important;
  }

  .store-feature-panel {
    padding: 6px !important;
  }

  .store-section-head {
    margin-bottom: 6px !important;
  }

  .store-product-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .store-shelf-product {
    min-height: 128px !important;
    grid-template-rows: auto auto 58px auto !important;
    gap: 4px !important;
    padding: 6px !important;
  }

  .store-shelf-product h4 {
    min-height: 0 !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  .store-product-art {
    height: 58px !important;
  }

  .store-product-art.crest-product img {
    width: auto !important;
    height: 36px !important;
    max-width: 52% !important;
  }

  .store-credit-bonus {
    display: none !important;
  }

  .presidential-store-hub-modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  .presidential-store-hub-hero {
    min-height: 70px !important;
    padding: 8px !important;
  }

  .presidential-store-hub-grid {
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .presidential-store-hub-sections button {
    min-height: 34px !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    padding: 5px !important;
  }

  .presidential-store-crest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .presidential-customize-modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .presidential-customize-grid {
    gap: 8px !important;
    overflow: auto !important;
  }

  .presidential-customize-option {
    min-height: 0 !important;
    grid-template-rows: 96px auto !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  .presidential-customize-president-btn {
    grid-template-columns: 116px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 8px !important;
  }

  .presidential-customize-portrait {
    height: 88px !important;
  }

  .presidential-customize-portrait img {
    min-height: 0 !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .presidential-customize-president-copy {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center !important;
  }

  .presidential-customize-president-copy b {
    grid-row: auto !important;
    grid-column: auto !important;
    min-height: 26px !important;
    font-size: 0.58rem !important;
  }

  .presidential-customize-option strong {
    font-size: 0.72rem !important;
    line-height: 1 !important;
  }

  .presidential-customize-option em {
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  .presidential-customize-card-skins,
  .presidential-customize-skin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .presidential-customize-skin {
    grid-template-rows: 52px auto 28px !important;
    gap: 5px !important;
    padding: 6px !important;
  }

  .presidential-customize-skin small {
    display: none !important;
  }

  .public-profile-page {
    gap: 8px !important;
  }

  .public-profile-search {
    grid-template-columns: minmax(0, 0.85fr) minmax(260px, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .public-profile-search-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
  }

  .public-profile-search h3 {
    font-size: 0.92rem !important;
  }

  .public-profile-search input,
  .public-profile-search button {
    min-height: 34px !important;
    font-size: 0.72rem !important;
  }

  .public-profile-logout {
    min-width: 118px !important;
  }

  .public-profile-banner {
    min-height: 116px !important;
    padding: 10px !important;
    gap: 8px !important;
  }

  .public-profile-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 0.88rem !important;
  }

  .public-profile-identity {
    gap: 8px !important;
    max-width: 66vw !important;
    padding: 6px 8px !important;
    border-left-width: 2px !important;
  }

  .public-profile-identity h3 {
    margin: 2px 0 !important;
    font-size: 1.25rem !important;
  }

  .public-profile-identity p,
  .public-profile-identity span,
  .public-profile-rank span {
    font-size: 0.62rem !important;
  }

  .public-profile-rank {
    min-width: 82px !important;
    padding: 8px !important;
  }

  .public-profile-rank strong {
    font-size: 1.25rem !important;
  }

  .public-profile-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .public-profile-metrics article {
    min-height: 54px !important;
    padding: 7px !important;
  }

  .public-profile-metrics span,
  .public-profile-metrics em {
    font-size: 0.56rem !important;
  }

  .public-profile-metrics strong {
    margin: 3px 0 !important;
    font-size: 0.8rem !important;
  }

  .public-profile-grid {
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  .public-profile-trophies,
  .public-profile-recent {
    padding: 8px !important;
  }

  .public-profile-trophies > div {
    gap: 5px !important;
  }

  .public-profile-trophies article {
    min-height: 70px !important;
    padding: 6px !important;
  }

  .public-profile-match-row {
    min-height: 38px !important;
    grid-template-columns: 30px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 5px !important;
  }

  .public-profile-match-row > span {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.54rem !important;
  }

  .public-profile-match-row strong {
    font-size: 0.68rem !important;
  }

  .public-profile-match-row small,
  .public-profile-match-row b {
    font-size: 0.54rem !important;
  }

  .president-selection {
    width: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-height: calc(100dvh - 12px) !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 7px !important;
    padding: 8px !important;
    overflow: hidden !important;
  }

  .president-selection-head {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .president-selection-mark {
    display: none !important;
  }

  .president-selection-head h3 {
    margin: 0 0 2px !important;
    font-size: clamp(0.98rem, 3.1vw, 1.28rem) !important;
    line-height: 0.98 !important;
  }

  .president-selection-head p {
    font-size: clamp(0.58rem, 1.75vw, 0.72rem) !important;
    line-height: 1.12 !important;
  }

  .president-choice-grid {
    width: min(56vw, 410px) !important;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: center;
    justify-self: center;
    overflow: hidden !important;
  }

  .president-choice {
    width: 100% !important;
    max-width: 156px !important;
  }

  .president-choice .president-portrait {
    max-height: min(52dvh, 192px) !important;
    border-radius: 9px !important;
  }

  .president-choice .president-portrait img {
    border-radius: 9px !important;
  }

  .president-selection-footer {
    grid-template-columns: minmax(0, 1fr) 118px !important;
    padding: 6px 8px !important;
    min-height: 0;
  }

  .president-continue-btn {
    min-height: 30px !important;
    font-size: 0.62rem !important;
  }

  .president-selection-note {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .president-selection-note i {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.72rem !important;
  }

  .president-selection-note p {
    font-size: 0.58rem !important;
    line-height: 1.12 !important;
  }

  .president-selection-note span {
    display: none !important;
  }
}

.president-identity-backdrop {
  z-index: 260 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 126, 255, 0.18), transparent 38%),
    rgba(0, 3, 9, 0.78) !important;
  backdrop-filter: blur(14px);
}

.president-identity-modal {
  position: relative;
  width: min(720px, calc(100vw - 40px));
  max-height: min(650px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid rgba(255, 190, 47, 0.34);
  border-radius: 12px;
  color: #f7efe0;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 190, 47, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(8, 18, 31, 0.98), rgba(3, 5, 10, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.08),
    0 34px 110px rgba(0, 0, 0, 0.72);
}

.president-identity-modal header {
  max-width: 560px;
}

.president-identity-modal h3 {
  margin: 6px 0;
  color: #fff;
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
}

.president-identity-modal p {
  margin: 0;
  color: rgba(224, 233, 244, 0.74);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.35;
}

.president-identity-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.president-identity-preview {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.president-identity-preview img {
  width: 100%;
  aspect-ratio: 469 / 678;
  display: block;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4);
}

.president-identity-preview.president-choice-blue img {
  box-shadow: 0 0 0 1px rgba(0, 148, 255, 0.38), 0 20px 42px rgba(0, 88, 180, 0.3);
}

.president-identity-preview.president-choice-gold img {
  box-shadow: 0 0 0 1px rgba(255, 190, 47, 0.4), 0 20px 42px rgba(160, 103, 16, 0.28);
}

.president-identity-preview figcaption {
  color: rgba(255, 228, 170, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  text-align: center;
}

.president-identity-fields {
  display: grid;
  gap: 16px;
}

.president-identity-fields label {
  display: grid;
  gap: 8px;
  color: rgba(235, 241, 249, 0.9);
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.president-identity-fields input {
  width: 100%;
  min-height: 54px;
  padding: 0 15px;
  border: 1px solid rgba(0, 148, 255, 0.34);
  border-radius: 10px;
  color: #fff;
  background: rgba(2, 8, 16, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 850;
  outline: none;
}

.president-identity-fields input:focus {
  border-color: rgba(255, 190, 47, 0.78);
  box-shadow: 0 0 0 3px rgba(255, 190, 47, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.president-identity-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.president-identity-modal footer button {
  min-width: 160px;
  min-height: 50px;
}

@media (max-width: 720px) {
  .president-identity-body {
    grid-template-columns: 1fr;
  }

  .president-identity-preview {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .president-identity-backdrop {
    padding: 8px !important;
  }

  .president-identity-modal {
    width: min(760px, calc(100vw - 16px)) !important;
    max-height: calc(100dvh - 16px) !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  .president-identity-modal header {
    max-width: none;
    padding-right: 44px;
  }

  .president-identity-modal h3 {
    margin: 3px 0;
    font-size: clamp(1rem, 3vw, 1.24rem) !important;
  }

  .president-identity-modal p {
    font-size: 0.64rem !important;
    line-height: 1.18 !important;
  }

  .president-identity-body {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .president-identity-preview {
    display: grid !important;
    gap: 5px !important;
  }

  .president-identity-preview img {
    max-height: 164px;
    border-radius: 8px;
  }

  .president-identity-preview figcaption {
    font-size: 0.56rem;
    line-height: 1.05;
  }

  .president-identity-fields {
    gap: 8px !important;
  }

  .president-identity-fields label {
    gap: 4px !important;
    font-size: 0.58rem !important;
  }

  .president-identity-fields input {
    min-height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
  }

  .president-identity-modal footer {
    gap: 8px !important;
  }

  .president-identity-modal footer button {
    min-width: 128px !important;
    min-height: 38px !important;
    font-size: 0.72rem !important;
  }
}

/* Mobile landscape: compact internal sections while preserving the desktop feel. */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .main-stage {
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-view {
    position: relative !important;
    height: 100dvh !important;
    min-height: 0 !important;
    grid-template-rows: 34px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 5px 6px 42px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-body {
    height: calc(100dvh - 84px) !important;
    max-height: calc(100dvh - 84px) !important;
    min-height: 0 !important;
    padding: 5px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-pulse {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 5px;
    height: 34px;
    display: grid;
    grid-template-columns: 76px repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid rgba(243, 198, 111, 0.2);
    border-radius: 8px;
    background: rgba(2, 5, 8, 0.9);
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.26);
    overflow: hidden;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-pulse > span {
    color: rgba(255, 249, 238, 0.84);
    font-size: 0.54rem;
    font-weight: 1000;
    line-height: 1;
    text-transform: uppercase;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-pulse .presidential-pulse-metric {
    gap: 2px;
    padding: 0 3px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-pulse .presidential-pulse-metric span {
    font-size: 0.46rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-pulse .presidential-pulse-metric strong {
    font-size: 0.58rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-floating-pulse .presidential-pulse-metric i {
    height: 3px;
  }

  .game.pcm-premium-shell.presidential-subview-active .presidential-back-btn {
    width: 170px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    font-size: 0.66rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .section-title,
  .game.pcm-premium-shell.presidential-subview-active .panel h2,
  .game.pcm-premium-shell.presidential-subview-active .panel h3,
  .game.pcm-premium-shell.presidential-subview-active .table-wrap h3 {
    font-size: clamp(0.74rem, 1.5vw, 0.9rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .panel,
  .game.pcm-premium-shell.presidential-subview-active .table-wrap,
  .game.pcm-premium-shell.presidential-subview-active .card,
  .game.pcm-premium-shell.presidential-subview-active .feature-card {
    border-radius: 7px !important;
    padding: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active p,
  .game.pcm-premium-shell.presidential-subview-active small,
  .game.pcm-premium-shell.presidential-subview-active td,
  .game.pcm-premium-shell.presidential-subview-active th,
  .game.pcm-premium-shell.presidential-subview-active li {
    font-size: 0.58rem !important;
    line-height: 1.15 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .cta-button,
  .game.pcm-premium-shell.presidential-subview-active .ghost-button,
  .game.pcm-premium-shell.presidential-subview-active .btn,
  .game.pcm-premium-shell.presidential-subview-active button:not(.squad-player-card):not(.presidential-back-btn) {
    min-height: 30px !important;
    border-radius: 7px !important;
    padding: 0 10px !important;
    font-size: 0.62rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active table {
    border-spacing: 0 3px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .section-grid,
  .game.pcm-premium-shell.presidential-subview-active .grid-2,
  .game.pcm-premium-shell.presidential-subview-active .grid-3,
  .game.pcm-premium-shell.presidential-subview-active .finance-dashboard,
  .game.pcm-premium-shell.presidential-subview-active .store-grid,
  .game.pcm-premium-shell.presidential-subview-active .events-grid,
  .game.pcm-premium-shell.presidential-subview-active .press-grid {
    gap: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .finance-dashboard,
  .game.pcm-premium-shell.presidential-subview-active .club-events-page,
  .game.pcm-premium-shell.presidential-subview-active .press-room-page,
  .game.pcm-premium-shell.presidential-subview-active .store-page,
  .game.pcm-premium-shell.presidential-subview-active .missions-premium-screen,
  .game.pcm-premium-shell.presidential-subview-active .market-screen,
  .game.pcm-premium-shell.presidential-subview-active .competition-screen {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .finance-dashboard > *,
  .game.pcm-premium-shell.presidential-subview-active .club-events-page > *,
  .game.pcm-premium-shell.presidential-subview-active .press-room-page > *,
  .game.pcm-premium-shell.presidential-subview-active .store-page > *,
  .game.pcm-premium-shell.presidential-subview-active .missions-premium-screen > *,
  .game.pcm-premium-shell.presidential-subview-active .market-screen > *,
  .game.pcm-premium-shell.presidential-subview-active .competition-screen > * {
    min-height: 0 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .market-list,
  .game.pcm-premium-shell.presidential-subview-active .store-grid,
  .game.pcm-premium-shell.presidential-subview-active .events-list,
  .game.pcm-premium-shell.presidential-subview-active .press-list,
  .game.pcm-premium-shell.presidential-subview-active .mission-list,
  .game.pcm-premium-shell.presidential-subview-active .news-list,
  .game.pcm-premium-shell.presidential-subview-active .round-list,
  .game.pcm-premium-shell.presidential-subview-active .calendar-list {
    max-height: calc(100dvh - 126px) !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .store-item,
  .game.pcm-premium-shell.presidential-subview-active .event-card,
  .game.pcm-premium-shell.presidential-subview-active .press-card,
  .game.pcm-premium-shell.presidential-subview-active .mission-card,
  .game.pcm-premium-shell.presidential-subview-active .market-card {
    min-height: 0 !important;
    padding: 6px !important;
    gap: 5px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .store-item img,
  .game.pcm-premium-shell.presidential-subview-active .event-card img,
  .game.pcm-premium-shell.presidential-subview-active .press-card img,
  .game.pcm-premium-shell.presidential-subview-active .market-card img {
    max-height: 72px !important;
    object-fit: cover !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .modal,
  .game.pcm-premium-shell.presidential-subview-active .dialog,
  .game.pcm-premium-shell.presidential-subview-active [role="dialog"] {
    width: min(92vw, 760px) !important;
    max-height: calc(100dvh - 18px) !important;
    overflow: auto !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .squad-screen {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: 146px minmax(0, 1fr) 198px !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-pitch-panel,
  .game.pcm-premium-shell.presidential-subview-active .squad-coach-card,
  .game.pcm-premium-shell.presidential-subview-active .squad-bench-card {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 6px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-pitch {
    height: calc(100dvh - 126px) !important;
    min-height: 238px !important;
    max-height: 286px !important;
    border-radius: 8px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card {
    width: 68px !important;
    height: 48px !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    transform: translate(-50%, -50%) !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card::before {
    opacity: 0.52 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card::after,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-img,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .squad-role-request,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-rarity-particles,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-rarity-badge {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card em {
    top: 4px !important;
    left: 6px !important;
    font-size: 0.52rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card span,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card small {
    left: 6px !important;
    right: 24px !important;
    bottom: 6px !important;
    font-size: 0.48rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-basic,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-good,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-elite,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-special {
    right: 5px !important;
    bottom: 5px !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-energy-meter {
    left: 5px !important;
    right: 5px !important;
    bottom: 2px !important;
    height: 3px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-coach-card {
    gap: 5px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-coach-card .coach-portrait,
  .game.pcm-premium-shell.presidential-subview-active .squad-coach-card img {
    max-height: 76px !important;
    object-fit: cover !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-bench-list,
  .game.pcm-premium-shell.presidential-subview-active .squad-bench-card {
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-bench-row {
    min-height: 32px !important;
    padding: 4px 5px !important;
    gap: 5px !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .stadium-cinematic-screen {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-rows: 34px minmax(0, 1fr) 58px !important;
    gap: 5px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-cinematic-header {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-cinematic-header p,
  .game.pcm-premium-shell.presidential-subview-active .stadium-cinematic-header .eyebrow {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-cinematic-layout {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.22fr) minmax(210px, 0.78fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-feature-card {
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-feature-card video,
  .game.pcm-premium-shell.presidential-subview-active .stadium-feature-card img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-control-panel {
    max-height: 100% !important;
    min-height: 0 !important;
    padding: 6px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-control-panel p,
  .game.pcm-premium-shell.presidential-subview-active .stadium-value-panel p,
  .game.pcm-premium-shell.presidential-subview-active .stadium-review-panel p {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-lower-grid {
    min-height: 0 !important;
    grid-template-columns: 0.9fr 0.9fr 1.2fr !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-lower-grid > * {
    min-height: 0 !important;
    padding: 5px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .stadium-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .calendar-command-screen {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: 86px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-hero {
    min-height: 0 !important;
    height: 86px !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-next-hero p,
  .game.pcm-premium-shell.presidential-subview-active .calendar-competition-stack .panel-text,
  .game.pcm-premium-shell.presidential-subview-active .calendar-command-panel p {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-command-grid {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-command-panel,
  .game.pcm-premium-shell.presidential-subview-active .calendar-competition-stack {
    max-height: calc(100dvh - 134px) !important;
    min-height: 0 !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-competition-stack {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .calendar-match-card,
  .game.pcm-premium-shell.presidential-subview-active .calendar-event-card {
    min-height: 0 !important;
    padding: 6px !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .league-screen,
  .game.pcm-premium-shell.presidential-subview-active .competition-screen,
  .game.pcm-premium-shell.presidential-subview-active .league-dashboard {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-screen .section-grid,
  .game.pcm-premium-shell.presidential-subview-active .competition-screen .section-grid,
  .game.pcm-premium-shell.presidential-subview-active .league-dashboard .section-grid {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-screen .section-grid > *,
  .game.pcm-premium-shell.presidential-subview-active .competition-screen .section-grid > *,
  .game.pcm-premium-shell.presidential-subview-active .league-dashboard .section-grid > *,
  .game.pcm-premium-shell.presidential-subview-active .table-wrap:has(.compact-stat-table),
  .game.pcm-premium-shell.presidential-subview-active .table-wrap:has(.standings-table),
  .game.pcm-premium-shell.presidential-subview-active .all-leagues-panel {
    min-height: 0 !important;
    max-height: calc(100dvh - 62px) !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-side,
  .game.pcm-premium-shell.presidential-subview-active .league-extra-grid,
  .game.pcm-premium-shell.presidential-subview-active .competition-side {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    overflow: hidden !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .all-leagues-heading p,
  .game.pcm-premium-shell.presidential-subview-active .league-system-notes,
  .game.pcm-premium-shell.presidential-subview-active .promotion-rules p {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-pyramid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-tier-card,
  .game.pcm-premium-shell.presidential-subview-active .competition-card,
  .game.pcm-premium-shell.presidential-subview-active .stat-card {
    min-height: 0 !important;
    padding: 5px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .compact-stat-table td,
  .game.pcm-premium-shell.presidential-subview-active .compact-stat-table th,
  .game.pcm-premium-shell.presidential-subview-active .standings-table td,
  .game.pcm-premium-shell.presidential-subview-active .standings-table th {
    padding: 3px 4px !important;
  }
}

.mobile-league-group {
  display: contents;
}

.mobile-league-group > summary {
  display: none;
}

@media (max-width: 900px) {
  .league-action-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .league-prizes-panel {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .league-clean-layout {
    height: 100% !important;
    min-height: 0 !important;
    gap: 6px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-standings-panel {
    max-height: 238px !important;
    min-height: 0 !important;
    padding: 8px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-standings-panel h3 {
    margin-bottom: 6px !important;
    font-size: 0.78rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-action-strip {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-detail-btn {
    min-height: 31px !important;
    padding: 4px 6px !important;
    font-size: 0.58rem !important;
    line-height: 1.05 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-detail-panel {
    max-height: 122px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-detail-panel.table-wrap {
    padding: 8px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-detail-panel h3 {
    margin-bottom: 6px !important;
    font-size: 0.74rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-prizes-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .league-prizes-panel > .panel,
  .game.pcm-premium-shell.presidential-subview-active .league-prizes-panel .league-trophy-panel {
    min-height: 0 !important;
    padding: 8px !important;
  }

  .ranking-mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .ranking-mode-tabs button {
    min-height: 30px !important;
    padding: 4px 6px !important;
    font-size: 0.58rem !important;
  }

  .player-profile-modal {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 8px !important;
  }

  .player-profile-top {
    grid-template-columns: minmax(0, 1fr) 118px 190px !important;
    gap: 7px !important;
  }

  .player-profile-name h3 {
    font-size: 1.4rem !important;
    line-height: 0.9 !important;
  }

  .player-profile-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .player-profile-card {
    min-height: 72px !important;
    padding: 7px !important;
  }

  .player-profile-card strong {
    font-size: 1.15rem !important;
  }

  .player-profile-lower {
    gap: 6px !important;
  }

  .player-profile-panel {
    min-height: 64px !important;
    padding: 8px !important;
  }

  .player-profile-actions {
    gap: 6px !important;
  }

  .player-profile-action {
    min-height: 38px !important;
    padding: 6px !important;
    font-size: 0.62rem !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .section-grid:has(> .league-side) {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
    gap: 6px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .section-grid:has(> .league-side) > .table-wrap.col-7 {
    grid-column: 1 !important;
    max-height: 244px !important;
    min-height: 0 !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .section-grid:has(> .league-side) > .league-side {
    grid-column: 2 !important;
    max-height: 244px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .section-grid:has(> .league-side) > .league-side > * {
    min-height: 0 !important;
    padding: 6px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group {
    display: block !important;
    min-height: 0 !important;
    max-height: 34px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 190, 47, 0.24);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(5, 10, 14, 0.92), rgba(18, 14, 8, 0.9));
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group[open] {
    grid-column: 1 / -1 !important;
    max-height: 116px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group > summary {
    min-height: 32px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px !important;
    color: #ffd166;
    font-size: 0.66rem !important;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group > summary::-webkit-details-marker {
    display: none;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group > summary::after {
    content: "+";
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #05070a;
    background: #ffd166;
    font-size: 0.74rem;
    font-weight: 950;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group[open] > summary::after {
    content: "-";
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group > .panel,
  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group > .table-wrap {
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    max-height: 82px !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-promotion-group {
    grid-column: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-scorers-group {
    grid-column: 2 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-assists-group {
    grid-column: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-keepers-group {
    grid-column: 2 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-calendar-group {
    grid-column: 1 / -1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group .all-leagues-panel,
  .game.pcm-premium-shell.presidential-subview-active .mobile-league-group .table-wrap {
    width: 100% !important;
  }
}

@media (orientation: landscape) and (max-height: 480px) and (max-width: 980px) {
  .game.pcm-premium-shell.presidential-subview-active .squad-pitch {
    overflow: visible !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card {
    width: 76px !important;
    height: 54px !important;
    min-height: 54px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card::after,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .squad-role-request,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-rarity-particles,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-rarity-badge {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-img {
    display: block !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap {
    top: 4px !important;
    left: 34px !important;
    width: 34px !important;
    height: 38px !important;
    transform: translateX(-50%) !important;
    opacity: 0.96;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-img {
    top: 0 !important;
    left: 0 !important;
    width: 34px !important;
    height: 38px !important;
    transform: none !important;
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap:not(:has(.player-avatar-img[style*="display: none"])) .player-avatar {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap:has(.player-avatar-img[style*="display: none"]) .player-avatar-img {
    display: none !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-avatar-wrap:has(.player-avatar-img[style*="display: none"]) .player-avatar {
    display: block !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card em {
    top: 4px !important;
    left: 5px !important;
    font-size: 0.5rem !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card span,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card small {
    left: 5px !important;
    right: 24px !important;
    bottom: 7px !important;
    font-size: 0.46rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-basic,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-good,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-elite,
  .game.pcm-premium-shell.presidential-subview-active .squad-player-card strong.rarity-special {
    top: 50% !important;
    right: 5px !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 19px;
    text-align: right;
    font-size: 0.76rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-player-card .player-energy-meter {
    left: 5px !important;
    right: 24px !important;
    bottom: 2px !important;
    height: 2px !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-team-metrics {
    left: 7px !important;
    right: 7px !important;
    bottom: -27px !important;
    width: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    z-index: 4 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-team-metrics article {
    min-height: 23px !important;
    gap: 1px !important;
    padding: 3px 5px !important;
    border-radius: 5px !important;
    background: rgba(1, 8, 15, 0.92) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-team-metrics article span {
    font-size: 0.42rem !important;
    line-height: 1 !important;
  }

  .game.pcm-premium-shell.presidential-subview-active .squad-team-metrics article strong {
    font-size: 0.64rem !important;
    line-height: 1 !important;
  }
}

.game.pcm-premium-shell.presidential-home-active .bottom-dock.app-nav,
.game.pcm-premium-shell.presidential-subview-active .bottom-dock.app-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.game.pcm-premium-shell .presidential-bottom-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 980px) and (orientation: landscape) {
  .game.pcm-premium-shell .presidential-bottom-strip {
    grid-template-columns: minmax(250px, 332px) minmax(0, 1fr) max-content !important;
  }

  .game.pcm-premium-shell .presidential-bottom-actions {
    width: min(332px, 37vw) !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .game.pcm-premium-shell .presidential-bottom-actions button {
    min-height: 30px !important;
    padding: 0 5px !important;
    font-size: 0.5rem !important;
  }

  .game.pcm-premium-shell .presidential-bottom-actions svg {
    width: 13px !important;
    height: 13px !important;
  }

  .legal-modal {
    width: 96vw !important;
    max-height: 90vh !important;
  }

  .legal-modal header {
    padding: 12px 16px !important;
  }

  .legal-modal h3 {
    font-size: 1.35rem !important;
  }

  .legal-modal-tabs {
    padding: 8px 14px !important;
  }

  .legal-modal-tabs a {
    padding: 7px 9px !important;
    font-size: 0.58rem !important;
  }

  .legal-modal-content {
    padding: 12px 16px 18px !important;
  }

  .legal-modal-content pre {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }
}