/* THE MUSIC TAB (10/11). assets/js/music.js draws it; the rails, heads and next-up cards are the
   Stories tab's (.shelf, .shelf-rail, .shelf-next, inline in index.html). ⛔ Run stamp.py after editing.
   ⛔ No filled arch shapes (they read as thumbs to him): square panes, framed squares, circles. */

/* ---- tiles on a rail: the rotation tile, sized by the rail ---- */
.shelf-rail .track{scroll-snap-align:start;}
.track-sub{display:block;margin-top:3px;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-glow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.track-note{display:block;margin-top:6px;font-size:11.5px;line-height:1.4;color:var(--muted);font-style:italic;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.track.shot .track-art{background-position:center 30%;}
.track.card .track-art{background-position:center 22%;}
.track-shotby{position:absolute;left:8px;bottom:8px;z-index:3;font-family:var(--f-mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:#ffd7ee;background:rgba(10,10,13,.72);border:1px dashed rgba(255,121,198,.6);padding:3px 6px;border-radius:3px;pointer-events:none;}
.track.won{border-color:var(--pink-glow);box-shadow:0 0 0 1px var(--pink-glow),0 8px 26px rgba(255,121,198,.25);}

/* ---- the jump bar ---- */
.mx-jump{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.mx-jump a{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:#0d0c11;transition:color .2s,border-color .2s;}
.mx-jump a:hover{color:var(--ink);border-color:var(--pink-glow);}

/* ---- buttons ---- */
.mx-btn{font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  padding:9px 15px;border-radius:999px;border:1px solid transparent;color:#0a0a0d;
  background:linear-gradient(180deg,var(--pink-glow),var(--pink-deep));box-shadow:0 0 14px rgba(255,121,198,.35);transition:transform .2s,filter .2s;}
.mx-btn:hover{transform:translateY(-1px);filter:brightness(1.08);}
.mx-btn:disabled{opacity:.5;cursor:default;transform:none;}
.mx-btn.ghost{background:#0d0c11;color:var(--muted);border-color:var(--line);box-shadow:none;}
.mx-btn.ghost.on,.mx-btn.ghost:hover{color:var(--ink);border-color:var(--pink-glow);}

/* ---- THE COVER ---- */
.mx-cover{position:relative;display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:18px;align-items:center;margin:0 0 14px;padding:14px;
  border:1px solid var(--line);border-radius:14px;background:radial-gradient(120% 90% at 0% 0%,rgba(255,121,198,.12),transparent 60%),var(--panel);
  text-decoration:none;color:inherit;transition:border-color .2s;}
.mx-cover:hover{border-color:var(--pink-glow);}
.mx-cv-art{display:block;aspect-ratio:1/1;border-radius:10px;background:#16151c center/cover no-repeat;box-shadow:0 12px 30px rgba(0,0,0,.55);}
.mx-cv-txt{display:flex;flex-direction:column;gap:5px;min-width:0;}
.mx-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--pink-glow);}
.mx-cv-t{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(30px,5vw,52px);line-height:.92;color:#fff;
  text-shadow:0 0 26px rgba(255,121,198,.3);overflow-wrap:anywhere;}
.mx-cv-a{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);}
.mx-cv-n{font-size:13.5px;line-height:1.5;color:#d9d3e0;max-width:560px;}
.mx-cv-go{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px;}
.mx-cv-sp{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
@media (max-width:640px){
  /* side by side on a phone: a full-width square pushed the whole tab a screen down */
  .mx-cover{grid-template-columns:112px 1fr;gap:12px;align-items:start;padding:12px;}
  .mx-cv-t{font-size:28px;}
  .mx-cv-n{font-size:12.5px;}
  .mx-cv-go{gap:10px;}
  .mx-cv-sp{display:none;}
}

/* ---- 0TP RADIO ---- */
.mx-radio{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:12px 14px;border:1px dashed rgba(255,121,198,.5);border-radius:12px;background:#0d0c11;}
.mx-vinyl{flex:none;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle,var(--pink-glow) 0 13%,#0a0a0d 14% 17%,#1c1a22 18% 30%,#0f0e13 31% 44%,#1c1a22 45% 58%,#0f0e13 59% 72%,#1c1a22 73% 100%);
  box-shadow:0 0 0 1px var(--line),0 6px 16px rgba(0,0,0,.6);}
.mx-r-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.mx-r-txt b{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:20px;line-height:1;color:#fff;}
.mx-r-txt span{font-size:12.5px;color:var(--ink);}
.mx-r-txt small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted);}
.mx-r-btns{display:flex;gap:8px;flex:none;}
@media (max-width:640px){
  .mx-radio{flex-wrap:wrap;}
  .mx-r-txt{flex-basis:calc(100% - 60px);}
  .mx-r-btns{width:100%;}
  .mx-r-btns .mx-btn{flex:1;}
}

/* ---- sub heads inside a section ---- */
.mx-sub-h{display:flex;align-items:baseline;gap:10px;margin:22px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line);}
.mx-sub-h h3{margin:0;font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:23px;line-height:1;color:var(--ink);}
.mx-sub-h span{margin-left:auto;text-align:right;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
@media (max-width:520px){.mx-sub-h span{display:none;}}

/* ---- WHO PLAYED ---- */
.mx-who{display:grid;gap:0;}
.mx-who-row{display:grid;grid-template-columns:minmax(0,230px) 1fr;gap:14px;align-items:start;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.mx-who-n{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px;}
.mx-who-n b{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:17px;line-height:1.02;color:#fff;}
.mx-who-n span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.mx-who-n:hover b{color:var(--pink-glow);}
.mx-who-acts{display:flex;flex-wrap:wrap;gap:6px;}
.mx-act{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:#0d0c11;}
.mx-act i{font-style:normal;color:var(--pink-glow);font-size:9px;}
a.mx-act:hover{border-color:var(--pink-glow);color:#fff;}
@media (max-width:640px){.mx-who-row{grid-template-columns:1fr;gap:8px;}}

/* ---- ROTATION BATTLE ---- */
.mx-bt{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:start;max-width:620px;}
.mx-bt-side{display:flex;flex-direction:column;gap:8px;min-width:0;}
.mx-bt-side.mine .track{border-color:var(--pink-glow);}
.mx-bt-side.won .track{box-shadow:0 0 0 2px var(--pink-glow),0 10px 30px rgba(255,121,198,.3);}
.mx-bt-vs{align-self:center;font-family:var(--f-display);font-style:italic;font-weight:900;font-size:30px;color:var(--pink-glow);
  text-shadow:0 0 20px rgba(255,121,198,.5);}
.mx-bt-bar[hidden]{display:none;}
.mx-bt-bar{position:relative;height:22px;border:1px solid var(--line);border-radius:4px;background:#0d0c11;overflow:hidden;}
.mx-bt-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--pink-deep),var(--pink-glow));transition:width .6s cubic-bezier(.2,.7,.3,1);}
.mx-bt-n{position:relative;z-index:1;display:block;padding:3px 8px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9);}
.mx-bt-state{margin:12px 0 0;font-size:13px;color:var(--ink);}
.mx-bt-state a{color:var(--pink-glow);}
@media (max-width:520px){.mx-bt{gap:8px;}.mx-bt-vs{font-size:22px;}}

/* ---- THE LINEAGE ---- */
.mx-lin{display:grid;gap:18px;}
.mx-lin-row{display:grid;grid-template-columns:minmax(0,170px) auto minmax(0,170px) 1fr;gap:12px;align-items:center;}
.mx-lin-arrow{font-size:26px;color:var(--pink-glow);}
.mx-lin-line{margin:0;font-size:13.5px;line-height:1.5;color:#d9d3e0;}
.mx-lin-line a{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
@media (max-width:720px){
  .mx-lin-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);}
  .mx-lin-line{grid-column:1 / -1;}
}

/* ---- THE LINEUP ---- */
.mx-lu{display:grid;gap:8px;}
.mx-lu-row{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;}
a.mx-lu-row:hover{border-color:var(--pink-glow);transform:translateX(3px);}
.mx-lu-d{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1/1;border:1px solid rgba(255,121,198,.5);border-radius:6px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-align:center;line-height:1.3;}
.mx-lu-d b{font-size:9px;color:var(--pink-glow);letter-spacing:.2em;}
.mx-lu-m{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mx-lu-m b{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:18px;line-height:1.02;color:#fff;}
.mx-lu-m span{font-size:12px;color:var(--ink);}
.mx-lu-m em{font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.mx-lu-go{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.mx-lu-go i{font-style:normal;color:var(--pink-glow);}
.mx-lu-more{margin:10px 0 0;font-size:12.5px;color:var(--muted);}
.mx-lu-more a{color:var(--pink-glow);}
@media (max-width:520px){.mx-lu-row{grid-template-columns:54px 1fr;}.mx-lu-go{grid-column:2;align-items:flex-start;flex-direction:row;gap:10px;}}

/* ---- DROPS ---- */
.mx-dr{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,220px);gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--pink-deep) transparent;}
.mx-dr::-webkit-scrollbar{height:6px;}
.mx-dr::-webkit-scrollbar-thumb{background:var(--pink-deep);border-radius:999px;}
.mx-dr-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;}
a.mx-dr-card:hover{border-color:var(--pink-glow);transform:translateY(-3px);}
.mx-dr-n{font-family:var(--f-display);font-style:italic;font-weight:900;font-size:46px;line-height:.9;color:var(--pink-glow);text-shadow:0 0 22px rgba(255,121,198,.35);}
.mx-dr-n i{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-left:6px;}
.mx-dr-card.out .mx-dr-n{color:#fff;}
.mx-dr-a{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-top:6px;}
.mx-dr-t{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:19px;line-height:1.02;color:#fff;}
.mx-dr-m{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.mx-dr-f{font-size:11.5px;line-height:1.4;color:var(--muted);margin-top:4px;}

/* ---- THE ROOMS ---- */
.mx-rooms{display:grid;gap:12px;}
.mx-room{display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--line);border-radius:12px;
  background:radial-gradient(110% 80% at 100% 0%,rgba(255,121,198,.12),transparent 60%),var(--panel);}
.mx-room-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--pink-glow);}
.mx-room b{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:30px;line-height:1;color:#fff;}
.mx-room-l{font-size:13px;color:#d9d3e0;}
.mx-room-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px;}
.mx-room-go a{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-decoration:none;}
.mx-room-go a:hover{color:var(--pink-glow);}
.mx-room-embed iframe{display:block;width:100%;height:380px;border:0;border-radius:12px;margin-top:10px;}

/* ---- PUT US ON ---- */
/* ⛔ form fields stay at 16px or more: under that iOS zooms the whole page on focus (the room form below too) */
.mx-pu{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;}
.mx-pu label{display:flex;flex-direction:column;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.mx-pu label.wide{grid-column:1 / -1;}
.mx-pu input,.mx-pu textarea{font:inherit;font-family:var(--f-body);font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);
  background:#0d0c11;border:1px solid var(--line);border-radius:8px;padding:10px 12px;resize:vertical;}
.mx-pu input:focus,.mx-pu textarea:focus{outline:none;border-color:var(--pink-glow);}
.mx-pu-row{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mx-pu-row small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);}
.mx-pu-msg{grid-column:1 / -1;margin:0;min-height:1em;font-size:12.5px;color:var(--pink-glow);}
@media (max-width:520px){.mx-pu{grid-template-columns:1fr;}.mx-pu-row{flex-direction:column;align-items:stretch;}}

/* ---- THE ROOMS, theirs (038) ---- */
.mx-room.wait{border-style:dashed;}
.mx-room-by{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.mx-room-by a{color:var(--pink-glow);text-decoration:none;} .mx-room-by em{font-style:normal;color:#ffb4b4;}
.mx-link{background:none;border:0;padding:0;color:var(--muted);font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;}
.mx-link:hover{color:var(--pink-glow);}
.mx-rooms-mine,.mx-rooms-queue{display:grid;gap:12px;margin:18px 0 0;} .mx-rooms-queue{margin:0 0 18px;}
.mx-room-q{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);}
.mx-room-q b{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:16px;line-height:1;}
.mx-room-q span{grid-column:1;font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.mx-room-q a{grid-column:2;grid-row:1 / span 2;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-glow);text-decoration:none;}
.mx-room-q .mx-btn{grid-column:3;grid-row:1 / span 2;}
.mx-rooms-foot{margin-top:14px;} .mx-note{margin:0;font-size:13px;color:var(--muted);} .mx-note a{color:var(--pink-glow);}
.mx-room-add{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;padding:14px;border:1px dashed rgba(255,121,198,.5);border-radius:12px;background:#0d0c11;}
.mx-room-add label{display:flex;flex-direction:column;gap:5px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.mx-room-add label.wide{grid-column:1 / -1;}
.mx-room-add input{font:400 16px/1.3 var(--f-body);color:var(--ink);background:#0a0a0d;border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
.mx-room-add input:focus{outline:none;border-color:var(--pink-glow);}
.mx-room-row{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.mx-room-row small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;color:var(--muted);} .mx-room-msg{flex:1;font-size:12.5px;color:var(--pink-glow);}
@media (max-width:520px){.mx-room-add{grid-template-columns:1fr;}}

/* ---- WAVE 2 (call 11): PAST WINNERS, under the battle. Square art, never an arch ---- */
.mx-pw{margin-top:6px;max-width:620px;}
.mx-pw-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.mx-pw-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:7px 12px 7px 7px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);text-decoration:none;color:inherit;transition:border-color .2s;}
.mx-pw-row:hover{border-color:var(--pink-glow);}
.mx-pw-art{display:block;width:40px;height:40px;border-radius:4px;background:#16151c center/cover no-repeat;}
.mx-pw-t{min-width:0;font-size:13px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;}
.mx-pw-row i{font-style:normal;font-size:10px;color:var(--pink-glow);}

/* ---- WAVE 2 (call 6): THE LINEUP takes the Run. A card holder's night links their card; that row is not one big
   link (no link inside a link), its ticket side stretches over the row instead ---- */
.mx-lu-row.has-who{position:relative;}
.mx-lu-row.tix:hover{border-color:var(--pink-glow);transform:translateX(3px);}
.mx-lu-hit{text-decoration:none;}
.mx-lu-hit::after{content:'';position:absolute;inset:0;border-radius:inherit;}
.mx-lu-m .mx-lu-who{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.mx-lu-who a{position:relative;z-index:1;color:var(--pink-glow);text-decoration:none;}
.mx-lu-who a:hover{text-decoration:underline;}

/* ---- WAVE 2 (call 9): REPORT on a member's room, the shared chooser. Chips wrap and stay thumb-sized (40px) ---- */
.mx-room-rep.done{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}
.mx-why{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:12px;border:1px dashed rgba(255,121,198,.5);border-radius:10px;background:#0d0c11;}
.mx-why > b{font-family:var(--f-mono);font-size:10px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--pink-glow);}
.mx-chips{display:flex;flex-wrap:wrap;gap:8px;}
.mx-chips button{min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#0a0a0d;color:var(--ink);cursor:pointer;
  font-family:var(--f-body);font-size:13px;line-height:1.2;text-align:left;}
.mx-chips button:hover{border-color:var(--pink-glow);}
.mx-chips button.go{background:var(--pink-glow);border-color:var(--pink-glow);color:#0a0a0d;font-weight:700;}
.mx-chips button:disabled{opacity:.5;cursor:default;}
/* ⛔ 16px or more, or iOS zooms the page on focus */
.mx-why input{font:400 16px/1.3 var(--f-body);color:var(--ink);background:#0a0a0d;border:1px solid var(--line);border-radius:8px;padding:10px 12px;}
.mx-why input:focus{outline:none;border-color:var(--pink-glow);}
.mx-rep-msg{margin:6px 0 0;font-size:12.5px;color:var(--pink-glow);}
.mx-rep-msg.bad{color:#ff6b6b;}

/* ---- WAVE 2, edit.js's panel for a card holder's own pick (the Music tab is the only place it opens) ---- */
.edm-note{margin:0;cursor:default;line-height:1.5;}
.edm-f .edm-go{margin-right:auto;}