/* ==========================================================================
   POPPN — App UI clone
   A 1:1 recreation of the live iOS app's chrome, rendered at the app's own
   390x844 point grid and scaled into each phone frame. Tokens mirror
   constants/theme.ts and components/LiquidGlass.tsx.
   ========================================================================== */

:root {
  /* surfaces */
  --pui-bg: #080808;
  --pui-card: rgba(255, 255, 255, 0.06);
  --pui-card-hover: rgba(255, 255, 255, 0.12);
  --pui-border: rgba(255, 255, 255, 0.07);
  --pui-border-light: rgba(255, 255, 255, 0.15);

  /* liquid glass */
  --glass-card: rgba(10, 10, 14, 0.55);
  --glass-nav: rgba(14, 14, 16, 0.22);
  --glass-line: rgba(255, 255, 255, 0.18);
  --glass-active: rgba(255, 255, 255, 0.16);
  /* same tint as the glass cards, minus the blur pass, for surfaces that
     sit on flat dark backgrounds where the blur reads identically */
  --glass-flat: rgba(16, 16, 21, 0.62);
  --glass-blur: blur(22px) saturate(150%);

  /* text */
  --pui-text: #ffffff;
  --pui-text-2: rgba(255, 255, 255, 0.6);
  --pui-text-3: rgba(255, 255, 255, 0.4);
  --pui-text-4: rgba(255, 255, 255, 0.25);

  /* accents */
  --red: #ff3366;
  --gold: #ffb800;
  --green: #00e5a0;
  --purple: #9b5cf6;
  --orange: #ff6b35;

  /* map palette */
  --map-bg: #10161c;
  --map-water: #0c1e2c;
  --map-park: #11201e;
  --map-building: #1d2530;
  --map-road: #2a3342;
  --map-road-hi: #4e5969;
  --map-label: #4a5262;
  --map-label-hi: #8a94a4;
  --map-venue-label: #d0d6e0;
  --map-filter-text: #9aa4b6;
  --marker-fire: #ff4d1f;
  --marker-hot: #f55d25;
  --marker-warm: #eb6432;
  --marker-buzz: #d66038;
  --marker-open: #3f4654;
  --marker-closed: #2e3442;
  --marker-you: #4f95ff;
  --closed-badge: #e63950;
}

/* --- icons (Ionicons geometry, app-identical) --- */
.ic {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
  fill: currentColor;
  stroke: currentColor;
}
.ic .ionicon-fill-none { fill: none; }
.ic .ionicon-stroke-width { stroke-width: 32px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   DEVICE FRAME
   ========================================================================== */

/* --s is the point-to-pixel ratio: the app is laid out at 390x844 points and
   scaled as one unit, so every screen keeps its real proportions. */
.device {
  --s: 0.82;
  --bezel: calc(11px * var(--s));
  width: calc(390px * var(--s) + var(--bezel) * 2);
  position: relative;
  flex: none;
}

.device__frame {
  position: relative;
  padding: var(--bezel);
  border-radius: calc(66px * var(--s));
  background: linear-gradient(150deg, #3a3a40 0%, #17171a 22%, #0d0d10 50%, #202024 78%, #3a3a40 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 40px 90px -20px rgba(0, 0, 0, 0.85),
    0 0 90px -30px rgba(255, 51, 102, 0.35);
}

.device__screen {
  position: relative;
  width: calc(390px * var(--s));
  height: calc(844px * var(--s));
  overflow: hidden;
  border-radius: calc(54px * var(--s));
  background: var(--pui-bg);
  isolation: isolate;
}

/* dynamic island */
.device__island {
  position: absolute;
  top: calc(var(--bezel) + 11px * var(--s));
  left: 50%;
  transform: translateX(-50%);
  width: calc(112px * var(--s));
  height: calc(33px * var(--s));
  background: #000;
  border-radius: 999px;
  z-index: 9;
  pointer-events: none;
}

.device__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 68%, rgba(255, 255, 255, 0.05) 100%);
  z-index: 10;
}

/* the app canvas itself — always laid out at true iPhone points */
.pui {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  transform: scale(var(--s));
  transform-origin: top left;
  background: var(--pui-bg);
  color: var(--pui-text);
  font-family: 'DM Sans', sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.pui * { box-sizing: border-box; }
/* the app is always left-aligned, whatever the page section around it does */
.pui, .ui-frag { text-align: left; }
.pui img,
.ui-frag img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Cropped slices of real app UI, dropped straight into the page at app scale */
.ui-frag {
  --s: 1.05;
  --h: 240px;
  position: relative;
  width: calc(390px * var(--s));
  max-width: 100%;
  height: calc(var(--h) * var(--s));
  overflow: hidden;
  border-radius: calc(24px * var(--s));
  color: var(--pui-text);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ui-frag * { box-sizing: border-box; }
.ui-frag__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  transform: scale(var(--s));
  transform-origin: top left;
}

/* horizontal rails keep scrolling past the crop, so soften the cut */
.ui-frag--rail::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: linear-gradient(90deg, transparent, var(--pui-bg));
  pointer-events: none;
}

@media (max-width: 1100px) { .ui-frag { --s: 0.95; } }
@media (max-width: 768px) { .ui-frag { --s: 0.82; } }
@media (max-width: 430px) { .ui-frag { --s: 0.68; } }
@media (max-width: 360px) { .ui-frag { --s: 0.58; } }

/* ==========================================================================
   SHARED APP PRIMITIVES
   ========================================================================== */

/* ambient nightlife glow behind Scene / Profile / Venue */
.pui-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.pui-ambient i {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  display: block;
}
.pui-ambient .orb-red { width: 300px; height: 300px; background: rgba(255, 51, 102, 0.28); top: -90px; left: -80px; }
.pui-ambient .orb-purple { width: 260px; height: 260px; background: rgba(155, 92, 246, 0.22); top: 40px; right: -110px; }
.pui-ambient .orb-orange { width: 240px; height: 240px; background: rgba(255, 107, 53, 0.16); top: 380px; left: -90px; }
.pui-ambient .orb-gold { width: 260px; height: 260px; background: rgba(255, 184, 0, 0.12); bottom: -80px; right: -80px; }

/* iOS status bar */
.pui-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  padding: 16px 26px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 8;
  pointer-events: none;
}
.pui-status__time {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.pui-status__right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pui-status__signal {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.pui-status__signal i {
  width: 3px;
  background: #fff;
  border-radius: 1px;
  display: block;
}
.pui-status__signal i:nth-child(1) { height: 4px; }
.pui-status__signal i:nth-child(2) { height: 6px; }
.pui-status__signal i:nth-child(3) { height: 9px; }
.pui-status__signal i:nth-child(4) { height: 11px; }
.pui-status__wifi {
  width: 15px;
  height: 11px;
  background: #fff;
  -webkit-mask: radial-gradient(circle at 50% 100%, #000 22%, transparent 23%) center/100% 100% no-repeat,
    conic-gradient(from 225deg at 50% 100%, #000 0 90deg, transparent 0) center/100% 100% no-repeat;
  mask: radial-gradient(circle at 50% 100%, #000 22%, transparent 23%) center/100% 100% no-repeat,
    conic-gradient(from 225deg at 50% 100%, #000 0 90deg, transparent 0) center/100% 100% no-repeat;
}
.pui-status__battery {
  width: 24px;
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  padding: 1.5px;
  position: relative;
}
.pui-status__battery::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 3.5px;
  width: 2px;
  height: 4px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0 1px 1px 0;
}
.pui-status__battery i {
  display: block;
  height: 100%;
  width: 78%;
  background: #fff;
  border-radius: 1px;
}
.pui-status--dark .pui-status__time { color: #fff; }

/* home indicator */
.pui-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  z-index: 8;
}

/* glass surfaces */
.pui-glass {
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.pui-glass-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  position: relative;
  flex: none;
}
.pui-glass-btn--sm { width: 30px; height: 30px; font-size: 15px; }
.pui-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--red);
  border: 2px solid #0b0b0e;
}

.pui-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 3px;
  color: #fff;
}

.pui-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pui-text-3);
}

/* chips */
.pui-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--pui-text-2);
  white-space: nowrap;
}
.pui-chip .ic { font-size: 11px; }
.pui-chip--red { color: var(--red); background: rgba(255, 51, 102, 0.14); border-color: rgba(255, 51, 102, 0.35); }
.pui-chip--gold { color: var(--gold); background: rgba(255, 184, 0, 0.14); border-color: rgba(255, 184, 0, 0.35); }
.pui-chip--green { color: var(--green); background: rgba(0, 229, 160, 0.13); border-color: rgba(0, 229, 160, 0.32); }
.pui-chip--purple { color: var(--purple); background: rgba(155, 92, 246, 0.15); border-color: rgba(155, 92, 246, 0.35); }
.pui-chip--orange { color: var(--orange); background: rgba(255, 107, 53, 0.14); border-color: rgba(255, 107, 53, 0.35); }
.pui-chip--solid-red { background: var(--red); border-color: transparent; color: #fff; }

/* vibe score bar */
.pui-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  flex: 1;
}
.pui-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 10px currentColor;
}
.pui-bar i.fill-gold { background: var(--gold); }
.pui-bar i.fill-orange { background: var(--orange); }
.pui-bar i.fill-green { background: var(--green); }
.pui-bar i.fill-muted { background: rgba(255, 255, 255, 0.25); }

/* score circle used on thumbs + map preview */
.pui-score {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  background: rgba(8, 8, 10, 0.88);
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.pui-score--orange { border-color: var(--orange); color: var(--orange); }
.pui-score--red { border-color: var(--red); color: var(--red); }
.pui-score--green { border-color: var(--green); color: var(--green); }
.pui-score--purple { border-color: var(--purple); color: var(--purple); }
.pui-score--muted { border-color: rgba(255, 255, 255, 0.25); color: var(--pui-text-3); }

/* floating liquid-glass tab bar — on every main tab screen */
.pui-tabbar {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  height: 62px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
  background: var(--glass-nav);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.75);
  z-index: 7;
}
.pui-tab {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--pui-text-2);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.pui-tab:hover { color: rgba(255, 255, 255, 0.85); }
.pui-tab.is-active {
  color: #fff;
  background: var(--glass-active);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.pui-tab .ic--on { display: none; }
.pui-tab.is-active .ic--on { display: block; }
.pui-tab.is-active .ic--off { display: none; }

/* scroll body sits under the floating header and tab bar */
.pui-scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 112px 0 110px;
  z-index: 2;
}

/* ==========================================================================
   1. SCENE — day-aware venue discovery
   ========================================================================== */

.sc-header {
  position: absolute;
  top: 50px;
  left: 14px;
  right: 14px;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 6;
}
.sc-header__mark {
  flex: 1;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 0 22px rgba(255, 51, 102, 0.35);
}
.sc-city {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #fff;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.sc-city .ic { font-size: 12px; color: var(--pui-text-2); }
.sc-city--travel { color: var(--purple); border-color: rgba(155, 92, 246, 0.45); }

.sc-days {
  display: flex;
  gap: 8px;
  padding: 0 16px 14px;
  overflow: hidden;
}
.sc-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--pui-text-2);
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.sc-day__label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sc-day__num {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.sc-day__dot {
  position: absolute;
  top: 6px;
  right: 9px;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}
.sc-day.is-active {
  background: rgba(255, 51, 102, 0.2);
  border-color: rgba(255, 51, 102, 0.6);
  box-shadow: 0 0 22px rgba(255, 51, 102, 0.28);
  color: #fff;
}
.sc-day.is-active .sc-day__dot { display: none; }

.sc-events {
  padding: 0 16px 16px;
}
.sc-events__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.sc-events__kicker {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.6px;
  color: var(--gold);
}
.sc-events__kicker.is-day { color: var(--purple); }
.sc-events__count {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--pui-text-3);
}
.sc-events__row {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.sc-event {
  width: 168px;
  flex: none;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.sc-event__img { height: 76px; position: relative; }
.sc-event__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.85), transparent 70%);
}
.sc-event__body { padding: 8px 10px 10px; }
.sc-event__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.6px;
  line-height: 1.1;
}
.sc-event__meta {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: var(--pui-text-3);
  margin-top: 2px;
}

.sc-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px 14px;
}
.sc-filter {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 15px;
  letter-spacing: 1.1px;
  white-space: nowrap;
  color: var(--pui-text-3);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.sc-filter.is-active {
  color: #fff;
  background: var(--glass-active);
  border-color: rgba(255, 255, 255, 0.14);
}
.sc-toggle {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.sc-toggle span {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.8px;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--pui-text-3);
  white-space: nowrap;
}
.sc-toggle span.is-active { background: var(--glass-active); color: #fff; }

.sc-hero {
  position: relative;
  margin: 0 16px 16px;
  height: 232px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.sc-hero__img { position: absolute; inset: 0; }
.sc-hero__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 6, 8, 0.95) 8%, rgba(6, 6, 8, 0.35) 48%, rgba(6, 6, 8, 0.1) 100%);
}
.sc-hero__top {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.sc-hero__rank {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  box-shadow: 0 6px 18px -4px rgba(255, 51, 102, 0.7);
}
.sc-hero__featured {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 184, 0, 0.16);
  border: 1px solid rgba(255, 184, 0, 0.45);
  color: var(--gold);
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
}
.sc-hero__featured .ic { font-size: 11px; }
.sc-hero__body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
}
.sc-hero__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 1px;
}
.sc-hero__meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pui-text-2);
  margin-top: 3px;
}
.sc-hero__score {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.sc-hero__num {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  color: var(--gold);
  min-width: 24px;
}

.sc-list { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.sc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.sc-row__thumb {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 14px;
  overflow: visible;
  flex: none;
}
.sc-row__thumb img { border-radius: 14px; }
.sc-row__thumb .pui-score {
  position: absolute;
  right: -8px;
  bottom: -8px;
}
.sc-row__body { flex: 1; min-width: 0; }
.sc-row__name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: 0.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-row__meta {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.8px;
  color: var(--pui-text-3);
  margin-top: 1px;
}
.sc-row__chips { display: flex; gap: 5px; margin-top: 7px; }

/* ==========================================================================
   2. FOR YOU / LIVE — full-bleed vertical video
   ========================================================================== */

.fy { position: absolute; inset: 0; background: #000; overflow: hidden; }
.fy--inline {
  position: relative;
  inset: auto;
  height: 330px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.fy__media { position: absolute; inset: 0; }
.fy__media img { transform: scale(1.06); }
.fy__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 22%),
    linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 26%, transparent 55%);
}
.fy__switch {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-nav);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-line);
  z-index: 4;
}
.fy__seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--pui-text-2);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.fy__seg.is-active { background: var(--glass-active); color: #fff; }
.fy__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: puiPulse 1.8s ease-in-out infinite;
}
.fy__status {
  position: absolute;
  top: 108px;
  left: 16px;
  z-index: 4;
}
.fy__rail {
  position: absolute;
  right: 12px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 4;
}
.fy__act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fy__act-btn {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  background: rgba(10, 10, 14, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  transition: transform 0.2s ease, color 0.2s ease;
}
.fy__act.is-liked .fy__act-btn { color: var(--red); border-color: rgba(255, 51, 102, 0.5); }
.fy__act:hover .fy__act-btn { transform: scale(1.07); }
.fy__act span {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
}
.fy__meta {
  position: absolute;
  left: 16px;
  right: 76px;
  bottom: 118px;
  z-index: 4;
}
.fy__creator { display: flex; align-items: center; gap: 8px; }
.fy__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  flex: none;
}
.fy__handle { font-size: 14px; font-weight: 700; }
.fy__time { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--pui-text-2); }
.fy__caption { font-size: 13px; line-height: 1.4; margin-top: 8px; color: rgba(255, 255, 255, 0.92); }
.fy__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fy__venue {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}
.fy__venue .ic { font-size: 13px; color: var(--red); }
.fy__progress {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 44px;
  display: flex;
  gap: 3px;
  z-index: 5;
}
.fy__progress i {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.fy__progress i.is-done { background: rgba(255, 255, 255, 0.9); }
.fy__progress i.is-live { background: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, 0.25) 45%); }

/* ==========================================================================
   3. MAP — dark navy basemap + heat blobs
   ========================================================================== */

.mp { position: absolute; inset: 0; background: var(--map-bg); overflow: hidden; }
.mp--inline {
  position: relative;
  inset: auto;
  height: 300px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.mp__base { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); }
.mp__base svg { width: 100%; height: 100%; display: block; }

.mp__blob {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 3;
}
.mp__blob::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--blob, 92px);
  height: var(--blob, 92px);
  border-radius: 999px;
  background: radial-gradient(circle, var(--tier) 0%, rgba(0, 0, 0, 0) 68%);
  opacity: 0.65;
  animation: puiBlob 4.5s ease-in-out infinite;
}
.mp__blob .pui-score {
  position: relative;
  width: 30px;
  height: 30px;
  background: rgba(10, 14, 18, 0.9);
  border-color: var(--tier);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 0 18px -2px var(--tier);
}
.mp__blob-label {
  position: relative;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.8px;
  color: var(--map-venue-label);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.mp__blob--fire { --tier: var(--marker-fire); }
.mp__blob--hot { --tier: var(--marker-hot); }
.mp__blob--warm { --tier: var(--marker-warm); }
.mp__blob--buzz { --tier: var(--marker-buzz); }
.mp__blob--open { --tier: var(--marker-open); }
.mp__blob--closed { --tier: var(--marker-closed); }
.mp__blob--closed::before { opacity: 0.25; animation: none; }
.mp__closed {
  position: relative;
  font-family: 'DM Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.8px;
  color: #fff;
  background: var(--closed-badge);
  padding: 1px 5px;
  border-radius: 999px;
}

.mp__you {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--marker-you);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: 4;
}
.mp__you::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 999px;
  border: 1.5px solid rgba(79, 149, 255, 0.7);
  animation: puiPing 2.4s ease-out infinite;
}

.mp__header {
  position: absolute;
  top: 52px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
}
.mp__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
}
.mp__live b { color: var(--green); font-weight: 500; }
.mp__live em { font-style: normal; color: var(--pui-text-2); }
.mp__tools { margin-left: auto; display: flex; gap: 8px; }
.mp__filters {
  position: absolute;
  top: 96px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 7px;
  z-index: 6;
}
.mp__filter {
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--map-filter-text);
  background: var(--glass-flat);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
.mp__filter.is-active { color: #fff; background: var(--glass-active); border-color: rgba(255, 255, 255, 0.2); }

.mp__legend {
  position: absolute;
  left: 14px;
  bottom: 196px;
  padding: 9px 11px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--glass-flat);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 5;
}
.mp__legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.8px;
  color: var(--map-label-hi);
}
.mp__legend i { width: 7px; height: 7px; border-radius: 999px; display: block; }

.mp__preview {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 104px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 22px;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  z-index: 5;
}
.mp__preview-img { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; flex: none; }
.mp__preview-body { flex: 1; min-width: 0; }
.mp__preview-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; letter-spacing: 0.6px; }
.mp__preview-meta { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--pui-text-3); margin-top: 3px; }
.mp__view {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  border: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
}

/* ==========================================================================
   4. PROFILE
   ========================================================================== */

.pf__header {
  position: absolute;
  top: 52px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 6;
}
.pf__id { display: flex; align-items: center; gap: 16px; padding: 0 20px 16px; }
.pf__avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255, 51, 102, 0.8);
  box-shadow: 0 0 34px -4px rgba(255, 51, 102, 0.75);
  flex: none;
}
.pf__name { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; letter-spacing: 1px; }
.pf__handle-row { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.pf__handle { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--pui-text-3); }
.pf__rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.2px;
  background: rgba(255, 184, 0, 0.15);
  color: var(--gold);
  border: 1px solid rgba(255, 184, 0, 0.4);
}
.pf__bio { padding: 0 20px; font-size: 13px; line-height: 1.5; color: var(--pui-text-2); }
.pf__xp { padding: 12px 20px 0; }
.pf__xp-row {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.8px;
  color: var(--pui-text-3);
  margin-bottom: 5px;
}
.pf__stats {
  display: flex;
  gap: 28px;
  padding: 18px 20px 16px;
}
.pf__stat { display: flex; flex-direction: column; }
.pf__stat b { font-size: 19px; font-weight: 700; line-height: 1; }
.pf__stat span {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1px;
  color: var(--pui-text-3);
  margin-top: 4px;
  text-transform: uppercase;
}
.pf__actions { display: flex; gap: 9px; padding: 0 20px 18px; }
.pui-btn {
  flex: 1;
  height: 40px;
  border-radius: 14px;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.pui-btn--glass {
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.pui-btn--red { background: var(--red); box-shadow: 0 10px 24px -8px rgba(255, 51, 102, 0.85); }
.pui-btn--purple { background: var(--purple); box-shadow: 0 10px 24px -8px rgba(155, 92, 246, 0.85); }
.pui-btn--live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  animation: puiPulse 1.6s ease-in-out infinite;
}

.pf__tabs {
  display: flex;
  margin: 0 20px 14px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.pf__tab {
  flex: 1;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--pui-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  cursor: pointer;
}
.pf__tab.is-active { background: var(--glass-active); color: #fff; }

.pf__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 0 20px;
}
.pf__tile {
  position: relative;
  aspect-ratio: 1 / 1.28;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.pf__tile--upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px dashed rgba(255, 51, 102, 0.65);
  background: rgba(255, 51, 102, 0.07);
  color: var(--red);
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
}
.pf__tile--upload .ic { font-size: 20px; }
.pf__tile-views {
  position: absolute;
  left: 6px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.pf__tile-views .ic { font-size: 10px; }
.pf__empty {
  margin: 12px 20px 0;
  padding: 28px 16px;
  border-radius: 20px;
  text-align: center;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.pf__empty h5 { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1px; }
.pf__empty p { font-size: 12px; color: var(--pui-text-3); margin: 4px 0 14px; }

/* ==========================================================================
   5. VENUE DETAIL
   ========================================================================== */

.vn__nav {
  position: absolute;
  top: 52px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  z-index: 6;
}
.vn__id { display: flex; flex-direction: column; align-items: center; padding: 0 20px 14px; }
.vn__avatar {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  overflow: hidden;
  border: 2.5px solid var(--gold);
  box-shadow: 0 0 38px -6px rgba(255, 184, 0, 0.8);
}
.vn__name { font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1.05; letter-spacing: 1px; margin-top: 12px; }
.vn__meta { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--pui-text-3); margin-top: 2px; }
.vn__status { margin-top: 10px; }
.vn__stats {
  display: flex;
  margin: 0 20px 16px;
  padding: 14px 6px;
  border-radius: 20px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.vn__stat { flex: 1; text-align: center; }
.vn__stat b { display: block; font-family: 'DM Mono', monospace; font-size: 17px; font-weight: 500; }
.vn__stat span {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  color: var(--pui-text-3);
  margin-top: 4px;
  text-transform: uppercase;
}
.vn__actions { display: flex; gap: 9px; padding: 0 20px 16px; }
.vn__actions .pui-btn--icon { flex: none; width: 44px; }
.vn__tabs { display: flex; gap: 8px; padding: 0 20px 14px; }
.vn__tab {
  flex: 1;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--glass-line);
  background: var(--glass-flat);
  color: var(--pui-text-2);
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vn__tab.is-active { background: var(--glass-active); color: #fff; border-color: rgba(255, 255, 255, 0.26); }
.vn__section { padding: 0 20px; }
.vn__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.vn__create {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--purple);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(155, 92, 246, 0.9);
}
.vn__session {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 16px;
  margin-bottom: 9px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.vn__faces { display: flex; flex: none; }
.vn__faces span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid #0b0b0e;
  margin-left: -9px;
}
.vn__faces span:first-child { margin-left: 0; }
.vn__session-body { flex: 1; min-width: 0; }
.vn__session-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.8px; }
.vn__session-meta { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--pui-text-3); margin-top: 1px; }
.vn__moments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 12px; }
.vn__moment { aspect-ratio: 1; border-radius: 8px; overflow: hidden; }

/* ==========================================================================
   6. SECONDARY SCREENS
   ========================================================================== */

/* activity */
.ac__head { display: flex; align-items: center; gap: 10px; padding: 0 20px 14px; }
.ac__title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1.5px; }
.ac__segments {
  display: flex;
  margin: 0 20px 16px;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.ac__segment {
  flex: 1;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pui-text-2);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ac__segment.is-active { background: var(--glass-active); color: #fff; }
.ac__row { display: flex; align-items: center; gap: 11px; padding: 11px 20px; }
.ac__row + .ac__row { border-top: 1px solid var(--pui-border); }
.ac__avatar { width: 38px; height: 38px; border-radius: 999px; overflow: hidden; flex: none; }
.ac__text { flex: 1; font-size: 12.5px; line-height: 1.4; color: var(--pui-text-2); }
.ac__text b { color: #fff; font-weight: 700; }
.ac__when { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--pui-text-4); }
.ac__thumb { width: 34px; height: 44px; border-radius: 8px; overflow: hidden; flex: none; }

/* auth */
.au { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 28px; }
.au > * { flex: none; }
.au__mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 62px;
  letter-spacing: 5px;
  color: var(--red);
  text-align: center;
  line-height: 1;
  text-shadow: 0 0 44px rgba(255, 51, 102, 0.6);
}
.au__tag { text-align: center; font-size: 13px; color: var(--pui-text-2); margin-top: 8px; }
.au__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  margin-top: 34px;
  background: var(--glass-flat);
  border: 1px solid var(--glass-line);
}
.au__field .code { font-family: 'DM Mono', monospace; font-size: 13px; color: var(--pui-text-2); }
.au__field .num { font-size: 15px; font-weight: 600; letter-spacing: 0.6px; }
.au__field .caret { width: 1.5px; height: 18px; background: var(--red); animation: puiPulse 1.1s steps(1) infinite; }
.au__cta { margin-top: 14px; height: 52px; border-radius: 16px; font-size: 14px; }
.au__alt { text-align: center; margin-top: 18px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--pui-text-3); }
.au__legal { position: absolute; left: 34px; right: 34px; bottom: 40px; text-align: center; font-size: 10px; line-height: 1.5; color: var(--pui-text-4); }

/* onboarding */
.ob__steps { display: flex; gap: 4px; padding: 0 24px 22px; }
.ob__steps i { flex: 1; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.ob__steps i.is-done { background: var(--purple); }
.ob__steps i.is-now { background: #fff; }
.ob__kicker { padding: 0 24px; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 1.6px; color: var(--purple); }
.ob__title { padding: 6px 24px 4px; font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1.05; letter-spacing: 1px; }
.ob__sub { padding: 0 24px 20px; font-size: 12.5px; color: var(--pui-text-3); }
.ob__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px; }
.ob__chip {
  padding: 9px 14px;
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--pui-text-2);
}
.ob__chip.is-on { background: rgba(155, 92, 246, 0.18); border-color: rgba(155, 92, 246, 0.6); color: #fff; }
.ob__chip.is-on--red { background: rgba(255, 51, 102, 0.18); border-color: rgba(255, 51, 102, 0.6); color: #fff; }
.ob__chip.is-on--orange { background: rgba(255, 107, 53, 0.18); border-color: rgba(255, 107, 53, 0.6); color: #fff; }
.ob__foot { position: absolute; left: 24px; right: 24px; bottom: 46px; display: flex; gap: 10px; }

/* group session */
.gs__hero { position: relative; height: 210px; margin: 0 16px 16px; border-radius: 24px; overflow: hidden; }
.gs__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 6, 8, 0.9), transparent 60%); }
.gs__live {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--red);
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
}
.gs__hero-body { position: absolute; left: 14px; bottom: 12px; z-index: 2; }
.gs__hero-title { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1px; line-height: 1; }
.gs__hero-meta { font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--pui-text-2); margin-top: 3px; }
.gs__tabs { display: flex; gap: 8px; padding: 0 16px 14px; }
.gs__tab {
  flex: 1;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  background: var(--glass-flat);
  color: var(--pui-text-2);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  cursor: pointer;
}
.gs__tab.is-active { background: var(--glass-active); color: #fff; }
.gs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 16px; }
.gs__cell { aspect-ratio: 1; border-radius: 12px; overflow: hidden; position: relative; }
.gs__cell span {
  position: absolute;
  left: 6px;
  bottom: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  color: #fff;
  text-shadow: 0 1px 3px #000;
}

/* post video — flat dark form, deliberately not glass */
.pv { position: absolute; inset: 0; background: #0c0c0e; }
.pv__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 18px 16px; }
.pv__bar b { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 1.6px; }
.pv__preview {
  margin: 0 18px 16px;
  height: 190px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: #131316;
}
.pv__preview .ic {
  position: absolute;
  inset: 0;
  margin: auto;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.85);
}
.pv__label {
  padding: 0 18px 6px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  color: var(--pui-text-3);
}
.pv__input {
  margin: 0 18px 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #17171b;
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
  color: var(--pui-text-2);
}
.pv__tags { display: flex; gap: 8px; padding: 0 18px 16px; }
.pv__foot { position: absolute; left: 18px; right: 18px; bottom: 40px; display: flex; gap: 10px; }

/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes puiPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes puiBlob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: 0.85; }
}
@keyframes puiPing {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes puiKenBurns {
  0% { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.16) translate3d(-1.5%, -2%, 0); }
}

.fy.is-playing .fy__media img { animation: puiKenBurns 14s ease-in-out infinite alternate; }

/* Phones render the frames at 0.6–0.75 scale, where the blur pass costs more
   than it shows. Keep the tint, drop the filter. */
@media (max-width: 768px) {
  .pui-glass-btn,
  .pui-tabbar,
  .fy__switch,
  .fy__act-btn,
  .fy__venue,
  .mp__preview {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(12, 12, 16, 0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pui *,
  .pui *::before,
  .pui *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}