/* =================================================
   SOLSTAGE – SHARED BASE
================================================= */

#solstage-show-panel{
  max-width: 1920px;
  margin: 40px auto;
  font-family: system-ui, sans-serif;
}

.ss-panel-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ss-status{
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
}

/* Status badge only (avoid tinting the whole page) */
.ss-status.ss-live    { background:#28a745; color:#fff; }
.ss-status.ss-paused  { background:#ffc107; color:#111; }
.ss-status.ss-offline { background:#6c757d; color:#fff; }
.ss-status.ss-ended   { background:#343a40; color:#fff; }
.ss-status.ss-replay { background:#6f42c1; color:#fff; } /* purple */


.ss-controls{
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.ss-btn{
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.ss-btn.primary{ background:#0073aa; color:#fff; }
.ss-btn.danger { background:#dc3545; color:#fff; }

.ss-card{
  background: #fff;
  border: 1px solid #e5e5e5;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
}

.ss-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

/* =================================================
   FAN VIEW (general)
================================================= */

.ss-fan{
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-family: system-ui, sans-serif;
}

.ss-fan h2{ margin-bottom: 10px; }

.ss-fan.ss-offline{ opacity: 0.95; }
.ss-fan.ss-paused { opacity: 0.95; }
.ss-fan.ss-ended  { opacity: 0.85; }

/* Fan View State Visibility (CRITICAL) */
#solstage-fan-view [data-show-when]{ display:none; }

#solstage-fan-view.ss-offline [data-show-when="offline"],
#solstage-fan-view.ss-live    [data-show-when="live"],
#solstage-fan-view.ss-paused  [data-show-when="paused"],
#solstage-fan-view.ss-ended   [data-show-when="ended"],
#solstage-fan-view.ss-replay  [data-show-when="replay"]{
  display:block;
}


/* Prevent legacy “status” classes from tinting the whole container */
#solstage-fan-view.ss-live,
#solstage-fan-view.ss-paused,
#solstage-fan-view.ss-offline,
#solstage-fan-view.ss-ended{
  background: transparent !important;
  color: inherit !important;
}

/* =================================================
   STATUS INLINE (artist panel)
================================================= */

.ss-status-controls{
  flex-wrap: wrap;
  gap: 10px;
}

.ss-status-inline{
  width: 100%;
  margin-top: 6px;
  font-size: 0.85rem;
  opacity: 0.85;
}

.ss-status-inline.ss-live   { color:#d63638; font-weight: 600; }
.ss-status-inline.ss-paused { color:#cc7a00; }
.ss-status-inline.ss-offline{ color:#666; }
.ss-status-inline.ss-ended  { color:#444; }
.ss-status-inline.ss-replay { color:#6f42c1; font-weight: 700; }



/* =================================================
   AVATARS
================================================= */

.ss-avatar,
.solstage-avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 36px;
  background: #ddd;
}

/* =================================================
   TIP BUTTONS (legacy + shared)
================================================= */

.solstage-tip.disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.solstage-tip.applause.applauding{
  animation: applausePulse 0.7s ease;
}

@keyframes applausePulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
  100%{ transform: scale(1); }
}

/* =================================================
   SHOW PAGE – LAYOUT + CARDS
================================================= */

#solstage-fan-root{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 18px 0;
}

/* Border-only status card */
.solstage-show-wrap{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 18px;
  border: 3px solid #ddd;
  border-radius: 16px;
  background: transparent !important;
}

.solstage-show-wrap.ss-status-live    { border-color:#d62828; }
.solstage-show-wrap.ss-status-paused  { border-color:#f4a261; }
.solstage-show-wrap.ss-status-ended   { border-color:#6c757d; }
.solstage-show-wrap.ss-status-offline { border-color:#2a9d8f; }

/* Two-column desktop layout */
.solstage-layout{
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.solstage-video-col{
  flex: 1 1 auto;
  min-width: 0;
}

.solstage-side-col{
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solstage-card{
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  padding: 12px;
}

/* =================================================
   VIDEO – HARD FIX (prevents crop + black gaps)
   IMPORTANT: overrides inline min-height on #solstage-live-embed
================================================= */

/* Use padding ratio instead of min-height/aspect-ratio (most reliable on phones) */
.solstage-video-frame{
  position: relative;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  background: #000;

  height: 0;                 /* critical */
  padding-bottom: 56.25%;    /* 16:9 */
  min-height: 0 !important;

  line-height: 0;
  font-size: 0;
}

/* Overrides any inline style="min-height:520px" */
#solstage-live-embed{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important; /* KEY override */
}

/* Any wrapper div(s) injected by embeds */
#solstage-live-embed > *,
#solstage-live-embed > * > *{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The iframe itself */
#solstage-live-embed iframe,
#solstage-live-embed embed,
#solstage-live-embed object{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* Tip toast overlay over VIDEO */
#solstage-tip-overlay,
.solstage-tip-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 22px;
}

.solstage-tip-toast{
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 14px 22px;
  border-radius: 30px;
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 10px;
  animation: tipPop 3s ease forwards;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

@keyframes tipPop{
  0%   { opacity: 0; transform: translateY(20px) scale(0.95); }
  10%  { opacity: 1; transform: translateY(0) scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* =================================================
   TIPS + LEADERBOARD + WALLET + CHAT
================================================= */

.solstage-tip-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.solstage-tip-label{
  font-weight: 800;
  margin-right: 4px;
}

.solstage-tip-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.solstage-tip-buttons .solstage-tip{
  background: #ffcc00;
  border: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.solstage-tip-buttons .solstage-tip:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.solstage-tip-buttons .solstage-tip:active{
  transform: translateY(0);
  box-shadow: none;
}

/* Applause */
.solstage-tip-buttons .solstage-tip[data-amount="0.5"]{
  background: #00d084;
}

.solstage-tip-buttons .solstage-tip.disabled{
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.solstage-tip-custom{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#solstage-tip-custom-amount{
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

#solstage-tip-custom-btn{
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  background: #0073aa;
  color: #fff;
}

/* Leaderboard */
.solstage-leaderboard-card{
  background: #f3f6ff;
  border-color: #dbe6ff;
}

/* Fan view: show only top 5 leaderboard entries */
#solstage-fan-root #solstage-leaderboard-list > li:nth-child(n+6){
  display: none !important;
}

.ss-prize-winner{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}
.ss-winner-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,0.12);
  background:#eee;
}

/* =================================================
   LEADERBOARD – INLINE AVATARS (BIG + CIRCULAR)
================================================= */

#solstage-leaderboard h3{
  margin: 0 0 10px !important;
}

#solstage-leaderboard-list.solstage-leaderboard-avatars{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

#solstage-leaderboard-list.solstage-leaderboard-avatars li{
  margin: 0;
  padding: 0;
}

#solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 86px; /* avatar + label */
}

#solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-avatar{
  width: 75px;
  height: 75px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 18px rgba(0,0,0,0.10);
}

#solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-name{
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.1;
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Wallet */
.wallet-balance{
  font-size: 1.1em;
  margin-bottom: 12px;
}

.wallet-buttons,
.ss-wallet-buttons{
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.wallet-buttons button,
.ss-wallet-buttons button,
#solstage-wallet-add,
#ss-wallet-add-btn{
  flex: 1;
  background: #00d084;
  border: none;
  padding: 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

#solstage-wallet-custom,
#ss-wallet-custom{
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

#solstage-wallet-status,
#ss-wallet-status{
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.85;
}

/* Chat */
.solstage-chat-messages{
  height: 320px;
  overflow: auto;
  padding: 10px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid #eee;
}

.solstage-chat-compose{
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#solstage-chat-input{
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

#solstage-chat-send{
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 800;
  background: #0073aa;
  color: #fff;
}

/* ===============================
   CHAT STYLING: LEADERBOARD + TIP TIERS
================================ */

/* base (you already have per-type backgrounds; this layers on top) */
.solstage-chat-line {
  position: relative;
}

/* ✅ Leaderboard position change = gold border */
.solstage-chat-line.solstage-chat-leaderboard {
  border: 2px solid #d4af37 !important; /* gold */
  box-shadow: 0 6px 14px rgba(212, 175, 55, 0.18);
}

/* Show meta */
.solstage-show-meta{ margin-top: 16px; }
.solstage-show-meta-head{ display:flex; align-items:center; gap:12px; }
.solstage-show-thumb{ width:64px; height:64px; border-radius:12px; object-fit:cover; border:1px solid #eee; }
.solstage-show-desc{ margin-top: 10px; opacity: 0.85; }

/* ===============================
   CHAT TIP TIERS (FORCED)
   Uses data-tip-tier set by solstage-wallet.js
   + Emoji badges (CSS-only) — NOW AT END
   =============================== */

/* Base / fallback if tier missing */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip{
  background: #fff !important;
  border: 1px solid #eee !important;
  position: relative;                 /* needed for ::after badge */
  padding-right: 34px !important;     /* room for emoji badge at end */
  padding-left: 10px !important;      /* normal left padding */
}

/* Base: make room for emoji AFTER content */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip{
  position: relative;
  padding-right: 70px !important; /* enough space for ⚡⚡ and 💥🏆💥 etc */
}

#solstage-chat-messages .solstage-chat-line.solstage-chat-tip::after{
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.95;
  pointer-events: none;
  content: "💛"; /* default if tier missing */
}

/* $0-$0.50 */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="applause"]{
  background: rgba(110, 189, 68, 0.2) !important;
  border: 1px solid rgba(46, 204, 113, 0.5) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="applause"]::after{
  content: "👏";
}

/* $0.51-$9.99 (your current “green”) */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="green"]{
  background: rgba(247, 236, 35, 0.5) !important;
  border: 1px solid rgba(250, 194, 27, 0.5) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="green"]::after{
  content: "💛";
}

/* $5-$9.99 (your current “dollar”) */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="dollar"]{
  background: rgba(247, 236, 35, 0.8) !important;
  border: 1px solid rgba(250, 194, 27, 0.9) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="dollar"]::after{
  content: "☀️";
}

/* $10-$24.99 */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="yellow"]{
  background: rgba(244, 210, 40, 0.8) !important;
  border: 1px solid rgba(250, 194, 27, 0.7) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="yellow"]::after{
  content: "🌟";
}

/* $25-$49.99 */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="richyellow"]{
  background: rgba(241, 179, 38, 0.8) !important;
  border: 1px solid rgba(250, 194, 27, 0.9) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="richyellow"]::after{
  content: "⚡⚡";
}

/* $50-$99.99 */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="gold"]{
  background: rgba(236, 122, 39, 0.8) !important;
  border: 1px solid rgba(231, 76, 60, 0.7) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="gold"]::after{
  content: "💥🏆💥";
}

/* $100+ */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="fire"]{
  background: rgba(231, 53, 38, 0.8) !important;
  border: 1px solid rgba(231, 76, 60, 0.90) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="fire"]::after{
  content: "🔥💎💎🔥";
}

/* $300+ */
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="redhot"]{
  background: rgba(192, 36, 38, 0.8) !important;
  border: 1px solid rgba(71, 13, 15, 0.90) !important;
}
#solstage-chat-messages .solstage-chat-line.solstage-chat-tip[data-tip-tier="redhot"]::after{
  content: "🚨🔥👑🔥🚨";
}

/* ===============================
   ARTIST MESSAGES (FORCED)
   Make artist chat lines light blue.
   Requires your JS to mark artist lines:
   - class: solstage-chat-artist
   OR
   - data-role="artist"
   Pick whichever you already (or want to) set.
   =============================== */

/* Option A: class-based */
#solstage-chat-messages .solstage-chat-line.solstage-chat-artist{
  background: rgba(0, 115, 170, 0.12) !important;
  border: 1px solid rgba(0, 115, 170, 0.4) !important;
}

/* Option B: data attribute-based */
#solstage-chat-messages .solstage-chat-line[data-role="artist"]{
  background: rgba(0, 115, 170, 0.20) !important;
  border: 1px solid rgba(0, 115, 170, 0.4) !important;
}

/* =================================================
   RESPONSIVE
   Desktop: taller chat
   Mobile: Tip -> Chat -> Leaderboard -> Wallet
================================================= */

/* Desktop chat height */
@media (min-width: 981px){
  .solstage-chat-messages{ height: 450px; }
}
@media (min-width: 1300px){
  .solstage-chat-messages{ height: 530px; }
}

/* Mobile layout fixes */
@media (max-width: 980px){

  /* Stack overall */
  .solstage-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;

    /* ✅ Bring the colored border back on mobile (since .solstage-video-col becomes display:contents) */
    border: 3px solid #ddd !important;
    border-radius: 16px !important;
    padding: 14px !important;

    /* ✅ Reduce spacing between stacked cards */
    gap: 8px !important;

    align-items: stretch !important;
  }

  /* ✅ Mobile border color based on current status (modern browsers) */
  .solstage-layout:has(.solstage-video-col.ss-status-live)    { border-color:#d62828 !important; }
  .solstage-layout:has(.solstage-video-col.ss-status-paused)  { border-color:#f4a261 !important; }
  .solstage-layout:has(.solstage-video-col.ss-status-ended)   { border-color:#6c757d !important; }
  .solstage-layout:has(.solstage-video-col.ss-status-offline) { border-color:#2a9d8f !important; }

  /* Flatten the two columns into the grid flow */
  .solstage-video-col{ display: contents !important; }
  .solstage-side-col{ display: contents !important; }

  /* Flatten the under-row wrapper (it has inline display:flex) */
  .solstage-under-row{
    display: contents !important;
    margin-top: 0 !important;
  }

  /* Make cards full width on mobile (override inline flex/min-width) */
  .solstage-under-row > .solstage-card,
  #solstage-leaderboard.solstage-card,
  #solstage-chat-box.solstage-card,
  #solstage-wallet-box.solstage-card{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    margin: 0 !important;
  }

  /* ✅ Kill the inline margin-top:12px on wallet card */
  #solstage-wallet-box{
    margin-top: 0 !important;
  }

  /* ✅ Put whichever status message is visible at the very top on mobile */
  .solstage-status-block{
    grid-row: 1 !important;
    margin: 0 !important;
  }

  .solstage-status-block h2{ margin: 0 0 6px !important; }
  .solstage-status-block p{ margin: 0 !important; }

  .solstage-video-frame{ grid-row: 2 !important; }

  .solstage-under-row > .solstage-card:not(#solstage-leaderboard){
    grid-row: 3 !important;
  }

  #solstage-chat-box{ grid-row: 4 !important; }
  #solstage-leaderboard{ grid-row: 5 !important; }
  #solstage-wallet-box{ grid-row: 6 !important; }

  .solstage-chat-messages{
    height: 300px !important;
  }
}

/* Extra-small phones */
@media (max-width: 480px){
  .solstage-chat-messages{ height: 300px; }

  .solstage-tip-buttons .solstage-tip{
    padding: 9px 12px;
    font-size: 0.92rem;
  }
}

/* =================================================
   ARTIST PANEL: Tips leaderboard list w/ small avatars
   (uses show-views lightbox trigger: .ss-open-fan-lightbox[data-user-id])
================================================= */

#ss-leaderboard-totals{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

#ss-leaderboard-totals .ss-lb-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
}

#ss-leaderboard-totals .ss-lb-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#ss-leaderboard-totals .ss-lb-avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 28px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #eee;
}

#ss-leaderboard-totals .ss-lb-name{
  font-weight: 900;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: inherit;
  text-decoration: none;
}

#ss-leaderboard-totals .ss-lb-amt{
  font-weight: 900;
  white-space: nowrap;
}

/* Make it obvious it’s clickable (same trigger class as show-views) */
#ss-leaderboard-totals .ss-open-fan-lightbox{
  cursor: pointer;
}
#ss-leaderboard-totals .ss-open-fan-lightbox:hover{
  text-decoration: underline;
}



/* =================================================
   ARTIST PANEL: Leaderboard list scroll (top ~5)
================================================= */
#solstage-show-panel #ss-leaderboard-totals{
  /* keep it tidy */
  margin: 0;
  padding-left: 18px; /* preserve <ol> numbering indent */
  
  /* scroll box */
  max-height: 220px;          /* tweak: 200–260 usually feels right */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* optional: slightly tighter row spacing so 5 fit nicer */
#solstage-show-panel #ss-leaderboard-totals li{
  margin-bottom: 6px;
}

/* optional: make the scrollbar not look chunky on WebKit */
#solstage-show-panel #ss-leaderboard-totals::-webkit-scrollbar{
  width: 10px;
}
#solstage-show-panel #ss-leaderboard-totals::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  background-color: rgba(0,0,0,0.25);
}


/* clickable usernames (lightbox triggers) */
.ss-req-idlink.ss-open-fan-lightbox{
  color:#0073aa;              /* WP link blue */
  font-weight:800;
}
.ss-req-idlink.ss-open-fan-lightbox:hover{
  text-decoration: underline;
}



/* =================================================
   WALLET PRESET BUTTON "ACTIVE" HIGHLIGHT (FINAL)
================================================= */

#solstage-wallet-box .wallet-buttons button.active,
#solstage-wallet-box .ss-wallet-buttons button.active,
#solstage-wallet-box .wallet-buttons button.active:hover,
#solstage-wallet-box .ss-wallet-buttons button.active:hover{
  background: #e74c3c !important;
  color: #fff !important;
  border: 1px solid #e74c3c !important;
  opacity: 1 !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18) !important;
  transform: translateY(-1px);
}

#solstage-wallet-box .wallet-buttons button,
#solstage-wallet-box .ss-wallet-buttons button{
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}



/* ==============================
   ARTIST STREAM PREVIEW (FAN-STYLE)
   ============================== */

#solstage-show-panel #ss-stream-preview{
  margin-top: 15px;
}

/* reuse your existing .solstage-video-frame rules; just ensure it shows */
#solstage-show-panel .ss-artist-video-frame{
  /* nothing required here; class is just a hook */
}

/* Artist mount behaves like fan mount */
#ss-live-embed{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#ss-live-embed iframe,
#ss-live-embed embed,
#ss-live-embed object{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}


/* =================================================
   SolStage Ticket Purchase Window (Centered Card)
================================================= */

.solstage-ticket-page {
  min-height: 100vh;
  background: #3a3a3a;              /* darker grey */
  padding: 40px 18px;
  box-sizing: border-box;
}

.solstage-ticket-card {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

.solstage-ticket-card h2,
.solstage-ticket-card h3 {
  margin: 0 0 10px;
}

.solstage-ticket-card .solstage-ticket-controls {
  display: grid;
  gap: 10px;
  justify-items: center;            /* centers inputs/buttons */
  text-align: center;
  margin: 10px 0 16px;
}

.solstage-ticket-card input[type="number"],
.solstage-ticket-card input[type="email"],
.solstage-ticket-card input[type="text"] {
  width: 100%;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

.solstage-ticket-card button,
.solstage-ticket-card .button {
  width: 100%;
  max-width: 340px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
}

/* Requested tickets list */
.solstage-ticket-requests {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #eee;
}

.solstage-ticket-requests ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.solstage-ticket-requests li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7f7f7;
  border: 1px solid #eee;
}

.solstage-ticket-requests .ss-req-left {
  min-width: 0;
}

.solstage-ticket-requests .ss-req-name {
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
}

.solstage-ticket-requests .ss-req-meta {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: 0.75;
}

.solstage-ticket-requests .ss-req-btn {
  white-space: nowrap;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
}


/* =========================================================
   SOLSTAGE SHOW PANEL – GRID AREAS (single source of truth)
   Requires: data-ss-area="..." on each major section wrapper
========================================================= */

/* Panel width + grid */
#solstage-show-panel.ss-panel{
  width: min(1500px, 98vw);
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px;
  align-items: stretch;

  grid-template-areas:
      "header   header"
      "details  ticketing"
      "details  stream"
      "status   chat"
      "extend   chat"
      "timers   chat"
      "tips     chat"
      "requests guests"
      "prizes   prizes"
      "danger   danger";
}

/* =========================================================
   ARTIST PANEL: grid overrides (kills old margin stacking)
========================================================= */

/* Grid controls spacing; remove per-card margin inside panel */
#solstage-show-panel.ss-panel .ss-card{
  margin-bottom: 0 !important;
}

/* Status control bar: remove the big 20px vertical margin inside panel */
#solstage-show-panel.ss-panel .ss-controls{
  margin: 0 !important;
}

/* Optional: slightly tighter padding for ALL cards inside panel */
#solstage-show-panel.ss-panel .ss-card{
  padding: 12px !important;       /* was 15px */
  border-radius: 12px !important;
}

/* Allow children to shrink (prevents chat/content forcing row heights) */
#solstage-show-panel.ss-panel > *{
  min-width: 0;
  min-height: 0;
}

/* Header full width */
#solstage-show-panel .ss-panel-header{
  grid-area: header;
}

/* Area mapping (driven by your new attributes) */
#solstage-show-panel [data-ss-area="details"]  { grid-area: details; }
#solstage-show-panel [data-ss-area="ticketing"]{ grid-area: ticketing; }
#solstage-show-panel [data-ss-area="stream"]   { grid-area: stream; }
#solstage-show-panel [data-ss-area="status"]   { grid-area: status; }
#solstage-show-panel [data-ss-area="timers"]   { grid-area: timers; }
#solstage-show-panel [data-ss-area="extend"]   { grid-area: extend; }
#solstage-show-panel [data-ss-area="tips"]     { grid-area: tips; }
#solstage-show-panel [data-ss-area="chat"]     { grid-area: chat; }
#solstage-show-panel [data-ss-area="requests"] { grid-area: requests; }
#solstage-show-panel [data-ss-area="guests"]   { grid-area: guests; }
#solstage-show-panel [data-ss-area="prizes"]   { grid-area: prizes; }
#solstage-show-panel [data-ss-area="danger"]   { grid-area: danger; }

/* Chat: Make the message list fill the card and scroll */
#solstage-show-panel [data-ss-area="chat"]{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#solstage-show-panel [data-ss-area="chat"] #solstage-chat-messages{
  flex: 1 1 auto;
  min-height: 0;
  height: 0 !important;
  overflow: auto !important;
}

#solstage-show-panel [data-ss-area="chat"] .solstage-chat-compose{
  flex: 0 0 auto;
}

/* Mobile: single column, same order as areas list */
@media (max-width: 980px){
  #solstage-show-panel.ss-panel{
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "details"
      "ticketing"
      "stream"
      "status"
      "timers"
      "extend"
      "tips"
      "chat"
      "requests"
      "guests"
      "prizes"
      "danger";
  }

  #solstage-show-panel [data-ss-area="chat"]{
    height: auto;
  }

  #solstage-show-panel [data-ss-area="chat"] #solstage-chat-messages{
    height: 280px !important;
  }
}

/* Mobile landscape (short): keep 2-column grid */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){
  #solstage-show-panel.ss-panel{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
    grid-template-areas:
      "header   header"
      "details  ticketing"
      "details  stream"
      "status   chat"
      "timers   chat"
      "extend   chat"
      "requests chat"
      "tips     guests"
      "prizes   prizes"
      "danger   danger";
  }
  
  /* Slightly tighter cards on artist panel (global) */
    #solstage-show-panel.ss-panel .ss-card{
      padding: 12px;          /* was 15px (base) */
      border-radius: 12px;    /* keep soft */
      margin-bottom: 0;       /* IMPORTANT: grid gap handles spacing */
    }

  #solstage-show-panel [data-ss-area="chat"]{
    height: auto !important;
    min-height: 0 !important;
  }

  #solstage-show-panel [data-ss-area="chat"] #solstage-chat-messages{
    height: clamp(180px, 45vh, 320px) !important;
  }

  #solstage-show-panel .ss-card{
    padding: 12px !important;
  }
}

/* Middle section: tighter padding */
#solstage-show-panel [data-ss-area="status"],
#solstage-show-panel [data-ss-area="timers"],
#solstage-show-panel [data-ss-area="extend"],
#solstage-show-panel [data-ss-area="requests"]{
  padding: 10px !important;
}

/* Big timer numbers */
#solstage-show-panel #ss-show-timers-card .ss-grid span{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.00;
  display: inline-block;
  margin-top: 0px;
}

/* Optional: tighten labels above timers */
#solstage-show-panel #ss-show-timers-card .ss-grid strong{
  font-size: 13px;
  opacity: 0.75;
  letter-spacing: 0.4px;
}

/*=========================================================
Ticket callouts in chat
=========================================================*/
.solstage-chat-line.solstage-chat-ticket {
  border: 1px solid rgba(0,115,170,0.18) !important;
  background: rgba(0,115,170,0.06) !important;
}

.ss-chat-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.06);
  vertical-align:middle;
}

.ss-chat-badge-ticket_request{
  border-color: rgba(0,115,170,0.25);
  background: rgba(0,115,170,0.10);
}

.ss-chat-badge-ticket_purchase{
  border-color: rgba(46, 204, 113, 0.25);
  background: rgba(46, 204, 113, 0.10);
}

.ss-chat-badge-ticket_gift{
  border-color: rgba(155, 89, 182, 0.25);
  background: rgba(155, 89, 182, 0.10);
}

.ss-chat-badge-ticket_unlocked{
  border-color: rgba(241, 196, 15, 0.30);
  background: rgba(241, 196, 15, 0.12);
}

/* =================================================
   MOBILE (portrait + landscape):
   Top show header card layout:
   - Photo left
   - Artist + Title stacked to the right of photo
   - Description full width below
   - Time/pills full width below that
================================================= */
@media (max-width: 980px){

  .ss-show-header .ss-show-header-row{
    display: grid !important;
    grid-template-columns: 72px 1fr;
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }

  /* Photo: left column, spans the artist+title rows */
  .ss-show-header .ss-show-photo{
    grid-column: 1;
    grid-row: 1 / span 2; /* covers rows 1 and 2 */
    width: 72px;
    height: 72px;
    flex: none !important;
  }

  /* Let meta children participate as direct grid items */
  .ss-show-header .ss-show-meta{
    display: contents !important;
  }

  /* Artist: right of photo (row 1) */
  .ss-show-header .ss-show-artist{
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    line-height: 1.15 !important;
    min-width: 0;
  }

  /* Title: right of photo (row 2) */
  .ss-show-header .ss-show-title{
    grid-column: 2;
    grid-row: 2;
    margin: 0 !important;
    line-height: 1.1 !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Description: full width (row 3) */
  .ss-show-header .ss-show-desc{
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0 !important;
  }

  /* Time/pills: full width (row 4) */
  .ss-show-header .ss-show-timebox{
    grid-column: 1 / -1;
    grid-row: 4;
    margin: 0 !important;
  }
}



/* =================================================
   MOBILE LANDSCAPE OVERRIDES
   - Applies only when phone is rotated sideways
   - Keeps things readable on short viewports
================================================= */

/* ---------- FAN VIEW: landscape = 2 columns again ---------- */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* Bring back side-by-side layout */
  .solstage-layout{
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    padding: 12px !important;
    align-items: flex-start !important;
  }

  /* Left column (video/tips) */
  .solstage-video-col{
    flex: 1 1 60% !important;
    display: block !important;     /* undo mobile display:contents */
    min-width: 0 !important;
  }

  /* Right column (chat) */
  .solstage-side-col{
    flex: 0 0 40% !important;
    display: flex !important;      /* undo mobile display:contents */
    min-width: 0 !important;
  }

  /* Undo “flatten wrappers into grid flow” rules from portrait */
  .solstage-under-row{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  /* Keep chat usable but not gigantic */
  .solstage-chat-messages{
    height: clamp(170px, 40vh, 400px) !important;
  }

  /* Reduce some vertical padding to save height */
  .solstage-show-wrap{
    padding: 12px !important;
  }

  /* Optional: slightly smaller header so video sits higher */
  .ss-show-header{
    padding: 10px !important;
    margin-bottom: 10px !important;
  }
  .ss-show-title{
    font-size: 18px !important;
  }
}


/* ---------- ARTIST PANEL: landscape = keep 2-column grid ---------- */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* Keep the 1/3 + 2/3 layout (instead of collapsing to 1 col) */
  #solstage-show-panel.ss-panel{
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
  }
  
  

  /* Make chat scroll nicely within the available height */
  #solstage-show-panel #ss-artist-chat{
    height: auto !important;
    min-height: 0 !important;
  }

  #solstage-show-panel #ss-artist-chat #solstage-chat-messages{
    height: clamp(180px, 45vh, 320px) !important;
  }

  /* Tighten card padding a bit for short screens */
  #solstage-show-panel .ss-card{
    padding: 12px !important;
  }
}

/* =================================================
   MOBILE LANDSCAPE FIXES
   - Remove double border (layout + show-wrap)
   - Full-bleed width (break out of Divi container)
================================================= */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* Full-bleed the entire SolStage area (Divi container breakout) */
  #solstage-fan-root,
  #solstage-show-panel{
    width: 100vw !important;
    max-width: 100vw !important;

    /* breakout trick */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep ONLY the colored border (on show-wrap), remove any border/padding added on layout */
  .solstage-layout{
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* Tighten the colored border container so it fits landscape nicely */
  .solstage-show-wrap{
    margin: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  /* Optional: reduce some vertical spacing so video + chat fit better */
  .ss-show-header{
    margin: 0 0 10px !important;
  }
}

@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* Make the chat list taller in landscape */
  .solstage-chat-messages{
    height: 85vh !important;      /* main knob */
    max-height: 85vh !important;
  }

  /* If you want the whole chat card to stretch nicely too */
  #solstage-chat-box.solstage-card{
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  #solstage-chat-box .solstage-chat-compose{
    flex: 0 0 auto;
  }

  #solstage-chat-box .solstage-chat-messages{
    flex: 1 1 auto;
    min-height: 0;
  }
}

/* =================================================
   FAN LANDSCAPE: leaderboard under chat (JS moved)
================================================= */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* When leaderboard is moved out, make the tip card take full width in under-row */
  .solstage-under-row > .solstage-card{
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Leaderboard now lives in the right column under chat */
  .solstage-side-col #solstage-leaderboard{
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-top: 10px !important;
  }

  /* Optional: keep right column spacing consistent */
  .solstage-side-col{
    gap: 12px !important;
  }
}
/* =================================================
   LANDSCAPE: remove chat header + maximize inner chat area
================================================= */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* Hide the "💬 Live Chat" title row */
  #solstage-chat-box > div:first-child{
    display: none !important;
  }

  /* Tighten the card padding a bit (optional but helps) */
  #solstage-chat-box.solstage-card{
    padding-top: 10px !important;
  }
}


/* =================================================
   FAN PORTRAIT MOBILE – MORE VIDEO WITHOUT CHANGING 16:9
   Goal: reduce vertical padding/margins so the iframe occupies more of the viewport
   (aspect ratio stays 16:9)
================================================= */
@media (max-width: 980px) and (orientation: portrait){

  /* Tighten outer wrapper padding */
  #solstage-fan-root{
    padding: 10px 0 !important; /* was 18px 0 */
  }

  /* Tighten the big bordered show container */
  .solstage-show-wrap{
    padding: 10px !important;   /* was 18px */
    border-width: 2px !important;
    border-radius: 14px !important;
  }

  /* Reduce card padding + radius a touch (more space for video) */
  .solstage-card{
    padding: 10px !important;   /* was 12px */
    border-radius: 12px !important; /* was 14px */
  }

  /* Reduce spacing between stacked cards */
  .solstage-layout{
    gap: 6px !important;        /* was 8px on mobile */
    padding: 10px !important;   /* was 14px */
  }

  /* Reduce inline margin above the under-row area (was set inline in PHP) */
  .solstage-under-row{
    margin-top: 8px !important; /* was 12px */
    gap: 10px !important;
  }

  /* Reduce margin above wallet / other cards (inline styles exist on some) */
  #solstage-wallet-box,
  #solstage-leaderboard,
  #solstage-chat-box{
    margin-top: 0 !important;
  }

  /* Tighten the show header (the big bio/title block above everything) */
  .ss-show-header{
    padding: 10px !important;       /* was 12px */
    margin-bottom: 8px !important;  /* was 12px */
    border-radius: 12px !important; /* was 14px */
  }
  .ss-show-header-row{
    gap: 10px !important;
  }
  .ss-show-title{
    font-size: 18px !important;     /* was 22px desktop; already smaller on mobile, hard-set */
    margin-bottom: 4px !important;
  }
  .ss-show-desc{
    margin-bottom: 8px !important;
  }
  .ss-show-timebox{
    gap: 8px !important;
  }
  .ss-pill,
  .ss-countdown{
    padding: 7px 10px !important;   /* slightly tighter pills */
  }

  /* Keep 16:9 video ratio EXACTLY as-is — just tighten its chrome */
  .solstage-video-frame{
    border-radius: 12px !important; /* was 14px */
    border-width: 1px !important;
    /* NOTE: no padding-bottom change */
  }

  /* Tip card + controls tighten */
  .solstage-tip-row{ gap: 8px !important; }
  .solstage-tip-buttons{ gap: 6px !important; }
  .solstage-tip-buttons .solstage-tip{
    padding: 8px 10px !important;
    font-size: 0.88rem !important;
  }
  .solstage-tip-custom{ margin-top: 8px !important; }

  /* Chat: taller in portrait */
  @media (max-width: 980px) and (orientation: portrait){
  #solstage-chat-box .solstage-chat-messages{
    height: min(350px, 38vh) !important; /* tweak 300px / 38vh */
  }
}

  /* Leaderboard avatars smaller */
  #solstage-leaderboard-list.solstage-leaderboard-avatars{
    gap: 10px !important;
  }
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-item{
    width: 70px !important;
    gap: 6px !important;
  }
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-avatar{
    width: 56px !important;
    height: 56px !important;
  }
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-name{
    max-width: 70px !important;
    font-size: 0.78rem !important;
  }

  /* Wallet balance moved to bottom (within wallet card) */
  #solstage-wallet-box.solstage-card{
    display: flex !important;
    flex-direction: column !important;
  }
  #solstage-wallet-box .wallet-balance{
    order: 99 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
  }
}

/* =================================================
   FAN PORTRAIT MOBILE – LEADERBOARD AVATARS: FORCE CIRCLES + TIGHTER GRID
================================================= */
@media (max-width: 980px) and (orientation: portrait){

  /* tighter overall spacing in the avatar grid */
  #solstage-leaderboard-list.solstage-leaderboard-avatars{
    gap: 4px !important;              /* was 10–12 */
    align-items: flex-start !important;
  }

  /* smaller tiles so they pack tighter */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-item{
    width: 62px !important;           /* was 70 */
    gap: 5px !important;
  }

  /* ✅ FORCE PERFECT CIRCLE no matter what the parent does */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-avatar{
    width: 50px !important;
    height: 50px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    display: block !important;
    flex: 0 0 50px !important;        /* prevents stretch in flex layouts */
    max-width: 50px !important;
    max-height: 50px !important;
  }

  /* name label tighter */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-name{
    max-width: 58px !important;
    font-size: 0.76rem !important;
  }
}

/* =================================================
   FAN MOBILE LANDSCAPE – smaller leaderboard avatars + tighter spacing
================================================= */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px){

  /* tighten the avatar grid */
  #solstage-leaderboard-list.solstage-leaderboard-avatars{
    gap: 4px !important;
  }

  /* slightly smaller tiles */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-item{
    width: 70px !important;   /* was 86 */
    gap: 4px !important;
  }

  /* smaller circle avatars */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-avatar{
    width: 60px !important;   /* was 75 */
    height: 60px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 999px !important;
    object-fit: cover !important;
    flex: 0 0 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  /* slightly smaller labels */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-name{
    max-width: 70px !important;
    font-size: 0.78rem !important;
  }
}





/* =================================================
   PORTRAIT MOBILE: leaderboard tighter so avatars fit one row
================================================= */
@media (max-width: 980px) and (orientation: portrait){

  /* 1) Less padding INSIDE the leaderboard card only */
  #solstage-leaderboard.solstage-card{
    padding: 8px !important;           /* was 10 */
  }
  #solstage-leaderboard h3{
    margin-bottom: 6px !important;     /* was 10 */
    font-size: 0.95rem !important;
  }

  /* 2) Tighten the avatar grid */
  #solstage-leaderboard-list.solstage-leaderboard-avatars{
    gap: 3px !important;               /* was 4 */
    justify-content: space-between !important; /* helps pack a single row */
  }

  /* 3) Make each tile narrower */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-item{
    width: 56px !important;            /* was 62 */
    gap: 4px !important;
  }

  /* 4) Slightly smaller circles */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-avatar{
    width: 44px !important;            /* was 50 */
    height: 44px !important;
    flex: 0 0 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }

  /* 5) Names: HARD clamp so they NEVER affect layout */
  #solstage-leaderboard-list.solstage-leaderboard-avatars .ss-lb-name{
    max-width: 56px !important;
    font-size: 0.70rem !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }
}



/* =================================================
   FAN PORTRAIT MOBILE – FINAL ORDER (single source of truth)
   Order:
   1) Show info (#ss-show-header)
   2) Show status (.solstage-status-block)
   3) Leaderboard (#solstage-leaderboard)
   4) Tip card (.solstage-under-row first card)
   5) Watch window (.solstage-video-frame)
   6) Chat (#solstage-chat-box)
   7) Prizes (#solstage-top-supporter-prizes-wrap)
   8) Ticket requests (#ss-ticket-requests-card / .ss-ticket-requests-card)
   9) Gift ticket (#ss-fan-gift-card)
   10) Wallet (#solstage-wallet-box)
================================================= */
@media (max-width: 980px) and (orientation: portrait){

  /* Make sure we're in stacked grid mode */
  .solstage-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 6px !important; /* keep your tighter spacing */
  }

  /* Flatten columns/wrappers into the grid flow */
  .solstage-video-col{ display: contents !important; }
  .solstage-side-col{ display: contents !important; }
  .solstage-under-row{ display: contents !important; }

  /* Ensure all major blocks behave as grid items */
  #ss-show-header,
  .solstage-status-block,
  #solstage-leaderboard,
  .solstage-under-row > .solstage-card,
  .solstage-video-frame,
  #solstage-chat-box,
  #solstage-top-supporter-prizes-wrap,
  #ss-ticket-requests-card,
  .ss-ticket-requests-card,
  #ss-fan-gift-card,
  #solstage-wallet-box{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 1) Show info */
  #ss-show-header{ grid-row: 1 !important; }

  /* 2) Show status (only the visible one is display:block already) */
  .solstage-status-block{ grid-row: 2 !important; }

  /* 3) Leaderboard */
  #solstage-leaderboard{ grid-row: 3 !important; }

  /* 4) Tip card (this targets the tip card in under-row) */
  .solstage-under-row > .solstage-card:not(#solstage-leaderboard){
    grid-row: 4 !important;
  }

  /* 5) Watch window */
  .solstage-video-frame{ grid-row: 5 !important; }

  /* 6) Chat */
  #solstage-chat-box{ grid-row: 6 !important; }

  /* 7) Prizes */
  #solstage-top-supporter-prizes-wrap{ grid-row: 7 !important; }

  /* 8) Ticket requests (logged in + logged out variants) */
  #ss-ticket-requests-card,
  .ss-ticket-requests-card{ grid-row: 8 !important; }

  /* 9) Gift ticket */
  #ss-fan-gift-card{
    grid-row: 9 !important;
    margin-top: 0 !important; /* kills inline margin-top:12px */
  }

  /* 10) Wallet */
  #solstage-wallet-box{ grid-row: 10 !important; }
}

/* =================================================
   FAN PORTRAIT MOBILE – FIXED ORDER
   show status -> leaderboard -> tip -> watch window -> chat ... etc
   (requires flattening .solstage-show-wrap)
================================================= */
@media (max-width: 980px) and (orientation: portrait){

  /* 1) Use layout border (since show-wrap becomes display:contents) */
  .solstage-layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;

    border: 2px solid #ddd !important;
    border-radius: 14px !important;
    padding: 10px !important;
    gap: 6px !important;
    align-items: stretch !important;
  }

  /* status color border (works because layout now owns the border) */
  #solstage-fan-view.ss-status-live  .solstage-layout{ border-color:#d62828 !important; }
  #solstage-fan-view.ss-status-paused .solstage-layout{ border-color:#f4a261 !important; }
  #solstage-fan-view.ss-status-ended  .solstage-layout{ border-color:#6c757d !important; }
  #solstage-fan-view.ss-status-offline .solstage-layout{ border-color:#2a9d8f !important; }

  /* 2) Flatten the wrappers so children become grid items of .solstage-layout */
  .solstage-video-col{ display: contents !important; }
  .solstage-side-col{ display: contents !important; }

  /* KEY FIX: flatten the bordered show-wrap */
  .solstage-show-wrap{
    display: contents !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Flatten under-row so tip + leaderboard become grid items */
  .solstage-under-row{
    display: contents !important;
    margin: 0 !important;
  }

  /* Normalize widths/margins */
  #ss-show-header,
  .solstage-status-block,
  #solstage-leaderboard,
  .solstage-under-row > .solstage-card,
  .solstage-video-frame,
  #solstage-chat-box,
  #solstage-top-supporter-prizes-wrap,
  #ss-ticket-requests-card,
  .ss-ticket-requests-card,
  #ss-fan-gift-card,
  #solstage-wallet-box{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* -------- ORDER YOU CARE ABOUT -------- */

  /* Show status */
  .solstage-status-block{ grid-row: 2 !important; }

  /* Leaderboard */
  #solstage-leaderboard{ grid-row: 3 !important; }

  /* Tip card = FIRST card inside under-row */
  .solstage-under-row > .solstage-card:first-child{
    grid-row: 4 !important;
  }

  /* Watch window */
  .solstage-video-frame{ grid-row: 5 !important; }

  /* Chat */
  #solstage-chat-box{ grid-row: 6 !important; }

  /* Prizes */
  #solstage-top-supporter-prizes-wrap{ grid-row: 7 !important; }

  /* Ticket requests */
  #ss-ticket-requests-card,
  .ss-ticket-requests-card{ grid-row: 8 !important; }

  /* Gift ticket */
  #ss-fan-gift-card{
    grid-row: 9 !important;
    margin-top: 0 !important;
  }

  /* Wallet */
  #solstage-wallet-box{ grid-row: 10 !important; }
}

/* =================================================
   FAN PORTRAIT MOBILE: Chat input at TOP (under heading)
================================================= */
@media (max-width: 980px) and (orientation: portrait){

  /* make chat card a flex column */
  #solstage-chat-box.solstage-card{
    display: flex !important;
    flex-direction: column !important;
  }

  /* heading stays first (your "💬 Live Chat" div is first-child already) */
  #solstage-chat-box > div:first-child{
    order: 1 !important;
  }

  /* move compose (input + send) to the top */
  #solstage-chat-box .solstage-chat-compose{
    order: 2 !important;
    margin-top: 8px !important;   /* tighter than desktop */
    margin-bottom: 10px !important;
  }

  /* messages list goes below input and fills remaining space */
  #solstage-chat-box .solstage-chat-messages{
    order: 3 !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  /* status + countdown at bottom */
  #solstage-chat-status,
  #ss-chat-end-countdown{
    order: 4 !important;
  }
}

/* =================================================
   LOGIN BUTTON - SHOW-VIEWS
================================================= */
.ss-authbar{
  margin: 0 0 10px;
  display:flex;
  justify-content:inline;
}
.ss-authbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  font-weight:900;
  text-decoration:none;
  background:#111;
  color:#fff;
  border:1px solid rgba(0,0,0,0.20);
  box-shadow:0 10px 25px rgba(0,0,0,0.10);
}
.ss-authbtn:hover{ filter:brightness(1.05); }
.ss-authbtn:active{ transform:translateY(1px); }
@media (max-width:640px){
  .ss-authbar{ justify-content:center; }
  .ss-authbtn{ width:100%; }
}