/* LA SCHEDA FEDELTÀ VIP — SOLO LA STRUTTURA, per le skin DI CASA.

Regola di Dav, 11/08 11:57 + 12:05:
  «qualsiasi cosa sposti da timerbet, fallo solo come HTML, non portare dietro style o altro»
  «se compone la griglia puoi lasciarlo, ma non mettere colori o background»

👉 Il confine è fra «dove sta una cosa» e «di che colore è». Qui c'è solo la prima metà.

Da dove viene: `/player/promozioni` sulle skin senza tema includeva il frammento VIP della
famiglia vestita E il foglio `account_vip.css` — cioè si portava dietro il guardaroba di
timerbet su studio5 e betslot. Delle 62 regole che servono a quella scheda, 39 dicono DOVE
stanno le cose e 23 di che colore sono: qui ci sono le prime, le seconde restano a timerbet.

⛔ NON si aggiungono colori a questo file. C'è una prova che li conta e pretende zero
(`tests/test_il_travaso_porta_la_griglia_non_i_colori.py`): il vestito lo mette Dav.
⚠️ E `account_vip.css` non l'ho toccato: la pagina di timerbet è esattamente quella di prima. */
/* ════════════ 3. LA FASCIA DEI LIVELLI ════════════
   Riferimento: pannello grigio-azzurro con le pastiglie in fila — SENZA etichette
   sotto (i nomi stanno nella tabella, ripeterli raddoppiava il rumore) — e, fuori
   dal pannello a destra, l'anello «Esperienza» con la sua scritta SOPRA. */
.pg .vip-b{padding:16px 15px}
/* la riga di testata: «LIVELLO ATTUALE» a sinistra, «CASHBACK» a destra */
.pg .vip-bandhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 2px 9px;font-size:.74em;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
/* Il pannello grigio e l'anello sono AFFIANCATI, non uno dentro l'altro: nel
   riferimento l'anello «Esperienza» sta fuori dal riquadro. La riga `.vip-row` la
   porta il ricambio `_vip_1xbet.html`; col markup originale di `_vip.html` l'anello
   resta dentro il pannello — si degrada, non si rompe. */
.pg .vip-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:15px}
.pg .vip-band{flex:1;min-width:0;display:flex;align-items:center;padding:12px 10px;margin-bottom:15px}
.pg .vip-row > .vip-band{margin-bottom:0}
.pg .vip-stop{flex:1;min-width:0;text-align:center;position:relative}
/* niente nomi sotto le pastiglie: è così nel riferimento */
.pg .vip-stop .vip-nm,.pg .vip-stop .vip-th{display:none}
/* la scala si legge TUTTA a colori: a dire «dove sei» ci pensa la pastiglia verde */
.pg .vip-stop.is-off{opacity:1;filter:none}
.pg .vip-stop.is-off .vip-gem{opacity:.92}
/* Niente cartellino «sei qui»: nel riferimento non c'è, e a dire dove sei ci pensa già
   la pastiglia verde (più la riga verde in tabella). Tolte le etichette dalla fascia,
   sarebbe per giunta rimasto l'unico testo lì dentro, sbilanciando la fila. */
.pg .vip-tag{display:none}
/* ── l'anello Esperienza, fuori dal pannello, etichetta SOPRA ── */
.pg .vip-xp{flex:0 0 auto;text-align:center;display:flex;flex-direction:column-reverse;gap:6px;padding:0 4px 0 12px}
.pg .vip-ring{width:74px;height:74px;margin:0 auto;display:flex;align-items:center;justify-content:center}
.pg .vip-ring-in{width:58px;height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* I punti possono essere sette cifre (nel riferimento sono «0», da noi no): il numero
   si stringe per stare nel tondo invece di sbordare. Cifre tabellari, così le colonne
   non ballano quando il punteggio cambia. */
.pg .vip-ring-in b{font-size:.76em;font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;max-width:52px;overflow:hidden;text-overflow:ellipsis}
.pg .vip-ring-in small{font-size:.58em;opacity:.6;font-weight:700;text-transform:uppercase}
.pg .vip-xp-lb{font-size:.7em;font-weight:700;letter-spacing:.03em;text-transform:none}
/* ════════════ 4. LE PASTIGLIE: 4 MEDAGLIE + 4 GEMME ════════════
   La scala del riferimento non è una gradazione sola: i primi quattro gradini si
   CONQUISTANO (medaglie col nastro), gli ultimi quattro si POSSIEDONO (gemme). Due
   sagome diverse, così il salto di categoria si legge prima ancora dei nomi.
   Markup di B, invariato:  <div class="vip-gem g-SLUG"><i></i></div>
     .vip-gem:before/:after = i due capi del nastro (solo medaglie)
     i                      = il disco della medaglia · oppure la gemma sfaccettata
     i:before/i:after       = rilievo e ombra delle facce */
.pg .vip-gem{width:58px;height:58px;margin:0 auto;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible}
.pg .vip-gem > i{display:block;position:relative;z-index:2}
.pg .vip-gem > i:before,.pg .vip-gem > i:after{content:"";position:absolute}
/* ════════════ 5. LA TABELLA DEI LIVELLI ════════════
   Riferimento: testata azzurrina, righe alternate, colonne centrate, la
   percentuale grossa a destra. Righe ~44px: è una tabella da consultare. */
.pg .vip-tab{width:100%;font-size:.9em}
.pg .vip-tab th{opacity:1;padding:9px 12px;font-size:.71em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.pg .vip-tab th:first-child{text-align:left}
.pg .vip-tab td{padding:7px 12px;height:44px;box-sizing:border-box;text-align:center;vertical-align:middle}
.pg .vip-tab td:first-child{text-align:left}
.pg .vip-tab td b{font-weight:700}
.pg .vip-tab th.num,.pg .vip-tab td.num{font-variant-numeric:tabular-nums}
.pg .vip-tab tr.off{opacity:.62}
/* la colonna del cashback: è il numero che il giocatore cerca, sta in grande */
.pg .vip-tab .cb{text-align:right;font-weight:900;font-size:1.06em;font-variant-numeric:tabular-nums}
/* le pastiglie piccole in tabella tengono la stessa sagoma delle grandi */
.pg .vip-gem.sm{width:28px;height:28px;display:inline-flex;vertical-align:middle;margin:0 8px 0 0}
.pg .vip-gem.sm > i{margin-top:0}
.pg .vip-gem.sm:before,.pg .vip-gem.sm:after{top:4px;width:6px;height:10px}
.pg .vip-gem.sm:before{left:6px}
.pg .vip-gem.sm:after{right:6px}
.pg .vip-pill{display:inline-block;padding:3px 10px;font-size:.76em;font-weight:800}
/* la nota a piè di tabella (l'asterisco del riferimento) */
.pg .vip-note{margin:11px 2px 0;font-size:.78em;line-height:1.5}
/* in colonna: le pastiglie vanno a capo, l'anello scende sotto */
  .pg .vip-row{flex-wrap:wrap}
.pg .vip-band{flex-wrap:wrap;gap:8px 4px;padding:11px 7px;width:100%;flex-basis:100%}
/* quattro per riga: la basa va scontata del vuoto, se no ce ne stanno tre e la
     fila resta sbilenca */
  .pg .vip-stop{flex:0 0 calc(25% - 4px)}
/* in tabella la medaglietta fa scivolare il nome sotto: a questa larghezza il nome
     basta da solo, e la fascia sopra le mostra già tutte */
  .pg .vip-gem.sm{display:none}
.pg .vip-gem{width:50px;height:50px}
.pg .vip-gem:before,.pg .vip-gem:after{top:6px;width:9px;height:16px}
.pg .vip-gem:before{left:12px}
.pg .vip-gem:after{right:12px}
.pg .vip-xp{flex-basis:100%;padding:8px 0 0;flex-direction:column-reverse}
.pg .vip-tab{font-size:.84em}
.pg .vip-tab td,.pg .vip-tab th{padding:7px 7px}