/* ============================================================
   AZTAKURVA — endless feed
   Aesthetic: neon-noir. Black + cream + hot pink.
   ============================================================ */

:root {
  --bg:        #08070a;
  --bg-soft:   #131017;
  --ink:       #f6efe6;
  --ink-dim:   rgba(246, 239, 230, 0.56);
  --ink-faint: rgba(246, 239, 230, 0.30);
  --hot:       #ff2d6f;   /* hot pink - primary accent */
  --hot-deep:  #c80f50;
  --gold:      #f5c451;   /* warm gold - live / highlight */
  --line:      rgba(246, 239, 230, 0.12);
  --ad:        #14ffb0;   /* ad accent, intentionally clashing */

  --shadow:    0 18px 60px rgba(0,0,0,.6);
  --rail-gap:  22px;
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --nav-h:     58px;   /* bottom control bar height; caption/rail sit above it */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  overscroll-behavior: none;
}

body { overflow: hidden; }

::selection { background: var(--hot); color: #fff; }

/* film grain overlay over everything */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   AGE GATE
   ============================================================ */
#gate {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 80% at 50% 10%, rgba(255,45,111,.18), transparent 60%),
    var(--bg);
  text-align: center; padding: 32px;
  transition: opacity .5s ease, visibility .5s;
}
#gate.hidden { opacity: 0; visibility: hidden; }
#gate .wm { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: clamp(48px, 16vw, 120px); line-height: .86; letter-spacing: -.04em;
  text-transform: uppercase; }
#gate .wm em { color: var(--hot); font-style: normal; text-shadow: 0 0 36px rgba(255,45,111,.55); }
#gate p { color: var(--ink-dim); max-width: 30ch; margin: 18px auto 30px; font-size: 15px; line-height: 1.5; }
#gate .tagline { color: var(--gold); letter-spacing: .32em; font-size: 11px; text-transform: uppercase; margin-bottom: 26px; }
.gate-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  font: inherit; font-weight: 700; cursor: pointer; border: 0;
  padding: 15px 30px; border-radius: 999px; letter-spacing: .01em;
}
.btn-yes { background: var(--hot); color: #fff; box-shadow: 0 10px 30px rgba(255,45,111,.4); }
.btn-yes:hover { transform: translateY(-2px); background: var(--hot-deep); }
.btn-no  { background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }
.btn { transition: transform .15s ease, background .2s ease; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 36px;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), transparent);
  pointer-events: none;
}
.topbar .brand {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  font-size: 21px; letter-spacing: -.02em; text-transform: uppercase;
  pointer-events: auto;
}
.topbar .brand em { color: var(--hot); font-style: normal; }
.tabs { display: flex; gap: 18px; pointer-events: auto; }
.tab {
  font-size: 16px; font-weight: 600; color: var(--ink-faint);
  position: relative; cursor: pointer; padding-bottom: 4px; transition: color .2s;
}
.tab.active { color: var(--ink); }
.tab.active::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 22px; height: 3px;
  border-radius: 3px; background: var(--hot); transform: translateX(-50%);
  box-shadow: 0 0 12px var(--hot);
}
.live {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold); pointer-events: auto;
}
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(245,196,81,.7); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,196,81,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(245,196,81,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,196,81,0); }
}

/* ============================================================
   FEED
   ============================================================ */
#feed {
  height: 100dvh; width: 100%;
  overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
#feed::-webkit-scrollbar { display: none; }

.card {
  position: relative; height: 100dvh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; overflow: hidden;
  background: var(--bg-soft);
}

/* feed media is NEVER cropped: contain always shows the whole photo/video, and the
   blurred media-bg fills the letterbox gaps (Reels/Shorts style) */
.card .media {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* blurred fill behind contained media (Reels/Shorts style) */
.card .media-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(26px) brightness(.6) saturate(1.4);
  transform: scale(1.3);
}
/* subtle motion on the blurred backdrop only — the real photo stays full & uncropped */
.card.is-image .media-bg { animation: kenburns 18s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.3); }
  to   { transform: scale(1.42); }
}

/* darkening gradients for legibility */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.0) 30%),
    linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 20%);
}

/* tap-to-unmute hint + paused state */
.card .tap-hint {
  position: absolute; z-index: 6; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.6);
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px); opacity: 0;
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.card.paused .tap-hint { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.card .tap-hint svg { width: 38px; height: 38px; fill: #fff; margin-left: 4px; }

/* caption block bottom-left */
.caption {
  position: absolute; z-index: 5; left: 18px; right: 84px;
  bottom: calc(var(--nav-h) + 20px + var(--safe-b));
  display: flex; flex-direction: column; gap: 8px;
}
.caption .handle { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; }
.caption .handle .ava {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--hot), var(--gold)); display: grid; place-items: center;
  font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 15px; color: #0a0a0a;
  border: 2px solid rgba(255,255,255,.85);
}
.caption .handle .verified { width: 15px; height: 15px; fill: var(--hot); }
.caption .text { font-size: 15px; line-height: 1.4; color: var(--ink); text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.caption .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.caption .tag {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.1); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.caption .tag.hot { color: var(--hot); border-color: rgba(255,45,111,.5); }

/* ============================================================
   ACTION RAIL (right side)
   ============================================================ */
.rail {
  position: absolute; z-index: 6; right: 12px;
  bottom: calc(var(--nav-h) + 22px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: var(--rail-gap);
}
.act { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.act .ico {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,18,24,.5); backdrop-filter: blur(8px); border: 1px solid var(--line);
  transition: transform .18s ease, background .2s;
}
.act:active .ico { transform: scale(.86); }
.act .ico svg { width: 26px; height: 26px; fill: var(--ink); transition: fill .2s; }
.act .num { font-size: 12.5px; font-weight: 700; color: var(--ink); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.act.liked .ico { background: rgba(255,45,111,.16); border-color: rgba(255,45,111,.5); }
.act.liked .ico svg { fill: var(--hot); }
.act.liked .num { color: var(--hot); }

/* heart pop on like */
@keyframes heartpop {
  0% { transform: scale(1); } 35% { transform: scale(1.4); } 60% { transform: scale(.9); } 100% { transform: scale(1); }
}
.act.pop .ico { animation: heartpop .42s ease; }

/* big double-tap heart burst */
.burst {
  position: absolute; z-index: 7; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  fill: var(--hot); filter: drop-shadow(0 0 24px rgba(255,45,111,.7));
  pointer-events: none; animation: burst .8s ease-out forwards;
}
@keyframes burst {
  0%   { transform: scale(0) rotate(-18deg); opacity: 0; }
  25%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
  70%  { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.3) rotate(0); opacity: 0; }
}

/* sound toggle pill (video) */
.sound {
  position: absolute; z-index: 6; top: 60px; right: 14px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink);
  background: rgba(0,0,0,.42); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px 7px 9px; backdrop-filter: blur(6px); transition: border-color .2s, background .2s;
}
.sound svg { width: 16px; height: 16px; fill: var(--ink); }
.card.on .sound { border-color: rgba(255,45,111,.55); background: rgba(255,45,111,.14); color: var(--hot); }
.card.on .sound svg { fill: var(--hot); }
.card.on .sound svg path[stroke] { stroke: var(--hot); }

/* video progress bar — sits just ABOVE the bottom control bar and on top of it
   (z-index beats .bottombar's 150, which was covering the old 2px bar) */
.progress {
  position: absolute; z-index: 160; left: 0; right: 0;
  bottom: calc(var(--nav-h) + 6px + var(--safe-b)); height: 3px;
  background: rgba(255,255,255,.18); pointer-events: none;
}
.progress > i { display: block; height: 100%; width: 0; background: var(--hot); box-shadow: 0 0 6px var(--hot); }

/* media-type badge */
.kind {
  position: absolute; z-index: 6; top: calc(64px); left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px);
}
.kind svg { width: 13px; height: 13px; fill: var(--hot); }

/* ============================================================
   AD CARD
   ============================================================ */
.card.is-ad { background: radial-gradient(120% 90% at 50% 0%, #101b18, var(--bg)); }
.card.is-ad::before { display: none; }
.ad-wrap {
  position: relative; z-index: 4; width: min(86%, 360px);
  border: 1px solid rgba(20,255,176,.35); border-radius: 22px; overflow: hidden;
  background: rgba(8,12,11,.7); box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 60px rgba(20,255,176,.08);
}
.ad-flag {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ad); border-bottom: 1px solid rgba(20,255,176,.2); background: rgba(20,255,176,.05);
}
.ad-flag span:last-child { color: var(--ink-faint); letter-spacing: .06em; }
.ad-body { padding: 26px 22px 22px; text-align: center; }
.ad-body .kick { color: var(--ad); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; }
.ad-body h3 {
  font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 27px; line-height: 1.05;
  margin: 10px 0 12px; letter-spacing: -.01em;
}
.ad-body p { color: var(--ink-dim); font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
.ad-cta {
  display: inline-block; background: var(--ad); color: #04130d; font-weight: 800;
  padding: 13px 28px; border-radius: 999px; text-decoration: none; letter-spacing: .01em;
  transition: transform .15s;
}
.ad-cta:hover { transform: translateY(-2px) scale(1.02); }
.ad-zone {
  margin-top: 18px; height: 1px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.ad-note { margin-top: 12px; font-size: 10.5px; color: var(--ink-faint); }

/* ============================================================
   SCROLL HINT + BOTTOM NAV
   ============================================================ */
.scrollhint {
  position: fixed; z-index: 120; left: 50%; bottom: calc(var(--nav-h) + 28px + var(--safe-b));
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  animation: floaty 1.8s ease-in-out infinite; transition: opacity .4s;
}
.scrollhint svg { width: 22px; height: 22px; fill: var(--ink-dim); }
@keyframes floaty { 0%,100% { transform: translateX(-50%) translateY(0);} 50% { transform: translateX(-50%) translateY(7px);} }

.bottomnav {
  position: fixed; z-index: 150; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; align-items: center;
  padding: 9px 8px calc(9px + var(--safe-b));
  background: rgba(10, 9, 13, 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border-top: 1px solid rgba(246, 239, 230, 0.10);
}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  color: var(--ink-faint); font-size: 10.5px; font-weight: 600; transition: color .2s; }
.nav-item svg { width: 23px; height: 23px; fill: currentColor; }
.nav-item.active { color: var(--ink); }
.nav-plus {
  width: 46px; height: 32px; border-radius: 11px; display: grid; place-items: center;
  background: var(--hot); color: #fff; box-shadow: 0 6px 20px rgba(255,45,111,.45);
}
.nav-plus svg { width: 22px; height: 22px; fill: #fff; }

/* ============================================================
   LOADER
   ============================================================ */
.loader { display: flex; align-items: center; justify-content: center; height: 100dvh; gap: 10px;
  color: var(--ink-dim); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.loader .spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--hot);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 620px) {
  /* desktop: phone-frame the feed, club backdrop */
  body { display: grid; place-items: center;
    background:
      radial-gradient(60% 60% at 50% 0%, rgba(255,45,111,.10), transparent 70%),
      radial-gradient(50% 50% at 90% 100%, rgba(20,255,176,.06), transparent 70%),
      var(--bg);
  }
  .shell { position: relative; width: 420px; height: min(900px, 94dvh); border-radius: 38px;
    overflow: hidden; box-shadow: var(--shadow), 0 0 0 1px var(--line), 0 0 90px rgba(255,45,111,.12); }
  #feed, .card { height: 100%; }
  .topbar, .bottomnav, .scrollhint { position: absolute; }
}
@media (max-width: 619px) { .shell { width: 100%; height: 100dvh; } }

/* ============================================================
   SSR ADDITIONS (links/buttons as feed elements)
   ============================================================ */
a { color: inherit; text-decoration: none; }
.brand, .caption .text, .kind, .nav-item, .tab, .tag { text-decoration: none; }
button.act, button.share { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.caption .text { display: block; }
.topbar .brand { color: var(--ink); }
.topbar.solid { background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.2)); }

/* ============================================================
   ITEM PAGE
   ============================================================ */
.shell-item { overflow-y: auto; }
.shell-item #feed { height: auto; }
.item { min-height: 100dvh; padding: 64px 0 90px; }
.item-media { width: 100%; background: #000; display: grid; place-items: center;
  max-height: 78dvh; overflow: hidden; }
.item-media.is-image { max-height: 86dvh; }
.item-media img, .item-media video { width: 100%; height: auto; max-height: 78dvh; object-fit: contain; display: block; }
.item-media.is-image img { max-height: 86dvh; }
.item-info { padding: 20px 18px 8px; max-width: 720px; margin: 0 auto; }
.item-info h1 { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: clamp(22px, 5vw, 30px);
  line-height: 1.08; letter-spacing: -.01em; }
.item-when { color: var(--ink-faint); font-size: 13px; margin: 10px 0 14px; }
.item-cap { color: var(--ink-dim); line-height: 1.55; margin-bottom: 14px; }
.item-info .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.item-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; }
.act-pill { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 14px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink);
  padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: transform .15s, background .2s, border-color .2s; }
.act-pill svg { width: 20px; height: 20px; fill: var(--ink); }
.act-pill:active { transform: scale(.95); }
.act-pill.like.liked { background: rgba(255,45,111,.15); border-color: rgba(255,45,111,.5); color: var(--hot); }
.act-pill.like.liked svg { fill: var(--hot); }

/* comments */
.comments { max-width: 720px; margin: 28px auto 0; padding: 0 18px; }
.comments h2 { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
#commentForm { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
#commentForm input, #commentForm textarea {
  font: inherit; color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; resize: vertical; }
#commentForm input:focus, #commentForm textarea:focus { outline: none; border-color: var(--hot); }
.crow { display: flex; gap: 10px; align-items: stretch; }
.crow textarea { flex: 1; }
#commentForm button { background: var(--hot); color: #fff; border: 0; font-weight: 700; padding: 0 22px;
  border-radius: 14px; cursor: pointer; white-space: nowrap; }
#commentList { list-style: none; display: flex; flex-direction: column; gap: 16px; }
#commentList li { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.cauthor { font-weight: 700; font-size: 14px; }
.cwhen { color: var(--ink-faint); font-size: 12px; margin-left: 6px; }
#commentList p { color: var(--ink-dim); margin-top: 5px; line-height: 1.5; font-size: 14.5px; }

/* related */
.related { max-width: 720px; margin: 34px auto 0; padding: 0 18px; }
.related h2 { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rel { position: relative; aspect-ratio: 3/4; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.rel img { width: 100%; height: 100%; object-fit: cover; }
.rel-noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #1a141f, #0c0a10); }
.rel-play { position: absolute; top: 8px; right: 8px; font-size: 11px; background: rgba(0,0,0,.55); padding: 2px 7px; border-radius: 999px; }
.rel-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 7px; font-size: 11.5px; font-weight: 600;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* feed kind filter — bottom nav style (icon + label), like the first prototype */
.kind-chip { display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--ink-faint); cursor: pointer;
  pointer-events: auto; transition: color .2s, transform .15s; }
.kind-chip svg { width: 24px; height: 24px; fill: currentColor; }
.kind-chip.active { color: var(--hot); }
.kind-chip:active { transform: scale(.9); }
.topbar .tabs { gap: 14px; }
.topbar .brand { font-size: 19px; }

/* ============================================================
   SHARE SHEET
   ============================================================ */
#sharesheet { position: fixed; inset: 0; z-index: 10001; }
#sharesheet[hidden] { display: none; }
.sh-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .25s; }
#sharesheet.open .sh-backdrop { opacity: 1; }
.sh-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
  background: var(--bg-soft); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0;
  padding: 14px 18px calc(26px + var(--safe-b));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
#sharesheet.open .sh-panel { transform: translateY(0); }
.sh-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 2px auto 14px; }
.sh-panel h3 { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 18px; margin-bottom: 18px; }
.sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; }
.sh-btn { display: flex; flex-direction: column; align-items: center; gap: 7px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
  background: none; border: 0; cursor: pointer; text-decoration: none; }
.sh-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 23px; font-weight: 800; transition: transform .15s; }
.sh-btn:active .sh-ic { transform: scale(.9); }

/* ============================================================
   BOTTOM CONTROL BAR (Friss/Neked + kind filter, thumb-reach)
   ============================================================ */
.bottombar {
  position: fixed; z-index: 150; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-around;
  padding: 10px 32px calc(10px + var(--safe-b));
  background: linear-gradient(to top, rgba(8,7,10,.96) 60%, rgba(8,7,10,0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
@media (min-width: 620px) { .bottombar { position: absolute; } }