/* I PUNTI SUL SITO (10/10/26). Dalla bozza approvata il 9/10/26 (Cultura digitale/bozze/bozza-punti). I colori, i caratteri e gli spigoli sono quelli del tema, coi nomi di Bento (--bt-card, --bt-ink…: REGOLE_DEI_TEMI §4); il colore dei punti è --pnt (lo dichiara il tema: su Cultura il ciano #00E5FF, scelto da Marco), la scritta sopra di lui --pnt-ink. Senza, i punti prendono l'accento del tema (il ripiego dentro ogni var(): l'addon non dichiara --pnt, sennò vincerebbe sul tema). Ogni regola ha davanti :is(.app, body): pesa quanto «.app a» del tema (che arriva dopo) e vale anche dove .app non c'è. Le schede dell'area riusano quelle di «I miei ascolti» (.ma-*), vestite dal tema. Messaggi e finestre stanno in fondo al corpo, fuori dal contenuto. Prefisso pnt- (pt- è già di altri pezzi). */ body{ --pnt-sf3:color-mix(in srgb, var(--bt-ink) 6%, var(--bt-card)); --pnt-ln-f:var(--bt-line-btn, var(--bt-line)) } /* i testi nostri vanno a capo senza lasciare una parola sola in fondo: i paragrafi pretty; titoli, etichette e valori a righe pareggiate, con :where (peso zero: un pezzo con white-space:nowrap resta su una riga) */ :is(.app, body) .pnt-area, :is(.app, body) .pnt-premi, :is(.app, body) .pnt-lettore, :is(.app, body) .pnt-cond, :is(.app, body) .pnt-cassa, :is(.app, body) .pnt-solo, :is(.app, body) .pnt-su, :is(.app, body) .pnt-toasts, :is(.app, body) [data-pnt-premi]{ text-wrap:pretty } :where(.pnt-area, :is(.app, body) .pnt-premi, :is(.app, body) .pnt-lettore, :is(.app, body) .pnt-cassa, :is(.app, body) .pnt-solo, :is(.app, body) .pnt-su, :is(.app, body) [data-pnt-premi]) :where(h2, :is(.app, body) h3, :is(.app, body) h4, :is(.app, body) b, :is(.app, body) strong, :is(.app, body) small, :is(.app, body) dt, :is(.app, body) dd, :is(.app, body) label, :is(.app, body) button, :is(.app, body) a){ text-wrap:balance } /* ---------------- l'area: «I tuoi punti» ---------------- */ :is(.app, body) .pnt-area{ display:grid; gap:36px; min-width:0 } :is(.app, body) .pnt-area *{ margin:0 } /* l'eroe: il numero grande a sinistra, la scala dei livelli a destra */ :is(.app, body) .pnt-eroe{ display:grid; grid-template-columns:minmax(0, 260px) minmax(0, 1fr); gap:24px 44px; align-items:center; padding:26px 28px; border:1px solid var(--bt-line); background:var(--bt-card) } :is(.app, body) .pnt-eroe-n{ display:grid; gap:8px; align-content:start; min-width:0 } /* le etichette nostre si scrivono normali (niente maiuscolo spaziato): colore e peso bastano a farle notare */ :is(.app, body) .pnt-eroe-eti{ font-size:.95rem; font-weight:700; line-height:1.3; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-tot{ display:flex; align-items:baseline; gap:10px; min-width:0 } :is(.app, body) .pnt-tot b{ font-family:var(--bt-font-display); font-size:clamp(3rem, 5.4vw, 4.4rem); font-weight:800; line-height:.92; letter-spacing:-.045em; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums } :is(.app, body) .pnt-tot small{ font-size:1.15rem; font-weight:700; color:var(--bt-ink) } /* sotto il numero, una riga per cosa: etichetta a sinistra, valore a destra, mai a capo */ /* (11/10/26, Marco) i dati stanno sotto, a tutta larghezza: al largo in colonne (etichetta sopra, valore sotto), al telefono a righe */ :is(.app, body) .pnt-eroe-dati{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px 24px; margin:0 !important; padding-top:20px; border-top:1px solid var(--bt-line) } :is(.app, body) .pnt-eroe-dati div{ display:grid; gap:4px; min-width:0 } :is(.app, body) .pnt-eroe-dati dt{ font-size:.9rem; line-height:1.3; color:var(--bt-muted); white-space:nowrap } :is(.app, body) .pnt-eroe-dati dd{ font-size:.95rem; line-height:1.3; color:var(--bt-ink); white-space:nowrap; font-variant-numeric:tabular-nums } :is(.app, body) .pnt-eroe-dati dd b{ font-weight:700 } :is(.app, body) .pnt-eroe-m{ display:grid; gap:16px; min-width:0 } /* LA SCALA: un blocco per livello, a celle come un indicatore di memoria. Piena fin dove si è arrivati; il livello di adesso si riempie verso il prossimo. È il pezzo che si fa notare: tutto il resto della schermata sta quieto. */ :is(.app, body) .pnt-scala{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); gap:6px; min-width:0 } :is(.app, body) .pnt-gr{ display:grid; gap:6px; align-content:start; min-width:0 } :is(.app, body) .pnt-gr-barra{ position:relative; display:block; height:18px; border:1px solid var(--pnt-ln-f); background:var(--pnt-sf3); overflow:hidden } :is(.app, body) .pnt-gr-barra i{ position:absolute; inset:0 auto 0 0; width:var(--p, 0%); background:repeating-linear-gradient(90deg, var(--pnt, var(--bt-accent)) 0 5px, transparent 5px 7px); transition:width .9s cubic-bezier(.2, .8, .2, 1) } :is(.app, body) .pnt-gr-qui .pnt-gr-barra{ border-color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-gr-nome{ font-size:.82rem; font-weight:700; line-height:1.25; color:var(--bt-ink); text-wrap:balance } :is(.app, body) .pnt-gr-poi .pnt-gr-nome{ color:var(--bt-muted) } :is(.app, body) .pnt-gr-da{ font-size:.8rem; line-height:1.2; color:var(--bt-muted); font-variant-numeric:tabular-nums } /* come si guadagnano: una riga per modo, il valore a destra */ :is(.app, body) .pnt-modi{ list-style:none; padding:0; display:grid; border-top:1px solid var(--bt-line) } :is(.app, body) .pnt-modo{ display:grid; grid-template-columns:44px minmax(0, 1fr) auto; gap:16px; align-items:start; padding:18px 2px; border-bottom:1px solid var(--bt-line) } :is(.app, body) .pnt-modo-ico{ display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--pnt-ln-f); color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-modo-ico svg{ width:22px; height:22px } :is(.app, body) .pnt-modo-t{ display:grid; gap:6px; min-width:0 } :is(.app, body) .pnt-modo-t b{ font-size:1rem; font-weight:700; line-height:1.3; color:var(--bt-ink) } :is(.app, body) .pnt-modo-t p{ font-size:.88rem; line-height:1.5; color:var(--bt-muted); max-width:62ch } :is(.app, body) .pnt-modo-t .pnt-no{ font-size:.82rem } :is(.app, body) .pnt-oggi{ display:grid; grid-template-columns:minmax(0, 220px) auto; gap:12px; align-items:center; margin-top:4px } :is(.app, body) .pnt-oggi small{ font-size:.78rem; font-weight:600; color:var(--bt-muted); font-variant-numeric:tabular-nums } :is(.app, body) .pnt-modo-v{ display:grid; justify-items:end; gap:2px; text-align:right; min-width:92px } :is(.app, body) .pnt-modo-v b{ font-family:var(--bt-font-display); font-size:1.6rem; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums } :is(.app, body) .pnt-modo-v small{ font-size:.78rem; line-height:1.3; color:var(--bt-muted) } /* ---------------- la linea dei premi ---------------- */ /* LA LINEA DEI PREMI È SEMPRE UN PERCORSO (10/10/26; Marco, col cappellino largo quanto la pagina: «è enorme. Non deve essere così. Devi creare sempre il percorso»). Prima ogni premio prendeva una colonna intera e l'immagine la sua larghezza: un premio solo, 900 px e oltre. Adesso, come nella bozza approvata: la linea a celle va da sinistra a destra per tutto il riquadro, piena fin dove arrivano i CultXP DA SPENDERE; i premi sono tappe a distanze uguali, e ogni tappa ha la sua misura fissa, con uno o con dieci premi: --pnt-tappa (la miniatura quadrata, sotto il nome e lo stato) dentro una cella larga almeno --pnt-col. Il segno sta a metà della cella, la miniatura sotto il segno. Ogni tappa disegna il suo pezzo di linea (::before il binario, ::after la parte piena per --g, la calcola il copione): quando le tappe non stanno su una riga il percorso va a capo come una frase, e quante per riga (--c, righe pari) lo decide il copione dalla larghezza vera. Il binario è chiuso ai due capi del percorso e aperto dove va a capo. Quando il riquadro è stretto (il telefono) la stessa linea va in verticale (qui sotto, @container). */ /* 166 come nella bozza (cinque premi in 912 px): «Il cappellino di Cultura / Digitale, in regalo» sta in due righe */ :is(.app, body) .pnt-premi{ container-type:inline-size; --pnt-tappa:166px; --pnt-col:182px } :is(.app, body) .pnt-linea{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--c, 1), minmax(0, 1fr)); row-gap:28px } :is(.app, body) .pnt-pr{ position:relative; display:grid; grid-template-rows:22px 26px auto; justify-items:center; padding:0 8px; min-width:0 } :is(.app, body) .pnt-pr::before, :is(.app, body) .pnt-pr::after{ content:""; position:absolute; left:0; top:31px; height:8px; box-sizing:border-box; pointer-events:none } :is(.app, body) .pnt-pr::before{ right:0; border-block:1px solid var(--pnt-ln-f); background:var(--pnt-sf3) } :is(.app, body) .pnt-pr:first-child::before{ border-left:1px solid var(--pnt-ln-f) } :is(.app, body) .pnt-pr:last-child::before{ border-right:1px solid var(--pnt-ln-f) } /* niente transizione sulla parte piena: la linea si ridisegna intera (nessun pezzo cresce davvero), e passando dal verticale all'orizzontale la parte piena partiva da 8 px e si vedeva a metà strada */ :is(.app, body) .pnt-pr::after{ width:var(--g, 0%); background:repeating-linear-gradient(90deg, var(--pnt, var(--bt-accent)) 0 5px, transparent 5px 7px) } :is(.app, body) .pnt-pr-n{ font-family:var(--font-mono, var(--bt-font-body)); font-size:.8rem; font-weight:800; line-height:22px; color:var(--bt-ink); font-variant-numeric:tabular-nums; white-space:nowrap } :is(.app, body) .pnt-pr-n small{ font-size:.8rem; font-weight:600; color:var(--bt-muted) } :is(.app, body) .pnt-pr-no .pnt-pr-n{ color:var(--bt-muted) } :is(.app, body) .pnt-pr-segno{ z-index:1; align-self:center; width:16px; height:16px; box-sizing:border-box; border:2px solid var(--pnt-ln-f); background:var(--bt-ground) } :is(.app, body) .pnt-pr-arriva .pnt-pr-segno{ border-color:var(--pnt, var(--bt-accent)); background:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-pr-qui .pnt-pr-segno{ border-color:var(--pnt, var(--bt-accent)) } /* la tappa: larga --pnt-tappa (mai di più), sotto il suo segno */ :is(.app, body) .pnt-pr > .pnt-pr-card{ display:grid; gap:10px; align-content:start; width:min(100%, var(--pnt-tappa)); padding-top:12px; color:inherit; text-decoration:none; min-width:0 } :is(.app, body) .pnt-pr-media, :is(.app, body) .pnt-pa-media, :is(.app, body) .pnt-su-media{ position:relative; display:block; aspect-ratio:1; overflow:hidden; border:1px solid var(--bt-line); background:var(--pnt-sf3) } :is(.app, body) .pnt-pr-media img, :is(.app, body) .pnt-pr-media video, :is(.app, body) .pnt-pa-media img, :is(.app, body) .pnt-pa-media video, :is(.app, body) .pnt-su-media img, :is(.app, body) .pnt-su-media video{ display:block; width:100%; height:100%; object-fit:cover } :is(.app, body) .pnt-pr-no .pnt-pr-media img, :is(.app, body) .pnt-pa-no .pnt-pa-media img{ filter:grayscale(1) brightness(.32) } :is(.app, body) .pnt-pr-chiuso{ position:absolute; inset:0; display:grid; place-items:center; color:var(--bt-ink) } :is(.app, body) .pnt-pr-chiuso svg{ width:26px; height:26px } :is(.app, body) .app a.pnt-pr-card:hover .pnt-pr-media, :is(.app, body) .app a.pnt-pa-media:hover{ border-color:var(--pnt, var(--bt-accent)) } :is(.app, body) .app a.pnt-pr-card:focus-visible, :is(.app, body) .app a.pnt-pa-media:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:3px } :is(.app, body) .pnt-pr-t{ display:grid; gap:5px; min-width:0 } /* il nome in due righe al massimo, poi i puntini (il nome intero è nel title) */ :is(.app, body) .pnt-pr-t b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.88rem; font-weight:700; line-height:1.3; color:var(--bt-ink) } :is(.app, body) .pnt-pr-no .pnt-pr-t b{ color:var(--bt-muted) } :is(.app, body) .pnt-pr-st{ display:flex; gap:5px; align-items:center; font-size:.76rem; font-weight:600; line-height:1.3; color:var(--bt-muted) } :is(.app, body) .pnt-pr-st svg{ width:14px; height:14px; flex:none; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-pr-st-si{ color:var(--bt-ink) } /* «Prendilo» sulla linea: la scheda intera si tocca, il pulsante dice cosa succede */ :is(.app, body) .pnt-pr-bt{ justify-self:start; display:inline-flex; align-items:center; padding:7px 12px; background:var(--pnt, var(--bt-accent)); color:var(--pnt-ink, var(--bt-accent-ink, var(--bt-ground))); font-family:var(--bt-font-body); font-size:.8rem; font-weight:800 } :is(.app, body) .app a.pnt-pr-card:hover .pnt-pr-bt{ background:var(--bt-ink); color:var(--bt-ground) } /* ---------------- «Premi sbloccati» ---------------- */ :is(.app, body) .pnt-pa-intro{ font-size:.92rem; line-height:1.5; color:var(--bt-muted); max-width:70ch } :is(.app, body) .pnt-pa-l{ list-style:none; padding:0; display:grid; gap:16px } :is(.app, body) .pnt-pa{ display:grid; grid-template-columns:184px minmax(0, 1fr); gap:24px; align-items:start; padding:18px; border:1px solid var(--bt-line); background:var(--bt-card) } :is(.app, body) .pnt-pa-ev{ border-color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-pa-t{ display:grid; gap:10px; align-content:start; min-width:0 } :is(.app, body) .pnt-pa-eti{ font-size:.88rem; font-weight:700; line-height:1.3; color:var(--pnt, var(--bt-accent)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } :is(.app, body) .pnt-pa-no .pnt-pa-eti{ color:var(--bt-muted) } :is(.app, body) .pnt-pa h4{ font-family:var(--bt-font-display); font-size:1.25rem; font-weight:800; line-height:1.2; letter-spacing:-.01em; color:var(--bt-ink) } :is(.app, body) .pnt-pa p{ font-size:.92rem; line-height:1.5; color:var(--bt-muted); max-width:62ch } :is(.app, body) .pnt-pa-az{ display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-top:6px } :is(.app, body) .pnt-pa-vuoto{ padding:18px; border:1px dashed var(--pnt-ln-f); font-size:.92rem; color:var(--bt-muted) } /* il codice: si vede tutto e si copia col pulsante accanto (o toccando l'immagine) */ :is(.app, body) .pnt-codice{ display:inline-flex; align-items:stretch; border:1px dashed var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-codice code{ display:flex; align-items:center; padding:0 14px; white-space:nowrap; font-family:var(--font-mono, var(--bt-font-body)); font-size:.95rem; font-weight:800; letter-spacing:.06em; color:var(--bt-ink); background:none } :is(.app, body) .pnt-codice-bt{ white-space:nowrap; display:inline-flex; align-items:center; gap:8px; padding:11px 14px; border:0; border-left:1px dashed var(--pnt, var(--bt-accent)); background:transparent; color:var(--pnt, var(--bt-accent)); font-family:var(--bt-font-body); font-size:.85rem; font-weight:800; cursor:pointer } :is(.app, body) .pnt-codice-bt svg{ width:16px; height:16px; flex:none } :is(.app, body) .pnt-codice-bt:hover{ background:var(--bt-ink); color:var(--bt-ground) } :is(.app, body) .pnt-codice-bt.pnt-copiato{ background:var(--pnt, var(--bt-accent)); color:var(--pnt-ink, var(--bt-accent-ink, var(--bt-ground))) } :is(.app, body) .pnt-codice-bt:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:2px } :is(.app, body) .pnt-pa-vai{ padding-bottom:2px; border-bottom:1px solid var(--pnt, var(--bt-accent)); font-size:.88rem; font-weight:700; color:var(--bt-ink); text-decoration:none } :is(.app, body) .pnt-pa-vai:hover{ color:var(--bt-accent) } /* il codice di un premio non ancora preso: i pallini e il perché */ :is(.app, body) .pnt-codice-chiuso{ border-style:dashed; border-color:var(--pnt-ln-f) } :is(.app, body) .pnt-codice-chiuso code{ color:var(--bt-muted); letter-spacing:.2em } :is(.app, body) .pnt-codice-chiuso span{ display:flex; align-items:center; padding:0 14px; border-left:1px dashed var(--pnt-ln-f); font-size:.85rem; font-weight:600; color:var(--bt-muted); white-space:nowrap } /* nei movimenti: un premio preso toglie CultXP (il numero col meno, non nel colore dei punti) */ :is(.app, body) .pnt-mov-meno .pnt-mov-v{ color:var(--bt-muted) } /* nel menu dell'area: quanti premi sono tuoi */ :is(.app, body) .pnt-nav-n{ display:inline-grid; place-items:center; min-width:22px; height:22px; margin-left:auto; padding:0 6px; border:1px solid var(--pnt, var(--bt-accent)); color:var(--pnt, var(--bt-accent)); font-size:.75rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums } /* i movimenti, per giorno */ :is(.app, body) .pnt-giorno{ font-size:.88rem; font-weight:700; line-height:1.3; color:var(--bt-muted); margin:6px 0 2px !important } :is(.app, body) .pnt-mov{ list-style:none; padding:0; display:grid; border-top:1px solid var(--bt-line) } :is(.app, body) .pnt-mov li{ display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:12px 2px; border-bottom:1px solid var(--bt-line) } /* due righe corte: cosa (in chiaro) e su cosa; ognuna su una riga sola, i puntini se il titolo è lungo */ :is(.app, body) .pnt-mov-ico{ display:grid; place-items:center; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-mov-ico svg{ width:20px; height:20px } :is(.app, body) .pnt-mov-t{ display:grid; gap:2px; min-width:0 } :is(.app, body) .pnt-mov-t > *{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } :is(.app, body) .pnt-mov-t b{ font-size:.95rem; font-weight:700; line-height:1.35; color:var(--bt-ink) } :is(.app, body) .pnt-mov-t span{ font-size:.88rem; line-height:1.4; color:var(--bt-muted) } :is(.app, body) .pnt-mov-v{ font-family:var(--bt-font-display); font-size:1rem; font-weight:800; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums; white-space:nowrap } :is(.app, body) .pnt-tutti{ justify-self:start; padding:10px 16px; border:1px solid var(--pnt, var(--bt-accent)); background:transparent; color:var(--bt-ink); font:inherit; font-size:.85rem; font-weight:700; cursor:pointer } :is(.app, body) .pnt-tutti:hover{ background:var(--bt-ink); color:var(--bt-ground); border-color:var(--bt-ink) } :is(.app, body) .pnt-tutti:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:3px } /* ---------------- la puntata ---------------- */ /* la riga dei punti, attaccata sotto al lettore (stesso fondo e bordo, senza la riga in mezzo) */ :is(.app, body) .pnt-lettore{ margin-top:-1px; border:1px solid var(--bt-line); background:var(--bt-card) } /* due versioni nella stessa pagina (la pagina è uguale per tutti): quale si vede lo dice il segno «chi è entrato» */ :is(.app, body) .pnt-fuori, :is(.app, body) .pnt-dentro{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; column-gap:18px; align-items:center; padding:14px 18px } :is(.app, body) .pnt-dentro{ grid-template-columns:auto minmax(0, 1fr) } :is(.app, body) .pnt-lettore:not(.chi-dentro) .pnt-dentro, :is(.app, body) .pnt-lettore.chi-dentro .pnt-fuori{ display:none } :is(.app, body) .pnt-l-ico{ display:grid; place-items:center; width:62px; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-l-ico svg{ width:26px; height:26px } :is(.app, body) .pnt-l-t{ display:grid; gap:8px; min-width:0 } :is(.app, body) .pnt-l-t > *{ margin:0 } :is(.app, body) .pnt-l-tit{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; font-size:.95rem; line-height:1.35; color:var(--bt-ink) } :is(.app, body) .pnt-l-tit b{ font-family:var(--bt-font-display); font-size:1.25rem; font-weight:800; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums } :is(.app, body) .pnt-fuori .pnt-l-tit b{ font-family:var(--bt-font-body); font-size:.95rem; color:var(--bt-ink) } :is(.app, body) .pnt-l-tit span{ font-weight:700 } :is(.app, body) .pnt-l-di{ margin-left:auto; font-size:.8rem; font-weight:600 !important; color:var(--bt-muted); font-variant-numeric:tabular-nums } /* la barra è quella dei voti del tema (.vt-avanza, gialla): nella riga dei punti prende il colore dei punti */ :is(.app, body) .pnt-l-t small{ font-size:.82rem; line-height:1.45; color:var(--bt-muted) } :is(.app, body) .pnt-batti{ animation:pnt-batti .45s ease-out } :is(.app, body) .pnt-l-bt, :is(.app, body) .pnt-su .pnt-l-bt{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 16px; background:var(--pnt, var(--bt-accent)); color:var(--pnt-ink, var(--bt-accent-ink, var(--bt-ground))); font-family:var(--bt-font-body); font-size:.85rem; font-weight:800; text-decoration:none; white-space:nowrap; border:0; cursor:pointer } :is(.app, body) .pnt-l-bt:hover, :is(.app, body) .pnt-su .pnt-l-bt:hover{ background:var(--bt-ink); color:var(--bt-ground) } :is(.app, body) .pnt-l-bt:focus-visible, :is(.app, body) .pnt-su .pnt-l-bt:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:3px } @keyframes pnt-batti{ 0%{ transform:scale(1) } 35%{ transform:scale(1.18) } 100%{ transform:scale(1) } } /* nel «Condividi»: la frase sotto i tasti */ :is(.app, body) .pnt-cond{ display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; font-size:.88rem; line-height:1.5; color:var(--bt-muted) } :is(.app, body) .pnt-cond svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-cond b{ color:var(--bt-ink) } /* nella barra in basso: il conto di questa puntata */ /* (11/10/26, la barra «Tempo e punti» di Cultura) Il tema dà il posto ([data-b-pt]) e la forma dei contatori (.barra-conto, .barra-num, .barra-di); qui il colore dei CultXP e la spiegazione che si apre toccandoli, sopra la barra. */ :is(.app, body) .pnt-bpt{ text-align:left; cursor:pointer } :is(.app, body) .pnt-bpt .barra-num{ color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-bpt .barra-num svg{ flex:none; width:22px; height:22px } :is(.app, body) .pnt-bpt .barra-di{ color:var(--tx-2, var(--bt-muted)) } :is(.app, body) .pnt-bpt[data-modo="tetto"] .barra-num{ color:var(--tx-2, var(--bt-muted)) } /* solo col mouse: sul telefono il «passaggio» resta attaccato dopo il tocco e la scritta restava sottolineata */ @media (hover:hover){ :is(.app, body) .pnt-bpt:hover .barra-di{ text-decoration:underline; text-underline-offset:3px } } :is(.app, body) .pnt-bpt-num .pnt-batti, :is(.app, body) .pnt-bpt [data-pnt-bpt-n].pnt-batti{ display:inline-block } :is(.app, body) .pnt-bspiega{ position:absolute; z-index:3; bottom:calc(100% + 10px); right:clamp(16px, 2.4vw, 32px); width:min(340px, calc(100vw - 32px)); display:grid; gap:8px; padding:16px; background:var(--pnt-sf3, var(--sf-3)); border:1px solid var(--pnt-ln-f, var(--ln-f)); box-shadow:0 12px 34px rgba(0,0,0,.45); text-align:left } :is(.app, body) .pnt-bspiega[hidden]{ display:none } :is(.app, body) .pnt-bspiega b{ display:flex; align-items:center; gap:8px; margin:0; font-size:15px; font-weight:700; line-height:1.35; color:var(--bt-ink, var(--tx)) } :is(.app, body) .pnt-bspiega b svg{ flex:none; width:20px; height:20px; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-bspiega p{ margin:0; font-size:13px; font-weight:500; line-height:1.5; color:var(--tx-2, var(--bt-muted)); text-wrap:pretty } :is(.app, body) .pnt-bspiega-bt{ justify-self:start; display:inline-flex; align-items:center; min-height:40px; padding:0 18px; background:var(--acido, var(--bt-accent)); color:#101733; font-size:14px; font-weight:700; text-decoration:none } @media (max-width:820px){ :is(.app, body) .pnt-bpt{ min-height:40px; display:grid; align-content:center } :is(.app, body) .pnt-bpt .barra-num svg{ width:15px; height:15px } :is(.app, body) .pnt-bpt-di{ display:none } :is(.app, body) .pnt-bspiega{ right:16px } } /* ---------------- i messaggi ---------------- */ :is(.app, body) .pnt-toasts{ position:fixed; left:20px; bottom:94px; z-index:80; display:grid; gap:10px; width:min(380px, calc(100vw - 40px)); pointer-events:none } :is(.app, body) .pnt-t{ display:flex; gap:12px; align-items:baseline; padding:13px 16px; border:1px solid var(--pnt-ln-f); border-left:4px solid var(--pnt, var(--bt-accent)); background:var(--pnt-sf3); color:var(--bt-ink); font-family:var(--bt-font-body); font-size:.88rem; line-height:1.45; box-shadow:0 14px 40px color-mix(in srgb, var(--bt-ground) 60%, transparent); animation:pnt-entra .35s ease-out } :is(.app, body) .pnt-t b{ flex:none; font-family:var(--bt-font-display); font-size:1rem; font-weight:800; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums } :is(.app, body) .pnt-t-ico{ flex:none; align-self:center; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-t-ico svg{ display:block; width:18px; height:18px } :is(.app, body) .pnt-t-via{ opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s } @keyframes pnt-entra{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } /* ---------------- il passaggio di livello: un momento solo ---------------- */ /* più alta dello schermo (un livello nuovo con tanti premi insieme, il telefono girato) la finestra si scorre: il margine automatico la tiene in mezzo quando c'è posto e diventa zero quando non c'è, così la cima non si taglia */ :is(.app, body) .pnt-su{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; overflow-y:auto; overscroll-behavior:contain; background:color-mix(in srgb, var(--bt-ground) 86%, transparent) } :is(.app, body) .pnt-su > .pnt-su-c{ margin:auto } :is(.app, body) .pnt-su-c{ display:grid; gap:16px; width:min(560px, 100%); padding:28px; border:1px solid var(--pnt, var(--bt-accent)); background:var(--bt-card); color:var(--bt-ink); font-family:var(--bt-font-body); box-shadow:0 30px 80px color-mix(in srgb, var(--bt-ground) 70%, transparent); opacity:0; transform:translateY(14px) scale(.98); transition:opacity .35s ease-out, transform .45s cubic-bezier(.2, .8, .2, 1) } :is(.app, body) .pnt-su-on .pnt-su-c{ opacity:1; transform:none } :is(.app, body) .pnt-su-c:focus{ outline:none } :is(.app, body) .pnt-su-c > *{ margin:0 } :is(.app, body) .pnt-su-eti{ font-size:.95rem; font-weight:700; letter-spacing:0; text-transform:none; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-su h2{ font-family:var(--bt-font-display); font-size:clamp(2rem, 5vw, 2.8rem); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--bt-ink) } :is(.app, body) .pnt-su p{ font-size:.98rem; line-height:1.5; color:var(--bt-muted) } :is(.app, body) .pnt-su-apre{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--pnt-ln-f); color:var(--bt-ink) !important } :is(.app, body) .pnt-su-apre svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-su-bt{ display:flex; flex-wrap:wrap; gap:12px; align-items:center } :is(.app, body) .pnt-su-chiudi{ min-height:44px; padding:11px 16px; border:1px solid var(--pnt-ln-f); background:transparent; color:var(--bt-ink); font-family:var(--bt-font-body); font-size:.85rem; font-weight:700; cursor:pointer } :is(.app, body) .pnt-su-chiudi:hover{ border-color:var(--bt-ink) } :is(.app, body) .pnt-su-chiudi:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:3px } :is(.app, body) .pnt-su-scala .pnt-gr-barra{ height:22px } :is(.app, body) .pnt-su-premio{ display:grid; grid-template-columns:72px minmax(0, 1fr); gap:14px; align-items:center; padding:12px; border:1px solid var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-su-pt{ display:grid; gap:3px; min-width:0 } :is(.app, body) .pnt-su-pt small{ font-size:.85rem; font-weight:700; color:var(--pnt, var(--bt-accent)) } /* il nome del premio in due righe al massimo, poi i puntini (intero nel title) */ :is(.app, body) .pnt-su-pt b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:1rem; font-weight:800; line-height:1.3; color:var(--bt-ink) } :is(.app, body) .pnt-su-costo{ font-size:.85rem; font-weight:700; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-su .pnt-su-tit{ font-size:clamp(1.4rem, 3.4vw, 1.8rem); line-height:1.2; letter-spacing:-.015em } /* ---------------- alla cassa: sotto il codice sconto ---------------- */ /* Il riquadro sta nel riepilogo vero del carrello: col bordo tratteggiato dei codici, il numero da scrivere a 16px (sennò l'iPhone ingrandisce), l'euro accanto nel colore dei punti. Il pulsante è quello del codice sconto. */ /* nessun margine: lo spazio lo mette il riepilogo (una griglia con gap 16), sennò si somma (26 e 32 invece di 16) */ :is(.app, body) .pnt-cassa{ display:grid; gap:8px; margin:0; padding:14px 16px; border:1px dashed var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-cassa[hidden]{ display:none } :is(.app, body) .pnt-cassa.pnt-lampo{ animation:pnt-lampo 1.1s ease-out 1 } @keyframes pnt-lampo{ 0%, 100%{ box-shadow:0 0 0 0 transparent } 25%, 55%{ border-color:var(--bt-accent); background:color-mix(in srgb, var(--bt-accent) 14%, transparent); box-shadow:0 0 0 3px var(--bt-accent) } } @media (prefers-reduced-motion: reduce){ :is(.app, body) .pnt-cassa.pnt-lampo{ animation:none; border-color:var(--bt-accent); box-shadow:0 0 0 3px var(--bt-accent) } } :is(.app, body) .pnt-cassa > *{ margin:0 } :is(.app, body) .pnt-cassa-tit{ display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--bt-ink) } :is(.app, body) .pnt-cassa-tit b{ font-weight:800 } :is(.app, body) .pnt-cassa-ico{ display:grid; place-items:center; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-cassa-ico svg{ width:18px; height:18px } :is(.app, body) .pnt-cassa-ne{ font-size:.85rem; line-height:1.45; color:var(--bt-muted); text-wrap:balance } :is(.app, body) .pnt-cassa-ne b{ color:var(--bt-ink); font-weight:700 } :is(.app, body) .pnt-cassa-riga{ display:flex; align-items:center; gap:10px; min-width:0 } :is(.app, body) .pnt-cassa-riga input{ width:96px; min-height:44px; padding:8px 10px; box-sizing:border-box; border:1px solid var(--pnt-ln-f); background:var(--bt-ground); color:var(--bt-ink); font:inherit; font-size:16px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums } :is(.app, body) .pnt-cassa-riga input:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:1px } :is(.app, body) .pnt-cassa-eur{ flex:1; min-width:0; font-weight:800; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums; white-space:nowrap } :is(.app, body) .pnt-cassa-nota{ font-size:.75rem; line-height:1.4; color:var(--bt-muted) } :is(.app, body) .pnt-cassa-cr strong{ color:var(--pnt, var(--bt-accent)) } /* prodotto per prodotto: quanto si paga coi CultXP, una riga per prodotto */ :is(.app, body) .pnt-cassa-regole{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:.8rem; line-height:1.35 } :is(.app, body) .pnt-cassa-regole li{ display:flex; justify-content:space-between; gap:12px } :is(.app, body) .pnt-cassa-regole span{ min-width:0; color:var(--bt-muted) } :is(.app, body) .pnt-cassa-regole b{ flex:none; font-weight:700; color:var(--bt-ink) } /* un titolo lungo sta in due righe, poi i puntini (il titolo intero nel title) */ :is(.app, body) .pnt-cassa-regole span{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } /* AL TELEFONO IL RIQUADRO STA IN FONDO (10/10/26 sera): sotto i prodotti una riga lo dice e ci porta. Solo quando il riepilogo sta sotto (lo decide il copione guardando dove sta il riquadro). Nessun margine: lo spazio è della colonna. */ :is(.app, body) .pnt-cassa-su{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0; padding:12px 16px; border:1px dashed var(--pnt, var(--bt-accent)); font-size:.9rem; line-height:1.45; color:var(--bt-ink) } :is(.app, body) .pnt-cassa-su[hidden]{ display:none } /* l'icona in alto, centrata sulla prima riga, come nel resto della piattaforma: con la frase su due righe stava a metà (12/10/26) */ :is(.app, body) .pnt-cassa-su > .pnt-cassa-ico{ align-self:flex-start; height:1.5em; height:1lh } :is(.app, body) .pnt-cassa-su .pnt-cassa-su-t{ flex:1 1 220px; min-width:0; text-wrap:balance } :is(.app, body) .pnt-cassa-su .pnt-cassa-su-t b{ font-weight:800 } :is(.app, body) .pnt-cassa-su .pnt-pa-vai{ flex:none; padding-bottom:2px; border-bottom:1px solid var(--pnt, var(--bt-accent)); font-size:.88rem; font-weight:700; color:var(--bt-ink); text-decoration:none; white-space:nowrap } :is(.app, body) .pnt-cassa-riga a.bt-btn{ text-decoration:none } /* ---------------- la scheda di un prodotto della cassa («tutto coi CultXP» o «in parte») ---------------- */ :is(.app, body) .pnt-solo{ display:grid; gap:10px; padding:16px 18px; border:1px dashed var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-solo[hidden]{ display:none } :is(.app, body) .pnt-solo > *{ margin:0 } :is(.app, body) .pnt-solo-prezzo{ display:flex; align-items:baseline; gap:8px } :is(.app, body) .pnt-solo-prezzo b{ font-family:var(--bt-font-display); font-size:1.7rem; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--pnt, var(--bt-accent)); font-variant-numeric:tabular-nums } :is(.app, body) .pnt-solo-prezzo span{ font-size:1rem; font-weight:700; color:var(--bt-ink) } :is(.app, body) .pnt-solo-prezzo small{ margin-left:auto; font-size:.88rem; font-weight:700; color:var(--pnt, var(--bt-accent)); white-space:nowrap } /* come nel riquadro in alto dell'area: righe etichetta → valore, mai a capo */ /* i dati in una fila di colonne, l'etichetta sopra il valore (12/10/26: erano quattro righe una sotto l'altra e il riquadro prendeva mezza scheda); quando il riquadro è stretto vanno a capo da sole, due per riga */ :is(.app, body) .pnt-solo-dati{ display:grid; grid-template-columns:repeat(auto-fit, minmax(88px, 1fr)); gap:10px 14px; padding-top:10px; border-top:1px solid var(--bt-line) } :is(.app, body) .pnt-solo-dati div{ display:grid; gap:2px; align-content:start } :is(.app, body) .pnt-solo-dati dt{ font-size:.8rem; color:var(--bt-muted); white-space:nowrap } :is(.app, body) .pnt-solo-dati dd{ margin:0; font-size:.95rem; font-weight:700; color:var(--bt-ink); white-space:nowrap; font-variant-numeric:tabular-nums } :is(.app, body) .pnt-solo-manca{ color:var(--pnt, var(--bt-accent)) } /* quante unità coi punti e le altre in euro (a_persona, 10/10/26 sera) */ :is(.app, body) .pnt-solo-frase{ font-size:.92rem; font-weight:400; line-height:1.45; color:var(--bt-body-ink, var(--bt-ink)); text-wrap:balance } :is(.app, body) .pnt-solo-az{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px } :is(.app, body) .pnt-solo-preso{ display:flex; align-items:center; gap:8px; font-size:.92rem; font-weight:700; line-height:1.35; color:var(--bt-ink) } :is(.app, body) .pnt-solo-preso svg{ width:18px; height:18px; flex:none; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-solo a.pnt-l-bt{ text-decoration:none } :is(.app, body) .pnt-solo .pnt-l-bt{ display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; background:var(--pnt, var(--bt-accent)); color:var(--pnt-ink, var(--bt-accent-ink, var(--bt-ground))); border:0; font-family:var(--bt-font-body); font-size:.92rem; font-weight:800; cursor:pointer } :is(.app, body) .pnt-solo .pnt-l-bt:hover{ background:var(--bt-ink); color:var(--bt-ground) } :is(.app, body) .pnt-solo .pnt-pa-vai{ padding-bottom:2px; border-bottom:1px solid var(--pnt, var(--bt-accent)); font-size:.88rem; font-weight:700; color:var(--bt-ink); text-decoration:none } /* ---------------- da fuori: il richiamo coi premi, sotto la riga dei punti ---------------- */ :is(.app, body) .pnt-richiamo{ grid-column:1 / -1; display:grid; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--bt-line) } :is(.app, body) .pnt-ri-tit{ margin:0; font-size:.95rem; font-weight:700; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-ri-l{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px } :is(.app, body) .pnt-ri-l li{ display:grid; grid-template-columns:56px minmax(0, 1fr); gap:10px; align-items:center; min-width:0 } :is(.app, body) .pnt-ri-img{ display:block; aspect-ratio:1; overflow:hidden; border:1px solid var(--bt-line); background:var(--pnt-sf3) } :is(.app, body) .pnt-ri-img img, :is(.app, body) .pnt-ri-img video{ display:block; width:100%; height:100%; object-fit:cover } :is(.app, body) .pnt-ri-t{ display:grid; gap:2px; min-width:0 } :is(.app, body) .pnt-ri-t b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.85rem; font-weight:700; line-height:1.3; color:var(--bt-ink) } :is(.app, body) .pnt-ri-t small{ font-size:.78rem; font-weight:700; color:var(--pnt, var(--bt-accent)) } @media (prefers-reduced-motion: reduce){ :is(.app, body) .pnt-gr-barra i, :is(.app, body) .pnt-su-c, :is(.app, body) .pnt-t-via{ transition:none } :is(.app, body) .pnt-t, :is(.app, body) .pnt-batti{ animation:none } } /* ---------------- telefono ---------------- */ @media (max-width:820px){ :is(.app, body) .pnt-eroe{ grid-template-columns:1fr; padding:20px 18px; gap:20px } :is(.app, body) .pnt-eroe-dati{ grid-template-columns:1fr; gap:10px } :is(.app, body) .pnt-eroe-dati div{ display:flex; align-items:baseline; justify-content:space-between; gap:16px } :is(.app, body) .pnt-toasts{ left:16px; right:16px; width:auto; top:76px; bottom:auto } } @media (max-width:620px){ /* sotto i blocchi della scala i nomi non ci stanno: il livello di adesso lo dice la riga sopra («Livello Player»), il prossimo quella sotto («Ti mancano… per Pro») */ :is(.app, body) .pnt-gr-nome, :is(.app, body) .pnt-gr-da{ display:none } :is(.app, body) .pnt-modo{ grid-template-columns:40px minmax(0, 1fr); row-gap:10px } :is(.app, body) .pnt-modo-ico{ width:40px; height:40px } :is(.app, body) .pnt-modo-v{ grid-column:2; justify-items:start; text-align:left; grid-auto-flow:column; align-items:baseline; gap:8px; justify-content:start } :is(.app, body) .pnt-modo-v b{ font-size:1.25rem } :is(.app, body) .pnt-oggi{ grid-template-columns:minmax(0, 1fr) auto } :is(.app, body) .pnt-fuori, :is(.app, body) .pnt-dentro{ grid-template-columns:auto minmax(0, 1fr); column-gap:14px; padding:14px } :is(.app, body) .pnt-l-ico{ width:40px } :is(.app, body) .pnt-fuori .pnt-l-bt{ grid-column:1 / -1; margin-top:12px } :is(.app, body) .pnt-ri-l{ grid-template-columns:minmax(0, 1fr) } :is(.app, body) .pnt-l-di{ margin-left:0 } :is(.app, body) .pnt-su-c{ padding:22px } /* un premio sbloccato: immagine e titolo affiancati, il testo e i pulsanti sotto a tutta larghezza */ :is(.app, body) .pnt-pa{ grid-template-columns:96px minmax(0, 1fr); gap:8px 14px; padding:14px } :is(.app, body) .pnt-pa-t{ display:contents } :is(.app, body) .pnt-pa-media{ grid-column:1; grid-row:1 / span 2 } :is(.app, body) .pnt-pa-eti{ grid-column:2; grid-row:1; align-self:end } :is(.app, body) .pnt-pa h4{ grid-column:2; grid-row:2; align-self:start; font-size:1.05rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } :is(.app, body) .pnt-pa p, :is(.app, body) .pnt-pa-az{ grid-column:1 / -1 } :is(.app, body) .pnt-pa p{ margin-top:6px !important } /* il codice di un premio preso: al telefono il codice e «Copia il codice» non stanno affiancati (il codice andava a capo a metà, «CULTXP- / CNRGX5»): il codice sopra, il pulsante sotto, a tutta larghezza; così anche quello chiuso */ :is(.app, body) .pnt-pa .pnt-codice{ display:grid; grid-template-columns:minmax(0, 1fr); width:100% } :is(.app, body) .pnt-pa .pnt-codice code{ padding:11px 14px } :is(.app, body) .pnt-pa .pnt-codice-bt{ justify-content:center; border-left:0; border-top:1px dashed var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-pa .pnt-codice-chiuso span{ padding:11px 14px; border-left:0; border-top:1px dashed var(--pnt-ln-f) } } /* la linea dei premi in verticale quando il suo riquadro è stretto (il telefono, e la finestra stretta fino a 520): il binario a sinistra, i punti sopra la tappa, la miniatura e le parole accanto. Ogni tappa tiene il suo pezzo di binario, pieno dall'alto per --g; il segno sta a metà della tappa, come in orizzontale. */ @container (max-width:599px){ :is(.app, body) .pnt-linea{ grid-template-columns:minmax(0, 1fr); row-gap:0 } :is(.app, body) .pnt-pr{ grid-template-columns:26px minmax(0, 1fr); grid-template-rows:22px auto; column-gap:12px; justify-items:stretch; align-content:center; padding:12px 0 } :is(.app, body) .pnt-pr::before, :is(.app, body) .pnt-pr::after{ top:0; left:9px; width:8px; height:auto } :is(.app, body) .pnt-pr::before{ right:auto; bottom:0; border:0; border-inline:1px solid var(--pnt-ln-f) } :is(.app, body) .pnt-pr:first-child::before{ border-left:1px solid var(--pnt-ln-f); border-top:1px solid var(--pnt-ln-f) } :is(.app, body) .pnt-pr:last-child::before{ border-right:1px solid var(--pnt-ln-f); border-bottom:1px solid var(--pnt-ln-f) } :is(.app, body) .pnt-pr::after{ height:var(--g, 0%); background:repeating-linear-gradient(180deg, var(--pnt, var(--bt-accent)) 0 5px, transparent 5px 7px) } :is(.app, body) .pnt-pr-segno{ grid-column:1; grid-row:1 / -1; justify-self:center; align-self:center } :is(.app, body) .pnt-pr-n{ grid-column:2; grid-row:1; justify-self:start } :is(.app, body) .pnt-pr > .pnt-pr-card{ grid-column:2; grid-row:2; width:100%; grid-template-columns:84px minmax(0, 1fr); gap:12px; align-items:start; padding-top:4px } } /* ---------------- aggiunte del motore ---------------- */ /* la barretta (quella dei voti del tema, coi colori dei punti: qui sua, perché non tutti i temi l'hanno) */ :is(.app, body) .pnt-avanza{ display:block; height:4px; background:var(--pnt-ln-f) } /* parte da zero qui, non con uno style nella pagina (11/10/26: il sorgente pulito, prove-lab); la larghezza la scrive il copione */ :is(.app, body) .pnt-avanza i{ display:block; width:0; height:100%; background:var(--pnt, var(--bt-accent)); transition:width .6s ease-out } :is(.app, body) .pnt-oggi .pnt-avanza{ height:6px } :is(.app, body) .pnt-lettore .pnt-l-t .pnt-avanza{ height:5px } /* l'account da confermare: si dice in cima, col fondino */ :is(.app, body) .pnt-avviso{ margin:0; padding:12px 16px; border-left:4px solid var(--pnt, var(--bt-accent)); background:var(--pnt-sf3); font-size:.92rem; line-height:1.5; color:var(--bt-ink) } :is(.app, body) .pnt-vuoto{ margin:0; padding:18px; border:1px dashed var(--pnt-ln-f); font-size:.92rem; line-height:1.5; color:var(--bt-muted) } :is(.app, body) .pnt-usato{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:var(--bt-ink) } :is(.app, body) .pnt-usato svg{ width:18px; height:18px; flex:none; color:var(--pnt, var(--bt-accent)) } /* la scelta di un premio in regalo che si sceglie (11/10/26: le taglie di una maglietta), prima di «Mettilo nel carrello»: l'etichetta sopra (il nome dell'opzione, «Taglia»), la tendina larga quanto le serve, a 16px come i campi */ :is(.app, body) .pnt-pa-scegli{ display:grid; gap:6px; min-width:0 } :is(.app, body) .pnt-pa-scegli span{ font-size:.85rem; font-weight:700; line-height:1.3; color:var(--bt-ink) } :is(.app, body) .pnt-pa-scegli select{ min-width:160px; max-width:100%; min-height:44px; padding:8px 12px; box-sizing:border-box; border:1px solid var(--pnt-ln-f); border-radius:var(--bt-r-sm, 0); background-color:var(--bt-ground); color:var(--bt-ink); font:inherit; font-size:16px } :is(.app, body) .pnt-pa-scegli select:focus-visible{ outline:2px solid var(--pnt, var(--bt-accent)); outline-offset:1px } :is(.app, body) .pnt-pa-az:has(.pnt-pa-scegli){ align-items:end } :is(.app, body) .pnt-su-eti{ font-size:.95rem; font-weight:700; color:var(--pnt, var(--bt-accent)) } :is(.app, body) .pnt-su-err{ margin:0; padding:10px 12px; border-left:4px solid var(--bt-danger, var(--pnt, var(--bt-accent))); background:var(--pnt-sf3); color:var(--bt-ink) !important; font-size:.9rem } :is(.app, body) .pnt-su[hidden]{ display:none } :is(.app, body) .pnt-cassa-no{ color:var(--bt-ink) !important } :is(.app, body) .cr-extra strong{ color:var(--pnt, var(--bt-accent)) } /* i pulsanti sono pulsanti anche quando sono