/* ============================================================================
   SONGSWAV BILLBOARD — SHARED STYLESHEET
   ----------------------------------------------------------------------------
   Palette lifted from the OwnSpot inspiration reference:
     --ink     #0a0a0b   near-black background
     --panel   #141416   raised surface
     --line    #2a2a30   hairline borders
     --paper   #f5f5f2   off-white (used sparingly, for light callouts)
     --accent  #ffe81a   the billboard yellow
     --accent-dim #8f8413
     --good    #57d98a   verified / success
     --danger  #ff6161   errors
     --fog     #a2a2ac   muted text
   ========================================================================== */

:root{
  --ink:#0a0a0b; --panel:#141416; --panel-2:#1b1b1f; --line:#2a2a30;
  --paper:#f5f5f2; --accent:#FD751B; --accent-dim:#A44C12;
  --good:#57d98a; --danger:#ff6161; --fog:#a2a2ac; --white:#ffffff;
  --radius:14px; --radius-sm:9px;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* A single-column leaderboard reads best at a moderate content width —
     matched to the OwnSpot reference rather than stretching full-width on
     large desktop monitors, which was the direct cause of oversized cards
     and artwork on bigger screens. */
  /* The outer .wrap needs to be wide enough to hold the two-column desktop
     layout (main content + a 340px sticky sidebar) without either side
     feeling squeezed. Individual elements (artwork, board rows) are capped
     with their own fixed sizes regardless of this width, which is what
     actually prevents oversized cards — not a narrow page. */
  --maxw:1180px;
  --sidebar-w:340px;
}
input,
textarea,
select {
    font-size: 16px !important;
}
@media (max-width: 768px) {

    html,

    body {

        scrollbar-width: none;

        -ms-overflow-style: none;

    }

    html::-webkit-scrollbar,

    body::-webkit-scrollbar {

        display: none;

    }

}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--paper); font-family:var(--font-sans);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------------------
   TWO-COLUMN DESKTOP LAYOUT (homepage)
   ----------------------------------------------------------------------------
   Matches the reference site's actual structure: main content + a sticky
   sidebar at desktop widths, rather than a single centered column at every
   viewport size. Below the breakpoint this collapses to one column in
   document order (Live Board, then How It Works, then Quick Bid, then
   Latest Moves) — a genuinely different mobile layout, not the desktop
   grid just squeezed narrower.
   --------------------------------------------------------------------------- */
.bb-layout{display:block}
.bb-main{max-width:800px}
.bb-sidebar{margin-top:32px}

@media (min-width: 1024px){
  .bb-layout{
    display:grid;
    grid-template-columns: 1fr var(--sidebar-w);
    gap:28px;
    align-items:start;
  }
  .bb-main{max-width:none}
  .bb-sidebar{margin-top:0;position:sticky;top:84px}
}

.mono{font-family:var(--font-mono)}
.accent{color:var(--accent)}
.fog{color:var(--fog)}
.good{color:var(--good)}
.danger{color:var(--danger)}
.hidden{display:none !important}

/* ---------------------------------------------------------------- header */
.bb-header{
  position:sticky;top:0;z-index:40;
  background:rgba(10,10,11,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.bb-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.bb-header-left{display:flex;align-items:center;gap:14px}
.bb-back-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  color:var(--paper);text-decoration:none;font-size:18px;line-height:1;
  border:1px solid var(--line);flex-shrink:0;
  transition:border-color .12s ease, color .12s ease;
}
.bb-back-btn:hover{border-color:var(--accent);color:var(--accent)}
.bb-logo{
  font-weight:900;letter-spacing:.06em;font-size:20px;text-decoration:none;
  color:var(--accent);
}
.bb-cta{
  background:var(--accent);color:var(--ink);font-weight:800;
  border:none;padding:10px 18px;border-radius:999px;font-size:14px;
  letter-spacing:.02em;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .12s ease, box-shadow .12s ease;
}
.bb-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,232,26,.25)}
.bb-cta:active{transform:translateY(0)}
.bb-cta.secondary{background:transparent;color:var(--paper);border:1px solid var(--line)}
.bb-cta.block{display:block;width:100%;text-align:center}
.bb-cta[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.bb-cta.danger-cta{background:var(--danger);color:#2a0000}

/* ---------------------------------------------------------------- hero */
.bb-hero{padding:56px 0 28px;text-align:center}
.bb-hero h1{
  font-size:clamp(28px,5vw,46px);font-weight:900;line-height:1.15;margin:0 0 14px;
  letter-spacing:-.01em;
}
.bb-hero p{color:var(--fog);font-size:17px;max-width:640px;margin:0 auto}
.bb-hero .live-line{margin-top:18px;font-size:15px}
.bb-hero .live-line .amt{color:var(--accent);font-weight:800}

/* ---------------------------------------------------------------- stat boxes */
.bb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:34px 0}
.bb-stat{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 16px;text-align:center;
}
.bb-stat .num{font-family:var(--font-mono);font-size:clamp(20px,4vw,28px);font-weight:700;color:var(--accent)}
.bb-stat p{margin:6px 0 0;color:var(--fog);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ---------------------------------------------------------------- cards */
.bb-card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin:20px 0;
}
.bb-card h2{margin:0 0 6px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}
.bb-card h3{margin:0 0 10px;font-size:26px;font-weight:800}
.bb-card p.lead{color:var(--fog);margin:0 0 18px;font-size:15px}

.bb-quote-box{
  background:var(--panel-2);border:1px dashed var(--accent-dim);border-radius:var(--radius-sm);
  padding:12px 16px;margin-bottom:18px;font-size:14px;color:var(--paper);
}
.bb-quote-box b{color:var(--accent);font-family:var(--font-mono)}
.bb-quote-hint{color:var(--fog);font-size:12px;margin-top:6px}

/* ---------------------------------------------------------------- form controls */
.bb-field{margin-bottom:16px}
.bb-field label{display:block;font-size:13px;color:var(--fog);margin-bottom:6px}
.bb-input, .bb-textarea{
  width:100%;background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--paper);padding:13px 14px;font-size:15px;font-family:inherit;
}
.bb-input:focus, .bb-textarea:focus{outline:none;border-color:var(--accent)}
.bb-input.error{border-color:var(--danger)}
.bb-error-text{color:var(--danger);font-size:13px;margin-top:6px;display:none}
.bb-error-text.show{display:block}
.bb-hint{color:var(--fog);font-size:12px;margin-top:6px}
.bb-hint a{color:var(--accent);text-decoration:underline}

.bb-checkbox-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--fog)}
.bb-checkbox-row input{margin-top:3px}
.bb-checkbox-row a{color:var(--accent);text-decoration:underline}

/* Currency-prefixed amount inputs, matching the reference's "₹ [amount]"
   field treatment rather than a bare number box. */
.bb-amount-input{position:relative}
.bb-amount-input::before{
  content:"₹";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--fog);font-family:var(--font-mono);font-weight:700;pointer-events:none;
}
.bb-amount-input input{padding-left:30px}

/* ---------------------------------------------------------------- preview card */
.bb-preview{
  display:flex;gap:14px;align-items:center;background:var(--panel-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;margin-top:14px;
}
.bb-preview img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--line);flex-shrink:0}
.bb-preview .meta{flex:1;min-width:0}
.bb-preview .track-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-preview .artist-name{color:var(--fog);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-preview .verified{color:var(--good);font-size:12px;font-weight:700;margin-top:2px}

/* ---------------------------------------------------------------- amount cards */
.bb-amount-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.bb-amount-card{
  background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 8px;text-align:center;cursor:pointer;transition:border-color .12s ease;
}
.bb-amount-card:hover{border-color:var(--accent-dim)}
.bb-amount-card.selected{border-color:var(--accent);background:rgba(255,232,26,.06)}
.bb-amount-card .amt{font-family:var(--font-mono);font-weight:800;font-size:17px}
.bb-amount-card .lbl{font-size:11px;color:var(--fog);margin-top:2px}

/* ---------------------------------------------------------------- confirm summary */
.bb-summary-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.bb-summary-row:last-child{border-bottom:none}
.bb-summary-row .v{font-family:var(--font-mono);font-weight:700}
.bb-summary-row.total .v{color:var(--accent);font-size:18px}

/* ---------------------------------------------------------------------------
   LIVE BOARD — rows 2-10.
   Desktop: a wide grid (rank | fixed-size art | info | amount+take column)
   giving every row the same info density as the reference (title, artist,
   listen link, one-line description, founding/click badge, and a clearly
   labelled take-amount) without any element scaling past a sane fixed size.
   Mobile: the same content re-flows into a stacked card — a deliberately
   different layout, not just a squeezed version of the desktop grid.
   --------------------------------------------------------------------------- */
.bb-board-row{
  display:grid;
  grid-template-columns: 32px 56px 1fr auto;
  align-items:start;
  gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  margin-bottom:10px;
  background:var(--panel-2);
}
.bb-rank-num{font-family:var(--font-mono);font-weight:900;font-size:18px;color:var(--fog);text-align:center;padding-top:4px}
.bb-board-row img{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--line)}
.bb-board-row .info{min-width:0}
.bb-board-row .info .t{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-board-row .info .a{color:var(--fog);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px}
.bb-listen-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white);color:#111;
  font-size:12px;font-weight:800;letter-spacing:.02em;
  padding:8px 14px;border-radius:999px;text-decoration:none;
  margin-bottom:6px;border:1px solid var(--white);
  transition:transform .1s ease, box-shadow .1s ease;
}
.bb-listen-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,255,255,.18)}
.bb-listen-btn svg{width:14px;height:14px;flex-shrink:0}
.row-about{color:#c9c9c6;font-size:12.5px;line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.founding-line{font-size:11px;letter-spacing:.02em}

.amount-col{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.bb-board-row .amount{font-family:var(--font-mono);font-weight:800;font-size:16px;white-space:nowrap}
.take-link{font-size:12px;padding:8px 12px;white-space:nowrap}

/* ---------------------------------------------------------------------------
   #1 CARD
   --------------------------------------------------------------------------- */
.bb-firstplace{padding:20px}
.bb-firstplace-badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent);
  background:rgba(255,232,26,.1);border:1px solid var(--accent-dim);border-radius:999px;
  padding:4px 12px;margin-bottom:16px;
}
.bb-firstplace-top{display:flex;gap:16px;margin-bottom:18px}
.bb-firstplace .art{
  width:96px;height:96px;flex-shrink:0;border-radius:var(--radius-sm);
  object-fit:cover;background:var(--line);
}
.bb-firstplace-meta{min-width:0;flex:1}
.bb-firstplace .name{font-size:19px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-firstplace .artist{color:var(--fog);font-size:14px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-firstplace .about{color:#c9c9c6;font-size:13px;line-height:1.4;margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-firstplace .founding-line{color:var(--fog);margin-top:4px}
.bb-firstplace .total-amt{font-family:var(--font-mono);font-weight:900;font-size:clamp(28px,6vw,38px);color:var(--accent);margin:4px 0 0}
.bb-firstplace .total-lbl{color:var(--fog);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.bb-challenge{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.bb-challenge h4{margin:0 0 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog)}
.bb-challenge-row{display:flex;justify-content:space-between;gap:16px}

/* ---------------------------------------------------------------- moves feed */
.bb-move{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.bb-move:last-child{border-bottom:none}
.bb-move .who{color:var(--paper)}
.bb-move .who b{color:var(--accent)}
.bb-move .when{color:var(--fog);white-space:nowrap}

/* ---------------------------------------------------------------- how it works */
.bb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bb-step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.bb-step .n{
  display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;background:var(--accent);color:var(--ink);font-weight:900;font-size:14px;margin-bottom:10px;
}
.bb-step p{margin:0;font-size:14px;color:var(--paper)}

/* ---------------------------------------------------------------- footer */
.bb-footer{border-top:1px solid var(--line);padding:32px 0 40px;margin-top:50px}
.bb-footer p.disclaimer{color:var(--fog);font-size:13px;max-width:560px}
.bb-footer .links{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0;font-size:13px}
.bb-footer .links a{text-decoration:none;color:var(--paper);letter-spacing:.03em}
.bb-footer .links a:hover{color:var(--accent)}
.bb-footer .copy{color:var(--fog);font-size:12px}

/* ---------------------------------------------------------------- misc */
.bb-expand-link{display:block;text-align:center;padding:14px;color:var(--fog);text-decoration:underline;cursor:pointer;font-size:14px}
.bb-badge-live{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--good);font-weight:700;
}
.bb-badge-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block;animation:pulse 1.6s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}

.bb-spinner{
  width:16px;height:16px;border:2px solid rgba(10,10,11,.3);border-top-color:var(--ink);
  border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px;margin-right:6px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.bb-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line);color:var(--paper);
  padding:12px 20px;border-radius:999px;font-size:14px;z-index:100;box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.bb-legal h1{font-size:28px;margin-bottom:6px}
.bb-legal .updated{color:var(--fog);font-size:13px;margin-bottom:28px}
.bb-legal h2{font-size:18px;margin-top:28px}
.bb-legal p, .bb-legal li{color:#d8d8d5;font-size:15px;line-height:1.7}
.bb-legal ul{padding-left:20px}

.bb-result{text-align:center;padding:40px 20px}
.bb-result .icon{font-size:48px;margin-bottom:8px}
.bb-result h2{font-size:24px;margin:0 0 8px}
.bb-result p{color:var(--fog);margin:0 0 24px}

@media (max-width: 640px){
  /* One unified box holding all three stats side by side (left / middle /
     right) instead of three separate cards stacked vertically. Text sizes
     drop and truncate gracefully so all three fit on one line even for
     larger numbers. */
  .bb-stats{
    display:flex;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    padding:14px 4px;margin:24px 0;gap:0;
  }
  .bb-stat{
    background:none;border:none;border-radius:0;padding:0 6px;
    flex:1;min-width:0;
  }
  .bb-stat:not(:last-child){border-right:1px solid var(--line)}
  .bb-stat .num{
    font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
  }
  .bb-stat p{
    font-size:9px;letter-spacing:.02em;margin-top:4px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  .bb-steps{grid-template-columns:1fr}
  .bb-amount-grid{grid-template-columns:repeat(2,1fr)}

  /* Mobile board row: a genuinely different (stacked) layout rather than
     the desktop grid's columns squeezed narrower — rank+art+title share
     the top line, description/badge follow full-width, and the
     amount+take control becomes a full-width row at the bottom so it's
     an easy thumb target. */
  .bb-board-row{
    grid-template-columns: 28px 48px 1fr;
    grid-template-areas:
      "rank art info"
      "amt  amt  amt";
    row-gap:12px;
  }
  .bb-rank-num{grid-area:rank}
  .bb-board-row > img{grid-area:art;width:48px;height:48px}
  .bb-board-row .info{grid-area:info}
  .amount-col{
    grid-area:amt;flex-direction:row;align-items:center;justify-content:space-between;
    width:100%;padding-top:10px;border-top:1px solid var(--line);
  }
  .take-link{flex-shrink:0}

  /* #1 card: stack art above meta instead of side-by-side, which is
     cramped at phone widths. */
  .bb-firstplace-top{flex-direction:column;align-items:flex-start}
  .bb-firstplace .art{width:120px;height:120px}
  .bb-challenge-row{flex-direction:column;gap:10px}
  .bb-challenge-row > div:last-child{text-align:left}
}