/* ───────────────────────────────────────────────────────────────
   Sports Tycoon — shared UI FX: branded preloader, skeletons,
   spinners & micro-interactions. Self-hosted, theme-aware.
   Falls back gracefully if a page doesn't define the design tokens.
   ─────────────────────────────────────────────────────────────── */
:root{
  --stfx-gold: var(--gold, #F5C518);
  --stfx-gold-2: var(--gold-2, #ffd84a);
  --stfx-bg: var(--bg, #05070f);
  --stfx-panel: var(--panel, #0e1428);
  --stfx-line: var(--line-2, rgba(255,255,255,.07));
}

/* ===== Skeleton shimmer ===== */
.st-skel{
  position:relative; overflow:hidden;
  background:linear-gradient(100deg,
    rgba(255,255,255,.04) 30%,
    rgba(245,197,24,.10) 50%,
    rgba(255,255,255,.04) 70%);
  background-size:220% 100%;
  animation:stShimmer 1.25s ease-in-out infinite;
  border-radius:8px;
}
@keyframes stShimmer{0%{background-position:180% 0}100%{background-position:-60% 0}}
.st-skel.line{height:12px;margin:7px 0;border-radius:6px}
.st-skel.line.sm{height:9px;width:55%}
.st-skel.line.lg{height:16px}
.st-skel.circle{border-radius:50%}
.st-skel.pill{height:20px;width:64px;border-radius:999px}

/* Skeleton tip card (matches the tip-card silhouette) */
.st-skel-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.st-skel-card{
  background:var(--stfx-panel);
  border:1px solid var(--stfx-line);
  border-radius:var(--radius,14px);
  padding:16px; min-height:148px;
}
.st-skel-card .row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.st-skel-card .row .grow{flex:1}
.st-skel-teams{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 16px}
.st-skel-teams .t{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}

/* ===== Gold ring spinner ===== */
.st-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(245,197,24,.18);
  border-top-color:var(--stfx-gold);
  animation:stSpin .8s linear infinite;
  display:inline-block;
}
.st-spinner.sm{width:20px;height:20px;border-width:2px}
.st-spinner.lg{width:52px;height:52px;border-width:4px}
@keyframes stSpin{to{transform:rotate(360deg)}}

.st-loading-row{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:34px 16px;color:var(--ink-3,#7d8298);
  font:600 13px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:.02em;
}

/* ===== Branded full-screen preloader ===== */
.st-preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  background:
    radial-gradient(680px 420px at 50% 32%, rgba(245,197,24,.14), transparent 62%),
    linear-gradient(180deg,#04060d 0%,#06091a 100%);
  opacity:1; transition:opacity .5s ease, visibility .5s ease;
  /* Pure-CSS safety: self-dismiss even if JS is disabled or fails to run */
  animation:stPreAutohide .6s ease 7s forwards;
}
.st-preloader.st-hide{opacity:0; visibility:hidden; pointer-events:none}
@keyframes stPreAutohide{to{opacity:0; visibility:hidden}}
.st-pre-crest{
  width:96px;height:96px;
  filter:drop-shadow(0 10px 30px rgba(245,197,24,.30));
  animation:stCrestPulse 1.8s ease-in-out infinite;
}
@keyframes stCrestPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.04)}}
.st-pre-word{
  font:400 30px/1 'Bebas Neue',Impact,sans-serif; letter-spacing:.16em;
  color:#f4f5fb; text-transform:uppercase;
}
.st-pre-word b{color:var(--stfx-gold);font-weight:400}
.st-pre-bar{
  width:160px;height:4px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.08);
}
.st-pre-bar i{
  display:block;height:100%;width:40%;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--stfx-gold),var(--stfx-gold-2),transparent);
  animation:stBar 1.1s ease-in-out infinite;
}
@keyframes stBar{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
.st-pre-tag{font:600 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.22em;color:#7d8298;text-transform:uppercase}

@media (prefers-reduced-motion: reduce){
  .st-skel,.st-spinner,.st-pre-crest,.st-pre-bar i{animation:none}
  .st-preloader{transition:none}
}

/* ===== AI credit-buying guide (dashboard out-of-credits state) ===== */
.ai-credit-guide{text-align:center;padding:18px 16px;border:1px solid rgba(245,197,24,.25);border-radius:14px;
  background:linear-gradient(180deg,rgba(245,197,24,.07),rgba(245,197,24,.02))}
.acg-icon{font-size:30px;margin-bottom:6px}
.acg-title{font-size:15px;font-weight:800;color:#f4f5fb;margin-bottom:3px}
.acg-sub{font-size:12px;color:#9aa0b8;margin-bottom:14px}
.acg-steps{display:flex;flex-direction:column;gap:11px;text-align:left;max-width:300px;margin:0 auto 16px}
.acg-step{display:flex;gap:10px;align-items:flex-start}
.acg-dot{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.08);color:#cfd6ea}
.acg-dot.acg-gold{background:linear-gradient(180deg,#ffd84a,#F5C518);color:#0a0d1a}
.acg-step b{display:block;font-size:13px;color:#f4f5fb;margin-bottom:1px}
.acg-step span{display:block;font-size:11.5px;color:#9aa0b8;line-height:1.45}
.acg-cta{display:inline-block;text-decoration:none;margin-top:2px}
.acg-foot{font-size:11px;color:#7d8298;margin-top:10px}

/* ===== Tycoon AI "thinking" loader ===== */
.ai-think{text-align:center;padding:26px 18px}
.ai-think-orb{position:relative;width:64px;height:64px;margin:0 auto 14px}
.ai-think-orb .core{position:absolute;inset:9px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#39E0FF,#7c3aed);box-shadow:0 0 22px rgba(0,212,255,.55);animation:aiCore 1.6s ease-in-out infinite}
.ai-think-orb .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.08);
  border-top-color:#00D4FF;border-right-color:rgba(124,58,237,.7);animation:stSpin .9s linear infinite}
.ai-think-orb .orbit{position:absolute;inset:-2px;animation:stSpin 2.4s linear infinite}
.ai-think-orb .orbit i{position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#00D4FF;box-shadow:0 0 9px #00D4FF}
@keyframes aiCore{0%,100%{transform:scale(.9)}50%{transform:scale(1.08)}}
.ai-think-title{font-size:13px;font-weight:800;color:#f4f5fb;margin-bottom:4px;display:flex;align-items:center;justify-content:center}
.ai-dots{display:inline-flex;gap:3px;margin-left:5px}
.ai-dots i{width:4px;height:4px;border-radius:50%;background:#00D4FF;opacity:.25;animation:aiDot 1.1s infinite}
.ai-dots i:nth-child(2){animation-delay:.16s}
.ai-dots i:nth-child(3){animation-delay:.32s}
@keyframes aiDot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ai-think-sub{font-size:11.5px;color:#9aa0b8}
@media (prefers-reduced-motion: reduce){
  .ai-think-orb .core,.ai-think-orb .ring,.ai-think-orb .orbit,.ai-dots i{animation:none}
}

/* ===== Sport ball loader image (dashboard) ===== */
.bl-ball-img{width:38px;height:38px;object-fit:contain;display:block;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}

/* ===== Light mode overrides (dashboard body.light) ===== */
body.light .st-skel{background:linear-gradient(100deg,rgba(0,0,0,.05) 30%,rgba(245,197,24,.14) 50%,rgba(0,0,0,.05) 70%);background-size:220% 100%}
body.light .st-skel-card{background:#fff;border-color:rgba(0,0,0,.08)}
body.light .st-loading-row{color:#3a5080}
body.light .acg-title,body.light .acg-step b{color:#0a1628}
body.light .acg-sub,body.light .acg-step span{color:#3a5080}
body.light .acg-foot{color:#6a80a8}
body.light .acg-dot{background:rgba(0,0,0,.07);color:#3a5080}
body.light .ai-think-title{color:#0a1628}
body.light .ai-think-sub{color:#3a5080}
body.light .bl-ball-img{filter:drop-shadow(0 3px 5px rgba(0,0,0,.18))}