/* ══════════════════════════════════════════════════════════
   HERO v18.4 — Prefixed .r90v18-hero, fullwidth, mascots at edges
   Class prefix: r90v18-hero (avoids v17 critical.min.css conflicts)
   Desktop: robot|───glass panel 3-col───|dolphin
   Mobile: stacked, robot beside card, dolphin beside CTAs
   ══════════════════════════════════════════════════════════ */

/* Hero: fullwidth background, no max-width */
.r90v18-hero {
  background: var(--r90-gradient-hero,
    radial-gradient(circle at 20% 20%, rgba(255,100,200,.15), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(100,150,255,.15), transparent 50%),
    linear-gradient(135deg, rgba(30,10,50,.96), rgba(10,5,30,.99)));
  color: #fff;
  padding: 1rem 0;
  width: 100%;
}

/* Stage: fullwidth, relative for mascot positioning */
.r90v18-hero__stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Desktop mascots: hidden on mobile, shown flanking at screen edges */
.r90v18-hero__mascot { display: none; }

/* Mobile mascots: small, inline */
.r90v18-hero__mob-mascot-left  { width: 48px; height: auto; flex-shrink: 0; opacity: 0.5; align-self: center; }
.r90v18-hero__mob-mascot-right { width: 44px; height: auto; flex-shrink: 0; opacity: 0.45; align-self: center; }

/* Panel: centered glass card */
.r90v18-hero__panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

/* Grid: stacked mobile */
.r90v18-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Show Card (Col 1) ── */
.r90v18-hero__left { display: flex; gap: .6rem; align-items: flex-start; }
.r90v18-hero__card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: row; gap: .6rem;
  padding: .75rem; border-radius: 14px;
  background: var(--r90-bg-card, rgba(4,0,18,.96));
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.r90v18-hero__cover-frame {
  width: 64px; flex-shrink: 0; border-radius: 10px; padding: 2px;
  background: linear-gradient(135deg, #35d9ff, #ff6ba5, #ffd34a);
}
.r90v18-hero__cover {
  width: 100%; padding-bottom: 100%; border-radius: 8px;
  background-size: cover; background-position: center;
}
.r90v18-hero__card-meta { min-width: 0; }
.r90v18-hero__show-name {
  font-size: .85rem; font-weight: 600; margin: 0;
  color: var(--r90-highlight, #ffd96b);
  font-family: 'Playfair Display', serif;
}
.r90v18-hero__show-hours { font-size: .7rem; margin: .1rem 0 0; color: var(--r90-highlight-warm, #ffd34a); }
.r90v18-hero__show-desc {
  font-size: .65rem; margin: .25rem 0 0; color: rgba(255,255,255,.45);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Center Column ── */
.r90v18-hero__center { display: flex; flex-direction: column; gap: .6rem; }
.r90v18-hero__kicker { display: flex; align-items: center; gap: .35rem; font-size: .65rem; color: rgba(255,255,255,.5); }
.r90v18-hero__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; animation: r90-pulse 2s ease-in-out infinite; }
@keyframes r90-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.r90v18-hero__title {
  font-size: 1.5rem; font-weight: 700; margin: 0;
  font-family: 'Playfair Display', serif;
  background: linear-gradient(135deg, #fff, #e0c3fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.r90v18-hero__title span { color: #ffd34a; -webkit-text-fill-color: #ffd34a; }

/* Identity */
.r90v18-hero__identity {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem; background: rgba(255,255,255,.04);
  border-radius: 8px; border: 1px solid rgba(255,255,255,.05);
}
.r90v18-hero__id-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(109,92,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .9em; flex-shrink: 0; overflow: hidden;
}
.r90v18-hero__id-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.r90v18-hero__id-info { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; font-size: .7rem; }
.r90v18-hero__id-name { font-weight: 600; }
.r90v18-hero__id-level { font-size: .6rem; background: rgba(255,255,255,.12); padding: 1px 5px; border-radius: 3px; }
.r90v18-hero__id-karma { font-size: .6rem; color: rgba(255,255,255,.5); }
.r90v18-hero__id-rank  { font-size: .6rem; color: rgba(255,255,255,.35); }

/* Stats + NP + Pulse + CTA */
.r90v18-hero__stats { display: flex; gap: .35rem; }
.r90v18-hero__stat { flex: 1; text-align: center; padding: .4rem .25rem; background: rgba(255,255,255,.04); border-radius: 7px; }
.r90v18-hero__stat-val { display: block; font-size: .95rem; font-weight: 600; }
.r90v18-hero__stat-lbl { display: block; font-size: .5rem; color: rgba(255,255,255,.35); margin-top: 1px; }

.r90v18-hero__np {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .5rem; background: rgba(255,255,255,.03);
  border-radius: 7px; border: 1px solid rgba(255,255,255,.04);
}
.r90v18-hero__np-art { width: 34px; height: 34px; flex-shrink: 0; border-radius: 4px; background-size: cover; background-position: center; background-color: rgba(255,255,255,.04); }
.r90v18-hero__np-meta { flex: 1; min-width: 0; }
.r90v18-hero__np-label { display: block; font-size: .45rem; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .5px; }
.r90v18-hero__np-artist { display: block; font-size: .7rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r90v18-hero__np-title  { display: block; font-size: .6rem; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r90v18-hero__np-vote { display: flex; gap: 2px; flex-shrink: 0; }
.r90v18-hero__np-btn { background: none; border: none; cursor: pointer; padding: 2px 4px; font-size: .8rem; border-radius: 4px; opacity: .35; transition: opacity .15s, background .15s; }
.r90v18-hero__np-btn:hover { opacity: 1; background: rgba(255,255,255,.07); }
.r90v18-hero__np-btn.is-active { opacity: 1; }

/* Pulse */
.r90v18-hero__pulse { padding: .5rem 0 0; border-top: 1px solid rgba(255,255,255,.04); }
.r90v18-hero__pulse-hdr { display: flex; align-items: center; justify-content: space-between; font-size: .55rem; color: rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .7px; margin-bottom: .3rem; }
.r90v18-hero__pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: #8b5cf6; animation: r90-pulse 2s ease-in-out infinite; }
.r90v18-hero__pulse-list { display: flex; flex-direction: column; gap: 3px; max-height: 140px; overflow-y: auto; overflow-x: hidden; }
.r90v18-hero__pulse-list img { max-width: 32px !important; max-height: 32px !important; object-fit: cover; border-radius: 4px; }
.r90v18-hero__pulse-list .r90h-vote-item, .r90v18-hero__pulse-list .r90h-social-item { font-size: .65rem !important; padding: 4px 6px !important; background: rgba(255,255,255,.02); border-radius: 5px; }
.r90v18-hero__pulse-list .r90h-vote-cover { width: 28px !important; height: 28px !important; flex-shrink: 0; overflow: hidden; }
.r90v18-hero__pulse-list .r90h-vote-cover img { width: 100% !important; height: 100% !important; }
.r90v18-hero__pulse-item { display: flex; align-items: center; gap: 5px; padding: 4px 6px; background: rgba(255,255,255,.02); border-radius: 5px; font-size: .65rem; color: rgba(255,255,255,.55); }
.r90v18-hero__pulse-skel { height: 24px; border-radius: 5px; background: rgba(255,255,255,.02); animation: r90-shimmer 1.5s ease-in-out infinite; }
@keyframes r90-shimmer { 0%,100%{opacity:.4} 50%{opacity:.1} }

/* CTA Row — mobile: stacked + dolphin */
.r90v18-hero__cta-row { display: flex; gap: .5rem; align-items: flex-end; margin-top: .5rem; }
.r90v18-hero__cta { flex: 1; }
.r90v18-hero__cta-guest, .r90v18-hero__cta-user { display: flex; flex-direction: column; gap: .35rem; }
.r90v18-hero__btn {
  display: flex; align-items: center; justify-content: center;
  padding: .5rem .4rem; border-radius: 7px;
  font-size: .72rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7); transition: all .15s ease; min-height: 38px;
}
.r90v18-hero__btn:hover { background: rgba(255,255,255,.09); color: #fff; }
.r90v18-hero__btn--accent { background: var(--r90-gradient-cta, linear-gradient(135deg, #ff6ad5, #ff8f6a)); border: none; color: #fff; }
.r90v18-hero__btn--accent:hover { opacity: .9; }

/* ══════════════════════════════════════════════════════════
   DESKTOP — fullwidth hero, mascots at screen edges
   ══════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .r90v18-hero { padding: 1.5rem 0; }

  /* Hide mobile mascots */
  .r90v18-hero__mob-mascot-left, .r90v18-hero__mob-mascot-right { display: none; }

  /* Show desktop mascots — absolute at hero section edges */
  .r90v18-hero__mascot {
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
  }
  .r90v18-hero__mascot img {
    display: block; height: auto;
    filter: drop-shadow(0 0 20px rgba(139,92,246,.12));
  }
  .r90v18-hero__mascot--left  { left: 0; }
  .r90v18-hero__mascot--left img  { width: 110px; opacity: 0.35; }
  .r90v18-hero__mascot--right { right: 0; }
  .r90v18-hero__mascot--right img { width: 95px; opacity: 0.3; transform: scaleX(-1); }

  /* Panel: centered glass card, with glow border */
  .r90v18-hero__panel {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem;
    border-radius: 18px;
    border: 1px solid rgba(139,92,246,.12);
    box-shadow:
      0 0 40px rgba(139,92,246,.06),
      0 0 80px rgba(31,180,255,.03),
      inset 0 1px 0 rgba(255,255,255,.05);
    background: rgba(10,5,25,.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* 3-col grid */
  .r90v18-hero__grid {
    display: grid;
    grid-template-columns: 240px 1fr 220px;
    gap: 1.25rem;
    align-items: start;
  }
  .r90v18-hero__left { display: block; }
  .r90v18-hero__card { flex-direction: column; gap: .5rem; }
  .r90v18-hero__cover-frame { width: 100%; }
  .r90v18-hero__show-name { font-size: 1.1rem; }
  .r90v18-hero__title { font-size: 2.2rem; }
  .r90v18-hero__stat-val { font-size: 1.2rem; }
  .r90v18-hero__np-artist { font-size: .85rem; }
  .r90v18-hero__id-info { font-size: .8rem; }
  .r90v18-hero__pulse { border-top: none; padding-top: 0; }
  .r90v18-hero__pulse-list { max-height: 300px; }

  /* CTA: horizontal */
  .r90v18-hero__cta-guest, .r90v18-hero__cta-user { flex-direction: row; gap: .4rem; }
  .r90v18-hero__btn { flex: 1; }
}

/* Wider screens: bigger mascots, wider panel */
@media (min-width: 1100px) {
  .r90v18-hero__panel { max-width: 1060px; padding: 1.75rem 2rem; }
  .r90v18-hero__grid { grid-template-columns: 260px 1fr 240px; gap: 1.5rem; }
  .r90v18-hero__mascot--left img  { width: 140px; }
  .r90v18-hero__mascot--right img { width: 120px; }
  .r90v18-hero__title { font-size: 2.5rem; }
  .r90v18-hero__stat-val { font-size: 1.3rem; }
}

@media (min-width: 1400px) {
  .r90v18-hero__panel { max-width: 1120px; }
  .r90v18-hero__grid { grid-template-columns: 280px 1fr 250px; }
  .r90v18-hero__mascot--left img  { width: 180px; opacity: 0.4; }
  .r90v18-hero__mascot--right img { width: 155px; opacity: 0.35; }
}