/* ============ MEEPL v12 — screen-based architecture ============ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --bg:#0E0B1A; --bg-2:#171233; --surface:#1E1840; --surface-2:#272050;
  --line:rgba(255,255,255,0.09);
  --txt:#F4F2FF; --txt-2:rgba(244,242,255,0.62); --txt-3:rgba(244,242,255,0.38);
  --coral:#FF6B3D; --violet:#8B7FF0; --mint:#2DD4A7; --gold:#FFC857; --pink:#FF5C8A;
  --r:20px; --nav-h:72px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; height:100%; overscroll-behavior-y:none;}
body{
  background:var(--bg); color:var(--txt); font-family:'Outfit',system-ui,sans-serif;
  font-size:15px; line-height:1.45; overflow:hidden;
}
.serif{font-family:'Instrument Serif',Georgia,serif; font-weight:400; letter-spacing:-0.01em;}

/* ---------- Screen stack: one view at a time, slides in/out ---------- */
#stack{position:fixed; inset:0; overflow:hidden;}
.screen{
  position:absolute; inset:0; display:flex; flex-direction:column;
  background:var(--bg); will-change:transform;
}
.screen.tab{padding-bottom:var(--nav-h);}
.screen-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:24px;}
.screen[data-anim="push"]{animation:pushIn .32s cubic-bezier(0.32,0.72,0,1);}
.screen[data-anim="fade"]{animation:fadeIn .26s ease;}
@keyframes pushIn{from{transform:translateX(100%);} to{transform:none;}}
@keyframes fadeIn{from{opacity:0; transform:scale(0.985);} to{opacity:1; transform:none;}}
.screen.leaving{animation:pushOut .28s cubic-bezier(0.32,0.72,0,1) forwards;}
@keyframes pushOut{to{transform:translateX(100%); opacity:0.6;}}
@media (prefers-reduced-motion:reduce){ .screen{animation:none!important;} }

/* ---------- Top bars ---------- */
.topbar{
  display:flex; align-items:center; gap:12px; padding:14px 18px 10px;
  position:sticky; top:0; z-index:20; background:linear-gradient(var(--bg) 70%, transparent);
}
.topbar h1{margin:0; font-size:26px; font-weight:700; letter-spacing:-0.02em;}
.back{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--txt); font-size:19px; display:grid; place-items:center;
  cursor:pointer; flex-shrink:0;
}
.spacer{flex:1;}
.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--txt); font-size:16px; display:grid; place-items:center; cursor:pointer; position:relative; flex-shrink:0;
}
.icon-btn .dot{
  position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  background:var(--coral); color:#fff; font-size:10px; font-weight:700; border-radius:9px;
  display:grid; place-items:center; border:2px solid var(--bg);
}

/* ---------- Hero: full-bleed image with content over it ---------- */
.hero{
  position:relative; min-height:290px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px 18px 22px; margin-bottom:6px; overflow:hidden;
}
.hero .bgimg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.04);}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,11,26,0.35) 0%, rgba(14,11,26,0.75) 55%, var(--bg) 100%);
}
.hero > *{position:relative; z-index:2;}
.hero .eyebrow{font-size:11px; letter-spacing:2.4px; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:6px;}
.hero h2{margin:0 0 8px; font-size:34px; line-height:1.05; letter-spacing:-0.03em;}
.hero p{margin:0 0 16px; color:var(--txt-2); font-size:15px; max-width:30ch;}

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:15px; padding:15px 22px; font-family:inherit; font-size:15.5px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .1s cubic-bezier(0.34,1.56,0.64,1), filter .15s;
}
.btn:active{transform:scale(0.96); filter:brightness(0.92);}
.btn-primary{background:var(--coral); color:#fff; box-shadow:0 6px 22px rgba(255,107,61,0.34);}
.btn-violet{background:var(--violet); color:#fff; box-shadow:0 6px 22px rgba(139,127,240,0.3);}
.btn-mint{background:var(--mint); color:#06251C;}
.btn-glass{background:rgba(255,255,255,0.09); color:var(--txt); border:1px solid var(--line); backdrop-filter:blur(14px);}
.btn-full{width:100%;}
.btn-sm{padding:10px 15px; font-size:13.5px; border-radius:12px;}

/* ---------- Sections ---------- */
.sec{padding:6px 18px 4px;}
.sec-head{display:flex; align-items:baseline; gap:10px; margin:20px 0 12px;}
.sec-head h3{margin:0; font-size:20px; font-weight:700; letter-spacing:-0.01em;}
.sec-head .more{margin-left:auto; font-size:13px; color:var(--violet); font-weight:600; cursor:pointer;}
.sub{color:var(--txt-2); font-size:14px; margin:0 0 14px;}

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; margin-bottom:12px; position:relative; overflow:hidden;
}
.card.tappable{cursor:pointer; transition:transform .12s, background .15s;}
.card.tappable:active{transform:scale(0.985); background:var(--surface-2);}
.card h4{margin:0 0 4px; font-size:17px; font-weight:600; letter-spacing:-0.01em;}
.meta{color:var(--txt-2); font-size:13.5px; display:flex; gap:12px; flex-wrap:wrap;}
.row{display:flex; align-items:center; gap:10px;}

/* ---------- Photo tiles (games / venues) ---------- */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; padding:0 18px;}
.tile{
  position:relative; aspect-ratio:1/1.15; border-radius:18px; overflow:hidden; cursor:pointer;
  background:var(--surface-2); display:flex; align-items:flex-end; padding:13px;
  transition:transform .14s cubic-bezier(0.34,1.56,0.64,1);
}
.tile:active{transform:scale(0.955);}
.tile .bgimg{position:absolute; inset:0; background-size:cover; background-position:center;}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(170deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.82));}
.tile .label{position:relative; z-index:2;}
.tile .label b{display:block; font-size:16px; font-weight:600; line-height:1.2;}
.tile .label span{font-size:11.5px; color:rgba(255,255,255,0.72);}
.tile .pill{
  position:absolute; top:11px; left:11px; z-index:2; background:rgba(14,11,26,0.6); backdrop-filter:blur(10px);
  font-size:10.5px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; padding:4px 9px; border-radius:9px;
}

/* wide tile variant */
.tile.wide{aspect-ratio:16/9; grid-column:span 2;}

/* ---------- Horizontal rails ---------- */
.rail{display:flex; gap:12px; overflow-x:auto; padding:0 18px 6px; scroll-snap-type:x mandatory; scrollbar-width:none;}
.rail::-webkit-scrollbar{display:none;}
.rail > *{flex:0 0 auto; scroll-snap-align:start;}
.rail .tile{width:152px; aspect-ratio:1/1.2;}

/* ---------- Stats ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 18px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 8px; text-align:center;}
.stat b{display:block; font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.02em;}
.stat span{font-size:10.5px; color:var(--txt-3); letter-spacing:0.6px; text-transform:uppercase; font-weight:600;}

/* ---------- Chips ---------- */
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 18px 14px; scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto; padding:9px 16px; border-radius:14px; font-size:13.5px; font-weight:600;
  background:var(--surface); border:1px solid var(--line); color:var(--txt-2); cursor:pointer;
}
.chip.on{background:var(--txt); color:var(--bg); border-color:var(--txt);}

/* ---------- Bottom nav ---------- */
nav{
  position:fixed; bottom:0; left:0; right:0; height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(23,18,51,0.82); backdrop-filter:blur(22px) saturate(1.4);
  border-top:1px solid var(--line); display:flex; align-items:center; z-index:50;
}
.nav-i{flex:1; text-align:center; cursor:pointer; color:var(--txt-3); font-size:10.5px; font-weight:600; padding-top:2px;}
.nav-i .ic{display:block; font-size:21px; line-height:1.2; margin-bottom:1px; transition:transform .2s cubic-bezier(0.34,1.56,0.64,1);}
.nav-i.on{color:var(--txt);}
.nav-i.on .ic{transform:translateY(-3px) scale(1.12);}

/* ---------- Pip ---------- */
.pip{width:var(--s,64px); height:var(--s,64px); position:relative; flex-shrink:0;}
.pip i{position:absolute; inset:0; border-radius:28%; background:linear-gradient(140deg,var(--coral),var(--violet));
  box-shadow:0 6px 0 rgba(0,0,0,0.35), 0 10px 26px rgba(139,127,240,0.35); animation:float 3.6s ease-in-out infinite;}
@keyframes float{0%,100%{transform:rotate(-7deg) translateY(0);}50%{transform:rotate(-3deg) translateY(-6px);}}
.pip .e{position:absolute; top:36%; width:19%; height:24%; background:#fff; border-radius:50%; z-index:2; overflow:hidden;}
.pip .e.l{left:24%;} .pip .e.r{right:24%;}
.pip .e::after{content:""; position:absolute; width:54%; height:54%; background:#1A1330; border-radius:50%; bottom:16%; left:23%;
  animation:look 5.5s ease-in-out infinite;}
@keyframes look{0%,42%,100%{transform:translateX(0);}58%{transform:translateX(50%);}78%{transform:translateX(-40%);}}
.pip .m{position:absolute; bottom:24%; left:50%; transform:translateX(-50%); width:24%; height:11%;
  border-bottom:3px solid #fff; border-radius:0 0 30px 30px; z-index:2;}
.pip.happy i{animation:hop .62s cubic-bezier(0.34,1.56,0.64,1) infinite;}
@keyframes hop{0%,100%{transform:rotate(-7deg) translateY(0);}45%{transform:rotate(6deg) translateY(-16px) scale(1.05);}}
.pip.sleep .e{height:5%; top:44%; border-radius:3px;}
.pip.sleep .e::after{display:none;}
.pip.sleep .m{width:13%; height:13%; border:2px solid #fff; border-radius:50%;}
.pip.sleep::after{content:"z"; position:absolute; top:-8%; right:-10%; color:var(--violet); font-weight:800; font-size:20px;
  animation:zz 2.6s ease-out infinite;}
@keyframes zz{0%{opacity:0; transform:translate(0,0) scale(.6);}30%{opacity:1;}100%{opacity:0; transform:translate(14px,-24px) scale(1.2);}}
.pip-row{display:flex; align-items:center; gap:14px; padding:4px 18px 8px;}
.bubble{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px 15px; font-size:14px; flex:1; color:var(--txt-2);}

/* ---------- Sheets ---------- */
.sheet-bg{position:fixed; inset:0; background:rgba(6,4,14,0.7); backdrop-filter:blur(6px); z-index:80;
  display:none; align-items:flex-end; justify-content:center;}
.sheet-bg.on{display:flex;}
.sheet{background:var(--bg-2); border-radius:26px 26px 0 0; width:100%; max-width:520px; max-height:90vh;
  overflow-y:auto; padding:10px 18px 30px; animation:up .34s cubic-bezier(0.32,0.72,0,1);}
@keyframes up{from{transform:translateY(70px); opacity:0.5;} to{transform:none; opacity:1;}}
.sheet .grab{width:42px; height:4px; background:var(--txt-3); border-radius:3px; margin:6px auto 16px;}
.sheet h3{margin:0 0 14px; font-size:22px; font-weight:700; letter-spacing:-0.02em;}
@media(min-width:620px){ .sheet-bg{align-items:center;} .sheet{border-radius:26px;} }

/* ---------- Forms ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--txt-3); margin:14px 0 6px; letter-spacing:0.4px; text-transform:uppercase;}
input,select,textarea{
  width:100%; padding:14px 15px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); color:var(--txt); font-family:inherit; font-size:15.5px;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--violet); background:var(--surface-2);}
input::placeholder,textarea::placeholder{color:var(--txt-3);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.err{color:var(--coral); font-size:13px; font-weight:600; min-height:17px; margin-top:8px;}

/* ---------- Badges ---------- */
.b{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:9px; letter-spacing:0.3px;}
.b-coral{background:rgba(255,107,61,0.16); color:var(--coral);}
.b-violet{background:rgba(139,127,240,0.16); color:var(--violet);}
.b-mint{background:rgba(45,212,167,0.14); color:var(--mint);}
.b-gold{background:rgba(255,200,87,0.14); color:var(--gold);}
.b-ghost{background:rgba(255,255,255,0.07); color:var(--txt-3);}

/* ---------- Empty ---------- */
.empty{text-align:center; padding:40px 24px; color:var(--txt-2);}
.empty .pip{margin:0 auto 16px;}
.empty h4{margin:0 0 6px; font-size:19px; color:var(--txt); font-weight:600;}
.empty p{margin:0 0 18px; font-size:14px;}

/* ---------- Skeleton ---------- */
.sk{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);
  background-size:200% 100%; animation:sh 1.3s infinite linear; border-radius:18px; margin:0 18px 12px;}
@keyframes sh{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---------- Toast / celebrate ---------- */
.toast{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:120;
  background:var(--surface-2); border:1px solid var(--line); color:var(--txt); padding:13px 20px; border-radius:15px;
  font-size:14px; font-weight:600; box-shadow:0 12px 34px rgba(0,0,0,0.5); display:none; max-width:88vw;}
.toast.on{display:block; animation:tin .3s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes tin{from{transform:translate(-50%,-24px); opacity:0;} to{transform:translate(-50%,0); opacity:1;}}
.burst{position:fixed; top:38%; left:50%; transform:translate(-50%,-50%); z-index:130; text-align:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:24px; padding:26px 34px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6); pointer-events:none; animation:bu 1.9s cubic-bezier(0.22,1.4,0.36,1) forwards;}
.burst b{display:block; font-size:24px; font-weight:700;}
.burst span{font-size:13.5px; color:var(--txt-2);}
@keyframes bu{0%{opacity:0; transform:translate(-50%,-50%) scale(0.7);}16%{opacity:1; transform:translate(-50%,-50%) scale(1.06);}
  26%{transform:translate(-50%,-50%) scale(1);}82%{opacity:1;}100%{opacity:0; transform:translate(-50%,-62%) scale(0.95);}}
.conf{position:fixed; width:9px; height:13px; top:-20px; border-radius:2px; z-index:125; pointer-events:none;
  animation:cf linear forwards;}
@keyframes cf{0%{transform:translateY(0) rotate(0); opacity:1;}100%{transform:translateY(105vh) rotate(680deg); opacity:0.6;}}
.xpf{position:fixed; z-index:126; font-size:25px; font-weight:800; color:var(--mint); pointer-events:none;
  animation:xf 1.3s cubic-bezier(0.22,1,0.36,1) forwards;}
@keyframes xf{0%{opacity:0; transform:translateY(8px) scale(.7);}20%{opacity:1; transform:none;}100%{opacity:0; transform:translateY(-84px) scale(.85);}}

/* ---------- Swipe deck ---------- */
.deck{position:relative; height:400px; margin:0 18px 16px;}
.swipe{position:absolute; inset:0; background:var(--surface); border:1px solid var(--line); border-radius:24px;
  padding:22px; display:flex; flex-direction:column; transition:transform .36s cubic-bezier(0.34,1.56,0.64,1), opacity .3s;}
.swipe.go-l{transform:translateX(-130%) rotate(-16deg); opacity:0;}
.swipe.go-r{transform:translateX(130%) rotate(16deg); opacity:0;}
.av{width:72px; height:72px; border-radius:50%; background:linear-gradient(140deg,var(--violet),var(--coral));
  display:grid; place-items:center; font-size:26px; font-weight:700; color:#fff; margin-bottom:14px;}
.swipe .nm{font-size:25px; font-weight:700; letter-spacing:-0.02em;}
.swipe .bio{flex:1; color:var(--txt-2); font-size:14.5px; margin-top:10px;}
.acts{display:flex; gap:12px; margin-top:16px;}
.acts .btn{flex:1;}

/* ---------- Misc ---------- */
.gallery{display:flex; gap:8px; overflow-x:auto; padding:0 18px 12px; scrollbar-width:none;}
.gallery::-webkit-scrollbar{display:none;}
.gallery img{flex:0 0 auto; width:150px; height:104px; object-fit:cover; border-radius:14px; background:var(--surface-2);}
.bar{height:8px; background:var(--surface-2); border-radius:6px; overflow:hidden; margin:8px 0;}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--coral)); border-radius:6px; transition:width .7s cubic-bezier(0.22,1,0.36,1);}
#map{height:260px; border-radius:20px; margin:0 18px 14px; border:1px solid var(--line); z-index:1;}
.leaflet-container{background:var(--surface);}
.build{text-align:center; font-size:10.5px; color:var(--txt-3); padding:18px 0 10px; letter-spacing:1px;}
.fab{position:fixed; right:18px; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; border:none; z-index:55; cursor:pointer;
  background:linear-gradient(140deg,var(--violet),var(--coral)); color:#fff; font-size:27px;
  box-shadow:0 10px 30px rgba(139,127,240,0.45); transition:transform .18s cubic-bezier(0.34,1.56,0.64,1);}
.fab:active{transform:scale(0.9) rotate(90deg);}
html[dir="rtl"] .fab{right:auto; left:18px;}
html[dir="rtl"] body{font-family:'Outfit',sans-serif;}

/* ---------- RTL ---------- */
html[dir="rtl"] .back{transform:scaleX(-1);}
html[dir="rtl"] .sec-head .more{margin-left:0; margin-right:auto;}
html[dir="rtl"] .spacer{order:0;}
html[dir="rtl"] .screen[data-anim="push"]{animation:pushInR .32s cubic-bezier(0.32,0.72,0,1);}
@keyframes pushInR{from{transform:translateX(-100%);} to{transform:none;}}
html[dir="rtl"] .screen.leaving{animation:pushOutR .28s cubic-bezier(0.32,0.72,0,1) forwards;}
@keyframes pushOutR{to{transform:translateX(-100%); opacity:0.6;}}
html[dir="rtl"] .tile .pill{left:auto; right:11px;}

/* ============ v15 visual polish ============ */
/* Richer ambient background */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(700px 500px at 8% -5%, rgba(139,127,240,0.20), transparent 60%),
    radial-gradient(600px 450px at 100% 12%, rgba(255,107,61,0.13), transparent 62%),
    radial-gradient(500px 400px at 50% 105%, rgba(45,212,167,0.10), transparent 60%);
}
#stack{z-index:1;}

/* Cards get depth + a subtle top highlight */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  box-shadow:0 2px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
}
.card.tappable:active{transform:scale(0.985); box-shadow:0 1px 6px rgba(0,0,0,0.3);}

/* Buttons: gradient + glow */
.btn-primary{background:linear-gradient(135deg,#FF7A4D,#F0512A); box-shadow:0 6px 20px rgba(255,107,61,0.32), inset 0 1px 0 rgba(255,255,255,0.22);}
.btn-violet{background:linear-gradient(135deg,#9A8FF5,#7A6DE8); box-shadow:0 6px 20px rgba(139,127,240,0.32), inset 0 1px 0 rgba(255,255,255,0.2);}
.btn-mint{background:linear-gradient(135deg,#3EE0B5,#12B886); box-shadow:0 6px 18px rgba(45,212,167,0.28);}
.btn-gold{background:linear-gradient(135deg,#FFD466,var(--gold)); color:#3A2900; box-shadow:0 6px 18px rgba(255,200,87,0.28);}
.btn:active{transform:scale(0.955);}

/* Tiles: lift + shine on press */
.tile{box-shadow:0 4px 18px rgba(0,0,0,0.3);}
.tile .bgimg{transition:transform .5s cubic-bezier(0.22,1,0.36,1);}
.tile:active .bgimg{transform:scale(1.08);}

/* Hero: gentle parallax float */
.hero .bgimg{animation:heroDrift 18s ease-in-out infinite alternate;}
@keyframes heroDrift{from{transform:scale(1.04) translateY(0);} to{transform:scale(1.1) translateY(-8px);}}

/* Stat cards */
.stat{background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);}
.stat b{background:linear-gradient(135deg,#FFF,#C9C2FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}

/* Nav: active pill behind icon */
.nav-i{position:relative;}
.nav-i.on::before{
  content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:42px; height:30px; border-radius:12px; background:rgba(139,127,240,0.18);
}
.nav-i .ic{position:relative;}

/* Chips */
.chip{transition:transform .12s, background .15s;}
.chip:active{transform:scale(0.94);}
.chip.on{box-shadow:0 3px 12px rgba(244,242,255,0.15);}

/* Sheets: nicer entry */
.sheet{box-shadow:0 -14px 50px rgba(0,0,0,0.55); border-top:1px solid rgba(255,255,255,0.08);}

/* Section headers with accent bar */
.sec-head h3{position:relative; padding-left:12px;}
.sec-head h3::before{
  content:""; position:absolute; left:0; top:52%; transform:translateY(-50%);
  width:4px; height:19px; border-radius:3px; background:linear-gradient(180deg,var(--coral),var(--violet));
}
html[dir="rtl"] .sec-head h3{padding-left:0; padding-right:12px;}
html[dir="rtl"] .sec-head h3::before{left:auto; right:0;}

/* Inputs focus glow */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(139,127,240,0.22);}

/* Avatar frames get a soft glow */
.av.fr-gold{box-shadow:0 0 0 4px #FFC857, 0 0 20px rgba(255,200,87,0.4);}
.av.fr-silver{box-shadow:0 0 0 4px #C7CBD8, 0 0 16px rgba(199,203,216,0.3);}
.av.fr-bronze{box-shadow:0 0 0 4px #A9713A, 0 0 14px rgba(169,113,58,0.3);}

/* Empty states feel intentional */
.empty{background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent); border-radius:20px; margin:0 18px;}

/* Pull-to-refresh hint */
.ptr{text-align:center; font-size:12px; color:var(--txt-3); padding:8px 0 0; height:0; overflow:hidden; transition:height .2s;}
.ptr.on{height:26px;}

/* ============ v16: Super animations ============ */

/* Screen-level entrance choreography */
.screen-body > *{animation:riseIn .5s cubic-bezier(0.16,1,0.3,1) backwards;}
.screen-body > *:nth-child(1){animation-delay:.02s}
.screen-body > *:nth-child(2){animation-delay:.06s}
.screen-body > *:nth-child(3){animation-delay:.10s}
.screen-body > *:nth-child(4){animation-delay:.14s}
.screen-body > *:nth-child(5){animation-delay:.18s}
.screen-body > *:nth-child(n+6){animation-delay:.22s}
@keyframes riseIn{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){ .screen-body > *{animation:none!important;} }

/* Card list stagger (re-renders inside a screen, e.g. after filter tap) */
.stagger2 > *{animation:popIn2 .38s cubic-bezier(0.34,1.56,0.64,1) backwards;}
.stagger2 > *:nth-child(1){animation-delay:0s} .stagger2 > *:nth-child(2){animation-delay:.04s}
.stagger2 > *:nth-child(3){animation-delay:.08s} .stagger2 > *:nth-child(4){animation-delay:.12s}
.stagger2 > *:nth-child(5){animation-delay:.16s} .stagger2 > *:nth-child(n+6){animation-delay:.2s}
@keyframes popIn2{from{opacity:0; transform:scale(0.92) translateY(10px);} to{opacity:1; transform:none;}}

/* Tab icon morph on switch */
.nav-i .ic{transition:transform .35s cubic-bezier(0.34,1.56,0.64,1);}
.nav-i.on .ic{animation:tabPop .4s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes tabPop{0%{transform:translateY(-3px) scale(1.12) rotate(0);}35%{transform:translateY(-8px) scale(1.3) rotate(-8deg);}100%{transform:translateY(-3px) scale(1.12) rotate(0);}}
.nav-i.on::before{animation:pillIn .3s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes pillIn{from{transform:translateX(-50%) scale(0.3); opacity:0;} to{transform:translateX(-50%) scale(1); opacity:1;}}

/* Skeleton -> content cross-dissolve */
.sk{animation:sh 1.1s infinite linear, skFade .4s ease-in-out infinite alternate;}
@keyframes skFade{from{opacity:0.7;} to{opacity:1;}}

/* Button shimmer sweep on primary CTAs */
.btn-primary, .btn-mint{position:relative; overflow:hidden;}
.btn-primary::after, .btn-mint::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  animation:sweep 3.2s ease-in-out infinite;
}
@keyframes sweep{0%{left:-60%;}45%,100%{left:130%;}}

/* Live pulse ring (spectator / live badges) */
.b-coral{position:relative;}
.b-coral::before{content:""; position:absolute; inset:-3px; border-radius:inherit; border:1.5px solid var(--coral);
  animation:pulseRing 1.8s ease-out infinite; opacity:0;}
@keyframes pulseRing{0%{opacity:0.7; transform:scale(1);}100%{opacity:0; transform:scale(1.5);}}

/* Score bump pop */
.score-pop{animation:scPop .35s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes scPop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

/* Streak flame pulse (header chip) */
.pts, .streak-chip{animation:none;}
.pts:active{transform:scale(0.94);}

/* Toast bounce-in with icon spin */
.toast.on{animation:toastPop .4s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes toastPop{0%{transform:translate(-50%,-30px) scale(0.85); opacity:0;}60%{transform:translate(-50%,4px) scale(1.03);}100%{transform:translate(-50%,0) scale(1); opacity:1;}}

/* Burst: richer particle-feel entrance */
.burst{animation:buV2 2s cubic-bezier(0.19,1,0.22,1) forwards;}
@keyframes buV2{0%{opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-6deg);}
  14%{opacity:1; transform:translate(-50%,-50%) scale(1.12) rotate(2deg);}
  24%{transform:translate(-50%,-50%) scale(1) rotate(0);}
  85%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-64%) scale(0.94);}}

/* Map marker drop-in */
.leaflet-marker-icon{animation:markerDrop .5s cubic-bezier(0.34,1.56,0.64,1) backwards;}
@keyframes markerDrop{from{transform:translateY(-30px); opacity:0;} to{transform:none; opacity:1;}}

/* Deck card entrance + tilt-follow feel on press */
.swipe{transition:transform .36s cubic-bezier(0.34,1.56,0.64,1), opacity .3s, box-shadow .2s;}
.swipe:active{transform:scale(0.985) rotate(-1deg); box-shadow:0 4px 16px rgba(0,0,0,0.4);}

/* Bell ring animation reused site-wide for any "new" indicator */
.icon-btn:active{animation:btnSquish .18s ease;}
@keyframes btnSquish{50%{transform:scale(0.85);}}

/* Achievement grid: cascading unlock shimmer for earned items */
.ach-earned-shine{position:relative; overflow:hidden;}
.ach-earned-shine::after{content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:conic-gradient(from 0deg, transparent, rgba(255,200,87,0.18), transparent 30%);
  animation:spin 4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Pip gets extra idle life: occasional wink */
.pip:not(.happy):not(.sleep):not(.sad) .e.r{animation:wink 6.5s ease-in-out infinite;}
@keyframes wink{0%,94%,100%{transform:scaleY(1);}96%{transform:scaleY(0.15);}}

/* Progress bar fill: animated stripe */
.bar > i{background-size:200% 100%; animation:barShine 2.4s linear infinite;}
@keyframes barShine{to{background-position:-200% 0;}}

/* Page fade for sheet content swap (tab switches within a screen) */
#rwOut, #cOut, #adOut, #plOut{animation:contentSwap .28s ease;}
@keyframes contentSwap{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---------- Global error banner (non-intrusive, per-screen, dismissible) ---------- */
.err-banner{
  display:flex; align-items:center; gap:10px; margin:0 18px 12px; padding:12px 14px;
  background:rgba(255,107,61,0.12); border:1px solid rgba(255,107,61,0.35); border-radius:14px;
  animation:errIn .25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes errIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.err-banner .msg{flex:1; font-size:13px; color:var(--txt); line-height:1.35;}
.err-banner button{flex-shrink:0;}

/* ---------- Offline mode banner (global, persists across navigation) ---------- */
.offline-banner{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:linear-gradient(90deg,#4A4460,#5C5578); color:var(--txt);
  text-align:center; font-size:12.5px; font-weight:600; padding:9px 16px;
  padding-top:calc(9px + env(safe-area-inset-top));
  transform:translateY(-100%); transition:transform .3s cubic-bezier(0.34,1.56,0.64,1);
}
.offline-banner.show{transform:translateY(0);}

/* ---------- Live stream indicators ---------- */
.live-badge{animation:liveBlink 1.4s ease-in-out infinite; font-size:10px; vertical-align:middle;}
@keyframes liveBlink{0%,100%{opacity:1;}50%{opacity:0.35;}}
.watch-video{width:100%; aspect-ratio:16/9; background:#000; border-radius:16px; display:flex; align-items:center; justify-content:center; color:var(--txt-3); position:relative; overflow:hidden;}
.watch-video video{width:100%; height:100%; object-fit:cover;}
.live-pill{position:absolute; top:10px; left:10px; background:var(--coral); color:#fff; font-size:11px; font-weight:800; padding:4px 10px; border-radius:8px; letter-spacing:0.5px;}
.rail-live{display:flex; gap:12px; overflow-x:auto; padding:0 18px 6px; scroll-snap-type:x mandatory; scrollbar-width:none;}
.rail-live::-webkit-scrollbar{display:none;}
.live-tile{flex:0 0 auto; scroll-snap-align:start; width:180px; border-radius:16px; overflow:hidden; position:relative; background:var(--surface-2); cursor:pointer;}
.live-tile .lt-thumb{width:100%; aspect-ratio:16/10; background:linear-gradient(140deg,var(--violet),var(--coral)); display:flex; align-items:center; justify-content:center; font-size:26px;}
.live-tile .lt-info{padding:8px 10px;}

/* ---------- Challenge completion pulse (GPU-accelerated: transform + opacity only) ---------- */
.challenge-pulse{animation:challengeRing .6s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes challengeRing{
  0%{transform:scale(1); box-shadow:0 0 0 0 rgba(45,212,167,0.5);}
  40%{transform:scale(1.04); box-shadow:0 0 0 12px rgba(45,212,167,0);}
  100%{transform:scale(1); box-shadow:0 0 0 0 rgba(45,212,167,0);}
}

/* ---------- Unbypassable consent modal (device-level gate, shown once) ---------- */
.consent-gate{position:fixed; inset:0; z-index:500; background:var(--bg); display:flex; flex-direction:column; padding:24px 20px; padding-top:calc(24px + env(safe-area-inset-top));}
.consent-gate h2{font-family:'Fraunces',serif; font-size:26px; margin:12px 0 6px;}
.consent-gate .cg-body{flex:1; overflow-y:auto; margin:14px 0;}
.consent-gate .cg-check{display:flex; gap:10px; align-items:flex-start; padding:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; margin-bottom:10px;}
.consent-gate .cg-check input{width:auto; margin-top:2px; flex-shrink:0;}
.consent-gate .cg-check label{font-size:13.5px; color:var(--txt2); line-height:1.4;}
.consent-gate button:disabled{opacity:0.4; pointer-events:none;}