/* nova_deck.css — the «listener deck» in NOVA's live view (29 Oct 2026, assets/js/nova_deck.js).
   v2 (owner: «دکمه داخل دکمه زشته»): no outer frame and no pill-in-pill. A slim tab bar, then ONE tile for the chosen action — an animated picture on one side, the
   words on the other. The whole tile is the button: the piece's own link/button (the support link, the download pill, the chat pill, the request button) is
   spread over the tile with a stretched ::before/::after, so the player's own scripts, handlers and rewrites keep working untouched.
   Every rule starts with #novaDeck, so it beats the NOVA «looks» (nova_looks.css) that restyle .dl-promo / .sup-promo. The tile carries its own dark ground and
   its own text tokens, so it reads on every look. No blur, filter or transform on any layer that holds a popup; the pictures move with transform/opacity only. */
#novaDeck{--ac1:#22d3ee;--ac2:#a78bfa;--art-w:clamp(68px,24%,122px);--tile-h:120px;--title:15px;--sub:12px;
  box-sizing:border-box;width:min(100%,520px);align-self:center;margin:16px auto 6px;display:flex;flex-direction:column;gap:10px;color:var(--tx,#eef2ff);text-align:start}
#novaDeck[hidden]{display:none!important}
#novaDeck[data-cur="dl"]{--ac1:#fbbf24;--ac2:#fb923c}
#novaDeck[data-cur="sup"]{--ac1:#fb7185;--ac2:#c084fc}
#novaDeck[data-cur="req"]{--ac1:#a78bfa;--ac2:#f472b6}
#novaDeck[data-cur="chat"]{--ac1:#2dd4bf;--ac2:#38bdf8}
#novaDeck[data-cur="vote"]{--ac1:#22d3ee;--ac2:#60a5fa}
#novaDeck[data-cur="poll"]{--ac1:#34d399;--ac2:#22d3ee}

/* the tab bar */
#novaDeck .nd-tabs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:4px;padding:4px;border-radius:18px;background:rgba(255,255,255,.07);background:color-mix(in srgb,var(--tx,#eef2ff) 7%,transparent)}
#novaDeck[data-n="1"] .nd-tabs{display:none}
#novaDeck .nd-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0!important;min-height:54px!important;padding:6px 4px;border:0;border-radius:14px;
  background:transparent;color:var(--tx-muted,#a8b1d6);font:inherit;font-size:11.5px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,box-shadow .2s}
#novaDeck .nd-tab:active{background:rgba(255,255,255,.08)}
#novaDeck .nd-tab svg{width:20px;height:20px;flex:none}
#novaDeck .nd-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#novaDeck .nd-tab.on{background:linear-gradient(135deg,var(--ac1),var(--ac2));color:#140a1c;box-shadow:0 10px 24px -12px var(--ac1)}
#novaDeck .nd-tab:focus-visible{outline:2px solid var(--ac1);outline-offset:2px}
#novaDeck .nd-dot{position:absolute;top:7px;inset-inline-start:calc(50% + 9px);width:8px;height:8px;border-radius:50%;background:#fb7185;box-shadow:0 0 0 3px rgba(20,10,28,.5);animation:nd-ping 1.6s ease-out infinite}
@keyframes nd-ping{0%{box-shadow:0 0 0 0 rgba(251,113,133,.7)}80%,100%{box-shadow:0 0 0 9px rgba(251,113,133,0)}}
@media (min-width:700px){#novaDeck .nd-tab{flex-direction:row;gap:8px;min-height:46px!important;font-size:13px}#novaDeck .nd-tab svg{width:18px;height:18px}#novaDeck .nd-dot{position:static;order:3}
  #novaDeck{--title:17.5px;--sub:12.5px;--tile-h:122px}}

/* a tile: the picture (.nd-art), the piece (the player's own element), the «go» mark (.nd-go) */
#novaDeck .nd-body{display:grid}
#novaDeck .nd-tile{--tx:#f4f6ff;--tx-muted:rgba(244,246,255,.74);--ink:#f4f6ff;--ink2:rgba(244,246,255,.74);--q-ink:#f4f6ff;--q-mut:rgba(244,246,255,.74);
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:var(--art-w) minmax(0,1fr);align-items:center;column-gap:6px;min-height:var(--tile-h);
  padding-inline:6px 54px;border-radius:26px;color:var(--tx);text-align:start;
  border:1px solid rgba(255,255,255,.16);border-color:color-mix(in srgb,var(--ac1) 42%,transparent);
  background:linear-gradient(135deg,#17122a,#1f1838);
  background:radial-gradient(80% 140% at 14% 50%,color-mix(in srgb,var(--ac1) 24%,transparent),transparent 68%),linear-gradient(135deg,#17122a,#1f1838);
  box-shadow:0 22px 44px -28px var(--ac1),inset 0 1px 0 rgba(255,255,255,.1);animation:nd-in .38s ease both}
html[dir="rtl"] #novaDeck .nd-tile{background:radial-gradient(80% 140% at 86% 50%,color-mix(in srgb,var(--ac1) 24%,transparent),transparent 68%),linear-gradient(225deg,#17122a,#1f1838)}
#novaDeck .nd-tile.nd-off{display:none!important}
#novaDeck .nd-tile:hover{border-color:color-mix(in srgb,var(--ac1) 75%,transparent)}
@keyframes nd-in{from{opacity:0}}

/* the picture */
#novaDeck .nd-art{grid-column:1;grid-row:1;display:grid;place-items:center;padding:8px 0;pointer-events:none}
#novaDeck .nd-art svg{display:block;width:100%;height:auto;max-height:104px;overflow:visible;transition:transform .3s cubic-bezier(.3,1.4,.4,1)}
#novaDeck .nd-tile:hover .nd-art svg{transform:scale(1.07)}
#novaDeck[data-cur="chat"] .nd-art-sup,#novaDeck[data-cur="sup"] .nd-art-chat{display:none}
/* the moving parts turn about their own centre (never every element: a transform written in the SVG itself, like the note heads' rotate(…), would be shifted) */
#novaDeck .a-disc,#novaDeck .a-arrow,#novaDeck .a-ring,#novaDeck .a-star,#novaDeck .a-heart,#novaDeck .a-mini,#novaDeck .a-note,#novaDeck .a-eq rect,#novaDeck .a-back,#novaDeck .a-front,#novaDeck .a-dot{transform-box:fill-box;transform-origin:center}
#novaDeck .a-disc{animation:nd-spin 9s linear infinite}
#novaDeck .a-arrow{animation:nd-bob 1.7s ease-in-out infinite}
#novaDeck .a-ring{animation:nd-ripple 2.6s ease-out infinite}
#novaDeck .a-ring.r2{animation-delay:1.3s}
#novaDeck .a-star{animation:nd-twinkle 2.4s ease-in-out infinite}
#novaDeck .a-star.s2{animation-delay:1.1s}
#novaDeck .a-heart{animation:nd-beat 1.5s ease-in-out infinite}
#novaDeck .a-mini{animation:nd-rise 3.4s ease-in infinite;opacity:0}
#novaDeck .a-mini.m2{animation-delay:1.1s}
#novaDeck .a-mini.m3{animation-delay:2.2s}
#novaDeck .a-note{animation:nd-note 2.6s ease-in-out infinite}
#novaDeck .a-eq rect{transform-origin:50% 100%;animation:nd-eq 1.2s ease-in-out infinite}
#novaDeck .a-eq rect:nth-child(2){animation-delay:.3s}
#novaDeck .a-eq rect:nth-child(3){animation-delay:.6s}
#novaDeck .a-eq rect:nth-child(4){animation-delay:.9s}
#novaDeck .a-back{animation:nd-sway 4.5s ease-in-out infinite}
#novaDeck .a-front{animation:nd-sway 4.5s ease-in-out -2.2s infinite reverse}
#novaDeck .a-dot{animation:nd-dot 1.3s ease-in-out infinite}
#novaDeck .a-dot.d2{animation-delay:.18s}
#novaDeck .a-dot.d3{animation-delay:.36s}
@keyframes nd-spin{to{transform:rotate(360deg)}}
@keyframes nd-bob{0%,100%{transform:translateY(-1.5px)}50%{transform:translateY(2.5px)}}
@keyframes nd-ripple{0%{transform:scale(1);opacity:.75}100%{transform:scale(2);opacity:0}}
@keyframes nd-twinkle{0%,100%{opacity:.15;transform:scale(.55)}50%{opacity:1;transform:scale(1)}}
@keyframes nd-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.09)}70%{transform:scale(1)}}
@keyframes nd-rise{0%{transform:translateY(8px) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-34px) scale(1);opacity:0}}
@keyframes nd-note{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-3px) rotate(4deg)}}
@keyframes nd-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes nd-sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
@keyframes nd-dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}

/* the «go» mark: says what a tap does (down = download, ↗ = leaves the player, › = opens something) and lights up on hover */
#novaDeck .nd-go{position:absolute;inset-inline-end:12px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .2s,border-color .2s,color .2s}
#novaDeck .nd-go svg{display:none;width:16px;height:16px}
#novaDeck .nd-tile[data-k="dl"] .go-dl,#novaDeck .nd-tile[data-k="req"] .go-chev,#novaDeck[data-cur="sup"] .nd-tile[data-k="sup"] .go-out,#novaDeck[data-cur="chat"] .nd-tile[data-k="sup"] .go-chev{display:block}
html[dir="rtl"] #novaDeck .go-chev{transform:scaleX(-1)}
#novaDeck .nd-tile:hover .nd-go{background:linear-gradient(135deg,var(--ac1),var(--ac2));border-color:transparent;color:#140a1c}

/* the piece: whatever the player put there, laid out as the words of the tile */
#novaDeck .nd-tile>:not(.nd-art):not(.nd-go){grid-column:2;grid-row:1;min-width:0;margin:0;padding:14px 0;border:0;border-radius:0;background:none;box-shadow:none;text-align:start;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
#novaDeck .nd-tile .sup-promo,#novaDeck .nd-tile .dl-promo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;
  color:var(--tx);font:inherit;font-size:var(--title);font-weight:900;line-height:1.3;white-space:normal;text-align:start;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;text-wrap:balance}
#novaDeck .nd-tile .sup-promo:hover,#novaDeck .nd-tile .dl-promo:hover{background:none;border:0;transform:none}
#novaDeck .nd-tile .sup-promo>svg,#novaDeck .nd-tile .sup-promo-out,#novaDeck .nd-tile .st-chat-pill>span[aria-hidden],#novaDeck .nd-tile .dl-promo-cta svg{display:none}
/* the whole tile is the link: the piece's own button/link spreads over it (no ancestor between it and the tile is positioned) */
#novaDeck .nd-tile .sup-promo::before,#novaDeck .nd-tile .dl-promo::after,#novaDeck .nd-tile .mrq-go::after{content:'';position:absolute;inset:0;z-index:1}
#novaDeck .nd-tile .sup-promo:focus-visible,#novaDeck .nd-tile .dl-promo:focus-visible,#novaDeck .nd-tile .mrq-go:focus-visible{outline:none}
#novaDeck .nd-tile .sup-promo:focus-visible::before,#novaDeck .nd-tile .dl-promo:focus-visible::after,#novaDeck .nd-tile .mrq-go:focus-visible::after{outline:2px solid var(--ac1);outline-offset:-4px;border-radius:26px}
/* the line under the title: the link's own tooltip text (already in every language) */
#novaDeck .nd-tile .sup-promo::after{content:attr(title);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--sub);font-weight:600;line-height:1.45;color:var(--tx-muted)}
/* the support tab and the chat tab are two views of one row */
#novaDeck[data-cur="chat"] .nd-suprow>:not(.st-chat-pill){display:none}
#novaDeck[data-cur="sup"] .nd-suprow>.st-chat-pill{display:none}
#novaDeck .nd-tile .sup-thanks{position:relative;z-index:2;display:block;flex-basis:auto;margin:6px 0 0;text-align:start;font-size:12px;line-height:1.4;color:var(--tx-muted);white-space:normal}
#novaDeck .nd-tile .sup-thanks:hover{color:#fff}
/* download */
#novaDeck .dl-promo-q{font-size:var(--sub);font-weight:700;color:var(--tx-muted);white-space:normal}
#novaDeck .dl-promo-cta{text-wrap:balance;display:block;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--tx);font-size:inherit;font-weight:900;white-space:normal;text-align:start;filter:none}
#novaDeck .dl-promo:hover .dl-promo-cta{filter:none}
/* the request line: the card's header becomes the words; «Choose a song» is a plain accent line, the whole tile opens the picker */
#novaDeck .nd-tile .mrq{position:static;overflow:visible;animation:none;gap:0}
#novaDeck .nd-tile .mrq-h{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:2px}
#novaDeck .nd-tile .mrq-ic{display:none}
#novaDeck .nd-tile .mrq-h>span:nth-child(2){flex:none}
#novaDeck .nd-tile .mrq-h b{font-size:var(--title);font-weight:900;line-height:1.3;text-wrap:balance}
#novaDeck .nd-tile .mrq-h small{font-size:var(--sub);font-weight:600;color:var(--tx-muted)}
#novaDeck .nd-tile .mrq-go{margin:7px 0 0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ac1);font:inherit;font-size:13.5px;font-weight:900;text-align:start;transform:none;cursor:pointer}
#novaDeck .nd-tile .mrq-go[disabled]{color:var(--tx-muted);cursor:default}
#novaDeck .nd-tile .mrq-st{margin-top:10px;padding:8px 10px;gap:8px;font-size:12.5px;line-height:1.45;background:rgba(0,0,0,.28)}
#novaDeck .nd-tile .mrq-st .cv{width:34px;height:34px;border-radius:9px}
#novaDeck .nd-tile .mrq-next{margin-top:8px;color:var(--tx-muted)}
/* the vote has no picture: its card keeps its own rows and fills the tile */
#novaDeck .nd-tile[data-k="vote"]{display:block;padding:0}
#novaDeck .nd-tile[data-k="vote"]>.nv-vote{display:block;padding:14px 16px;gap:0}
#novaDeck .nd-tile .nv-vote{margin:0;border:0;background:none;box-shadow:none;border-radius:0;overflow:visible;animation:none}
#novaDeck .nd-tile .nv-vote.open::before,#novaDeck .nd-tile .nv-vote::after{display:none}
/* the poll (nova_poll.js) keeps its own rows too and fills its tile */
#novaDeck .nd-tile[data-k="poll"]{display:block;padding:0}
#novaDeck .nd-tile[data-k="poll"]>.np-poll{display:block;margin:0;padding:14px 16px;border:0;border-radius:0;background:none;animation:none}
/* …except while no vote is open: the «next vote» card (nova_vote.js, class .wait) is a picture-and-words tile like the others */
#novaDeck .nd-tile[data-k="vote"] .nd-art{display:none}
#novaDeck .nd-tile[data-k="vote"].nd-wait{display:grid;padding-inline:6px 16px}
#novaDeck .nd-tile[data-k="vote"].nd-wait .nd-art{display:grid}
#novaDeck .nd-tile[data-k="vote"].nd-wait>.nv-vote.wait{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px 0}
#novaDeck .nv-vote.wait .nv-ico{display:none}
#novaDeck .nv-vote.wait .nv-h{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#novaDeck .nv-vote.wait .nv-h b{flex:none;font-size:var(--title);font-weight:900;line-height:1.3;text-wrap:balance}
#novaDeck .nv-vote.wait .nv-sub{margin:0;font-size:var(--sub);font-weight:600;line-height:1.45;color:var(--tx-muted)}
#novaDeck .nv-vote.wait .nv-last{margin:2px 0 0;font-size:var(--sub);line-height:1.4;color:var(--tx-muted)}
#novaDeck .nv-vote.wait .nv-own{margin:4px 0 0;padding:0;min-height:0!important;min-width:0!important;border:0;border-radius:0;background:none;color:var(--ac1);font:inherit;font-size:13.5px;font-weight:900;text-align:start;cursor:pointer}
#novaDeck .a-slip,#novaDeck .a-hand{transform-box:fill-box;transform-origin:center}
#novaDeck .a-slip{animation:nd-drop 3s ease-in infinite}
#novaDeck .a-hand{animation:nd-spin 8s linear infinite}
@keyframes nd-drop{0%{transform:translateY(-14px);opacity:0}16%{opacity:1}72%{transform:translateY(14px);opacity:1}100%{transform:translateY(20px);opacity:0}}

@media (prefers-reduced-motion:reduce){#novaDeck *,#novaDeck{animation:none!important;transition:none!important}#novaDeck .a-mini{opacity:.9}}
html.mibl-rm #novaDeck *,html.mibl-rm #novaDeck{animation:none!important;transition:none!important}
html.mibl-rm #novaDeck .a-mini{opacity:.9}