/* Tang Outs — glass / neon UI, modelled on the client's reference concept ("Hangout Hub"):
   frosted translucent panels over a blurred city-café backdrop, neon teal→pink gradients,
   rounded icon tiles, "Find a hang…" search pill. Own brand, own copy, own data. */
:root{
  --ink:#F4FBFF; --ink-2:rgba(230,244,255,.72); --ink-3:rgba(210,232,250,.5);
  --glass:rgba(255,255,255,.10); --glass-2:rgba(255,255,255,.16); --glass-line:rgba(255,255,255,.28);
  --teal:#3EF0D6; --teal-2:#19C7B2; --pink:#FF5CC8; --violet:#8B7BFF; --lime:#C8F25A;
  --grad:linear-gradient(135deg,var(--teal),var(--violet) 55%,var(--pink));
  --r:26px; --r-sm:18px; --wrap:1240px; --g:clamp(16px,3.4vw,40px); --ease:cubic-bezier(.16,1,.3,1);
  --font:"Sora","Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font);font-size:14.5px;line-height:1.5;color:var(--ink);background:#080D1A;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:12px}
::selection{background:var(--pink);color:#fff}
[hidden]{display:none!important}
.wrap{max-width:calc(var(--wrap) + 2*var(--g));margin:0 auto;padding:0 var(--g)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* backdrop: blurred venue photo + colour washes. Glow hot-spots are kept
   clear of the header band (y 0–80px) and the hero text column so the
   brand's own teal/pink/violet bloom never collides with same-hued text
   sitting on top of it — that collision was the actual legibility bug. */
.bg{position:fixed;inset:0;z-index:-2;background:#080D1A center/cover no-repeat;filter:blur(14px) saturate(1.2) brightness(.42);transform:scale(1.08)}
.bg::after{content:"";position:fixed;inset:0;background:radial-gradient(820px 520px at 6% 38%,rgba(62,240,214,.16),transparent 58%),radial-gradient(760px 520px at 100% 46%,rgba(255,92,200,.14),transparent 58%),radial-gradient(700px 500px at 50% 118%,rgba(139,123,255,.22),transparent 60%)}

.demo{background:rgba(255,200,90,.14);border-bottom:1px solid rgba(255,200,90,.3);color:#FFD98A;font-size:12px;text-align:center;padding:6px 14px;backdrop-filter:blur(10px)}

/* glass primitive */
.glass{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:0 20px 50px -24px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.35)}

/* header — opacity raised so the bar reads against any photo, not just
   the sample ones it was designed against */
.top{position:sticky;top:0;z-index:60;background:rgba(8,13,26,.72);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid var(--glass-line)}
#createBtn{padding:10px 16px;font-size:13px;white-space:nowrap}
.top .wrap{display:flex;align-items:center;gap:16px;height:72px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo-mark{width:36px;height:36px;border-radius:12px;background:var(--grad);display:grid;place-items:center;box-shadow:0 0 24px -4px var(--teal)}
.logo-mark i{width:14px;height:14px;border-radius:50%;border:3px solid #fff;background:transparent}
.area{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;font-size:13px;color:var(--ink-2)}
.area select{appearance:none;background:transparent;border:0;outline:0;font-weight:600;color:var(--ink);cursor:pointer}
.area select option{background:#12182B;color:#fff}
.top-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;position:relative;transition:.25s}
.icon-btn:hover{background:var(--glass-2);box-shadow:0 0 20px -6px var(--teal)}
.plan-count{position:absolute;top:2px;right:0;min-width:18px;height:18px;border-radius:9px;background:var(--pink);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--glass-2);border:1px solid var(--glass-line);display:grid;place-items:center;font-weight:700;font-size:14px}
.avatar.in{background:var(--grad);border-color:transparent}

/* hero — a soft radial scrim sits behind the text column only (not a
   full-bleed darken, so the photo still shows through everywhere else),
   plus a text-shadow halo on the heading and intro line. text-shadow
   still paints on the gradient-clipped word even though its fill is
   transparent, so "Next Tang Out" holds contrast on any backdrop. */
.hero{padding:clamp(34px,6vw,70px) 0 8px;position:relative}
.hero::before{content:"";position:absolute;inset:-10% -6% -4% -6%;z-index:-1;background:radial-gradient(60% 85% at 18% 38%,rgba(5,8,16,.55),transparent 72%)}
.hero h1{font-size:clamp(34px,5.6vw,72px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:14ch;text-shadow:0 2px 3px rgba(4,7,14,.6),0 10px 34px rgba(4,7,14,.45)}
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--ink-2);margin-top:14px;max-width:520px;font-size:16px;text-shadow:0 2px 10px rgba(4,7,14,.55)}
.searchbar{margin-top:26px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:999px;max-width:640px}
.searchbar svg{flex-shrink:0;color:var(--ink-2)}
.searchbar input{flex:1;background:transparent;border:0;outline:0;font-size:16px;min-width:0}
.searchbar input::placeholder{color:var(--ink-3)}
.sb-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(62,240,214,.28),rgba(255,92,200,.28));border:1px solid var(--glass-line);transition:.25s}
.sb-btn:hover{box-shadow:0 0 22px -4px var(--pink);transform:scale(1.05)}

/* the four nav tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:30px 0 8px}
.tile{position:relative;aspect-ratio:1/0.92;max-height:190px;border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:14px 10px;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s,background .3s;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;opacity:.0;transition:.4s;background:var(--tint)}
.tile:hover{transform:translateY(-6px)}
.tile:hover::before,.tile.on::before{opacity:1}
.tile.on{border-color:var(--tc);box-shadow:0 0 0 1px var(--tc),0 0 44px -8px var(--tc),0 20px 50px -24px rgba(0,0,0,.7)}
.tile svg{position:relative;width:52px;height:52px;color:var(--tc);filter:drop-shadow(0 0 10px var(--tc));transition:transform .5s var(--ease)}
.tile:hover svg{transform:scale(1.12) rotate(-4deg)}
.tile b{position:relative;font-size:15px;font-weight:600;letter-spacing:-.01em}
.tile small{position:relative;font-size:11.5px;color:var(--ink-3);margin-top:-8px}
.tile[data-t="music"]{--tc:#FF5CC8;--tint:radial-gradient(circle at 50% 30%,rgba(255,92,200,.28),transparent 70%)}
.tile[data-t="dinner"]{--tc:#3EF0D6;--tint:radial-gradient(circle at 50% 30%,rgba(62,240,214,.26),transparent 70%)}
.tile[data-t="events"]{--tc:#8B7BFF;--tint:radial-gradient(circle at 50% 30%,rgba(139,123,255,.30),transparent 70%)}
.tile[data-t="sports"]{--tc:#C8F25A;--tint:radial-gradient(circle at 50% 30%,rgba(200,242,90,.24),transparent 70%)}

/* sections + carousels */
.sec{padding:34px 0 6px}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:16px}
.sec-h h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.03em}
.sec-h p{font-size:13px;color:var(--ink-2);margin-top:2px}
.see{font-size:13px;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.see:hover{text-shadow:0 0 14px var(--teal)}
.row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;margin:0 -2px;scrollbar-width:none}
.row::-webkit-scrollbar{display:none}
.row .card{flex:0 0 min(300px,78vw);scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.card{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.5);box-shadow:0 30px 60px -26px rgba(62,240,214,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.card .ph{position:relative;aspect-ratio:16/11;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,13,26,.75))}
.pill{position:absolute;z-index:2;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(8,13,26,.6);backdrop-filter:blur(10px);border:1px solid var(--glass-line)}
.pill.tl{top:12px;right:12px}
.pill.bl{left:12px;bottom:12px}
.pill.off{background:rgba(200,242,90,.9);color:#0B1200;border-color:transparent}
.pill.real{background:rgba(255,196,0,.92);color:#241900;border-color:transparent}
.save{position:absolute;z-index:2;left:12px;top:12px;width:34px;height:34px;border-radius:50%;background:rgba(8,13,26,.6);backdrop-filter:blur(10px);border:1px solid var(--glass-line);display:grid;place-items:center;font-size:15px}
.save.on{color:var(--pink);box-shadow:0 0 16px -2px var(--pink)}
.card .body{padding:14px 18px 18px;display:flex;flex-direction:column;gap:5px}
.card h3{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.card .meta{font-size:12.5px;color:var(--ink-2)}
.card .cfoot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.card .price b{font-size:16px}
.card .price span{font-size:12px;color:var(--ink-3)}
.mini{font-size:11.5px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.1);color:var(--ink-2)}
.empty{grid-column:1/-1;padding:44px 16px;text-align:center;color:var(--ink-2);border-radius:var(--r)}

.page-title{padding:28px 0 8px}
.page-title h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.04em;font-weight:700}
.page-title p{color:var(--ink-2);margin-top:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 20px;align-items:center}
.fchip{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:500;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-line);transition:.25s}
.fchip:hover{color:#fff;border-color:var(--teal)}
.fchip.on{background:var(--grad);border-color:transparent;color:#07101C;font-weight:700}
.sortsel{margin-left:auto;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);outline:0;font-size:13px}
.sortsel option{background:#12182B}

/* footer */
.foot{margin-top:56px;border-top:1px solid var(--glass-line);background:rgba(8,13,26,.5);backdrop-filter:blur(16px);padding:36px 0 28px;color:var(--ink-2)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot h5{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.foot a{display:block;padding:4px 0}
.foot a:hover{color:var(--teal)}
.foot .fine{grid-column:1/-1;border-top:1px solid var(--glass-line);padding-top:16px;font-size:12px;color:var(--ink-3)}

/* drawer */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(3,6,16,.6);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:90;top:0;right:0;height:100%;width:min(540px,100%);background:rgba(14,20,38,.82);backdrop-filter:blur(30px) saturate(1.5);border-left:1px solid var(--glass-line);transform:translateX(102%);transition:transform .5s var(--ease);display:flex;flex-direction:column}
.drawer.open{transform:none}
.dr-hero{position:relative;height:230px;flex-shrink:0}
.dr-hero img{width:100%;height:100%;object-fit:cover}
.dr-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,13,26,.25),transparent 40%,rgba(14,20,38,1))}
.dr-close{position:absolute;z-index:2;top:14px;right:14px;width:40px;height:40px;border-radius:50%;background:rgba(8,13,26,.6);backdrop-filter:blur(10px);border:1px solid var(--glass-line);font-size:16px}
.dr-body{padding:0 26px 26px;overflow-y:auto;flex:1}
.dr-body h2{font-size:27px;font-weight:700;letter-spacing:-.03em;margin:-28px 0 6px;position:relative}
.dr-sub{color:var(--ink-2);font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{font-size:12px;padding:4px 11px;border-radius:999px;background:rgba(62,240,214,.14);border:1px solid rgba(62,240,214,.3);color:#B8FFF4}
.dr-sec{margin-top:22px}
.dr-sec h4{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.date{flex-shrink:0;width:60px;padding:10px 0;border-radius:16px;border:1px solid var(--glass-line);background:var(--glass);text-align:center;transition:.25s}
.date small{display:block;font-size:10.5px;color:var(--ink-3);font-weight:600}
.date b{font-size:18px;font-weight:600}
.date.on{background:var(--grad);border-color:transparent;color:#07101C}
.date.on small{color:#07101C}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.slot{padding:10px 4px;border-radius:14px;border:1px solid var(--glass-line);background:var(--glass);font-weight:600;font-size:13px;text-align:center;position:relative;transition:.2s}
.slot small{display:block;font-size:10.5px;font-weight:500;color:var(--ink-3)}
.slot:hover:not([disabled]){border-color:var(--teal);box-shadow:0 0 18px -6px var(--teal)}
.slot.on{background:var(--grad);border-color:transparent;color:#07101C}
.slot.on small{color:#07101C}
.slot[disabled]{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.slot.peak::after{content:"";position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}
.legend{display:flex;gap:14px;font-size:12px;color:var(--ink-2);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:38px;height:38px;border-radius:50%;border:1px solid var(--glass-line);background:var(--glass);font-size:18px;font-weight:600}
.stepper button:hover{border-color:var(--teal)}
.stepper b{font-size:20px;min-width:30px;text-align:center}
.bill{border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.07);border:1px solid var(--glass-line)}
.bill div{display:flex;justify-content:space-between;font-size:14px;padding:3px 0;color:var(--ink-2)}
.bill .tot{border-top:1px dashed var(--glass-line);margin-top:6px;padding-top:10px;font-weight:700;color:var(--ink);font-size:16px}
.bill .split{color:var(--teal);font-weight:600}
.dr-foot{padding:16px 26px;border-top:1px solid var(--glass-line);display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:.25s;white-space:nowrap}
.btn-p{background:var(--grad);color:#07101C;box-shadow:0 12px 30px -12px var(--teal)}
.btn-p:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-o{background:var(--glass);border:1px solid var(--glass-line)}
.btn-o:hover{border-color:var(--teal)}
.btn[disabled]{opacity:.4;pointer-events:none}
.dr-foot .btn{flex:1}
.note{font-size:12.5px;color:var(--ink-2);margin-top:10px;line-height:1.55}
.inp{width:100%;padding:13px 16px;border-radius:16px;border:1px solid var(--glass-line);background:rgba(255,255,255,.08);outline:0;margin-bottom:10px}
.inp:focus{border-color:var(--teal);box-shadow:0 0 20px -8px var(--teal)}
.inp::placeholder{color:var(--ink-3)}

.modal{position:fixed;z-index:95;inset:0;display:grid;place-items:start center;padding:12vh 20px 20px;background:rgba(3,6,16,.6);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s}
.modal.open{opacity:1;pointer-events:auto}
.modal-card{width:min(440px,100%);border-radius:28px;padding:26px;background:rgba(18,24,43,.85);backdrop-filter:blur(30px);border:1px solid var(--glass-line);transform:translateY(10px);transition:transform .35s var(--ease)}
.modal.open .modal-card{transform:none}
.modal-card h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.mtabs{display:flex;gap:6px;margin:14px 0}
.mtabs button{flex:1;padding:9px;border-radius:14px;border:1px solid var(--glass-line);font-weight:600}
.mtabs button.on{background:var(--grad);color:#07101C;border-color:transparent}
.err{color:#FF8FA8;font-size:13px;min-height:18px}
.search-card{width:min(640px,100%)}
.search-card .inp{font-size:17px}
.sres{max-height:52vh;overflow:auto}
.sres button{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:8px;border-radius:14px}
.sres button:hover{background:var(--glass-2)}
.sres img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.sres b{display:block;font-size:14px}
.sres small{color:var(--ink-2);font-size:12.5px}

.toast{position:fixed;z-index:120;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;padding:13px 22px;border-radius:999px;background:rgba(20,28,50,.9);backdrop-filter:blur(14px);border:1px solid var(--glass-line);font-weight:500;transition:.35s var(--ease);pointer-events:none;max-width:92vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

.plan-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid var(--glass-line);margin-bottom:10px}
.plan-item img{width:60px;height:60px;border-radius:12px;object-fit:cover}
.plan-item .grow{flex:1;min-width:0}
.plan-item b{display:block;font-size:14px}
.plan-item small{color:var(--ink-2);font-size:12.5px}
.status{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,200,90,.15);color:#FFD98A;white-space:nowrap}
.status.sent{background:rgba(62,240,214,.16);color:var(--teal)}
.rm{color:var(--ink-3);font-size:17px;padding:6px}

/* scroll reel — benchmark build, restyled */
.reel{position:relative;padding:0;margin-top:50px}
.reel-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.reel-slide{position:absolute;inset:0;opacity:0;will-change:opacity,transform}
.reel-slide img{width:100%;height:100%;object-fit:cover}
.reel-shade{position:absolute;inset:0;z-index:20;background:linear-gradient(90deg,rgba(8,13,26,.85) 0%,rgba(8,13,26,.35) 45%,transparent 70%),linear-gradient(0deg,rgba(8,13,26,.9),transparent 40%)}
.reel-copy{position:absolute;z-index:30;left:var(--g);bottom:14vh;max-width:760px}
.reel-cat{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.reel-cat::before{content:"";width:34px;height:2px;background:var(--grad)}
.reel-title{font-size:clamp(38px,7vw,100px);line-height:.98;letter-spacing:-.045em;font-weight:700;margin:14px 0 18px;text-shadow:0 10px 40px rgba(0,0,0,.4)}
.reel-title.in{animation:reelIn .8s var(--ease)}
@keyframes reelIn{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.reel-count{font-size:14px;color:var(--ink-2)}
.reel-count b{color:var(--pink);font-size:22px}
.reel-rail{position:absolute;z-index:30;right:var(--g);top:50%;transform:translateY(-50%);list-style:none;display:flex;flex-direction:column;gap:18px;text-align:right}
.reel-rail li{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:12px;justify-content:flex-end;transition:color .4s}
.reel-rail li span{order:2;width:10px;height:10px;border-radius:50%;border:2px solid currentColor;transition:.4s}
.reel-rail li.on{color:#fff}
.reel-rail li.on span{background:var(--teal);border-color:var(--teal);box-shadow:0 0 0 6px rgba(62,240,214,.3)}
.reel-bar{position:absolute;z-index:30;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.14)}
.reel-bar i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
.reel-note{position:absolute;z-index:30;right:var(--g);bottom:18px;font-size:11px;color:rgba(255,255,255,.6)}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .tiles{gap:10px}
  .tile{aspect-ratio:auto;padding:16px 6px;gap:8px}
  .tile svg{width:38px;height:38px}
  .tile small{display:none}
  .foot .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .tile b{font-size:12.5px}
  .area{display:none}
  .reel-rail{display:none}
  .reel-note{left:var(--g);right:auto}
  .foot .wrap{grid-template-columns:1fr}
  /* "+ Create a Tang Out" / "List your business" was wide enough to push
     the icon buttons flush against the screen edge with no margin — collapse
     it to a round "+" icon matching the others; the real label moves to
     aria-label (set in app.js) so it stays announced to screen readers. */
  .top-right{gap:6px}
  #createBtn{width:42px;height:42px;padding:0;border-radius:50%;font-size:0;flex-shrink:0}
  #createBtn::after{content:"+";font-size:22px;font-weight:700;line-height:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.card .ph img,.drawer,.tile,.tile svg{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   MVP EXTENSION — categories (10, horizontal scroll), bottom nav, booking
   step flow (payment/confirmation), dashboards (my tangouts/host/admin),
   reviews, join-a-game, create-a-tang-out. Reuses all tokens/primitives above.
   ══════════════════════════════════════════════════════════════════════ */

/* category row — replaces the 4-up grid with a scrollable strip of 10 */
.catnav{position:relative;display:flex;align-items:center;gap:0}
.catrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin:22px 0 4px;scrollbar-width:none;flex:1;min-width:0}
.catrow::-webkit-scrollbar{display:none}
.cattile{flex:0 0 128px;scroll-snap-align:start;border-radius:20px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.cattile:hover{transform:translateY(-4px)}
.cattile.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 34px -10px var(--teal)}
.cattile .em{font-size:28px;filter:drop-shadow(0 0 8px rgba(62,240,214,.35))}
.cattile b{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.catarrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(22px);display:grid;place-items:center;color:var(--ink);cursor:pointer;z-index:2;transition:opacity .2s,transform .2s}
.catarrow:hover{transform:scale(1.08)}
.catarrow svg{width:18px;height:18px}
.catarrow-l{margin-right:8px}
.catarrow-r{margin-left:8px}
.catarrow[hidden]{display:none}
@media (max-width:640px){.catarrow{width:32px;height:32px}.catarrow svg{width:15px;height:15px}}

/* weekend day switcher */
.dayrow{display:flex;gap:8px;margin:10px 0 16px}
.daybtn{padding:8px 18px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-line);transition:.2s}
.daybtn.on{background:var(--grad);border-color:transparent;color:#07101C}

/* distance chips reuse .fchip; join-a-game progress */
.joinwrap{display:flex;align-items:center;gap:8px;margin-top:6px}
.joinbar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.joinbar i{display:block;height:100%;background:var(--grad)}
.joinlabel{font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.pill.full{background:rgba(255,92,200,.85);color:#fff;border-color:transparent}

/* mobile bottom nav */
.bnav{display:none}
@media (max-width:760px){
  .bnav{display:flex;position:fixed;z-index:70;left:0;right:0;bottom:0;justify-content:space-around;align-items:center;height:64px;background:rgba(10,15,28,.85);backdrop-filter:blur(20px) saturate(1.4);border-top:1px solid var(--glass-line);padding-bottom:env(safe-area-inset-bottom)}
  .bnav a,.bnav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink-3);font-weight:600;flex:1;padding:6px 0}
  .bnav svg{width:21px;height:21px}
  .bnav a.on,.bnav button.on{color:var(--teal)}
  .bnav .fab{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#07101C;display:grid;place-items:center;margin-top:-22px;box-shadow:0 10px 26px -8px var(--teal)}
  .foot{display:none}
}

/* booking step flow */
.steps{display:flex;gap:6px;margin:0 0 18px}
.step{flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.14)}
.step.on,.step.done{background:var(--grad)}
.paymethods{display:grid;gap:10px;margin-top:4px}
.paymethod{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:16px;border:1px solid var(--glass-line);background:var(--glass);cursor:pointer;transition:.2s}
.paymethod:hover{border-color:var(--teal)}
.paymethod.on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 20px -8px var(--teal)}
.paymethod .pm-ic{width:34px;height:34px;border-radius:10px;background:var(--glass-2);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.paymethod b{font-size:14px;display:block}
.paymethod small{color:var(--ink-2);font-size:11.5px}
.pay-demo{background:rgba(255,200,90,.12);border:1px solid rgba(255,200,90,.32);color:#FFD98A;border-radius:14px;padding:10px 14px;font-size:12px;margin-top:12px;line-height:1.5}

/* confirmation */
.confwrap{text-align:center;padding:8px 4px}
.conf-check{width:64px;height:64px;border-radius:50%;background:var(--grad);display:grid;place-items:center;margin:6px auto 14px;box-shadow:0 0 40px -8px var(--teal)}
.conf-check svg{width:30px;height:30px;color:#07101C}
.confwrap h2{font-size:22px;margin-bottom:4px}
.qr{width:150px;height:150px;margin:18px auto;border-radius:16px;background:#fff;padding:8px}
.qr img{width:100%;height:100%}
.bookingid{font-family:monospace;letter-spacing:.06em;font-size:13px;color:var(--teal);background:rgba(62,240,214,.1);border:1px solid rgba(62,240,214,.28);border-radius:10px;padding:8px 14px;display:inline-block;margin:6px 0}
.conf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;text-align:left}
.conf-item{border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.07);border:1px solid var(--glass-line)}
.conf-item small{display:block;color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.conf-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.conf-actions .btn{flex:0 0 auto;padding:10px 18px;font-size:13px}

/* dashboards (my tangouts / host / admin) */
.dtabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;margin-bottom:16px;scrollbar-width:none}
.dtabs::-webkit-scrollbar{display:none}
.dtabs button{flex:0 0 auto;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--glass);border:1px solid var(--glass-line)}
.dtabs button.on{background:var(--grad);color:#07101C;border-color:transparent}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:20px}
.stat{border-radius:18px;padding:16px 18px;background:var(--glass);border:1px solid var(--glass-line)}
.stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em}
.stat span{font-size:12px;color:var(--ink-2)}
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th{text-align:left;padding:10px 12px;color:var(--ink-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--glass-line)}
.dtable td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.dtable tr:last-child td{border-bottom:0}
.badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;display:inline-block}
.badge.pending{background:rgba(255,200,90,.16);color:#FFD98A}
.badge.approved,.badge.live,.badge.confirmed{background:rgba(62,240,214,.16);color:var(--teal)}
.badge.rejected,.badge.cancelled{background:rgba(255,92,124,.16);color:#FF8FA8}
.hostbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}

/* reviews + star input */
.stars-in{display:flex;gap:6px;font-size:28px;margin:6px 0 12px}
.stars-in button{color:rgba(255,255,255,.25);transition:.15s}
.stars-in button.on,.stars-in button:hover{color:var(--lime);text-shadow:0 0 12px var(--lime)}
.review{padding:14px 0;border-bottom:1px solid var(--glass-line)}
.review:last-child{border-bottom:0}
.review .rh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.review .rstars{color:var(--lime);letter-spacing:1px;font-size:13px}
.review p{color:var(--ink-2);font-size:13.5px;line-height:1.5}

/* create-a-tang-out form (reuses .inp/.btn) */
.form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.form-grid2 .inp{margin-bottom:10px}
.field-lbl{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.07em;margin:4px 0 6px}
.catpick{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.catpick button{padding:9px 4px;border-radius:12px;font-size:11px;font-weight:600;text-align:center;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink-2)}
.catpick button.on{background:var(--grad);border-color:transparent;color:#07101C}
.preview-card{border-radius:20px;overflow:hidden;border:1px solid var(--glass-line);margin-bottom:14px}
.preview-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.preview-card .pc-b{padding:14px 16px}

@media (max-width:760px){
  .conf-grid,.form-grid2,.catpick{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   Events Near You — Leaflet map section
   ══════════════════════════════════════════════════════════════════════ */

/* override Leaflet defaults to match the dark glass theme */
.leaflet-container{font-family:var(--font);background:#080D1A}
.leaflet-tile-pane{filter:brightness(.92) saturate(1.1)}
.leaflet-control-zoom{border:1px solid var(--glass-line)!important;background:rgba(18,24,43,.82)!important;backdrop-filter:blur(14px)!important;box-shadow:none!important;border-radius:14px!important;overflow:hidden}
.leaflet-control-zoom a{color:var(--ink)!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--glass-line)!important;width:32px!important;height:32px!important;line-height:32px!important;font-size:17px!important;font-weight:700!important}
.leaflet-control-zoom a:last-child{border-bottom:0!important}
.leaflet-control-zoom a:hover{background:var(--glass-2)!important}
.leaflet-control-attribution{background:rgba(8,13,26,.6)!important;backdrop-filter:blur(8px)!important;font-size:10px!important;color:rgba(210,232,250,.5)!important;border-radius:8px 0 0 0!important}
.leaflet-control-attribution a{color:rgba(62,240,214,.7)!important}

/* map wrapper */
.map-sec{padding:40px 0 12px}
#eventsMapWrap{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--glass-line);box-shadow:0 24px 60px -28px rgba(62,240,214,.18)}
#eventsMap{height:420px;width:100%}
@media (max-width:760px){#eventsMap{height:300px}}

/* info/filter bar overlaid on the bottom of the map */
.map-info-bar{position:absolute;z-index:500;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--glass-line);border-radius:0 0 var(--r) var(--r);overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.map-info-bar::-webkit-scrollbar{display:none}
#mapEventCount{font-size:12px;color:var(--ink-2);white-space:nowrap;margin-right:6px;flex-shrink:0}
.map-info-bar .fchip{flex-shrink:0;padding:6px 13px;font-size:12px}

/* Leaflet popup styled to match glass theme */
.map-popup-wrap .leaflet-popup-content-wrapper{background:rgba(14,20,38,.92);backdrop-filter:blur(22px);border:1px solid var(--glass-line);border-radius:18px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);padding:0;overflow:hidden;min-width:200px}
.map-popup-wrap .leaflet-popup-tip{background:rgba(14,20,38,.92)}
.map-popup-wrap .leaflet-popup-close-button{color:var(--ink-2)!important;font-size:16px!important;padding:8px 12px 0 0!important}
.map-popup{display:flex;flex-direction:column}
.map-popup img{width:100%;height:110px;object-fit:cover}
.map-popup-body{padding:10px 13px 12px;display:flex;flex-direction:column;gap:4px}
.map-popup-body b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.25}
.map-popup-body small{font-size:11.5px;color:var(--ink-2)}
.map-popup-body span{font-size:13px;font-weight:600;color:var(--teal)}
.map-popup-body a{font-size:12.5px;font-weight:600;color:var(--pink);margin-top:2px;display:inline-block}
.map-popup-body a:hover{text-shadow:0 0 12px var(--pink)}
.map-popup-ext-badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#FFD98A;background:rgba(255,217,138,.12);border:1px solid rgba(255,217,138,.28);border-radius:999px;padding:2px 8px;width:fit-content;margin-bottom:2px}

/* external event cards (Ticketmaster) in the row below the map */
.ext-event-card .ph{background:rgba(62,240,214,.06)}
.ext-event-card .cfoot{align-items:center;gap:8px}

/* locate button in the map header */
#mapLocBtn{font-size:13px;padding:9px 16px;white-space:nowrap;flex-shrink:0}

#eventsMap.big{height:68vh;min-height:420px}

/* ===== White theme (sir's standing design rule, 2026-10-27): white backgrounds, clean & futuristic ===== */
:root{
  --ink:#0F172A; --ink-2:#475569; --ink-3:#64748B;
  --glass:#FFFFFF; --glass-2:#F1F5F9; --glass-line:#E2E8F0;
  --teal:#0EA5A4; --teal-2:#0B8483; --pink:#E11D74; --violet:#6D5EF5; --lime:#65A30D;
  --grad:linear-gradient(135deg,#0EA5A4,#6D5EF5 60%,#E11D74);
}
body{background:#FFFFFF;color:var(--ink)}
.bg,.bg::after{display:none!important}
.demo{background:#FFF7E6;border-bottom:1px solid #F5DDA8;color:#8A5A00;backdrop-filter:none}
.glass{background:#FFFFFF;border:1px solid var(--glass-line);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 24px -12px rgba(15,23,42,.14)}
.top{background:rgba(255,255,255,.92);border-bottom:1px solid var(--glass-line)}
.area select option{background:#fff;color:#0F172A}
.icon-btn:hover{background:var(--glass-2);box-shadow:none}
.hero,.hero *{text-shadow:none!important}
.hero{background:#fff}
::selection{background:#CFFAFE;color:#0F172A}
.pill{background:rgba(255,255,255,.92);color:#0F172A;border:1px solid var(--glass-line)}
.map-info-bar{background:#fff}
.leaflet-container{background:#E5E7EB}
.leaflet-control-zoom{background:#fff!important;backdrop-filter:none!important;box-shadow:0 4px 14px -6px rgba(15,23,42,.3)!important}
.leaflet-control-attribution{background:rgba(255,255,255,.85)!important;color:#475569!important;backdrop-filter:none!important}
.leaflet-control-attribution a{color:#0B8483!important}
.map-popup-wrap .leaflet-popup-content-wrapper{background:#fff;backdrop-filter:none;box-shadow:0 12px 30px -12px rgba(15,23,42,.35)}
.map-popup-wrap .leaflet-popup-tip{background:#fff}
.map-popup-ext-badge{color:#8A5A00;background:#FFF7E6;border-color:#F5DDA8}
.fchip:hover{color:var(--ink)}
.fchip.on{color:#fff}
.btn-p,.date.on,.date.on small,.slot.on,.slot.on small,.daybtn.on,.mtabs button.on,.dtabs button.on,.bnav .fab,.conf-check svg{color:#fff}
.btn-p{box-shadow:0 10px 24px -12px rgba(109,94,245,.6)}
.foot{background:#F8FAFC;backdrop-filter:none}
.drawer{background:#fff;backdrop-filter:none}
.modal-card{background:#fff;backdrop-filter:none;box-shadow:0 24px 60px -20px rgba(15,23,42,.35)}
.sortsel option{background:#fff;color:#0F172A}
.save,.dr-close{background:rgba(255,255,255,.92);color:#0F172A}

/* off-screen drawer must not widen the page on phones */
html,body{overflow-x:clip}

/* Pre-launch "Coming soon" strip (sir, 2026-11-13) — remove at launch */
.soon-banner{position:relative;z-index:60;padding:9px 16px;text-align:center;font-size:13.5px;line-height:1.4;color:#fff;background:linear-gradient(90deg,#6D5EF5,#FF5CC8)}
.soon-banner b{font-weight:700}