/* SwiftScore — mobile + front-end polish for the game hub pages
   (Games hub, Predictor League, AI Fantasy) and the bottom nav.

   FotMob x FUT feel: dense premium cards, big tap targets, sticky where
   useful, brand-gradient accents. THEME VARS ONLY — never renames the
   :root tokens from styles.css, only consumes them (--bg, --surface,
   --surface-2, --line, --text, --muted, --brand, --brand-2, --brand-3,
   --brand-tint, --accent, --warn, --danger, --win, --radius, --header-h,
   --grad-brand, --shadow, --ring, --shadow-md).

   Linked from games.ejs, predictor.ejs, fantasy.ejs only. Layers on top of
   styles.css / predictor.css / fantasy.css without fighting them. */

/* ---- shared local tokens (scoped names, additive only) ---- */
.sw-hub,
.pl-fixtures,
.fan-picker{ --sw-tap:44px; }

/* =========================================================
   GAMES HUB  (games.ejs)
   ========================================================= */

/* Page intro — tighter, premium gradient headline on mobile */
.sw-hub .page-head{ padding:1.4rem 0 .4rem; }
.sw-hub .page-head h1{
  font-size:1.7rem;letter-spacing:-.02em;
  background:linear-gradient(90deg,#fff,var(--brand-3));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sw-hub .page-head p{max-width:60ch}

/* Hero tile — SwiftSquad / collectibles surfaced prominently up top */
.sw-hero{
  display:block;position:relative;overflow:hidden;text-decoration:none;color:inherit;
  border:1px solid var(--brand);border-radius:var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0,var(--brand-tint-2),transparent 55%),
    linear-gradient(165deg,var(--surface-2),var(--surface));
  box-shadow:var(--ring),var(--shadow-md);
  padding:1.15rem 1.2rem;margin:1rem 0 1.3rem;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.sw-hero:hover{transform:translateY(-2px);box-shadow:var(--ring),var(--shadow)}
.sw-hero:active{transform:translateY(0)}
.sw-hero-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand);
  border-radius:999px;padding:.18rem .6rem;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;
}
.sw-hero-title{display:block;font-size:1.32rem;font-weight:800;letter-spacing:-.01em;line-height:1.15}
.sw-hero-sub{display:block;color:var(--muted);font-size:.9rem;margin-top:.3rem;max-width:42ch}
.sw-hero-row{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.sw-hero-cta{
  display:inline-flex;align-items:center;gap:.4rem;min-height:var(--sw-tap);
  padding:.55rem 1.05rem;border-radius:999px;font-weight:800;font-size:.9rem;
  background:var(--grad-brand);color:#04140d;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 16px rgba(22,199,132,.24);
}
.sw-hero-note{color:var(--muted);font-size:.78rem}
/* decorative card-stack glyph, hidden from AT, fades on very small screens */
.sw-hero-glyph{
  position:absolute;top:-12px;right:-6px;font-size:5.2rem;line-height:1;
  opacity:.14;transform:rotate(8deg);pointer-events:none;user-select:none;
}

/* Feature strip — promote to 2-up premium cards on phones, with bigger taps */
.sw-hub .feature-strip{gap:.7rem}
.sw-hub .feature-card{
  min-height:108px;padding:.95rem;border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
}
.sw-hub .feature-card:active{transform:translateY(0)}
.sw-hub .feature-emoji{font-size:1.7rem}
.sw-hub .feature-title{font-size:1rem;letter-spacing:-.01em}
.sw-hub .feature-sub{line-height:1.4}
/* an arrow affordance so each tile reads as tappable */
.sw-hub .feature-card::after{
  content:"›";position:absolute;top:.7rem;right:.85rem;color:var(--muted);
  font-size:1.3rem;line-height:1;font-weight:700;transition:color .15s,transform .15s;
}
.sw-hub .feature-card{position:relative}
.sw-hub .feature-card:hover::after{color:var(--brand);transform:translateX(2px)}

/* small section label above the grid */
.sw-hub-label{
  display:block;font-size:.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin:1.4rem 0 .55rem;
}

/* =========================================================
   PREDICTOR LEAGUE  (predictor.ejs) — mobile refinements
   ========================================================= */

/* CTA + notice get comfier spacing/taps on phones */
.pl-cta-actions .btn{min-height:var(--sw-tap);display:inline-flex;align-items:center;justify-content:center}

/* Fixture cards: turn the v-row into a clean 3-col scoreboard feel */
.pl-fix{box-shadow:var(--ring)}
.pl-fix-aipick{
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:.4rem .55rem;margin-bottom:.8rem;
}

/* Pick buttons — guarantee 44px tap height + clearer chosen/AI states */
.pl-pick-btn{min-height:var(--sw-tap);justify-content:center}
.pl-pick-btn.is-chosen{box-shadow:0 0 0 1px var(--brand) inset}
.pl-pick-btn:active{transform:translateY(1px)}

/* Toolbar buttons full-tap on mobile */
.pl-toolbar .btn{min-height:var(--sw-tap);display:inline-flex;align-items:center}

/* =========================================================
   AI FANTASY  (fantasy.ejs) — mobile refinements
   ========================================================= */

.fan-gwbar .btn{min-height:var(--sw-tap);display:inline-flex;align-items:center}

/* Player rows guaranteed tappable; subtle pressed state */
.fan-player{min-height:var(--sw-tap)}
.fan-player:active{transform:translateY(1px)}

/* AI XI block gets the premium gradient + glow used by the hero family */
.fan-ai{box-shadow:var(--ring),var(--shadow-md)}
.fan-ai #fan-use-ai,
.fan-ai .btn{min-height:var(--sw-tap)}

/* Sticky tray sits above the bottom nav on phones so it never overlaps it */
.fan-tray .btn-block{min-height:var(--sw-tap)}

/* =========================================================
   BOTTOM NAV polish (partials/bottom-nav.ejs)
   Base layout lives in styles.css @media(max-width:760px); here we
   refine the look + add a brand pill behind the active icon (FotMob feel).
   ========================================================= */
@media(max-width:760px){
  .bottom-nav{
    background:rgba(20,26,34,.92);
    backdrop-filter:saturate(150%) blur(12px);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    box-shadow:0 -6px 18px rgba(0,0,0,.28);
  }
  .bottom-nav a{
    min-height:var(--sw-tap, 44px);justify-content:center;gap:.15rem;
    position:relative;transition:color .15s;
  }
  .bottom-nav a:active{transform:none}
  .bottom-nav .bn-ico{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:999px;transition:background .15s,transform .15s;
  }
  .bottom-nav a.active .bn-ico{
    background:var(--brand-tint);transform:translateY(-1px);
  }
  .bottom-nav a span:last-child{font-size:.62rem;letter-spacing:.01em}
}

/* =========================================================
   GLOBAL mobile hardening for these three pages
   ========================================================= */
@media(max-width:760px){
  /* never let game content slide under the fixed bottom nav */
  .sw-hub,.pl-fixtures,.pl-leagues,.pl-recent,.fan-picker,.fan-tray{ }
  .pl-rg,.fan-rg{margin-bottom:1.4rem}

  /* feature strip: tidy 2-up on phones, full-width hero already spans */
  .sw-hub .feature-strip{grid-template-columns:1fr 1fr}

  /* tighten the predictor stat strip wording on narrow screens */
  .pl-stat-num{font-size:1.5rem}
}

@media(max-width:420px){
  .sw-hub .feature-strip{grid-template-columns:1fr}
  .sw-hero-glyph{display:none}
  .sw-hero-title{font-size:1.2rem}
}

/* respect reduced-motion preference */
@media(prefers-reduced-motion:reduce){
  .sw-hero,.sw-hub .feature-card,.pl-pick-btn,.fan-player,
  .bottom-nav .bn-ico{transition:none}
  .sw-hero:hover,.sw-hub .feature-card:hover{transform:none}
}