/* Predict 2027 brand layer: warm black + Uganda gold, green = YES, red = NO */
:root{--bg:#0f0d0a;--panel:#1a1611;--panel2:#221c15;--line:#3a3025;--text:#fbf7ee;--muted:#b9ad98;--cyan:#ffc72c;--purple:#e8412c;--gold:#ffc72c;--green:#34d399;--red:#ff6b6b}
body{background:radial-gradient(ellipse at 80% -10%,#4a3410 0,transparent 42%),radial-gradient(ellipse at 0% 30%,#3a1510 0,transparent 35%),var(--bg);font-family:'DM Sans',sans-serif}
.site-header{background:#0f0d0ae6;border-bottom:1px solid #ffc72c22}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#111 0 33%,#ffc72c 33% 66%,#e8412c 66%)}
.brand-mark{background:linear-gradient(135deg,#ffc72c,#ff9d2c);color:#1b1305;border-radius:12px;box-shadow:0 4px 16px #ffc72c44}
.brand b{color:var(--gold)}
.site-header nav .nav-cta{background:linear-gradient(110deg,#ffc72c,#ffad33);color:#1b1305;box-shadow:0 4px 14px #ffc72c33}
.nav-balance{color:var(--gold)!important;font-weight:700}
.button{border-radius:12px}
.button-primary{background:linear-gradient(110deg,#ffc72c,#ffad33);color:#1b1305;box-shadow:0 8px 24px #ffc72c33}
.button-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px #ffc72c55;opacity:1}
.button-small{background:var(--gold);color:#1b1305}
.event-card,.stat-card,.auth-card,.prediction-card,.admin-form,.admin-list{background:linear-gradient(145deg,#211b14,#16120d);border-color:var(--line)}
.event-card{transition:transform .2s,border-color .2s,box-shadow .2s;overflow:hidden}
.event-card:hover{transform:translateY(-4px);border-color:#ffc72c77;box-shadow:0 16px 40px #0008}
.category{background:#ffc72c1a;color:var(--gold)}
.filter.active{background:#ffc72c1f;border-color:var(--gold);color:var(--gold)}
.hero-stat{background:linear-gradient(145deg,#3a2a0c,#1d130c);border-color:#ffc72c33}
.orbit{border-color:#ffc72c88;color:var(--gold);box-shadow:0 0 0 17px #ffc72c0c,0 0 70px #ffc72c33}
.steps>div{border-left-color:var(--gold)}

/* hero */
.hero{padding:70px 0 40px}
.hero h1 em{background:linear-gradient(100deg,#ffc72c,#ff7a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid #34d39955;background:#34d3991a;color:#7ff0c2;border-radius:30px;font-size:12px;font-weight:700}
.hero-badge i{width:8px;height:8px;border-radius:50%;background:#34d399;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #34d399aa}100%{box-shadow:0 0 0 10px #34d39900}}
.win-demo{margin-top:26px;display:inline-flex;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:#ffffff0a;border:1px solid #ffc72c33}
.win-demo b{font:700 22px 'Space Grotesk';color:var(--green)}
.win-demo span{font-size:13px;color:var(--muted)}
.win-demo .arrow{color:var(--gold);font-size:20px}

/* trust strip */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0 34px}
.trust-strip div{padding:16px;border:1px solid var(--line);border-radius:14px;background:#ffffff06}
.trust-strip b{display:block;font:700 22px 'Space Grotesk';color:var(--gold)}
.trust-strip span{font-size:12px;color:var(--muted)}

/* live ticker */
.ticker{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#ffffff06;margin:0 0 30px;white-space:nowrap}
.ticker-track{display:inline-flex;gap:46px;padding:11px 0;animation:tick 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font-size:13px;color:var(--muted)}
.ticker-track b{color:var(--text)}
.ticker-track em{font-style:normal;color:var(--green);font-weight:700}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* cards */
.countdown{font-size:11px;font-weight:700;color:var(--gold);background:#ffc72c14;padding:4px 9px;border-radius:30px;white-space:nowrap}
.countdown.urgent{color:#ff8f8f;background:#ff6b6b1a}
.win-line{margin:0 0 12px;font-size:12px;color:var(--muted);padding:9px 11px;border-radius:10px;background:#34d3990d;border:1px dashed #34d39944}
.win-line b{color:var(--green)}
.odds-yes{border-color:#34d39966!important}
.odds-yes b{color:var(--green)}
.odds-no{border-color:#ff6b6b66!important}
.odds-no b{color:var(--red)}
.card-link{color:var(--gold)}
.source-link{color:var(--gold)}

/* final call to action + responsible play */
.cta-band{margin:60px 0 0;padding:34px;border-radius:22px;text-align:center;background:linear-gradient(135deg,#3a2a0c,#2a1410);border:1px solid #ffc72c33}
.cta-band h2{font:700 30px 'Space Grotesk';margin:0 0 8px}
.cta-band p{color:var(--muted);margin:0 0 18px}
.play-safe{margin-top:10px;font-size:12px;color:var(--muted)}
.play-safe b{display:inline-block;padding:1px 7px;border:1px solid var(--gold);border-radius:6px;color:var(--gold);margin-right:6px}

@media(max-width:800px){.trust-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.win-demo{flex-wrap:wrap}.hero{padding-top:40px}.cta-band{padding:24px}}
@media(prefers-reduced-motion:reduce){.ticker-track,.hero-badge i{animation:none}}

/* image banners */
.banner{display:block;margin:26px 0 0;border-radius:24px;overflow:hidden;border:1px solid #ffc72c44;box-shadow:0 24px 70px #ff8a0033;transition:transform .3s,box-shadow .3s}
.banner:hover{transform:scale(1.01);box-shadow:0 28px 80px #ff8a0055;opacity:1}
.banner img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover}
.hero{grid-template-columns:1fr;padding:38px 0 30px}
.cta-image{padding:0;overflow:hidden;position:relative;text-align:center}
.cta-image img{display:block;width:100%;height:auto;min-height:190px;object-fit:cover}
.cta-image .cta-body{padding:26px 24px 32px;background:linear-gradient(180deg,#1d130c,#2a1410)}
@media(max-width:560px){.banner{border-radius:16px;margin-top:16px}.hero{padding-top:24px}}

/* install-as-app prompt */
.install-bar{position:fixed;left:50%;bottom:16px;transform:translate(-50%,140%);z-index:70;width:min(460px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#1d160e;border:1px solid #ffc72c66;box-shadow:0 18px 50px #000b;transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.install-bar.show{transform:translate(-50%,0)}
.install-bar img{border-radius:11px;flex:0 0 auto}
.install-bar div{flex:1;min-width:0;line-height:1.3}
.install-bar strong{display:block;font-size:14px}
.install-bar span{display:block;font-size:12px;color:var(--muted)}
.install-go{border:0;border-radius:10px;padding:11px 16px;background:linear-gradient(110deg,#ffc72c,#ffad33);color:#1b1305;font:700 14px 'DM Sans';cursor:pointer}
.install-x{border:0;background:none;color:var(--muted);font-size:24px;line-height:1;padding:6px;cursor:pointer}
.share-ico{display:inline-block;padding:0 5px;border:1px solid var(--gold);border-radius:5px;color:var(--gold)}
.install-link{border:1px solid var(--gold);border-radius:30px;background:none;color:var(--gold);padding:5px 12px;margin-left:8px;font:700 12px 'DM Sans';cursor:pointer}
.install-link[hidden]{display:none}
@media(max-width:700px){.install-bar{bottom:calc(12px + env(safe-area-inset-bottom))}.install-bar-admin{bottom:calc(80px + env(safe-area-inset-bottom))}body:has(.bet-slip:not([hidden])) .install-bar{bottom:auto;top:12px;transform:translate(-50%,-140%)}body:has(.bet-slip:not([hidden])) .install-bar.show{transform:translate(-50%,0)}}