/* radio.css — SONOFPOLLUX COATED (Epic Remake v3)
   - Epic backdrop layers + scanlines + noise
   - Player + Likes + Chat + Voting Top 3 + Full Ballot Modal
   - Scrollable chat + scrollable modal (iOS friendly)
   - Legacy compatible with older radio layout/classes
*/

:root{
  --bg:#090815;

  --cardA: rgba(18,17,42,.92);
  --cardB: rgba(8,8,16,.58);
  --line: rgba(255,255,255,.12);

  --text:#efeefe;
  --muted: rgba(239,238,254,.72);

  --a:#7c5cff;    /* violet */
  --b:#2ee6d6;    /* cyan */
  --hot:#ff66d9;  /* neon pink accent */

  --r:18px;

  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.04);

  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --shadowSoft: 0 12px 32px rgba(0,0,0,.35);

  --focus: 0 0 0 3px rgba(124,92,255,.25), 0 0 0 6px rgba(46,230,214,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(circle at 18% 18%, rgba(124,92,255,.25), transparent 48%),
    radial-gradient(circle at 78% 70%, rgba(46,230,214,.16), transparent 48%),
    radial-gradient(circle at 72% 18%, rgba(255,102,217,.10), transparent 50%),
    var(--bg);
  overflow-x:hidden;
}

/* -----------------------------------
   Backdrop layers
------------------------------------ */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.bg .stars{
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px) 0 0/140px 140px,
    radial-gradient(circle, rgba(255,255,255,.30) 1px, transparent 1px) 40px 30px/180px 180px,
    radial-gradient(circle, rgba(255,255,255,.20) 1px, transparent 1px) 70px 90px/220px 220px;
  opacity:.18;
  filter: blur(.2px);
  animation: drift 26s linear infinite;
}

.bg .glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 35% 25%, rgba(124,92,255,.18), transparent 55%),
    radial-gradient(circle at 70% 75%, rgba(46,230,214,.14), transparent 55%),
    radial-gradient(circle at 55% 10%, rgba(255,102,217,.08), transparent 60%);
  filter: blur(18px);
  opacity:.85;
  animation: breathe 8.5s ease-in-out infinite;
}

.bg .scanlines{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 1px,
      transparent 3px,
      transparent 6px
    );
  opacity:.10;
  mix-blend-mode: overlay;
  animation: scan 3.8s linear infinite;
}

.bg .noise{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.05), transparent 35%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.04), transparent 40%);
  opacity:.10;
  filter: blur(1px);
  animation: jitter 1.25s steps(2,end) infinite;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .bg .stars, .bg .glow, .bg .scanlines, .bg .noise{ animation:none !important; }
  .sigil__ring{ animation:none !important; }
  .badge--live .dot{ animation:none !important; }
  .modal__backdrop, .modal__panel{ animation:none !important; }
}

/* -----------------------------------
   Helpers
------------------------------------ */
.wrap{
  width:min(980px, calc(100% - 32px));
  margin: 28px auto 70px;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

.skip{
  position:absolute; left:-999px; top:12px;
  background:#111; color:#fff;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
}
.skip:focus{
  left:12px;
  outline:none;
  box-shadow: var(--focus);
}

/* -----------------------------------
   Topbar
------------------------------------ */
.topbar{
  position:sticky;
  top:0;
  z-index:5;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(10,9,20,.78), rgba(10,9,20,.35));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.brand__mark{
  display:inline-grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(46,230,214,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(124,92,255,.10), 0 10px 26px rgba(0,0,0,.35);
}
.brand__text{ font-size:13px; }

.nav{
  display:flex;
  gap:14px;
  align-items:center;
}
.nav__link{
  font-weight:800;
  color: rgba(239,238,254,.82);
  padding:8px 10px;
  border-radius:12px;
}
.nav__link:hover{
  text-decoration:none;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

.topbar__right{ display:flex; align-items:center; gap:10px; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
}
.badge--live{
  box-shadow: 0 0 0 1px rgba(46,230,214,.10), 0 10px 30px rgba(0,0,0,.35);
}
.badge--live .dot{
  width:8px; height:8px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 18px rgba(46,230,214,.35);
  animation: pulse 1.25s ease-in-out infinite;
}

/* -----------------------------------
   Hero
------------------------------------ */
.hero{ margin: 18px 0 16px; }

.hero__grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 860px){
  .hero__grid{ grid-template-columns:1fr; }
}

.kicker{
  margin:0 0 8px;
  color: rgba(239,238,254,.68);
  font-weight:950;
  letter-spacing:.22em;
  font-size:12px;
}

.hero__title{
  margin:0 0 10px;
  font-size: 42px;
  line-height:1.06;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.hero__accent{
  display:inline-block;
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.hero__lead{
  margin:0 0 14px;
  color: rgba(239,238,254,.80);
  font-weight:650;
  line-height:1.45;
  max-width: 60ch;
}

.hero__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(239,238,254,.78);
  font-weight:850;
  font-size:12px;
}

/* Sigil */
.hero__sigil{
  display:grid;
  place-items:center;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(18,17,42,.55), rgba(8,8,16,.28));
  box-shadow: var(--shadowSoft);
  position:relative;
  overflow:hidden;
}
.hero__sigil::before{
  content:"";
  position:absolute; inset:-1px;
  background: radial-gradient(circle at 50% 40%, rgba(124,92,255,.20), transparent 55%);
  filter: blur(10px);
  opacity:.9;
}

.sigil{
  position:relative;
  width: 200px;
  height: 200px;
}
.sigil__ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 50%, rgba(46,230,214,.08), transparent 60%),
    conic-gradient(from 140deg, rgba(124,92,255,.25), rgba(46,230,214,.18), rgba(255,102,217,.12), rgba(124,92,255,.25));
  filter: blur(.2px);
  animation: spin 10s linear infinite;
}
.sigil__ring--b{
  inset: 16px;
  opacity:.55;
  animation-duration: 14s;
  animation-direction: reverse;
}
.sigil__core{
  position:absolute;
  inset: 52px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:44px;
  font-weight:950;
  color: rgba(239,238,254,.92);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(124,92,255,.10), 0 22px 60px rgba(0,0,0,.45);
}

/* -----------------------------------
   Cards
------------------------------------ */
.card{
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:16px;
  margin:14px 0;
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(46,230,214,.14), transparent 55%);
  filter: blur(14px);
  opacity:.55;
  pointer-events:none;
}
.card > *{ position:relative; z-index:1; }

.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 8px;
}
@media (max-width: 640px){
  .card__top{ flex-direction:column; align-items:stretch; }
}

.label{
  font-size:12px;
  font-weight:950;
  letter-spacing:.22em;
  color: rgba(239,238,254,.60);
}

.statusRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.statusDot{
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 18px rgba(46,230,214,.28);
}
.statusText{
  color: rgba(239,238,254,.74);
  font-weight:850;
  font-size:12px;
  letter-spacing:.08em;
}

.pillStack{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(239,238,254,.78);
  font-weight:950;
  font-size:12px;
  letter-spacing:.08em;
}
.pill--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
  color: rgba(239,238,254,.62);
}

/* Now playing */
.np{ margin-top: 10px; }
.title{
  font-size:24px;
  font-weight:950;
  margin-top: 6px;
  letter-spacing:-.01em;
}
.artist{
  color: rgba(239,238,254,.72);
  margin-top: 2px;
  font-weight:800;
}

/* Controls */
.controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:12px;
}
.time{
  color: rgba(239,238,254,.72);
  font-size:13px;
  font-weight:700;
  margin-left:auto;
}
@media (max-width: 640px){
  .time{ width:100%; margin-left:0; }
}

/* Buttons */
.btn, button{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 10px 12px;
  font-weight:950;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover, button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.085);
  border-color: rgba(255,255,255,.18);
}
.btn:active, button:active{ transform: translateY(0px); }
.btn:focus-visible, button:focus-visible{
  outline:none;
  box-shadow: var(--focus);
}
button:disabled, .btn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.btn--primary{
  background: linear-gradient(90deg, rgba(124,92,255,.30), rgba(46,230,214,.22));
  border-color: rgba(124,92,255,.35);
  box-shadow: 0 0 0 1px rgba(124,92,255,.10), 0 16px 40px rgba(0,0,0,.35);
}
.btn--primary:hover{
  background: linear-gradient(90deg, rgba(124,92,255,.38), rgba(46,230,214,.28));
}
.btn--ghost{ background: rgba(255,255,255,.04); }
.btn--icon{
  width:42px;
  padding:10px 0;
  display:grid;
  place-items:center;
}

/* Volume block */
.vol{
  display:flex;
  align-items:center;
  gap:10px;
}
.vol__slider{
  width:140px;
  accent-color: var(--a);
}
@media (max-width: 520px){
  .vol__slider{ width:110px; }
}

/* Progress bar */
.bar{
  height:10px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  margin-top:14px;
  overflow:hidden;
  position:relative;
}
.fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 20px rgba(46,230,214,.20);
}

/* Notes */
.note{
  color: rgba(239,238,254,.70);
  font-size:13px;
  margin: 10px 0 0;
  line-height:1.35;
}
.note--epic{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.small{ font-size:12px; }

/* -----------------------------------
   Vote list base (shared by modal + legacy)
------------------------------------ */
.list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.meta{ display:grid; gap:2px; }
.meta b{
  font-size:14px;
  letter-spacing:.01em;
}
.meta span{
  color: rgba(239,238,254,.66);
  font-size:12px;
  font-weight:700;
}

/* -----------------------------------
   Likes (Like button)
------------------------------------ */
#likeBtn{
  position:relative;
  overflow:hidden;
}
#likeIcon{
  display:inline-block;
  font-size:16px;
  line-height:1;
  transform: translateY(1px);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.10));
}

/* Liked state: aria-label flips to "Unlike..." from JS */
#likeBtn[aria-label*="Unlike"]{
  border-color: rgba(255,102,217,.28);
  background: linear-gradient(90deg, rgba(255,102,217,.16), rgba(124,92,255,.14));
  box-shadow: 0 0 0 1px rgba(255,102,217,.10), 0 16px 44px rgba(0,0,0,.38);
}
#likeBtn[aria-label*="Unlike"] #likeIcon{
  color: rgba(255,102,217,.95);
  filter: drop-shadow(0 0 14px rgba(255,102,217,.35));
  animation: heartPop .22s ease-out;
}

/* subtle sparkle sweep */
#likeBtn::after{
  content:"";
  position:absolute;
  inset:-40% -30%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08), transparent 70%);
  transform: translateX(-30%) rotate(6deg);
  opacity:0;
  pointer-events:none;
}
#likeBtn:hover::after{
  opacity:1;
  animation: sweep .85s ease forwards;
}

/* -----------------------------------
   Chat
------------------------------------ */
.chatList{
  margin-top:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:10px;

  height: 320px;
  max-height: 320px;

  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch; /* iOS momentum */
  overscroll-behavior: contain;

  box-shadow: inset 0 0 0 1px rgba(124,92,255,.06);
}

/* scrollbar (optional) */
.chatList::-webkit-scrollbar{ width:10px; }
.chatList::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
.chatList::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(124,92,255,.35), rgba(46,230,214,.25));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
}

.chatRow{
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  margin-bottom:10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
  position:relative;
  overflow:hidden;
}
.chatRow::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 15% 20%, rgba(124,92,255,.12), transparent 55%),
    radial-gradient(circle at 85% 75%, rgba(46,230,214,.10), transparent 55%);
  opacity:.35;
  filter: blur(10px);
  pointer-events:none;
}

.chatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}
.chatNickTag{
  font-weight:950;
  letter-spacing:.02em;
  font-size:13px;
}
.chatTime{
  color: rgba(239,238,254,.55);
  font-weight:800;
  font-size:11px;
  letter-spacing:.10em;
}

.chatBody{
  color: rgba(239,238,254,.86);
  font-size:13px;
  line-height:1.38;
  font-weight:650;
  position:relative;
  z-index:1;
  white-space:pre-wrap;
  word-break:break-word;
}

/* "mine" bubbles */
.chatRow--me{
  margin-left:auto;
  border-color: rgba(124,92,255,.18);
  background: linear-gradient(90deg, rgba(124,92,255,.12), rgba(46,230,214,.08));
  box-shadow: 0 0 0 1px rgba(124,92,255,.08), 0 12px 30px rgba(0,0,0,.22);
}
.chatRow--me .chatNickTag{
  background: linear-gradient(90deg, var(--a), var(--b));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Typing indicator */
.typingLine{
  margin-top:10px;
  min-height: 18px;
  color: rgba(239,238,254,.58);
  font-weight:850;
  letter-spacing:.08em;
  font-size:11px;
  text-transform:uppercase;
}
.typingLine::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  border-radius:999px;
  margin-right:8px;
  background: linear-gradient(90deg, var(--a), var(--b));
  box-shadow: 0 0 14px rgba(46,230,214,.28);
  vertical-align:middle;
  opacity:.75;
}

/* Chat form */
.chatForm{
  margin-top:12px;
  display:grid;
  grid-template-columns: 180px 1fr auto;
  gap:10px;
  align-items:center;
}
.chatForm input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 12px;
  font-weight:850;
  outline:none;
}
.chatForm input::placeholder{
  color: rgba(239,238,254,.45);
  font-weight:750;
}
.chatForm input:focus{
  box-shadow: var(--focus);
  border-color: rgba(124,92,255,.30);
}
#chatSend{ white-space:nowrap; }

#chatStatus{
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* Mod bar + tools */
.modBar{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.modToken{
  flex: 1 1 240px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding:10px 12px;
  font-weight:900;
  outline:none;
}
.modToken:focus{
  box-shadow: var(--focus);
  border-color: rgba(124,92,255,.30);
}
.modHint{
  color: rgba(239,238,254,.55);
  font-weight:800;
  font-size:12px;
}
.chatModBtn{
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(239,238,254,.85);
  padding:6px 10px;
  font-weight:950;
  cursor:pointer;
}
.chatModBtn:hover{
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}

/* Responsive chat */
@media (max-width: 720px){
  .chatForm{ grid-template-columns: 1fr; }
  #chatSend{ width:100%; }
  .chatList{ height: 300px; max-height: 300px; }
}

/* -----------------------------------
   Voting: Top 3 + Modal
------------------------------------ */
.topVotes{
  display:grid;
  gap:10px;
  margin-top:12px;
}

/* Featured top 3 */
.topVotes .item{
  position:relative;
  border-color: rgba(124,92,255,.18);
  background: linear-gradient(90deg, rgba(124,92,255,.10), rgba(46,230,214,.07));
  padding-left: 52px; /* room for rank badge */
}
.topVotes .item::before{
  content:"#";
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:950;
  font-size:12px;
  letter-spacing:.06em;
  color: rgba(239,238,254,.92);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 1px rgba(124,92,255,.10), 0 10px 28px rgba(0,0,0,.30);
}
.topVotes .item:nth-child(1)::before{ content:"1"; }
.topVotes .item:nth-child(2)::before{ content:"2"; opacity:.92; }
.topVotes .item:nth-child(3)::before{ content:"3"; opacity:.88; }

.voteActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}
.voteActions .note{
  margin:0;
  opacity:.9;
}

/* Modal shell */
.modal{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
}
.modal[hidden]{ display:none; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(10px);
  animation: modalFade .14s ease-out;
}

.modal__panel{
  position:relative;
  width: min(980px, calc(100% - 24px));
  max-height: calc(100vh - 48px);
  overflow:auto;

  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  box-shadow: var(--shadow);

  padding:16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); /* iOS safe area */
  animation: modalPop .16s ease-out;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Modal scrollbar */
.modal__panel::-webkit-scrollbar{ width:10px; }
.modal__panel::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius:999px; }
.modal__panel::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(124,92,255,.35), rgba(46,230,214,.25));
  border-radius:999px;
  border:2px solid rgba(0,0,0,.25);
}

.modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.modal__title{
  margin: 6px 0 0;
  font-size:18px;
  letter-spacing:.02em;
}

@media (max-width: 520px){
  .modal__panel{ padding:14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .voteActions{ align-items:stretch; }
  #openVoteModal{ width:100%; }
}

/* -----------------------------------
   Footer
------------------------------------ */
.footer{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer__row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.muted{ color: rgba(239,238,254,.62); }

/* -----------------------------------
   Legacy compatibility (old HTML)
------------------------------------ */
.head{ margin-bottom: 14px; }
.sub{ color: var(--muted); margin-top: 6px; }

/* -----------------------------------
   Keyframes
------------------------------------ */
@keyframes drift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-40px, -30px, 0); }
}
@keyframes breathe{
  0%,100%{ transform: scale(1); opacity:.85; }
  50%{ transform: scale(1.03); opacity:.95; }
}
@keyframes scan{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(18px); }
}
@keyframes jitter{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(1px,-1px,0); }
  100%{ transform: translate3d(-1px,1px,0); }
}
@keyframes pulse{
  0%,100%{ transform: scale(1); opacity:.95; }
  50%{ transform: scale(1.25); opacity:.75; }
}
@keyframes spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* Like effects */
@keyframes heartPop{
  0%{ transform: translateY(1px) scale(1); }
  55%{ transform: translateY(1px) scale(1.28); }
  100%{ transform: translateY(1px) scale(1.06); }
}
@keyframes sweep{
  0%{ transform: translateX(-30%) rotate(6deg); }
  100%{ transform: translateX(30%) rotate(6deg); }
}

/* Modal effects */
@keyframes modalFade{
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes modalPop{
  from { opacity:0; transform: translateY(10px) scale(.985); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}