
/* =========================================================
   CHAMPIONS NIGHT ULTRA
   Original premium football-night identity.
   No official UEFA marks or logos.
   ========================================================= */
:root{
  --cn-bg:#02051a;
  --cn-bg2:#06143c;
  --cn-card:#071a42;
  --cn-card2:#0a2457;
  --cn-blue:#4a7dff;
  --cn-violet:#7b5cff;
  --cn-purple:#9b63ff;
  --cn-cyan:#5fe7ff;
  --cn-ice:#c7f5ff;
  --cn-gold:#ffd46d;
  --cn-green:#57e0aa;
  --cn-red:#ff7089;
  --cn-line:rgba(133,180,255,.13);
  --cn-text:#f8fbff;
  --cn-muted:#8ea5cb;
  --cn-glow:0 0 32px rgba(91,139,255,.18);
}

/* Global atmosphere */
body{
  background:
    radial-gradient(circle at 50% -12%,rgba(89,104,255,.26),transparent 32%),
    radial-gradient(circle at 8% 23%,rgba(68,118,255,.14),transparent 27%),
    radial-gradient(circle at 93% 18%,rgba(138,78,255,.14),transparent 30%),
    radial-gradient(circle at 50% 118%,rgba(57,220,255,.07),transparent 34%),
    linear-gradient(180deg,#020516 0%,#06112d 45%,#020510 100%)!important;
  color:var(--cn-text);
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-4;pointer-events:none;opacity:.6;
  background-image:
    radial-gradient(circle at 10% 20%,rgba(255,255,255,.85) 0 1px,transparent 1.3px),
    radial-gradient(circle at 23% 76%,rgba(167,205,255,.65) 0 1px,transparent 1.3px),
    radial-gradient(circle at 58% 11%,rgba(255,255,255,.75) 0 1px,transparent 1.3px),
    radial-gradient(circle at 72% 58%,rgba(190,220,255,.55) 0 1px,transparent 1.3px),
    radial-gradient(circle at 92% 34%,rgba(255,255,255,.75) 0 1px,transparent 1.3px);
  background-size:260px 260px,330px 330px,290px 290px,360px 360px,410px 410px;
}
body::after{
  content:"";position:fixed;left:0;right:0;bottom:-22vh;height:46vh;z-index:-3;pointer-events:none;
  background:
    radial-gradient(ellipse at center,rgba(57,160,255,.10),transparent 57%),
    repeating-linear-gradient(90deg,transparent 0 6%,rgba(102,160,255,.018) 6.2% 6.5%);
  filter:blur(.2px);
}

/* Navigation */
.public-topnav.final-topnav{
  border:1px solid rgba(139,183,255,.14)!important;
  background:linear-gradient(180deg,rgba(5,16,47,.90),rgba(3,10,31,.88))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.32),0 0 50px rgba(75,116,255,.08)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
}
.final-brand-mark,.public-brand-mark{
  background:linear-gradient(145deg,#8062ff,#4b83ff 58%,#61e8ff)!important;
  box-shadow:0 0 30px rgba(91,133,255,.34)!important;
}
.public-brand strong{letter-spacing:.18em!important}
.public-tab{position:relative;overflow:hidden}
.public-tab::after{
  content:"";position:absolute;left:22%;right:22%;bottom:2px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,transparent,#69eaff,transparent);transform:scaleX(0);transition:.18s ease;
}
.public-tab:hover::after,.public-tab.active::after{transform:scaleX(1)}
.public-tab.active{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(104,115,255,.12),rgba(69,154,255,.055))!important;
}
.public-cta-btn,.auth-main-submit,.signature-auth-submit,.btn.primary{
  background:linear-gradient(135deg,#7b5dff 0%,#486fff 45%,#3ba7ff 73%,#5feaff 100%)!important;
  box-shadow:0 18px 44px rgba(57,111,255,.24),0 0 26px rgba(83,221,255,.08)!important;
}

/* Cards */
.card,
.public-card,
.omni-card,
.hero-card,
.auth-portal-card,
.signup-pro-card,
.auth-portal-story,
.signup-pro-intro{
  border-color:rgba(135,180,255,.11)!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(123,92,255,.075),transparent 31%),
    linear-gradient(180deg,rgba(7,23,58,.94),rgba(4,12,33,.96))!important;
  box-shadow:0 28px 86px rgba(0,0,0,.25)!important;
}
.card:hover{
  border-color:rgba(103,231,255,.17)!important;
}

/* Generic headings */
.eyebrow{
  color:#66e8ff!important;
  letter-spacing:.15em!important;
}
.page-head h2,.page-head h1{
  letter-spacing:-.045em!important;
}
.page-head::after{
  content:"";display:block;width:140px;height:2px;margin-top:12px;border-radius:999px;
  background:linear-gradient(90deg,#7d61ff,#4d84ff,#66e9ff,transparent);
}

/* Ribbon */
.sig-page-ribbon,.auth-page-ribbon{
  color:#6f86b1!important;
  border-bottom:1px solid rgba(134,182,255,.06);
}

/* Hero */
.champions-night-hero{
  position:relative;overflow:hidden;padding:34px;border-radius:34px;border:1px solid rgba(139,183,255,.13);
  background:
    radial-gradient(circle at 22% 0%,rgba(108,89,255,.20),transparent 29%),
    radial-gradient(circle at 88% 24%,rgba(67,191,255,.12),transparent 30%),
    linear-gradient(145deg,#07163a 0%,#081f50 48%,#04122f 100%);
  box-shadow:0 40px 110px rgba(0,0,0,.34),0 0 55px rgba(81,118,255,.10);
}
.champions-night-hero::before{
  content:"";position:absolute;inset:-35%;
  background:conic-gradient(from 20deg,transparent 0 8%,rgba(110,182,255,.045) 9% 11%,transparent 12% 24%,rgba(145,90,255,.045) 25% 27%,transparent 28% 100%);
  animation:cnRotate 34s linear infinite;
}
@keyframes cnRotate{to{transform:rotate(360deg)}}
.cn-hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.cn-hero-copy span{display:inline-flex;gap:8px;align-items:center;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(131,178,255,.10);color:#9eb7de;font-size:.58rem;font-weight:900;letter-spacing:.13em}
.cn-hero-copy span i{width:7px;height:7px;border-radius:50%;background:#61e7ff;box-shadow:0 0 14px #61e7ff}
.cn-hero-copy h2{margin:14px 0 10px;font-size:clamp(2.6rem,5vw,5.1rem);line-height:.93;letter-spacing:-.065em}
.cn-hero-copy h2 b{
  font-weight:inherit;background:linear-gradient(135deg,#cfc4ff,#836bff 37%,#5caeff 67%,#65edff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cn-hero-copy p{max-width:780px;margin:0;color:#a9bddb;line-height:1.8}
.cn-hero-orbit{width:210px;height:210px;position:relative;display:grid;place-items:center}
.cn-hero-orbit::before,.cn-hero-orbit::after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(124,184,255,.20);
}
.cn-hero-orbit::before{inset:8px;box-shadow:0 0 48px rgba(79,137,255,.12)}
.cn-hero-orbit::after{inset:36px;border-style:dashed;animation:cnRotate 16s linear infinite reverse}
.cn-orbit-core{
  width:104px;height:104px;display:grid;place-items:center;border-radius:34px;
  background:linear-gradient(145deg,#7a60ff,#4f89ff,#64eaff);
  box-shadow:0 0 50px rgba(79,151,255,.28);font-size:2.5rem;transform:rotate(-8deg);
}

/* Match-night tiles */
.cn-night-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.cn-night-tile{
  position:relative;padding:16px;border-radius:20px;border:1px solid rgba(134,181,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));overflow:hidden
}
.cn-night-tile::after{
  content:"";position:absolute;right:-30px;bottom:-40px;width:110px;height:110px;border-radius:50%;
  background:rgba(87,147,255,.07);filter:blur(9px)
}
.cn-night-tile>span{font-size:1.4rem}.cn-night-tile strong,.cn-night-tile small{display:block}
.cn-night-tile strong{margin-top:10px;font-size:.76rem}.cn-night-tile small{margin-top:4px;color:#7188ae;font-size:.57rem;line-height:1.5}

/* Ranking / podium */
.ranking-table tr:first-child,
.public-ranking-table tr:first-child{
  background:linear-gradient(90deg,rgba(255,212,109,.055),rgba(123,91,255,.04))!important;
}
.ranking-table tr:first-child td:first-child,
.public-ranking-table tr:first-child td:first-child{
  color:#ffd46d!important;
}
.rank-number,.podium-rank{
  text-shadow:0 0 22px rgba(95,223,255,.18);
}
.podium-card,.ranking-podium-card{
  border-color:rgba(130,180,255,.14)!important;
}

/* Inputs */
input,select,textarea{
  accent-color:#5fe8ff;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(95,231,255,.32)!important;
  box-shadow:0 0 0 3px rgba(95,231,255,.05)!important;
}

/* Chat */
.signature-chat-fab{
  background:linear-gradient(135deg,rgba(8,27,65,.97),rgba(5,17,44,.98))!important;
  border-color:rgba(105,205,255,.16)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.38),0 0 35px rgba(87,146,255,.13)!important;
}
.signature-chat-fab-orb{
  box-shadow:0 0 0 3px rgba(99,230,255,.08),0 0 22px rgba(87,148,255,.25)!important;
}
.signature-chat-panel{
  border-color:rgba(128,181,255,.14)!important;
  background:linear-gradient(180deg,#071b44,#04112d)!important;
  box-shadow:0 34px 100px rgba(0,0,0,.48),0 0 42px rgba(82,135,255,.11)!important;
}

/* Auth portal night look */
.auth-portal-story,.signup-pro-intro{
  background:
    radial-gradient(circle at 15% 0%,rgba(124,88,255,.16),transparent 30%),
    radial-gradient(circle at 92% 26%,rgba(64,188,255,.09),transparent 28%),
    linear-gradient(180deg,#071942,#04112e)!important;
}
.auth-portal-story h1 span,.signup-pro-intro h1 span{
  background:linear-gradient(135deg,#d1c8ff,#896fff 35%,#5fb2ff 68%,#63ebff)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
.pro-avatar-preview,.final-avatar{
  box-shadow:0 28px 70px rgba(70,115,255,.28),0 0 34px rgba(91,224,255,.09)!important;
}
.signup-progress div.active span,.signup-progress div.done span{
  box-shadow:0 0 22px rgba(74,142,255,.28);
}

/* Footer */
.omni-footer{
  border-color:rgba(133,180,255,.08)!important;
  background:linear-gradient(180deg,rgba(5,17,43,.78),rgba(2,8,24,.92))!important;
}

/* Scrollbar */
*{scrollbar-width:thin;scrollbar-color:#3e63c9 #07132f}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#07132f}
::-webkit-scrollbar-thumb{background:linear-gradient(#7258e8,#3f7ee7);border-radius:999px;border:2px solid #07132f}

/* Interactive global glow */
.cn-glow-hover{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.cn-glow-hover:hover{transform:translateY(-2px);border-color:rgba(101,231,255,.18)!important;box-shadow:0 22px 60px rgba(0,0,0,.22),0 0 26px rgba(80,143,255,.06)!important}

/* Responsive */
@media(max-width:1050px){
  .cn-hero-content{grid-template-columns:1fr}
  .cn-hero-orbit{display:none}
  .cn-night-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .champions-night-hero{padding:22px;border-radius:26px}
  .cn-night-grid{grid-template-columns:1fr 1fr}
  .cn-hero-copy h2{font-size:clamp(2.5rem,13vw,4rem)}
}
@media(max-width:470px){
  .cn-night-grid{grid-template-columns:1fr}
}

.cn-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.cn-visible{opacity:1!important;transform:none!important}


/* ===== LEGENDARY SITE POLISH ===== */
.public-topnav.final-topnav{box-shadow:0 24px 90px rgba(0,0,0,.34),0 0 70px rgba(79,130,255,.10)!important}
.card,.public-card,.omni-card{backdrop-filter:blur(14px)}
.btn,.public-tab,.public-cta-btn,.public-ghost-btn{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.btn:hover,.public-cta-btn:hover,.public-ghost-btn:hover{transform:translateY(-1px)}
.page-head h2{background:linear-gradient(135deg,#fff,#c9d8ff 55%,#6feaff);-webkit-background-clip:text;background-clip:text;color:transparent}
