:root{
    --blue:#1E9BF0;--cyan:#7BD8FF;--mint:#2EE6A8;--amber:#FFB930;--red:#FF4257;
    --bg:#06080E;--bg-2:#080B14;--txt:#EDF2F8;--mut:#8FA2B7;--mut-2:#6C7D90;
    --line:rgba(158,203,255,.12);
    --grad:linear-gradient(120deg,#1E9BF0,#7BD8FF);
    /* one glass recipe, reused — see .glass */
    --glass-bg:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.028));
    --glass-line:rgba(255,255,255,.12);
    --glass-sh:0 10px 34px rgba(0,0,0,.42);
    --side-w:236px;
    --pad:clamp(11px,2.2vw,20px);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{background:var(--bg);overflow-x:hidden;color-scheme:dark;scroll-behavior:smooth;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg);
    color:var(--txt);-webkit-font-smoothing:antialiased;
    min-height:100dvh;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none;}
  button,input{font:inherit;}
  img{display:block;max-width:100%;}
  svg{display:block;}
  ::selection{background:rgba(123,216,255,.28);}

  /* the single glass treatment, applied deliberately and not everywhere */
  .glass{
    background:var(--glass-bg);
    backdrop-filter:blur(18px) saturate(165%);
    -webkit-backdrop-filter:blur(18px) saturate(165%);
    border:1px solid var(--glass-line);
    box-shadow:var(--glass-sh),inset 0 1px 0 rgba(255,255,255,.14);
  }

  /* a horizontal, swipeable row — the shape Kick uses for every mobile shelf */
  .rail{display:flex;gap:clamp(9px,1.6vw,14px);overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;}
  .rail::-webkit-scrollbar{display:none;}
  .rail>*{scroll-snap-align:start;}

  /* ============================== top bar ==============================
     One row on a phone. The search is an icon that takes the bar over when
     tapped; the account CTA collapses to a person glyph. */
  .top{
    position:sticky;top:0;z-index:80;display:flex;align-items:center;gap:10px;
    padding:9px var(--pad);min-height:60px;
    background:var(--bg);border:0;box-shadow:none;
  }
  /* icon buttons: hamburger, search, account */
  .ic{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:11px;
    border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--txt);
    cursor:pointer;transition:background .15s,border-color .15s;padding:0;}
  .ic:hover{background:rgba(255,255,255,.11);}
  .ic:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
  .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;}
  .ic-user{background:var(--grad);border-color:transparent;color:#04121F;}
  .ic-user svg{stroke-width:2.1;}
  /* account button + panel (shown when signed in) */
  .acct{position:relative;flex:0 0 auto;}
  .acct-btn{background:var(--grad);border-color:transparent;color:#04121F;padding:0;}
  .acct-ini{font-size:13px;font-weight:800;letter-spacing:.02em;line-height:1;}
  .acct-menu{position:absolute;top:calc(100% + 9px);right:0;width:250px;z-index:90;
    background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:12px;
    box-shadow:0 22px 54px rgba(0,0,0,.55);}
  .acct-id{display:flex;align-items:center;gap:11px;min-width:0;}
  .acct-av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
    background:var(--grad);color:#04121F;font-weight:800;font-size:14px;}
  .acct-t{min-width:0;}
  .acct-t b{display:block;font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .acct-t span{display:block;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .acct-rule{height:1px;background:var(--line);margin:12px 0;}
  .acct-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mut-2);margin:0 0 6px;padding:0 2px;}
  .acct-row{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
    font:inherit;font-size:13.5px;color:var(--txt);padding:9px 10px;border-radius:9px;text-decoration:none;}
  .acct-row:hover{background:rgba(255,255,255,.07);}
  .acct-row.danger{color:#FF6B6B;}
  .top.searching #acct{display:none;}
  .burger{display:none;}
  .only-mob{display:none;}

  .brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0;}
  .brand img{width:30px;height:34px;object-fit:contain;flex:0 0 auto;}
  .wordmark{display:grid;line-height:1.02;white-space:nowrap;user-select:none;}
  .wordmark .r1{font-size:14.5px;font-weight:850;letter-spacing:.03em;}
  .wordmark .r1 small{font-size:8.5px;color:var(--mut);letter-spacing:.1em;margin-left:3px;font-weight:800;}
  .wordmark .r2{font-size:13px;font-weight:300;letter-spacing:.17em;}
  .beta{background:rgba(30,155,240,.16);color:var(--cyan);border:1px solid rgba(123,216,255,.35);
    font-size:9px;font-weight:850;border-radius:5px;padding:2px 5px;letter-spacing:.06em;flex:0 0 auto;}
  .top .sp{flex:1 1 auto;min-width:0;}
  .search{position:relative;flex:0 1 380px;min-width:0;}
  .search input{
    width:100%;background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--txt);
    border-radius:11px;padding:9px 34px 9px 35px;font-size:13.5px;outline:none;transition:.16s;min-height:40px;}
  .search input::placeholder{color:var(--mut-2);}
  .search input:focus{border-color:rgba(123,216,255,.5);background:rgba(255,255,255,.09);
    box-shadow:0 0 0 3px rgba(30,155,240,.13);}
  .search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mut-2);
    pointer-events:none;}
  .search .mag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;}
  .search .clr{position:absolute;right:5px;top:50%;transform:translateY(-50%);border:0;background:none;
    color:var(--mut);font-size:15px;cursor:pointer;padding:5px 7px;line-height:1;display:none;}
  .search.has .clr{display:block;}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;
    border-radius:11px;padding:10px 15px;font-size:13px;font-weight:800;cursor:pointer;
    transition:transform .18s,background .18s,box-shadow .18s;white-space:nowrap;min-height:40px;flex:0 0 auto;}
  .btn-grad{background:var(--grad);color:#04121F;box-shadow:0 7px 20px rgba(30,155,240,.3);}
  .btn-grad:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(30,155,240,.4);}
  .btn-ghost{background:rgba(255,255,255,.055);color:var(--txt);border:1px solid var(--line);}
  .btn-ghost:hover{background:rgba(255,255,255,.11);}

  /* ============================== shell ============================== */
  .shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);
    gap:clamp(14px,2vw,26px);max-width:1600px;margin:0 auto;
    padding:clamp(14px,2.2vw,22px) var(--pad) 80px;align-items:start;}

  /* ------------------------------ sidebar ------------------------------ */
  .side{position:sticky;top:76px;padding:0 4px;min-width:0;background:none;border:0;box-shadow:none;}
  .snav.business-link{color:var(--cyan);margin-bottom:8px;background:rgba(30,155,240,.1);}
  .side h3{font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;
    color:var(--mut-2);padding:12px 8px 7px;}
  .side nav{display:grid;gap:2px;}
  .snav{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:11px;
    font-size:13.5px;font-weight:750;color:var(--txt);transition:background .15s;min-width:0;}
  .snav .i{width:20px;text-align:center;font-size:15px;flex:0 0 auto;}
  .snav .i svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;}
  .snav span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .snav:hover{background:rgba(255,255,255,.07);}
  .snav.on{background:rgba(30,155,240,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(123,216,255,.26);}
  .side .rule{height:1px;background:var(--line);margin:10px 8px;}
  /* the channel list — the thing that makes Kick feel populated */
  .chan{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px;min-width:0;
    transition:background .15s;}
  .chan:hover{background:rgba(255,255,255,.07);}
  .chan img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 auto;
    background:#0B1220;border:1px solid var(--line);}
  .chan .t{min-width:0;flex:1 1 auto;}
  .chan .n{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chan .s{font-size:11px;color:var(--mut-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chan .st{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;}
  .chan .st.live{color:var(--red);}
  .chan .st.soon{color:var(--amber);font-size:10px;}
  .chan .st .dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blip 1.6s infinite;}
  @keyframes blip{50%{opacity:.22;}}
  .side-cta{margin:12px 8px 4px;}
  .side-cta .btn{width:100%;}

  /* ------------------------------ sections ------------------------------ */
  .sec{margin:0 0 clamp(24px,3.4vw,38px);}
  /* the sticky bar is 60px: without this, scrolling to the grid parks its
     heading underneath the header */
  #bizSec{scroll-margin-top:76px;}
  .sec-head{display:flex;align-items:baseline;gap:10px;margin:0 0 12px;}
  .sec-head h2{font-size:clamp(17px,2.5vw,22px);font-weight:850;letter-spacing:-.025em;
    white-space:nowrap;}
  .sec-head h2 .accent{color:var(--cyan);}
  .sec-head .count{font-size:12.5px;color:var(--mut-2);font-weight:700;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sec-head .link{margin-left:auto;flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--mut);
    background:none;border:0;cursor:pointer;padding:2px 0;white-space:nowrap;}
  .sec-head .link:hover{color:var(--cyan);}

  /* ========================= featured + chat =========================
     The player and its meta stack; on a wide screen the chat sits beside
     them, the way Kick's front page pairs the featured stream with a room. */
  .feature{display:grid;gap:clamp(11px,1.6vw,16px);grid-template-columns:minmax(0,1fr);
    align-items:stretch;}
  .fmain{min-width:0;display:flex;flex-direction:column;gap:11px;}
  .hero{position:relative;border-radius:16px;overflow:hidden;background:#04060C;
    border:1px solid var(--line);aspect-ratio:16/9;}
  .hero .media,.hero .media iframe,.hero .media img{position:absolute;inset:0;width:100%;height:100%;}
  .hero .media iframe{border:0;pointer-events:none;background:#04060C;}
  /* the logo layer that stands in until the player paints */
  .hero .media.under{z-index:0;}
  .hero .media:not(.under){z-index:1;}
  .fade-in{opacity:0;transition:opacity .45s ease;}
  .fade-in.ready{opacity:1;}
  .thumb .shot.under{position:absolute;inset:0;margin:auto;width:34%;height:auto;
    aspect-ratio:1;object-fit:contain;border-radius:50%;}
  .thumb{background:radial-gradient(circle at 50% 34%,#1A2140,#04070E 74%);}
  .hero .media img{object-fit:cover;}
  .hero .media.logo{display:grid;place-items:center;
    background:radial-gradient(circle at 50% 36%,#222B60,#070B1B 72%);}
  .hero .media.logo img{position:static;width:clamp(84px,15%,148px);height:auto;aspect-ratio:1;
    object-fit:contain;border-radius:50%;box-shadow:0 18px 46px rgba(0,0,0,.55);}
  /* a light foot-scrim only: there is no card floating here to read against */
  .hero .scrim{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(3,5,11,.72) 0,rgba(3,5,11,.14) 26%,transparent 52%);}
  .hero .live-pill{position:absolute;top:11px;left:11px;z-index:3;
    display:inline-flex;align-items:center;gap:6px;border-radius:8px;padding:5px 10px;
    background:var(--red);color:#fff;font-size:11px;font-weight:850;letter-spacing:.05em;}
  .hero .live-pill.setup{background:rgba(8,12,22,.7);color:var(--amber);
    border:1px solid rgba(255,185,48,.5);backdrop-filter:blur(10px);}
  .hero .live-pill .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:blip 1.6s infinite;}

  /* the meta row: BELOW the player, never over it */
  .fmeta{display:flex;align-items:flex-start;gap:12px;min-width:0;}
  .fmeta .av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;
    background:#0B1220;border:1px solid var(--line);}
  .fmeta .t{min-width:0;flex:1 1 auto;}
  .fmeta .n{display:flex;align-items:center;gap:6px;font-size:clamp(15px,2vw,18px);font-weight:850;
    letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .fmeta .n .vf{color:var(--cyan);font-size:12px;flex:0 0 auto;}
  .fmeta .d{font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .fmeta .tags{padding-top:8px;}
  .fmeta .btn{flex:0 0 auto;}

  /* --------------------------- the hero chat --------------------------- */
  /* The SLOT is the grid item; the room inside it is out of flow. A grid
     item sizes its row from its content, so a chat holding 30 messages
     would drag the row far taller than the player beside it. Absolutely
     positioning the room means it contributes no height and simply fills
     whatever the stage establishes. */
  .fchat-slot{display:none;position:relative;min-width:0;}
  .fchat{position:absolute;inset:0;display:flex;flex-direction:column;
    min-width:0;min-height:0;border-radius:16px;overflow:hidden;}
  .fchat-head{display:flex;align-items:center;gap:8px;flex:0 0 auto;
    padding:11px 13px;border-bottom:1px solid var(--glass-line);
    font-size:12.5px;font-weight:800;letter-spacing:.01em;}
  .fchat-head .mini-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);
    box-shadow:0 0 8px var(--mint);flex:0 0 auto;animation:blip 1.9s infinite;}
  .fchat-head .demo-tag{margin-left:auto;flex:0 0 auto;font-size:9px;font-weight:850;
    letter-spacing:.09em;border-radius:5px;padding:3px 6px;color:var(--amber);
    background:rgba(255,185,48,.13);border:1px solid rgba(255,185,48,.4);cursor:help;}
  .chat-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 13px;
    display:flex;flex-direction:column;gap:9px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 24px,#000 100%);}
  .chat-scroll::-webkit-scrollbar{display:none;}
  .msg{font-size:13px;line-height:1.45;color:rgba(237,242,248,.94);word-wrap:break-word;
    overflow-wrap:anywhere;animation:msgIn .35s cubic-bezier(.21,1.02,.73,1) both;}
  @keyframes msgIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
  .msg .uname{font-weight:800;margin-right:6px;}
  .msg .badge-em{font-size:11px;margin-right:4px;}
  .msg.donation{border-radius:13px;padding:10px 12px;color:#04121F;
    background:linear-gradient(135deg,#7BD8FF,#1E9BF0);
    box-shadow:0 6px 18px rgba(30,155,240,.32);font-weight:600;}
  .msg.donation .don-head{font-weight:850;font-size:11.5px;letter-spacing:.03em;margin-bottom:3px;}
  .msg.event{background:rgba(255,255,255,.07);border:1px solid var(--line);
    border-radius:13px;padding:9px 11px;font-size:12px;color:var(--mut);}
  .msg.self .uname{color:var(--cyan);}
  .chat-off{flex:1 1 auto;display:grid;place-content:center;gap:7px;text-align:center;
    padding:22px 18px;color:var(--mut-2);}
  .chat-off .e{font-size:26px;}
  .chat-off b{font-size:13px;color:var(--txt);font-weight:800;}
  .chat-off p{font-size:12px;line-height:1.55;max-width:26ch;}
  .chat-input-row{flex:0 0 auto;display:flex;gap:8px;align-items:center;
    padding:11px 13px;border-top:1px solid var(--glass-line);}
  .chat-input{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.08);
    border:1px solid var(--line);border-radius:999px;padding:9px 14px;
    color:var(--txt);font-size:13px;outline:none;transition:border-color .2s,background .2s;}
  .chat-input::placeholder{color:var(--mut-2);}
  .chat-input:focus{border-color:rgba(123,216,255,.6);background:rgba(255,255,255,.12);}
  .chat-send{width:36px;height:36px;border-radius:50%;flex:0 0 auto;border:none;cursor:pointer;
    background:var(--grad);color:#04121F;display:grid;place-items:center;
    transition:transform .15s,box-shadow .2s;}
  .chat-send:hover{box-shadow:0 6px 16px rgba(30,155,240,.4);}
  .chat-send:active{transform:scale(.92);}

  /* =============================== cards =============================== */
  /* auto-fit: with two businesses they stretch and fill the row instead of
     leaving a hole where a third would go. */
  .grid{display:grid;gap:clamp(13px,1.7vw,20px);
    grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));}
  @media(min-width:1180px){
    .feature .hero{aspect-ratio:auto;height:clamp(230px,23vw,320px);}
    .feature .fmeta{padding:12px 0 0;}
    .feature .chat{max-height:410px;}
  }
  .card{display:block;min-width:0;border-radius:14px;transition:transform .18s;}
  .card:hover{transform:translateY(-4px);}
  .card:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:14px;}
  .thumb{position:relative;aspect-ratio:16/9;border-radius:13px;overflow:hidden;
    background:#04070E;border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(0,0,0,.34);transition:border-color .18s,box-shadow .18s;}
  .card:hover .thumb{border-color:rgba(123,216,255,.42);box-shadow:0 16px 40px rgba(0,0,0,.5);}
  .thumb .shot{width:100%;height:100%;object-fit:cover;}
  .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;}
  .thumb.logo{display:grid;place-items:center;}
  /* sized from the WIDTH: a % height against an aspect-ratio box is unreliable */
  .thumb.logo .shot{width:31%;height:auto;aspect-ratio:1;object-fit:contain;
    border-radius:50%;box-shadow:0 14px 36px rgba(0,0,0,.52);}
  .thumb.navy{background:radial-gradient(circle at 50% 34%,#232C63,#070B1B 72%);}
  .badge{position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:5px;
    background:var(--red);color:#fff;font-size:10.5px;font-weight:850;letter-spacing:.05em;
    border-radius:6px;padding:4px 8px;}
  .badge.setup{background:rgba(6,10,20,.66);color:var(--amber);border:1px solid rgba(255,185,48,.46);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
  .badge .dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:blip 1.6s infinite;}
  .where{position:absolute;bottom:9px;left:9px;max-width:calc(100% - 18px);z-index:2;
    color:#fff;font-size:11px;font-weight:750;border-radius:7px;padding:4px 9px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:rgba(6,10,18,.5);backdrop-filter:blur(12px) saturate(150%);
    -webkit-backdrop-filter:blur(12px) saturate(150%);border:1px solid rgba(255,255,255,.13);}
  .meta{display:flex;gap:10px;padding:11px 3px 0;min-width:0;}
  .meta .av{width:38px;height:38px;border-radius:50%;flex:0 0 auto;object-fit:cover;background:#0B1220;
    border:1px solid var(--line);}
  .meta .txt{min-width:0;flex:1 1 auto;}
  .meta .name{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:850;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .meta .vf{color:var(--cyan);font-size:11px;}
  .meta .title{display:-webkit-box;font-size:12.5px;color:var(--mut);margin-top:3px;line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
  .tags{display:flex;gap:6px;flex-wrap:wrap;padding:9px 3px 0;}
  .tag{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--mut);
    font-size:11px;font-weight:750;border-radius:7px;padding:4px 8px;white-space:nowrap;}

  /* ========================== category rail ==========================
     Kick's box-art shelf: ONE swipeable row, not a wall of tiles. We have no
     photography, so each category is a branded gradient plate — deliberate,
     not a broken image. "Ver todas" unfolds the row into a grid. */
  .cats .ctile{flex:0 0 clamp(116px,33vw,158px);}
  .cats.all{display:grid;overflow:visible;gap:clamp(10px,1.4vw,15px);
    grid-template-columns:repeat(auto-fill,minmax(clamp(116px,33vw,158px),1fr));}
  .ctile{position:relative;display:block;border-radius:14px;overflow:hidden;cursor:pointer;
    border:1px solid var(--line);background:#0A0E18;text-align:left;
    transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0;padding:0;color:inherit;}
  .ctile:hover{transform:translateY(-4px);border-color:rgba(123,216,255,.45);
    box-shadow:0 16px 38px rgba(0,0,0,.46);}
  .ctile:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
  .ctile .plate{position:relative;aspect-ratio:3/4;display:grid;place-items:center;
    background:var(--c1);}
  .ctile .plate::before{content:"";position:absolute;inset:0;
    background:radial-gradient(120% 90% at 50% 8%,var(--c2),transparent 62%);}
  /* the glass sheen that makes the plate read as a physical tile */
  .ctile .plate::after{content:"";position:absolute;inset:0;
    background:linear-gradient(158deg,rgba(255,255,255,.2),rgba(255,255,255,.02) 44%,rgba(0,0,0,.3));
    mix-blend-mode:soft-light;}
  .ctile .e{position:relative;z-index:2;font-size:clamp(30px,8vw,46px);
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.5));}
  .ctile .lbl{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:8px 9px;
    background:linear-gradient(to top,rgba(4,6,12,.94),transparent);}
  .ctile .lbl b{display:block;font-size:12.5px;font-weight:850;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ctile .lbl span{display:block;font-size:10.5px;color:#B7C6D6;margin-top:1px;font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ctile[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(123,216,255,.34),0 16px 38px rgba(0,0,0,.46);}
  .ctile .soon{position:absolute;top:7px;right:7px;z-index:3;font-size:8.5px;font-weight:850;
    letter-spacing:.07em;border-radius:6px;padding:3px 5px;color:#06202E;background:var(--cyan);}
  /* the "clear filter" chip that appears once a category is active */
  .filter-note{display:none;align-items:center;gap:10px;margin:0 0 13px;flex-wrap:wrap;
    border-radius:12px;padding:10px 13px;font-size:12.5px;color:var(--mut);}
  .filter-note.on{display:flex;}
  .filter-note b{color:var(--txt);}
  .filter-note button{margin-left:auto;border:1px solid var(--line);background:rgba(255,255,255,.06);
    color:var(--txt);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;cursor:pointer;min-height:34px;}
  .filter-note button:hover{background:rgba(255,255,255,.12);}

  /* ============================ how it works ============================ */
  .strip{display:grid;gap:clamp(11px,1.5vw,16px);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));}
  .step{border-radius:15px;padding:16px 15px;min-width:0;}
  .step .e{font-size:24px;margin-bottom:9px;}
  .step b{display:block;font-size:14px;font-weight:850;margin-bottom:5px;letter-spacing:-.01em;}
  .step p{font-size:12.5px;color:var(--mut);line-height:1.6;}

  /* ============================ empty state ============================ */
  .empty{display:none;border:1px dashed rgba(123,216,255,.3);border-radius:16px;
    padding:clamp(26px,5vw,44px) 20px;text-align:center;background:rgba(30,155,240,.045);}
  .empty.on{display:block;}
  .empty .e{font-size:34px;margin-bottom:11px;}
  .empty b{display:block;font-size:16px;margin-bottom:7px;}
  .empty p{font-size:13px;color:var(--mut);line-height:1.65;max-width:46ch;margin:0 auto 18px;}

  .foot{margin-top:12px;font-size:11.5px;color:var(--mut-2);line-height:1.7;
    border-top:1px solid var(--line);padding-top:18px;}
  .foot a{color:var(--mut);}
  .foot a:hover{color:var(--cyan);}

  /* ============================== responsive ==============================
     The featured stage is a DESKTOP element, and 1180px is the narrowest
     screen that can seat it: 236px of sidebar + a 16/9 player + a 300px chat.
     Below that it is not built at all — a phone would be showing the same
     business twice, once as the stage and once as the first card directly
     under it. The grid's own first card is the hero on a phone: same real
     stream, same full-width 16/9, half the scrolling. */
  @media (min-width:1180px){
    .feature{grid-template-columns:minmax(0,1fr) clamp(280px,23vw,340px);}
    .fchat-slot{display:block;}
  }
  [hidden]{display:none!important;}
  @media (max-width:1080px){
    .shell{grid-template-columns:minmax(0,1fr);}
    .burger{display:grid;}
    /* the sidebar becomes a drawer instead of vanishing — the channel list is
       the fastest way into a business, so it must stay reachable on a phone */
    /* Off-canvas drawer. `visibility` is toggled alongside the transform so a
       half-finished transition can never leave a partly-drawn, clickable panel
       hanging over the page — the panel is either fully out or fully in. */
    .side{position:fixed;top:0;left:0;bottom:0;width:min(84vw,300px);z-index:95;
      border-radius:0 18px 18px 0;padding:14px 12px;overflow-y:auto;background:#080e1a;
      visibility:hidden;transform:translateX(-100%);
      transition:transform .26s cubic-bezier(.22,1,.36,1),visibility 0s linear .26s;}
    .side.open{visibility:visible;transform:translateX(0);
      transition:transform .26s cubic-bezier(.22,1,.36,1),visibility 0s;}
    .scrim-nav{position:fixed;inset:0;z-index:90;background:rgba(3,5,11,.62);
      backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .26s;}
    .scrim-nav.on{opacity:1;pointer-events:auto;}
  }
  /* ---- the ONE-ROW phone/tablet header ----
     880px, not 760: at 768 the full bar (burger + wordmark + 380px field +
     two text buttons) is ~50px wider than the viewport and wraps to a second
     row, which is the thing this redesign exists to kill. */
  @media (max-width:880px){
    .top .ic,.top .ic:hover{border:0;background:none;box-shadow:none;border-radius:0;color:var(--txt);}
    .beta{display:none;}
    .top .sp{display:none;}
    .search{display:none;}
    #loginBtn,#joinBtn{display:none;}
    .only-mob{display:grid;}
    #searchClose{display:none;}
    .brand{margin-right:auto;}
    .brand img{width:26px;height:30px;}
    .wordmark .r1{font-size:13px;}
    .wordmark .r2{font-size:11.5px;letter-spacing:.15em;}
    /* search takes the bar over, Kick-style, instead of adding a second row */
    .top.searching .brand,
    .top.searching .burger,
    .top.searching #searchOpen,
    .top.searching #joinIcon{display:none;}
    .top.searching #searchClose{display:grid;}
    .top.searching .search{display:block;flex:1 1 auto;}
  }
  @media (max-width:700px){
    .grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(76vw,310px);gap:14px;
      overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding:2px 2px 12px;scrollbar-width:none;}
    .grid::-webkit-scrollbar{display:none;}
    .grid .card{scroll-snap-align:start;}
    .grid .meta{gap:9px;padding-top:9px;}
    .grid .tags{padding-top:6px;}
    .sec{margin-bottom:24px;}
    .thumb{border-radius:10px;box-shadow:none;}
    .fmeta .av{width:40px;height:40px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto;}
  }

/* Discovery: compact brand treatments, loading states and accessible search. */
:root{--grad:linear-gradient(112deg,#1E9BF0,#38C6F4 52%,#5AD1B4)}
.sec-head{padding-inline:3px}
.sec-head h2 .accent{color:#1E9BF0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skeleton{position:relative;overflow:hidden;background:#121925;border-radius:10px}
.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(143,174,201,.13) 50%,transparent 75%);transform:translateX(-100%);animation:shimmer 1.8s ease-in-out infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skeleton-meta{display:flex;gap:10px;padding:12px 3px}
.skeleton.circle{width:38px;height:38px;border-radius:50%;flex:none}
.skeleton-lines{display:grid;gap:8px;width:65%}
.skeleton-lines i{height:12px}.skeleton-lines i:last-child{width:72%}
.channel-skeleton{height:44px;margin:8px}.category-skeleton{height:160px;width:150px;flex:none}
.preview-skeleton,.preview-frame,.preview-idle{position:absolute;inset:0}
.preview-skeleton{z-index:2;border-radius:inherit}
.preview-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.preview-frame.loaded .preview-skeleton,.preview-frame.failed .preview-skeleton{display:none}
.preview-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(ellipse at 50% 40%,#1b2e49,#070c17 80%)}
.preview-idle.round{background:radial-gradient(ellipse at 50% 38%,#232e70,#06081d)}
.preview-idle img{width:clamp(48px,19%,90px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 18px #0006)}
.preview-idle.round img{border-radius:50%}
.preview-idle b{font-size:11px;color:#c1cfde;font-weight:500}
.thumb .preview-idle{padding:18px 8px 33px;gap:4px}
.pause-symbol{font-size:15px;line-height:1;color:#b7cadd}
.thumb .badge{z-index:3}.hero .scrim{z-index:2}
.search-launch{display:flex;align-items:center;gap:10px;flex:0 1 380px;padding:10px 14px;min-height:42px;background:#ffffff09;border:1px solid var(--line);border-radius:11px;color:var(--mut);text-align:left;cursor:pointer;font-size:13px}
.search-launch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.search-launch:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.search-dialog{width:min(560px,calc(100vw - 24px));margin:90px auto auto;padding:22px;background:#101722;color:var(--txt);border:1px solid #ffffff20;border-radius:22px;box-shadow:0 28px 100px #0009;max-height:calc(100dvh - 115px);overflow:auto}
.search-dialog[open]{animation:searchReveal .24s cubic-bezier(.2,.8,.2,1)}
.search-dialog::backdrop{background:#02050bbd;backdrop-filter:blur(12px)}
.search-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.search-dialog h2{font-size:18px;letter-spacing:-.03em}
.search-dialog-head .ic{border:0;background:transparent}
.search-form{display:flex;gap:8px}
.search-form input{min-width:0;flex:1;width:100%;font-size:16px;min-height:46px;border:1px solid #ffffff22;border-radius:12px;background:#080d16;color:var(--txt);padding:11px 14px}
.search-form input:focus{outline:2px solid var(--blue);outline-offset:2px}
.suggestions{margin-top:12px}
.search-suggestion{display:flex;align-items:center;gap:12px;padding:12px 8px;border-radius:12px}
.search-suggestion:hover,.search-suggestion:focus-visible,.search-all:hover{background:#ffffff0b}
.search-suggestion img{border-radius:50%;object-fit:contain}
.search-suggestion>span:first-child{width:32px;text-align:center}
.search-suggestion>span:nth-child(2){flex:1;min-width:0}
.search-suggestion b{font-size:14px;display:block}.search-suggestion small{font-size:12px;color:var(--mut)}
.search-all{display:block;padding:14px 8px;font-size:13px;color:var(--blue);overflow-wrap:anywhere}
@keyframes searchReveal{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.ozzie-banner{position:relative;isolation:isolate;border-radius:19px;padding:22px 26px;display:flex;align-items:center;min-height:178px;overflow:hidden;background:radial-gradient(ellipse at 85% 30%,#1e9bf020,transparent 64%),linear-gradient(120deg,#ffffff0c,#ffffff04);box-shadow:inset 0 1px 0 #ffffff16,0 10px 30px #0002}
.ozzie-banner:before{content:"";position:absolute;width:270px;height:270px;border:1px solid #7bc7fc12;border-radius:50%;right:-75px;top:-90px;z-index:-1}
.ozzie-content{flex:1;min-width:0;z-index:1}
.ozzie-eyebrow{font-size:9px;letter-spacing:.17em;font-weight:750;color:#789ab5}
.ozzie-slides{display:grid;margin:8px 0 16px}
.ozzie-slide{grid-area:1/1;opacity:0;transform:translateY(9px);pointer-events:none;visibility:hidden;transition:opacity .6s,transform .6s,visibility .6s}
.ozzie-slide.active{opacity:1;transform:none;visibility:visible}
.ozzie-slide h2{font-size:clamp(20px,2.7vw,30px);letter-spacing:-.045em;line-height:1.14;font-weight:750}
.ozzie-slide h2 span{color:#1E9BF0}
.ozzie-slide p{font-size:12px;line-height:1.5;color:#9bafc1;margin-top:8px}
.ozzie-controls{display:flex;align-items:center;gap:3px;height:20px}
.ozzie-controls button{display:grid;place-items:center;width:30px;height:28px;border:0;background:none;cursor:pointer;color:#94b4ce;border-radius:5px}
.ozzie-controls [data-slide]:after{content:"";display:block;width:6px;height:6px;border-radius:6px;background:#ffffff30;transition:width .4s,background .4s}
.ozzie-controls [aria-pressed=true]:after{width:22px;background:var(--blue)}
.ozzie-controls button:focus-visible,.ozzie-pet:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ozzie-pet{display:block;position:relative;flex:0 0 122px;width:122px;height:auto;border:0;background:none;padding:0;margin:-12px 12px -16px 24px;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent}
.pet-in{position:relative;display:block;transform-origin:50% 92%;animation:ozzieFloat 5s ease-in-out infinite}
.ozzie-pet img{width:100%;height:auto;filter:drop-shadow(0 10px 12px #0004)}
.pet-flash,.pet-ring{position:absolute;left:70.8%;top:35.2%;width:7%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0}
.pet-flash{background:radial-gradient(circle,#fff,#bcefff 30%,#1e9bf0 55%,transparent 75%)}
.pet-ring{border:2px solid #86d8ff}
.ozzie-pet.zap .pet-flash{animation:ozzieEye .95s ease-out}
.ozzie-pet.zap .pet-ring{animation:ozzieRing .95s ease-out}
.ozzie-pet.zap .pet-in{animation:ozzieBounce .7s ease}
@keyframes ozzieFloat{50%{transform:translateY(-5px) rotate(2deg)}}
@keyframes ozzieBounce{40%{transform:translateY(-8px) rotate(-5deg)}70%{transform:rotate(3deg)}}
@keyframes ozzieEye{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%,45%{opacity:1;transform:translate(-50%,-50%) scale(3.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes ozzieRing{15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(7)}}
.results-shell{max-width:1240px;margin:auto;padding:28px var(--pad) 70px}
.results-shell h1{font-size:clamp(22px,4vw,32px);letter-spacing:-.04em;margin:12px 0 8px;overflow-wrap:anywhere}
.results-shell .back{font-size:13px;color:var(--mut)}
.results-shell .results-description{color:var(--mut);font-size:13px;margin-bottom:24px}
.results-shell .grid{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));overflow:visible}
@media(max-width:1179px){#heroSec{display:none}}
@media(max-width:1080px){.top .burger{display:none!important}}
@media(max-width:880px){.search-launch{display:none}.top .brand{display:flex}.top #searchOpen{display:grid}}
@media(max-width:520px){
 .search-dialog{margin-top:72px;padding:15px;border-radius:18px}
 .search-dialog h2{font-size:16px}.search-form{gap:7px}.search-form .btn{padding-inline:12px}
 .ozzie-banner{padding:19px 17px;min-height:166px;border-radius:15px}
 .ozzie-pet{flex-basis:87px;width:87px;margin:0 -3px 0 5px}
 .ozzie-slide h2{font-size:21px;max-width:220px}
 .ozzie-slide p{font-size:11px;max-width:205px}
 .ozzie-eyebrow{font-size:8px;letter-spacing:.12em}
 .ozzie-slides{margin-bottom:11px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ozzie-pet.zap .pet-flash{opacity:1}}