/* AirData mini app, part two (owner 15.09.2026: "a real wow app"): splash with music, onboarding, a personal home,
   football hub and predictions, playlists and artist pages, trips and fare watches. Loaded after the main stylesheet. */

/* ------------------------------------------------------------------ splash */
.splash { position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; background:#07070A; color:#fff;
  transition:opacity .6s ease, transform .6s ease; }
.splash.out { opacity:0; transform:scale(1.04); pointer-events:none; }
.splash .glow { position:absolute; width:140vmax; height:140vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(248,218,85,.22) 0, rgba(248,218,85,.06) 28%, transparent 55%); animation:spGlow 3.2s ease-in-out infinite alternate; }
@keyframes spGlow { from { transform:scale(.85); opacity:.7; } to { transform:scale(1.05); opacity:1; } }
.splash .rings { position:absolute; width:320px; height:320px; }
.splash .rings i { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(248,218,85,.35); animation:spRing 3s cubic-bezier(.2,.7,.2,1) infinite; opacity:0; }
.splash .rings i:nth-child(2) { animation-delay:.6s; } .splash .rings i:nth-child(3) { animation-delay:1.2s; }
@keyframes spRing { 0% { transform:scale(.3); opacity:0; } 25% { opacity:.9; } 100% { transform:scale(1.6); opacity:0; } }
.splash .trail { position:absolute; width:min(92vw, 520px); height:auto; top:18%; }
.splash .trail path { stroke:url(#spg); stroke-width:2.2; fill:none; stroke-linecap:round; stroke-dasharray:900; stroke-dashoffset:900; animation:spTrail 2.4s .2s cubic-bezier(.3,.6,.2,1) forwards; }
.splash .trail .plane { opacity:0; animation:spPlane 2.4s .2s cubic-bezier(.3,.6,.2,1) forwards; offset-path:path("M10 150 C 140 20, 360 20, 510 110"); offset-rotate:auto; }
@keyframes spTrail { to { stroke-dashoffset:0; } }
@keyframes spPlane { 0% { offset-distance:0%; opacity:0; } 10% { opacity:1; } 100% { offset-distance:100%; opacity:1; } }
.splash .center { position:relative; text-align:center; }
.splash .word { display:flex; gap:clamp(8px, 2.6vw, 16px); justify-content:center; font-size:clamp(30px, 10vw, 54px); font-weight:300; letter-spacing:.02em; }
.splash .word span { display:inline-block; opacity:0; transform:translateY(18px); filter:blur(8px); animation:spLetter .7s cubic-bezier(.2,.8,.2,1) forwards;
  background:linear-gradient(180deg, #FFF6D0, #F8DA55 60%, #C99A2E); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes spLetter { to { opacity:1; transform:none; filter:none; } }
.splash .tag { margin-top:14px; font-size:13px; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.62); opacity:0; animation:spFade .8s 1.3s forwards; }
@keyframes spFade { to { opacity:1; } }
.splash .eq { display:flex; gap:5px; justify-content:center; align-items:flex-end; height:34px; margin-top:26px; opacity:0; animation:spFade .6s 1s forwards; }
.splash .eq b { width:5px; border-radius:3px; background:linear-gradient(180deg, #FFE27A, #C99A2E); animation:spBar 1.1s ease-in-out infinite; }
.splash .eq b:nth-child(2n) { animation-duration:.8s; } .splash .eq b:nth-child(3n) { animation-duration:1.3s; } .splash .eq b:nth-child(5n) { animation-delay:-.4s; }
@keyframes spBar { 0%, 100% { height:6px; } 50% { height:34px; } }
.splash .go { margin-top:34px; padding:15px 38px; border-radius:30px; font-size:17px; font-weight:700; color:#15161A; background:linear-gradient(135deg, #FFF0A8, #F8DA55 50%, #E0B23A);
  box-shadow:0 14px 40px rgba(248,218,85,.35); opacity:0; animation:spFade .6s 1.8s forwards, spPulse 2.4s 2.4s ease-in-out infinite; }
@keyframes spPulse { 0%, 100% { box-shadow:0 14px 40px rgba(248,218,85,.3); } 50% { box-shadow:0 14px 60px rgba(248,218,85,.6); } }
.splash .skip { position:absolute; bottom:calc(26px + var(--safe-b, 0px)); font-size:12px; color:rgba(255,255,255,.45); }

/* ------------------------------------------------------------------ onboarding */
.onb { position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; color:#fff; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, #2A2210 0%, #0B0B0D 55%); padding:calc(18px + var(--safe-t, 0px)) 20px calc(20px + var(--safe-b, 0px)); }
.onb .top { display:flex; align-items:center; gap:10px; }
.onb .dots { display:flex; gap:6px; flex:1; } .onb .dots i { flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.onb .dots i.on { background:linear-gradient(90deg, #FFE27A, #C99A2E); }
.onb .top button { color:rgba(255,255,255,.6); font-size:14px; padding:6px 4px; }
.onb .body { flex:1; overflow-y:auto; padding:22px 2px 12px; animation:onbIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes onbIn { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:none; } }
.onb h1 { font-size:30px; line-height:1.12; margin:0 0 8px; letter-spacing:-.4px; }
.onb p.lead { color:rgba(255,255,255,.7); font-size:15px; margin:0 0 20px; line-height:1.45; }
.onb .foot { display:flex; gap:10px; }
.onb .next { flex:1; min-height:56px; border-radius:28px; font-size:17px; font-weight:700; color:#15161A; background:linear-gradient(135deg, #FFF0A8, #F8DA55 50%, #E0B23A); }
.onb .next:disabled { opacity:.35; }
.onb .back { width:56px; min-height:56px; border-radius:28px; color:#fff; background:rgba(255,255,255,.1); display:grid; place-items:center; }
.guide { display:grid; gap:12px; }
.gcard { display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:center; padding:16px; border-radius:22px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); opacity:0; animation:onbCard .5s cubic-bezier(.2,.8,.2,1) forwards; }
.gcard:nth-child(2) { animation-delay:.08s; } .gcard:nth-child(3) { animation-delay:.16s; } .gcard:nth-child(4) { animation-delay:.24s; } .gcard:nth-child(5) { animation-delay:.32s; }
@keyframes onbCard { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.gcard .gi { width:58px; height:58px; border-radius:18px; display:grid; place-items:center; color:#fff; }
.gcard .gi svg.i { width:28px; height:28px; }
.gcard b { font-size:16px; display:block; } .gcard span { color:rgba(255,255,255,.66); font-size:13px; line-height:1.35; }
.picks { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pick { position:relative; min-height:128px; border-radius:24px; padding:14px; text-align:left; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); transition:transform .15s; }
.pick:active { transform:scale(.97); }
.pick b { font-size:17px; position:relative; } .pick span { font-size:12px; opacity:.8; position:relative; }
.pick svg.i.big { position:absolute; right:10px; top:10px; width:34px; height:34px; opacity:.9; }
.pick .tick { position:absolute; left:12px; top:12px; width:26px; height:26px; border-radius:13px; display:grid; place-items:center; background:rgba(0,0,0,.3); border:1.5px solid rgba(255,255,255,.6); }
.pick.on { box-shadow:inset 0 0 0 2.5px #FFE27A; } .pick.on .tick { background:#FFE27A; color:#15161A; border-color:#FFE27A; }
.pick .tick svg.i { width:15px; height:15px; }
.teams { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.tpick { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; font-size:12px; text-align:center; }
.tpick img { width:40px; height:40px; object-fit:contain; } .tpick.on { background:rgba(248,218,85,.16); border-color:#F8DA55; }
.tpick span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.onb .osearch { width:100%; min-height:46px; border-radius:16px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font:inherit; padding:0 14px; margin:0 0 12px; outline:none; }
.onb h2 { font-size:13px; letter-spacing:.3px; text-transform:uppercase; color:rgba(255,255,255,.55); margin:18px 2px 10px; }
.ochips { display:flex; flex-wrap:wrap; gap:8px; }
.ochip { padding:10px 14px; border-radius:20px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:14px; }
.ochip.on { background:#F8DA55; color:#15161A; border-color:#F8DA55; font-weight:700; }
.done-art { display:grid; place-items:center; margin:30px 0 20px; }
.done-art .ring { width:120px; height:120px; border-radius:60px; display:grid; place-items:center; background:radial-gradient(circle, rgba(248,218,85,.35), transparent 70%); animation:spGlow 2s ease-in-out infinite alternate; }
.done-art svg.i { width:56px; height:56px; color:#FFE27A; }

/* ------------------------------------------------------------------ home */
.foryou { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; padding:2px 12px 4px; margin:0 -12px; scrollbar-width:none; }
.foryou::-webkit-scrollbar { display:none; }
.fy { flex:0 0 72%; max-width:280px; min-height:132px; scroll-snap-align:start; border-radius:22px; padding:14px; color:#fff; text-align:left; display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 26px rgba(0,0,0,.3); }
.fy .k { font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; opacity:.82; display:flex; align-items:center; gap:6px; }
.fy .k svg.i { width:14px; height:14px; }
.fy .v { font-size:20px; font-weight:800; line-height:1.15; margin-top:6px; } .fy .s { font-size:12px; opacity:.85; margin-top:4px; }
.fy .big { font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.fy .row2 { display:flex; align-items:center; gap:8px; }
.fy .row2 img { width:30px; height:30px; object-fit:contain; }
.fy.gold { background:linear-gradient(135deg, #7A5A12, #C99A2E); } .fy.green { background:linear-gradient(135deg, #0F7A55, #1FA37A); }
.fy.blue { background:linear-gradient(135deg, #1D4ED8, #0E7490); } .fy.violet { background:linear-gradient(135deg, #6A3DE8, #C2407A); }
.fy.orange { background:linear-gradient(135deg, #E2562B, #E8A33D); } .fy.slate { background:linear-gradient(135deg, #334155, #0F766E); }
.hsec { margin-top:18px; }
.prob { display:flex; height:6px; border-radius:3px; overflow:hidden; margin-top:6px; background:rgba(255,255,255,.08); }
.prob i:nth-child(1) { background:#2FB67C; } .prob i:nth-child(2) { background:rgba(255,255,255,.35); } .prob i:nth-child(3) { background:#E5484D; }
.probt { display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-top:3px; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------ football hub */
.fnav { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px 12px 12px; margin:0 -12px; }
.fnav::-webkit-scrollbar { display:none; }
.fnav button { flex:none; min-height:38px; padding:0 16px; border-radius:19px; color:var(--ink); font-size:14px; }
.fnav button.on { background:var(--active); color:var(--active-ink); font-weight:700; }
.tcard { padding:14px; margin-bottom:12px; }
.tcard .hd { display:flex; align-items:center; gap:12px; }
.tcard .hd img { width:48px; height:48px; object-fit:contain; }
.tcard .nm { font-size:18px; font-weight:800; } .tcard .lg { color:var(--dim); font-size:12px; }
.tcard .pos { margin-left:auto; text-align:right; } .tcard .pos b { font-size:24px; } .tcard .pos div { color:var(--dim); font-size:11px; }
.tcard .nx { margin-top:12px; padding:12px; border-radius:16px; background:rgba(255,255,255,.05); }
.tcard .nx .vs { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tcard .nx .vs span { flex:1; font-weight:600; font-size:14px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tcard .nx .vs span:last-child { text-align:right; }
.tcard .nx .cd { font-variant-numeric:tabular-nums; font-weight:800; color:var(--gold); font-size:15px; text-align:center; min-width:92px; }
.tcard .formrow { display:flex; gap:5px; margin-top:10px; align-items:center; }
.tcard .formrow b { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:11px; }
.tcard .formrow b.W { background:#2FB67C; } .tcard .formrow b.D { background:rgba(255,255,255,.2); } .tcard .formrow b.L { background:#E5484D; }
.pcard { padding:12px 14px; border-top:1px solid var(--line); }
.pcard:first-child { border-top:0; }
.pcard .meta { color:var(--dim); font-size:11px; margin-bottom:6px; display:flex; justify-content:space-between; }
.pcard .line { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.pcard .tm { display:flex; align-items:center; gap:8px; min-width:0; font-weight:600; font-size:14px; }
.pcard .tm img { width:26px; height:26px; object-fit:contain; flex:none; } .pcard .tm span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pcard .tm.r { flex-direction:row-reverse; text-align:right; }
.step { display:flex; align-items:center; gap:4px; }
.step button { width:30px; height:30px; border-radius:15px; background:rgba(255,255,255,.08); color:var(--ink); font-size:18px; line-height:1; }
.step b { width:26px; text-align:center; font-size:20px; font-variant-numeric:tabular-nums; }
.pcard .res { display:flex; justify-content:space-between; font-size:12px; margin-top:8px; color:var(--dim); }
.pcard .res .pts { font-weight:800; } .pcard .res .pts.p3 { color:#2FB67C; } .pcard .res .pts.p1 { color:var(--gold); } .pcard .res .pts.p0 { color:var(--faint); }
.lb { padding:6px 0; }
.lb .r { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; padding:9px 14px; }
.lb .r.me { background:var(--gold-soft); }
.lb .rank { font-weight:800; text-align:center; } .lb .rank.m1 { color:#FFD54A; } .lb .rank.m2 { color:#D9DEE8; } .lb .rank.m3 { color:#E0A36B; }
.lb .p { font-weight:800; font-variant-numeric:tabular-nums; } .lb .sub { color:var(--dim); font-size:11px; }
.kpi3 { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
.kpi3 > div { border-radius:16px; padding:10px; text-align:center; margin:0 !important; } .kpi3 b { display:block; font-size:22px; } .kpi3 span { color:var(--dim); font-size:11px; }

/* ------------------------------------------------------------------ music */
.mystats { padding:14px; margin-bottom:14px; }
.mystats .hd { display:flex; justify-content:space-between; align-items:baseline; }
.mystats .hd b { font-size:26px; font-weight:800; } .mystats .hd span { color:var(--dim); font-size:12px; }
.abar { display:grid; grid-template-columns:1fr 60px; gap:10px; align-items:center; margin-top:8px; font-size:13px; }
.abar div { position:relative; height:26px; border-radius:8px; background:rgba(255,255,255,.05); overflow:hidden; }
.abar div i { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg, rgba(248,218,85,.5), rgba(248,218,85,.15)); }
.abar div span { position:relative; padding:0 10px; line-height:26px; font-weight:600; white-space:nowrap; }
.abar em { font-style:normal; color:var(--dim); text-align:right; font-variant-numeric:tabular-nums; }
.plgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.plc { border-radius:20px; padding:12px; text-align:left; color:var(--ink); min-height:120px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.plc .art4 { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; opacity:.5; }
.plc .art4 img { width:100%; height:100%; object-fit:cover; }
.plc b, .plc span { position:relative; text-shadow:0 1px 8px rgba(0,0,0,.6); } .plc span { font-size:12px; color:var(--dim); }
.plc.new { display:grid; place-items:center; text-align:center; border:1.5px dashed var(--rim); }
.artist-hero { position:relative; border-radius:26px; overflow:hidden; min-height:220px; display:flex; align-items:flex-end; padding:16px; margin:0 0 12px; color:#fff; }
.artist-hero .bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.artist-hero .bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.8)); }
.artist-hero .tx { position:relative; } .artist-hero h2 { margin:0; font-size:30px; } .artist-hero span { font-size:13px; opacity:.85; }
.npx { display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
.npx button { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; color:#fff; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
.npx svg.i { width:16px; height:16px; }
.nps .art-name.link { text-decoration:underline; text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px; }

/* ------------------------------------------------------------------ trips */
.trip { padding:14px; margin-bottom:12px; position:relative; overflow:hidden; }
.trip .route { display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; }
.trip .route svg.i { width:20px; height:20px; color:var(--gold); }
.trip .when { color:var(--dim); font-size:13px; margin-top:3px; }
.trip .count { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:12px; }
.trip .count div { border-radius:14px; padding:8px; text-align:center; background:rgba(255,255,255,.05); }
.trip .count b { display:block; font-size:22px; font-variant-numeric:tabular-nums; } .trip .count span { color:var(--dim); font-size:11px; }
.trip .wxrow { display:flex; gap:10px; align-items:center; margin-top:12px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); font-size:14px; }
.trip .wxrow .t { font-size:22px; font-weight:800; }
.trip .acts { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.trip .acts button { padding:8px 12px; border-radius:16px; font-size:13px; font-weight:600; background:rgba(255,255,255,.08); color:var(--ink); border:1px solid var(--line); }
.sheet-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.sheet-acts button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px; border-radius:18px; font-weight:700; font-size:14px; color:var(--ink);
  background:var(--panel2); border:1px solid var(--rim); }
.sheet-acts button.on { background:var(--gold); color:var(--on-gold); }
.trend { padding:12px 12px 8px; margin-top:12px; }
.trend svg { width:100%; height:110px; display:block; }
.trend .lg { display:flex; gap:14px; font-size:11px; color:var(--dim); margin-top:4px; }
.trend .lg i { display:inline-block; width:10px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.trend .best { font-size:13px; margin-bottom:6px; } .trend .best b { color:var(--gold); }

/* the real logo on the splash: the mark rises with a glow, the wordmark is revealed, a light passes over it */
.splash .logo-anim { display:flex; flex-direction:column; align-items:center; gap:22px; }
.splash .logo-anim .mark { width:min(30vw, 128px); height:auto; opacity:0; transform:translateY(24px) scale(.7); filter:blur(10px) drop-shadow(0 0 0 rgba(248,218,85,0));
  animation:markIn 1s .15s cubic-bezier(.2,.8,.2,1) forwards, markGlow 3s 1.2s ease-in-out infinite alternate; }
@keyframes markIn { to { opacity:1; transform:none; filter:blur(0) drop-shadow(0 0 18px rgba(248,218,85,.35)); } }
@keyframes markGlow { from { filter:drop-shadow(0 0 12px rgba(248,218,85,.25)); } to { filter:drop-shadow(0 0 30px rgba(248,218,85,.6)); } }
.splash .wordwrap { position:relative; display:block; width:min(68vw, 300px); overflow:hidden; }
.splash .wordimg { display:block; width:100%; height:auto; clip-path:inset(0 100% 0 0); animation:wordIn 1.1s .75s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes wordIn { to { clip-path:inset(0 0 0 0); } }
.splash .shine { position:absolute; top:0; bottom:0; width:40%; left:-50%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
  mix-blend-mode:overlay; animation:shine 2.8s 1.9s ease-in-out infinite; }
@keyframes shine { 0% { left:-50%; } 45%, 100% { left:120%; } }

/* access gate */
.gate { position:fixed; inset:0; z-index:120; display:grid; place-items:center; background:#07070A; color:#fff; overflow:hidden; padding:24px; text-align:center; }
.gate .glow { position:absolute; width:140vmax; height:140vmax; border-radius:50%; background:radial-gradient(circle, rgba(248,218,85,.18), transparent 55%); animation:spGlow 3.2s ease-in-out infinite alternate; }
.gate .gbox { position:relative; display:flex; flex-direction:column; align-items:center; max-width:340px; }
.gate .gmark { width:96px; filter:drop-shadow(0 0 22px rgba(248,218,85,.4)); animation:markGlow 3s ease-in-out infinite alternate; }
.gate .gword { width:220px; margin:16px 0 26px; }
.gate h1 { margin:0 0 8px; font-size:26px; } .gate p { margin:0; color:rgba(255,255,255,.7); line-height:1.45; }
.gate .go { margin-top:26px; padding:15px 30px; border-radius:30px; font-size:16px; font-weight:700; color:#15161A; background:linear-gradient(135deg, #FFF0A8, #F8DA55 50%, #E0B23A); }
.gate .credit { margin-top:30px; font-size:11px; color:rgba(255,255,255,.35); }