/* football «نجم الملعب» — evening stadium; team colours come from data.js via CSS variables */
:root {
  --bg: #0d3321; --bg-2: #11402a; --surface: #ffffff; --surface-2: #f2f8f4;
  --text: #10251a; --muted: #557062;
  --team1: #1f6fd1; --team2: #ffffff;
  --accent: var(--team1); --accent-2: #ffd34d; --accent-ink: #ffffff;
  --line: rgba(16, 37, 26, .16); --line-soft: rgba(16, 37, 26, .08);
  --shirt: #1f6fd1; --shorts: #ffffff; --socks: #1f6fd1; --skin: #c98f63; --hair: #2b1d14; --num: #ffffff;
}
body.football {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 70px, transparent 70px 140px),
    linear-gradient(180deg, #11402a, #0b2d1d), #0b2d1d;
}

/* ---------- intro (rendered art layers in art/*.webp) ---------- */
.f-intro { padding: 0; background: #0a1630; display: grid; place-items: center; }
.fb-fill { position: absolute; inset: -30px; background: #0a1630 url(art/bg.webp) center 60% / cover; filter: blur(22px) brightness(.9); transform: scale(1.06); }
.fb-stage { position: relative; width: min(100vw, 100dvh * .6); height: 100dvh; overflow: hidden; }
.fb-world { position: absolute; left: 0; top: 0; width: 768px; height: 1664px; }  /* real size set by JS (cover, bottom aligned) */
.fb-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fb-world > * { position: absolute; }
.fb-keeper img, .fb-player img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 6px rgba(0,0,0,.4)); }
.fb-keeper { transition: transform .55s cubic-bezier(.2,.8,.3,1); transform-origin: 50% 100%; animation: fbSway 1.8s ease-in-out infinite alternate; }
@keyframes fbSway { to { translate: 10px 0; } }
.fb-k-b { position: absolute !important; left: 50%; bottom: 0; width: 145% !important; transform: translateX(-50%); opacity: 0; }
.fb-keeper.is-dive { animation: none; }
.fb-keeper.is-dive .fb-k-a { opacity: 0; } .fb-keeper.is-dive .fb-k-b { opacity: 1; }
.fb-keeper.is-dive.to-right .fb-k-b { transform: translateX(-50%) scaleX(-1); }
.fb-player img { position: absolute; left: 0; bottom: 0; }
.fb-p-a { position: relative !important; }
.fb-p-b { opacity: 0; }
.fb-player.is-kick .fb-p-a { opacity: 0; } .fb-player.is-kick .fb-p-b { opacity: 1; }
.fb-player { animation: fbBreath 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes fbBreath { 50% { transform: scale(1.01, 1.018); } }
.fb-shirt { position: absolute; left: 32%; width: 36%; top: 29%; display: grid; justify-items: center; gap: 0; pointer-events: none; transition: opacity .15s; }
.fb-player.is-kick .fb-shirt { opacity: 0; }
.fb-sname { font: 800 calc(var(--pw, 300px) * .062)/1.1 var(--f-display); color: var(--num); white-space: nowrap; letter-spacing: 0; }
.fb-snum { font: 900 calc(var(--pw, 300px) * .2)/1 var(--f-display); color: var(--num); paint-order: stroke; -webkit-text-stroke: 0; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.fb-ball img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 5px rgba(0,0,0,.4)); }
.fb-ball { z-index: 3; will-change: transform; }
.fb-ball.is-idle { animation: fbBall 1.6s ease-in-out infinite; }
@keyframes fbBall { 50% { translate: 0 -7px; } }
.fb-fx { inset: 0; pointer-events: none; }
.fb-fx i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,0) 70%); animation: fbPuff .8s ease-out forwards; }
@keyframes fbPuff { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.4); } }

.f-hint { position: absolute; z-index: 3; top: max(40px, 6dvh); inset-inline: 20px; margin: 0; text-align: center; font: 800 18px/1.5 var(--f-display); color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.7); text-wrap: balance; animation: hintBob 1.6s ease-in-out infinite; transition: opacity .3s; }
@keyframes hintBob { 50% { transform: translateY(-6px); } }
.fb-swipe { position: absolute; z-index: 3; left: 52%; bottom: 20dvh; width: 36px; display: grid; gap: 2px; justify-items: center; pointer-events: none; transition: opacity .3s; }
.fb-swipe i { width: 18px; height: 18px; border-left: 5px solid #fff; border-top: 5px solid #fff; transform: rotate(45deg); opacity: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation: fbUp 1.3s ease-in-out infinite; }
.fb-swipe i:nth-child(2) { animation-delay: .2s; } .fb-swipe i:nth-child(3) { animation-delay: .4s; }
@keyframes fbUp { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) rotate(45deg); } }
.f-intro.is-shot .f-hint, .f-intro.is-shot .fb-swipe { opacity: 0; animation: none; }
.f-shoot { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.f-shoot:focus-visible { outline: 3px solid #fff; outline-offset: -8px; }
.f-intro.is-shot .f-shoot { pointer-events: none; }

.f-goal { position: absolute; z-index: 7; inset-inline: 0; top: 36%; margin: 0; text-align: center; pointer-events: none; font: 900 clamp(64px, 22vw, 96px)/1 var(--f-display); color: var(--accent-2); text-shadow: 0 4px 0 #a5740b, 0 10px 30px rgba(0,0,0,.5); opacity: 0; transform: scale(.3); }
.f-intro.is-goal .f-goal { animation: goalPop 1.5s var(--spring) forwards; }
@keyframes goalPop { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 25% { opacity: 1; transform: scale(1.1) rotate(3deg); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
.f-board { position: absolute; z-index: 8; top: max(14px, env(safe-area-inset-top)); inset-inline: 14px; max-width: 440px; margin-inline: auto; padding: 12px 14px 12px; border-radius: 18px; background: linear-gradient(180deg, #121722, #05070c); border: 3px solid #39404f; box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 0 0 2px #0a0d13; color: #fff; text-align: center; transform: translateY(-130%); transition: transform .8s var(--spring); }
.f-intro.is-board .f-board { transform: none; }
.f-board-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255,255,255,.18); }
.f-team { font: 700 14px/1.3 var(--f-ui); color: #cfd6e4; overflow-wrap: anywhere; }
.f-team:first-child { color: #fff; }
.f-score { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 10px; background: #000; font: 900 30px/1.2 var(--f-display); color: var(--accent-2); text-shadow: 0 0 12px rgba(255,211,77,.6); }
.f-score i { font-style: normal; opacity: .7; }
.f-board-msg { margin: 10px 0 4px; font: 800 19px/1.6 var(--f-display); color: var(--accent-2); text-shadow: 0 0 10px rgba(255,211,77,.4); text-wrap: balance; }
.f-board-min { margin: 0; font: 600 12.5px/1.4 var(--f-ui); color: #8fe3a8; }
.f-board-min::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: #3ddc6f; vertical-align: 1px; animation: live 1s steps(2, jump-none) infinite; }
@keyframes live { 50% { opacity: .2; } }
.f-confetti { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.f-confetti i { position: absolute; top: -20px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 110dvh, 0) rotate(var(--rot)); } }

/* details card hero: the player's back with name + number */
.fb-hero { position: relative; width: 190px; height: 190px; margin-inline: auto; overflow: hidden; --pw: 190px; }
.fb-hero .fb-player { position: absolute; left: 0; top: 0; width: 190px; animation: none; }
.fb-hero .fb-shirt { opacity: 1; }
.fb-hero .fb-p-b { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fb-keeper, .fb-player, .fb-ball.is-idle, .f-hint, .fb-swipe i { animation: none !important; }
  .fb-keeper { transition-duration: .01s !important; }
}

/* ---------- details: match-day card ---------- */
.football .card-frame { border-radius: 26px; border: 0; padding-top: 0; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.football .card-hero { display: block; margin: 0 -20px 16px; padding: 18px 0 10px; background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 36px, transparent 36px 72px), linear-gradient(180deg, #2f8f4e, #1f7a3d); }
.football .card-hero svg { width: 128px; margin-inline: auto; }
.football .card-kicker { color: var(--accent); }
.football .kid { color: var(--text); }
.football .age-badge { background: var(--accent-2); }
.football .facts .fl { display: block; font: 700 12px/1.3 var(--f-ui); color: var(--accent); }
.football .facts li { border-radius: 14px; }
.football .h2 { color: #fff; }
.football .cd { border-radius: 14px; background: #05070c; border-color: #39404f; }
.football .cd b { color: var(--accent-2); text-shadow: 0 0 10px rgba(255,211,77,.5); }
.football .cd span { color: #b9c2cf; }
.football .cd-msg { color: var(--accent-2); }
.football .block .field label, .football .block .field legend, .football .block .lbl, .football .hint { color: #e6f3ea; }
.football .opt { color: #b5cdbd; }
.football .foot { color: #b5cdbd; border-color: rgba(255,255,255,.12); }
.football .notes { border-color: var(--accent); }