/* ==========================================================================
   Football Champion — "game feel" layer. Loaded after everything else.
   Chunky 3D buttons, glowing call-to-action, podium colours, lively cards.
   Only transform/opacity animations (cheap on phones). Off when the visitor
   prefers reduced motion.
   ========================================================================== */
:root {
  --gu-orange-1: #FF7A45; --gu-orange-2: #FF4B2B; --gu-orange-3: #C93214;
  --gu-gold-1: #FFD877;  --gu-gold-2: #F0B93E;  --gu-gold-3: #B9871C;
}

/* ---- Buttons: chunky "arcade" buttons with a pressed-in feel ---- */
.btn { border-radius: 12px; letter-spacing: .06em; font-weight: 800; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .2s ease, border-color .2s ease !important; }
.btn:active { animation: none !important; }
.btn-primary {
  background: linear-gradient(180deg, var(--gu-orange-1), var(--gu-orange-2)) !important;
  box-shadow: 0 5px 0 var(--gu-orange-3), 0 10px 22px rgba(255,75,43,.35) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.btn-gold {
  background: linear-gradient(180deg, var(--gu-gold-1), var(--gu-gold-2)) !important;
  color: #2b1b00 !important;
  box-shadow: 0 5px 0 var(--gu-gold-3), 0 10px 22px rgba(240,185,62,.3) !important;
}
.btn-outline { border-width: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.28) !important; }
.btn-primary:hover, .btn-gold:hover, .btn-outline:hover { transform: translateY(-2px) !important; filter: brightness(1.07); }
.btn-primary:hover { box-shadow: 0 7px 0 var(--gu-orange-3), 0 14px 28px rgba(255,75,43,.45) !important; }
.btn-gold:hover    { box-shadow: 0 7px 0 var(--gu-gold-3),   0 14px 28px rgba(240,185,62,.4) !important; }
.btn-primary:active, .btn-gold:active, .btn-outline:active { transform: translateY(4px) !important; filter: none; }
.btn-primary:active { box-shadow: 0 1px 0 var(--gu-orange-3), 0 3px 8px rgba(255,75,43,.3) !important; }
.btn-gold:active    { box-shadow: 0 1px 0 var(--gu-gold-3),   0 3px 8px rgba(240,185,62,.25) !important; }
.btn-outline:active { box-shadow: 0 0 0 rgba(0,0,0,.28) !important; }
.btn::before { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%) !important; }
.btn:disabled { filter: grayscale(.4); }

/* Shine that sweeps across the main call-to-action buttons */
.scoreboard-cta .btn-primary::after, .hero .btn-primary::after, .modal-box .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); pointer-events: none; display: block !important;
  animation: guShine 3.4s ease-in-out infinite !important;
}
@keyframes guShine { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* Gentle heartbeat on the one big "Play now" button */
.scoreboard-cta .btn-primary { animation: guPulse 2.2s ease-in-out infinite !important; }
@keyframes guPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.scoreboard-cta .btn-primary:hover { animation-play-state: paused; }

/* Ripple (added by game-ui.js) */
.gu-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); transform: scale(0); animation: guRipple .55s ease-out forwards; pointer-events: none; }
@keyframes guRipple { to { transform: scale(3.2); opacity: 0; } }

/* ---- Headings: scoreboard feel ---- */
.hero h1 {
  background: linear-gradient(180deg, #FFFFFF 10%, #F6D98A 60%, #E9B343 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.eyebrow { text-shadow: 0 0 14px rgba(240,192,92,.45); }

/* ---- Hero card: glowing frame ---- */
.scoreboard { box-shadow: 0 0 0 2px rgba(240,192,92,.55), 0 0 40px rgba(240,192,92,.25), 0 24px 50px rgba(0,0,0,.45) !important; border-radius: 14px; }

/* ---- Cards ---- */
.card, .ticket-card, .stat-item, .action-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover: hover) {
  .card:hover, .stat-item:hover, .action-card:hover { transform: translateY(-4px); border-color: rgba(240,192,92,.55); box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 24px rgba(240,192,92,.12); }
  .ticket-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 36px rgba(0,0,0,.45), 0 0 28px rgba(240,192,92,.18); }
}
.ticket-card.featured { border-color: var(--gold-bright) !important; box-shadow: 0 0 0 1px rgba(240,192,92,.6), 0 0 36px rgba(240,192,92,.28) !important; position: relative; }
.ticket-card.featured .tag { background: linear-gradient(180deg, var(--gu-gold-1), var(--gu-gold-2)); color: #2b1b00; }
.price-amount { text-shadow: 0 3px 0 rgba(0,0,0,.35); }

/* ---- Leaderboard: podium colours + live rows ---- */
.lb-table tbody tr:nth-child(1) { background: linear-gradient(90deg, rgba(255,216,119,.22), rgba(255,216,119,.04)); }
.lb-table tbody tr:nth-child(2) { background: linear-gradient(90deg, rgba(210,220,230,.18), rgba(210,220,230,.03)); }
.lb-table tbody tr:nth-child(3) { background: linear-gradient(90deg, rgba(220,150,90,.20), rgba(220,150,90,.03)); }
.lb-table tbody tr:nth-child(-n+3) .rank-pill { color: #fff; font-size: 1.05em; }
.lb-table tbody tr:nth-child(-n+3) td strong { color: var(--gold-bright); font-size: 1.08em; }
.lb-table tr.you { box-shadow: inset 0 0 0 1px rgba(240,192,92,.6); }
.lb-table tbody tr { animation: guRowIn .4s ease both; }
.lb-table tbody tr:nth-child(2) { animation-delay: .05s; } .lb-table tbody tr:nth-child(3) { animation-delay: .1s; }
.lb-table tbody tr:nth-child(4) { animation-delay: .15s; } .lb-table tbody tr:nth-child(5) { animation-delay: .2s; }
.lb-table tbody tr:nth-child(n+6) { animation-delay: .25s; }
@keyframes guRowIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.lb-tabs .btn-gold { transform: translateY(-1px); }

/* ---- Quiz answers: big chunky tiles ---- */
.option-btn { border-radius: 14px !important; transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease !important; }
@media (hover: hover) { .option-btn:not(:disabled):hover { transform: translateY(-2px) scale(1.01); border-color: var(--gold-bright) !important; box-shadow: 0 6px 0 rgba(0,0,0,.3), 0 0 22px rgba(240,192,92,.2); } }
.option-btn:not(:disabled):active { transform: translateY(3px) scale(.99); }
.option-btn.selected { background: linear-gradient(180deg, var(--gu-gold-1), var(--gu-gold-2)) !important; color: #2b1b00 !important; border-color: var(--gu-gold-3) !important; animation: guPop .3s ease; }
@keyframes guPop { 0% { transform: scale(.97); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---- Results: points & event progress ---- */
.score-reveal { text-shadow: 0 4px 0 rgba(0,0,0,.4), 0 0 30px rgba(240,192,92,.45); animation: guPop .6s ease .1s both; }
.ev-progress { margin: 18px 0; padding: 14px 16px; border-radius: 14px; text-align: start; border: 1px solid rgba(240,192,92,.55);
  background: linear-gradient(135deg, rgba(240,192,92,.16), rgba(255,255,255,.03)); box-shadow: 0 0 26px rgba(240,192,92,.12); }
.ev-progress .ev-head { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.ev-progress .ev-head .ev-ico { font-size: 1.6rem; }
.ev-progress .ev-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin: 10px 0 6px; }
.ev-progress .ev-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gu-gold-2), var(--gu-gold-1)); transform-origin: left; animation: guGrow .9s ease-out both; }
@keyframes guGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ev-progress .ev-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--chalk-dim); }
.ev-progress .ev-meta b { color: var(--gold-bright); }
.ev-progress .btn { margin-top: 10px; }

/* ---- Badges ---- */
.fcb-grid > * { transition: transform .2s ease; }
@media (hover: hover) { .fcb-grid > *:hover { transform: translateY(-4px) rotate(-1deg) scale(1.04); } }

/* ---- Bottom tab bar (phones) ---- */
@media (max-width: 767px) {
  .fc-bottomnav a.active { box-shadow: inset 0 0 0 1px rgba(240,192,92,.45), 0 0 16px rgba(240,192,92,.22); }
  .fc-bottomnav a:active .ic { transform: scale(.9); }
  .fc-bottomnav a.cta .ic { animation: guPulse 2.4s ease-in-out infinite; }
}

/* ---- Floating footballs behind the landing hero (added by game-ui.js, desktop only) ---- */
.gu-floaties { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.gu-floaties span { position: absolute; bottom: -60px; opacity: 0; animation: guFloat linear infinite; will-change: transform, opacity; }
@keyframes guFloat { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: .5; } 85% { opacity: .35; } 100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; } }
.hero { position: relative; }
.hero > .container { position: relative; z-index: 1; }

/* ---- Page entrance ---- */
main, .hero-grid { animation: guEnter .45s ease both; }
@keyframes guEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Respect people who turn animation off ---- */
@media (prefers-reduced-motion: reduce) {
  .scoreboard-cta .btn-primary, .scoreboard-cta .btn-primary::after, .lb-table tbody tr, main, .hero-grid,
  .score-reveal, .ev-progress .ev-bar i, .fc-bottomnav a.cta .ic, .gu-floaties span { animation: none !important; }
}

/* ---- Sliding strip of competitions (landing) ---- */
.gu-strip { overflow: hidden; margin: 6px 0 0; padding: 14px 0; border-block: 1px solid rgba(240,192,92,.25); background: rgba(0,0,0,.18); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gu-track { display: flex; gap: 14px; width: max-content; animation: guSlide 38s linear infinite; }
.gu-strip:hover .gu-track { animation-play-state: paused; }
@keyframes guSlide { to { transform: translateX(-50%); } }
.gu-tile { position: relative; flex: 0 0 auto; width: 190px; height: 104px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.18); }
.gu-tile b { font-size: .92rem; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,.6); position: relative; }
.gu-tile .gu-ico { position: absolute; top: 8px; right: 12px; font-size: 2.1rem; opacity: .9; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
@media (max-width: 767px) { .gu-tile { width: 150px; height: 88px; } .gu-track { animation-duration: 30s; } }
@media (prefers-reduced-motion: reduce) { .gu-strip { overflow-x: auto; } .gu-track { animation: none !important; } }

/* ---- Badges: one consistent medal style, colour by family ---- */
.fcb-tile { --b1: #6FB4FF; --b2: #1D5FD6; --ring: #BFE0FF; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); }
.fcb-g-skill    { --b1: #C79BFF; --b2: #6D2FD6; --ring: #E6D2FF; }
.fcb-g-streaks  { --b1: #FFB066; --b2: #D8480C; --ring: #FFD9B3; }
.fcb-g-rankings { --b1: #FFE08A; --b2: #C58A10; --ring: #FFF1C2; }
.fcb-g-events   { --b1: #6BE6A0; --b2: #11874A; --ring: #C8F7DC; }
.fcb-tile .fcb-icon { width: 68px; height: 68px; margin: 4px auto 0; border-radius: 50%; display: grid; place-items: center; position: relative; font-size: 1rem;
  background: radial-gradient(circle at 30% 24%, var(--b1), var(--b2) 72%);
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 5px rgba(0,0,0,.35), 0 8px 16px rgba(0,0,0,.4), inset 0 -7px 12px rgba(0,0,0,.28), inset 0 5px 9px rgba(255,255,255,.4); }
.fcb-tile .fcb-icon::after { content: ""; position: absolute; top: 7px; left: 14px; width: 26px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); transform: rotate(-24deg); pointer-events: none; }
.fcb-tile .fcb-icon span { font-size: 1.9rem; line-height: 1; filter: grayscale(1) brightness(2.1) contrast(.8) drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.fcb-tile.earned { border-color: var(--ring); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 20px rgba(0,0,0,.25); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); }
.fcb-tile.locked .fcb-icon { box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 0 0 5px rgba(0,0,0,.35); }
.fcb-tile .fcb-name { margin-top: 10px; }