/*
 * Clube
 * Ajustes da tela /clube, identidade visual, camisas e avisos.
 */

.app-club-flag{
   min-height: 190px;
   background: #09090b;
}

.app-club-identity-card{
   min-height: 255px;
   border: 1px solid rgba(63, 63, 70, .86);
   isolation: isolate;
}

.app-club-identity-card__shade{
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   background:
      linear-gradient(180deg, rgba(9, 9, 11, .18) 0%, rgba(9, 9, 11, .32) 42%, rgba(9, 9, 11, .92) 100%),
      linear-gradient(90deg, rgba(9, 9, 11, .68) 0%, rgba(9, 9, 11, .16) 46%, rgba(9, 9, 11, .62) 100%);
}

.app-club-identity-card__edit,
.app-club-identity-card__rep{
   position: absolute;
   z-index: 3;
   top: 14px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(255, 255, 255, .14);
   background: rgba(15, 23, 42, .74);
   color: #fff;
   box-shadow: 0 12px 24px rgba(0, 0, 0, .32);
   backdrop-filter: blur(8px);
}

.app-club-identity-card__edit{
   right: 14px;
   width: 38px;
   height: 38px;
   border-radius: 10px;
}

.app-club-identity-card__rep{
   left: 14px;
   gap: 7px;
   min-height: 36px;
   padding: 0 13px;
   border-color: rgba(253, 224, 71, .22);
   border-radius: 999px;
   color: #fef3c7;
   font-size: .95rem;
   font-weight: 900;
}

.app-club-identity-card__body{
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 14px;
   z-index: 2;
}

.app-club-identity-card__main{
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 14px;
   background: rgba(15, 23, 42, .78);
   padding: 12px;
   box-shadow: 0 14px 28px rgba(0, 0, 0, .34);
   backdrop-filter: blur(8px);
}

.app-club-identity-card__visual{
   display: grid;
   justify-items: center;
   gap: 0px;
   flex: 0 0 auto;
   padding: 0;
}

.app-club-identity-card__shield{
   width: 72px;
   height: 86px;
   flex: 0 0 auto;
   filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .42));
   padding: 0;
}

.app-club-identity-card__text{
   min-width: 0;
}

.app-club-identity-card__text h1{
   margin: 0;
   color: #fff;
   font-size: clamp(1.35rem, 6vw, 2rem);
   line-height: 1.05;
   font-weight: 950;
   letter-spacing: 0;
   overflow-wrap: anywhere;
   text-shadow: 0 3px 12px rgba(0, 0, 0, .58);
}

.app-club-identity-card__location{
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 9px;
   color: rgba(255, 255, 255, .82);
   font-size: .72rem;
   line-height: 1.25;
}

.app-club-identity-card__location span{
   max-width: 100%;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 8px;
   background: rgba(2, 6, 23, .42);
   padding: 5px 8px;
   overflow-wrap: anywhere;
}

.app-club-identity-card__location strong{
   margin-right: 4px;
   color: rgba(255, 255, 255, .48);
   font-size: .62rem;
   text-transform: uppercase;
}

.app-club-identity-card__kits{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
}

.app-club-identity-card__kit{
   filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .38));
}

.app-club-identity-card__kit--main{
   width: 50px;
   height: 65px;
}

.app-club-identity-card__kit--alt{
   width: 28px;
   height: 36px;
   opacity: .96;
}

@media (max-width: 420px){
   .app-club-identity-card{
      min-height: 286px;
   }

   .app-club-identity-card__main{
      align-items: center;
   }

   .app-club-identity-card__shield{
      width: 60px;
      height: 74px;
   }

   .app-club-identity-card__kit--main{
      width: 50px;
      height: 65px;
   }

   .app-club-identity-card__kit--alt{
      width: 26px;
      height: 34px;
   }
}

.app-club-flag__media{
   position: absolute;
   inset: 0;
   transform: translateY(0) scale(1.04);
   transform-origin: center;
   will-change: transform;
}

.app-club-flag__fallback{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   min-height: 190px;
   background:
      radial-gradient(circle at 18% 24%, rgba(255,255,255,.22), transparent 18%),
      linear-gradient(135deg,
         var(--flag-a) 0 34%,
         var(--flag-b) 34% 66%,
         var(--flag-c) 66% 100%);
}

.app-club-flag__svg-layer{
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
}

.app-club-flag--waving{
   isolation: isolate;
}

.app-club-flag--waving .app-club-flag__media{
   overflow: hidden;
}

.app-club-flag--waving .app-club-flag__svg-layer{
   inset: -2% -3%;
   width: auto;
   height: auto;
   transform-origin: center center;
   animation: club-flag-wave 3.4s ease-in-out infinite;
}

.app-club-flag--waving .app-club-flag__media::after{
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: linear-gradient(90deg, rgba(255,255,255,.2), transparent 28%, rgba(0,0,0,.16) 58%, transparent);
   mix-blend-mode: screen;
   opacity: .48;
   animation: club-flag-light-wave 3.4s ease-in-out infinite;
}

@keyframes club-flag-wave{
   0%, 100% { transform: translateX(0) skewY(-1.2deg) scale(1.02); }
   50% { transform: translateX(4px) skewY(2.4deg) scale(1.035); }
}

@keyframes club-flag-light-wave{
   0%, 100% { transform: translateX(-2%); opacity: .42; }
   50% { transform: translateX(2%); opacity: .58; }
}

.app-club-flag__svg-layer svg,
.app-club-flag__media svg{
   display: block;
   width: 100%;
   height: 100%;
}

@media (prefers-reduced-motion: reduce){
   .app-club-flag__media,
   .app-club-flag--waving .app-club-flag__svg-layer,
   .app-club-flag--waving .app-club-flag__media::after{
      transform: none !important;
      animation: none !important;
   }
}

/* ---------------------------------------------------------------
   Expansão do estádio — modal com hero real, situação atual e
   próximo nível (usa as imagens configuradas por nível do clube).
--------------------------------------------------------------- */
.estadio-upgrade {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.estadio-hero {
   position: relative;
   height: 168px;
   border-radius: 0.9rem;
   overflow: hidden;
   border: 1px solid hsl(240 4% 20%);
   background: #0a0f0c;
}

.estadio-hero__img,
.estadio-hero img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.estadio-hero__gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(4,8,6,0) 45%, rgba(4,8,6,.55) 78%, rgba(4,8,6,.88) 100%);
   pointer-events: none;
}

.estadio-hero__badge {
   position: absolute;
   left: 0.75rem;
   bottom: 0.65rem;
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.72rem;
   font-weight: 800;
   color: #eafff3;
   text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

.estadio-hero__badge i {
   font-size: 0.28rem;
   color: rgba(234,255,243,.55);
}

.estadio-hero--reforma {
   border-color: rgba(161, 161, 170, 0.35);
}

.estadio-hero__reforma-tag {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
   align-self: center;
   border: 1px solid rgba(161, 161, 170, 0.35);
   background: rgba(113, 113, 122, 0.18);
   color: #d4d4d8;
   font-size: 0.68rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .04em;
   padding: 0.3rem 0.7rem;
   border-radius: 999px;
}

.estadio-stats__title {
   font-size: 0.68rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: hsl(240 5% 55%);
   text-align: center;
   margin-bottom: 0.6rem;
}

.estadio-stats__grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.5rem;
}

@media (min-width: 420px) {
   .estadio-stats__grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

.estadio-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.35rem;
   text-align: center;
   padding: 0.75rem 0.5rem;
   border-radius: 0.7rem;
   border: 1px solid hsl(240 4% 18%);
   background: hsl(240 6% 9%);
}

.estadio-stat__icon {
   display: grid;
   place-items: center;
   width: 1.9rem;
   height: 1.9rem;
   border-radius: 999px;
   background: hsl(240 5% 15%);
   color: hsl(240 5% 70%);
   font-size: 0.85rem;
}

.estadio-stat__label {
   font-size: 0.62rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .04em;
   color: hsl(240 5% 55%);
}

.estadio-stat__value {
   font-size: 1.15rem;
   font-weight: 900;
   color: hsl(0 0% 96%);
   line-height: 1;
}

.estadio-stat--accent {
   border-color: color-mix(in srgb, var(--theme-primary, #1eb783) 35%, transparent);
   background: color-mix(in srgb, var(--theme-primary, #1eb783) 12%, hsl(240 6% 9%));
}

.estadio-stat--accent .estadio-stat__icon {
   background: color-mix(in srgb, var(--theme-primary, #1eb783) 30%, transparent);
   color: color-mix(in srgb, var(--theme-primary, #1eb783) 65%, white);
}

.estadio-stat--accent .estadio-stat__value {
   color: color-mix(in srgb, var(--theme-primary, #1eb783) 70%, white);
}

.estadio-next {
   border-radius: 0.9rem;
   border: 1px solid color-mix(in srgb, var(--theme-primary, #1eb783) 40%, transparent);
   background: color-mix(in srgb, var(--theme-primary, #1eb783) 8%, hsl(240 6% 9%));
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary, #1eb783) 12%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--theme-primary, #1eb783) 55%, transparent);
   padding: 0.9rem;
}

.estadio-next__label {
   font-size: 0.68rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: .06em;
   color: color-mix(in srgb, var(--theme-primary, #1eb783) 75%, white);
   margin-bottom: 0.65rem;
}

/* Imagem do próximo nível em destaque — mesma escala do hero atual. */
.estadio-next__thumb {
   position: relative;
   width: 100%;
   height: 150px;
   border-radius: 0.75rem;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--theme-primary, #1eb783) 45%, transparent);
   background: #0a0f0c;
}

.estadio-next__thumb-img,
.estadio-next__thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.estadio-next__thumb-gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(4,8,6,0) 45%, rgba(4,8,6,.55) 78%, rgba(4,8,6,.9) 100%);
   pointer-events: none;
}

.estadio-next__gain {
   position: absolute;
   left: 0.75rem;
   bottom: 0.65rem;
   display: flex;
   align-items: baseline;
   gap: 0.4rem;
   font-size: 1.35rem;
   font-weight: 900;
   color: #eafff3;
   text-shadow: 0 1px 6px rgba(0,0,0,.65);
}

.estadio-next__gain i {
   font-size: 1rem;
   color: color-mix(in srgb, var(--theme-primary, #1eb783) 80%, white);
}

.estadio-next__gain span {
   font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .02em;
   color: rgba(234,255,243,.8);
}

.estadio-next__info {
   min-width: 0;
   margin-top: 0.7rem;
}

.estadio-next__desc {
   font-size: 0.78rem;
   line-height: 1.4;
   color: hsl(240 5% 62%);
}

.estadio-next__meta {
   margin-top: 0.55rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 0.9rem;
   font-size: 0.68rem;
   font-weight: 700;
   color: hsl(240 5% 55%);
}

.estadio-next__meta span {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
}

.estadio-upgrade__cta {
   display: flex;
   flex-direction: column;
   gap: 0.55rem;
}

.estadio-cta {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   width: 100%;
   padding: 0.75rem 1rem;
   border-radius: 0.85rem;
   border: 1px solid transparent;
   text-align: left;
   transition: transform 120ms ease, filter 120ms ease, opacity 120ms ease;
}

.estadio-cta:active {
   transform: scale(0.98);
}

.estadio-cta__icon {
   flex: none;
   display: grid;
   place-items: center;
   width: 2.2rem;
   height: 2.2rem;
   border-radius: 999px;
   font-size: 1rem;
}

.estadio-cta__text {
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
   min-width: 0;
}

.estadio-cta__text strong {
   font-size: 0.95rem;
   font-weight: 900;
}

.estadio-cta__text span {
   font-size: 0.76rem;
   font-weight: 700;
   opacity: 0.85;
}

/* Pilas = SEMPRE roxo + ícone fa-money-bills (moeda premium, comprada com
   dinheiro real). Ver memória do app: convenção de cores pilas x coins. */
.estadio-cta--pilas {
   background: rgba(168, 85, 247, 0.14);
   border-color: rgba(168, 85, 247, 0.45);
   color: #e9d5ff;
}

.estadio-cta--pilas .estadio-cta__icon {
   background: rgba(168, 85, 247, 0.22);
   color: #d8b4fe;
}

.estadio-cta--pilas:hover {
   background: rgba(168, 85, 247, 0.2);
}

.estadio-cta--pilas[data-sem-saldo="1"] {
   opacity: 0.65;
}

/* Coins = SEMPRE âmbar/amarelo + ícone fa-coins (saldo do clube: renda de
   estádio, sócios, venda de jogador, apostas). Nunca "R$" nem azul. */
.estadio-cta--coins {
   background: rgba(245, 158, 11, 0.14);
   border-color: rgba(245, 158, 11, 0.45);
   color: #fde68a;
}

.estadio-cta--coins .estadio-cta__icon {
   background: rgba(245, 158, 11, 0.22);
   color: #fcd34d;
}

.estadio-cta--coins:hover {
   background: rgba(245, 158, 11, 0.2);
}

.estadio-cta--coins[disabled] {
   opacity: 0.5;
   cursor: not-allowed;
}

.estadio-upgrade__cancel {
   width: 100%;
   padding: 0.6rem 1rem;
   border-radius: 0.7rem;
   border: 1px solid hsl(240 4% 22%);
   background: hsl(240 5% 13%);
   color: hsl(240 5% 70%);
   font-size: 0.85rem;
   font-weight: 700;
}

body[data-theme="light"] .estadio-cta--pilas {
   background: #f3e8ff;
   border-color: #a855f7;
   color: #4c1d95;
}

body[data-theme="light"] .estadio-cta--pilas .estadio-cta__icon {
   color: #4c1d95;
}

body[data-theme="light"] .estadio-cta--coins {
   background: #fef3c7;
   border-color: #f59e0b;
   color: #78350f;
}

body[data-theme="light"] .estadio-cta--coins .estadio-cta__icon {
   color: #78350f;
}

body[data-theme="light"] .estadio-stat {
   background: #f4f4f5;
   border-color: #e4e4e7;
}

body[data-theme="light"] .estadio-stat__value {
   color: #18181b;
}