/*
  WC2026 TEST Hybrid Visual Theme
  Keeps the original World Cup black/gold identity and adds the approved
  blue/cyan palette as supporting accents. No application logic is changed.
*/
:root{
  --wc-blue-light:#1971E5;
  --wc-blue-royal:#003EB1;
  --wc-navy:#000066;
  --wc-turquoise:#1AD9C7;
  --wc-sky:#90D4FA;
  --wc-gold:#D6B35A;
  --wc-black:#050505;
  --wc-ink:#111827;
  --wc-soft-blue:#F3FAFF;
  --wc-border-blue:rgba(25,113,229,.22);
  --wc-border-gold:rgba(214,179,90,.44);
  --wc-shadow-blue:0 18px 46px rgba(0,62,177,.13);
  --wc-accent-gradient:linear-gradient(180deg,var(--wc-gold),var(--wc-blue-light),var(--wc-turquoise));
}

/* Preserve the World Cup dark atmosphere while adding restrained blue/cyan depth. */
body:not(.a3-report-mode){
  background:
    radial-gradient(circle at 18% 13%,rgba(214,179,90,.28),transparent 27%),
    radial-gradient(circle at 86% 8%,rgba(25,113,229,.25),transparent 27%),
    radial-gradient(circle at 76% 82%,rgba(26,217,199,.11),transparent 28%),
    linear-gradient(135deg,#050505,#111827 54%,#07142d) !important;
  background-attachment:fixed;
}

body:not(.a3-report-mode) .hero{
  position:relative;
}

body:not(.a3-report-mode) .hero::after{
  content:"";
  display:block;
  width:min(330px,72vw);
  height:3px;
  margin:20px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--wc-gold),var(--wc-blue-light),var(--wc-turquoise),transparent);
  box-shadow:0 0 20px rgba(25,113,229,.24);
}

body:not(.a3-report-mode) .brand{
  background:linear-gradient(135deg,rgba(214,179,90,.16),rgba(25,113,229,.12));
  border-color:rgba(214,179,90,.62) !important;
  box-shadow:0 9px 26px rgba(0,62,177,.14);
}

body:not(.a3-report-mode) .worldcup-logo{
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.44)) drop-shadow(0 0 16px rgba(25,113,229,.18));
}

/* Navigation retains gold, with blue/cyan supporting highlights. */
body:not(.a3-report-mode) .main-nav .nav-btn{
  position:relative;
  overflow:hidden;
  border-color:rgba(214,179,90,.48) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(25,113,229,.08)) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.08);
}

body:not(.a3-report-mode) .main-nav .nav-btn::before{
  content:"";
  position:absolute;
  inset:auto 12% 0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--wc-gold),var(--wc-blue-light),var(--wc-turquoise));
  opacity:.76;
}

body:not(.a3-report-mode) .main-nav .nav-btn:hover,
body:not(.a3-report-mode) .main-nav .nav-btn:focus-visible{
  background:linear-gradient(135deg,var(--wc-gold),#e7c873 56%,var(--wc-sky)) !important;
  color:#111 !important;
  border-color:rgba(144,212,250,.78) !important;
  box-shadow:0 15px 32px rgba(0,62,177,.20);
}

body:not(.a3-report-mode) .main-nav .nav-icon{
  border:1px solid rgba(144,212,250,.20);
  background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(25,113,229,.16));
}

/* Shared cards: white and clean like SWA, while retaining a gold World Cup edge. */
body:not(.a3-report-mode) .card:not(.a3-report-table-only-card),
body:not(.a3-report-mode) .panel,
body:not(.a3-report-mode) .login-card,
body:not(.a3-report-mode) .lock-card{
  position:relative;
  border:1px solid var(--wc-border-blue) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.985),rgba(250,253,255,.975)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.24),var(--wc-shadow-blue) !important;
}

body:not(.a3-report-mode) .card:not(.a3-report-table-only-card)::before,
body:not(.a3-report-mode) .panel::before{
  content:"";
  position:absolute;
  top:20px;
  bottom:20px;
  right:0;
  width:4px;
  border-radius:4px 0 0 4px;
  background:var(--wc-accent-gradient);
  opacity:.84;
}

body:not(.a3-report-mode) .card h2,
body:not(.a3-report-mode) .panel h2{
  color:var(--wc-navy);
}

body:not(.a3-report-mode) input,
body:not(.a3-report-mode) select,
body:not(.a3-report-mode) textarea{
  border-color:rgba(0,62,177,.18);
  background:linear-gradient(180deg,#fff,#fbfdff);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

body:not(.a3-report-mode) input:focus,
body:not(.a3-report-mode) select:focus,
body:not(.a3-report-mode) textarea:focus{
  outline:none;
  border-color:var(--wc-blue-light) !important;
  box-shadow:0 0 0 4px rgba(25,113,229,.12) !important;
}

/* Keep gold as the primary call-to-action color. */
body:not(.a3-report-mode) button:not(.nav-btn):not(.danger):not(.ghost):not(.light):not(.primary),
body:not(.a3-report-mode) .btn2,
body:not(.a3-report-mode) .gold{
  background:linear-gradient(135deg,var(--wc-gold),#e7c873 64%,var(--wc-sky)) !important;
  color:#111827 !important;
  box-shadow:0 12px 26px rgba(214,179,90,.18),0 7px 18px rgba(0,62,177,.10);
}

body:not(.a3-report-mode) .primary,
body:not(.a3-report-mode) .btn:not(.light):not(.gold),
body:not(.a3-report-mode) .quick button.active{
  background:linear-gradient(135deg,var(--wc-turquoise),var(--wc-blue-light),var(--wc-blue-royal)) !important;
  color:#fff !important;
}

body:not(.a3-report-mode) button:not(:disabled):hover,
body:not(.a3-report-mode) .btn:hover{
  transform:translateY(-2px);
}

/* Match cards use the SWA structure while retaining gold in the frame. */
body:not(.a3-report-mode) .match-card{
  position:relative;
  overflow:hidden;
  padding:clamp(17px,2.8vw,23px) !important;
  border:1px solid rgba(214,179,90,.42) !important;
  border-radius:22px !important;
  background:linear-gradient(180deg,#fff,#fbfdff) !important;
  box-shadow:0 13px 34px rgba(0,0,0,.10),0 9px 25px rgba(0,62,177,.08) !important;
}

body:not(.a3-report-mode) .match-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--wc-accent-gradient);
}

body:not(.a3-report-mode) .match-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(25,113,229,.34) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.14),0 12px 30px rgba(0,62,177,.12) !important;
}

body:not(.a3-report-mode) .match-card .round{
  color:var(--wc-blue-royal) !important;
}

/* Large matchup flags only inside the main match heading. */
body:not(.a3-report-mode) .match-card .teams{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items:center !important;
  justify-content:stretch !important;
  gap:18px !important;
  width:100%;
  max-width:660px;
  margin:15px auto 13px !important;
  padding:4px 0;
  color:var(--wc-navy) !important;
}

body:not(.a3-report-mode) .match-card .teams .team-with-flag{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:11px !important;
  min-width:0;
  min-height:150px;
  padding:14px 11px !important;
  border:1px solid rgba(214,179,90,.34);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(243,250,255,.90));
  color:var(--wc-navy) !important;
  box-shadow:0 11px 26px rgba(0,62,177,.08),inset 0 1px 0 rgba(255,255,255,.98);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}

body:not(.a3-report-mode) .match-card .teams .team-with-flag:hover{
  transform:translateY(-3px);
  border-color:rgba(25,113,229,.30);
  box-shadow:0 16px 30px rgba(0,62,177,.13);
}

body:not(.a3-report-mode) .match-card .teams .team-with-flag > span:last-child{
  display:block;
  max-width:100%;
  color:var(--wc-navy) !important;
  font-size:clamp(16px,1.85vw,21px);
  font-weight:950;
  line-height:1.35;
  text-align:center;
  overflow-wrap:anywhere;
}

body:not(.a3-report-mode) .match-card .teams .flag-frame{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:168px;
  height:112px;
  box-sizing:border-box;
  padding:7px !important;
  border:2px solid rgba(214,179,90,.60) !important;
  border-radius:20px !important;
  background:linear-gradient(145deg,#fff,#eaf7ff) !important;
  box-shadow:0 13px 27px rgba(0,62,177,.18),inset 0 1px 0 rgba(255,255,255,.98) !important;
  isolation:isolate;
  animation:wcFlagFloat 3.5s ease-in-out infinite !important;
  will-change:transform;
}

body:not(.a3-report-mode) .match-card .teams .flag-frame::after{
  content:"";
  position:absolute;
  inset:-6px;
  z-index:-1;
  border:2px solid rgba(26,217,199,.30);
  border-radius:25px;
  opacity:0;
  transform:scale(.94);
  animation:wcFlagRing 3.5s ease-out infinite;
  pointer-events:none;
}

body:not(.a3-report-mode) .match-card .teams .team-with-flag:first-child .flag-frame,
body:not(.a3-report-mode) .match-card .teams .team-with-flag:first-child .flag-frame::after{
  animation-delay:-.35s !important;
}

body:not(.a3-report-mode) .match-card .teams .team-with-flag:last-child .flag-frame,
body:not(.a3-report-mode) .match-card .teams .team-with-flag:last-child .flag-frame::after{
  animation-delay:-1.95s !important;
}

body:not(.a3-report-mode) .match-card .teams .flag-frame img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  border:0 !important;
  border-radius:13px !important;
  box-shadow:0 5px 13px rgba(0,20,60,.20) !important;
}

body:not(.a3-report-mode) .match-card .teams > span:not(.team-with-flag){
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0 !important;
  border:1px solid rgba(214,179,90,.58);
  border-radius:50%;
  background:linear-gradient(145deg,#fff7d6,#fff,#e7f6ff);
  color:var(--wc-blue-royal) !important;
  font-size:21px;
  font-weight:950;
  box-shadow:0 9px 20px rgba(0,62,177,.11);
}

/* Keep flags compact everywhere else: results, tables and reports. */
body:not(.a3-report-mode) .result .team-with-flag,
body:not(.a3-report-mode) td .team-with-flag,
body:not(.a3-report-mode) .score-team-line .team-with-flag{
  display:inline-flex !important;
  flex-direction:row !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

body:not(.a3-report-mode) .result .flag-frame,
body:not(.a3-report-mode) td .flag-frame,
body:not(.a3-report-mode) .score-team-line .flag-frame{
  display:inline-flex !important;
  width:34px !important;
  height:24px !important;
  padding:2px !important;
  border:1px solid rgba(214,179,90,.46) !important;
  border-radius:6px !important;
  animation:none !important;
  box-shadow:0 3px 8px rgba(0,0,0,.14) !important;
}

body:not(.a3-report-mode) .result .flag-frame::after,
body:not(.a3-report-mode) td .flag-frame::after,
body:not(.a3-report-mode) .score-team-line .flag-frame::after{
  display:none !important;
}

body:not(.a3-report-mode) .result .flag-frame img,
body:not(.a3-report-mode) td .flag-frame img,
body:not(.a3-report-mode) .score-team-line .flag-frame img{
  border-radius:4px !important;
}

body:not(.a3-report-mode) .timer{
  background:linear-gradient(135deg,rgba(214,179,90,.18),rgba(144,212,250,.20)) !important;
  border-color:rgba(214,179,90,.56) !important;
}

body:not(.a3-report-mode) .rank-box,
body:not(.a3-report-mode) .stat-card,
body:not(.a3-report-mode) .metric,
body:not(.a3-report-mode) .current{
  border-color:rgba(25,113,229,.20) !important;
  background:linear-gradient(145deg,#fff,#f3faff) !important;
}

body:not(.a3-report-mode) .progress-bar div,
body:not(.a3-report-mode) .fill{
  background:linear-gradient(90deg,var(--wc-gold),var(--wc-blue-light),var(--wc-turquoise)) !important;
}

body:not(.a3-report-mode) th{
  background:linear-gradient(135deg,#111827,var(--wc-navy),var(--wc-blue-royal)) !important;
  color:#fff !important;
}

body:not(.a3-report-mode) .quick button{
  border-color:rgba(25,113,229,.22) !important;
}

@keyframes wcFlagFloat{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg)}
  50%{transform:translateY(-4px) scale(1.025) rotate(.28deg)}
}

@keyframes wcFlagRing{
  0%,38%{opacity:0;transform:scale(.94)}
  52%{opacity:.60}
  78%,100%{opacity:0;transform:scale(1.11)}
}

@media(max-width:820px){
  body:not(.a3-report-mode) .match-card .teams{
    gap:10px !important;
    margin:12px auto 11px !important;
  }

  body:not(.a3-report-mode) .match-card .teams .team-with-flag{
    min-height:116px;
    gap:8px !important;
    padding:10px 6px !important;
    border-radius:17px;
  }

  body:not(.a3-report-mode) .match-card .teams .flag-frame{
    width:112px;
    height:76px;
    padding:5px !important;
    border-radius:16px !important;
  }

  body:not(.a3-report-mode) .match-card .teams .flag-frame::after{
    inset:-5px;
    border-radius:21px;
  }

  body:not(.a3-report-mode) .match-card .teams .team-with-flag > span:last-child{
    font-size:clamp(13px,3.8vw,17px);
  }

  body:not(.a3-report-mode) .match-card .teams > span:not(.team-with-flag){
    width:38px;
    height:38px;
    font-size:17px;
  }
}

@media(max-width:460px){
  body:not(.a3-report-mode) .match-card{
    padding:14px 9px !important;
  }

  body:not(.a3-report-mode) .match-card .teams{
    gap:6px !important;
  }

  body:not(.a3-report-mode) .match-card .teams .team-with-flag{
    min-height:98px;
    padding:8px 3px !important;
  }

  body:not(.a3-report-mode) .match-card .teams .flag-frame{
    width:88px;
    height:60px;
    padding:4px !important;
    border-radius:14px !important;
  }

  body:not(.a3-report-mode) .match-card .teams .flag-frame img{
    border-radius:9px !important;
  }

  body:not(.a3-report-mode) .match-card .teams > span:not(.team-with-flag){
    width:32px;
    height:32px;
    font-size:15px;
  }
}

@media(max-width:360px){
  body:not(.a3-report-mode) .match-card .teams .flag-frame{
    width:76px;
    height:52px;
  }
  body:not(.a3-report-mode) .match-card .teams .team-with-flag > span:last-child{
    font-size:12px;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.a3-report-mode) .match-card .teams .flag-frame,
  body:not(.a3-report-mode) .match-card .teams .flag-frame::after{
    animation:none !important;
  }
}