/* I caratteri dei dadi: file nostri, ridotti ai soli segni del dado (pochi KB l'uno) e scaricati solo quando un dado li usa. `font-weight:100 900` dice al browser che il file va bene per ogni peso: senza, al tavolo — dove il numero e' in grassetto 900 — gli ingrasserebbe da solo un carattere che e' gia' disegnato pieno, e lo sformerebbe. `swap`: se il file tarda, il numero compare subito nel carattere di riserva invece di restare invisibile. Da dove vengono e le licenze: caratteri/LICENZE.txt. */ @font-face{font-family:"Odad Morbido";src:url("caratteri/morbido.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Cartone";src:url("caratteri/cartone.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Insegna";src:url("caratteri/insegna.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Tabellone";src:url("caratteri/tabellone.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Spaziale";src:url("caratteri/spaziale.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Pixel";src:url("caratteri/pixel.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Pennarello";src:url("caratteri/pennarello.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Scolpito";src:url("caratteri/scolpito.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Elegante";src:url("caratteri/elegante.woff?v=1") format("woff");font-weight:100 900;font-display:swap} @font-face{font-family:"Odad Dattilo";src:url("caratteri/dattilo.woff?v=1") format("woff");font-weight:100 900;font-display:swap} :root{ color-scheme:light only; --carta:#CFCFCB; --inchiostro:#17171F; --giallo:#FFC93C; --blu:#3F6BFF; --corallo:#E8443F; --menta:#16C98B; --bianco:#FFFFFF; --scheda:#FBF6E9; --scheda-cupa:#EFE8D6; --paga:#1F6B2E; --su-accento:#17171F; --si:#0B7A54; --no:#B01F1A; /* La X che chiude il banco dei dadi. Questa SÌ che segue il tema, al contrario del dado: il dado è un oggetto, questa è interfaccia, e l'interfaccia deve stare addosso al fondo su cui è appoggiata. */ --chiudi:#D92B1F; /* Le quattro tinte della rarita'. Misurate sul fondo chiaro: 4.67, 5.56, 6.04 e 5.75 contro il 4.5:1 che qui si chiede a un testo. Il bronzo e' piu' cupo di quanto verrebbe spontaneo (#A8631A si fermava a 4.36) — l'oro acceso si legge sul nero, non sulla carta. */ --rar-noncomune:#2E7D52; --rar-raro:#1B63B5; --rar-epico:#7B3FB5; --rar-leggendario:#8F5210; /* Testo sugli sfondi d'accento. Ogni accento ha il SUO colore di testo: chi dipinge uno sfondo d'accento deve dichiarare anche il colore, mai lasciarlo ereditare — --inchiostro cambia col tema e su un accento fisso diventa illeggibile. Da questa dimenticanza sono nati, uno alla volta, i bottoni neri su nero e il "6" bianco su giallo. */ --su-giallo:var(--su-accento); --su-menta:var(--su-accento); --su-corallo:var(--bianco); --su-blu:var(--bianco); /* Il dado è un OGGETTO, non un pezzo d'interfaccia: è fatto di una materia, e la materia non cambia colore perché hai spento la luce. Per questo questi due non stanno fra i colori del tema e non vengono ridichiarati nel blocco scuro: sono gli stessi identici sempre. Il giorno che i dadi si differenziano — oro, arancio, rosso — ognuno porta i suoi e sovrascrive questi due, e basta. */ --dado-faccia:#F5EFDE; --dado-segno:#17171F; /* Il carattere dei codici sfida: monospaziato, perche' un codice si legge un carattere alla volta e si detta a voce. Vedi `.cod` piu' giu'. */ --carattere-codice:Consolas,"Cascadia Mono","SF Mono",Menlo,"DejaVu Sans Mono", "Liberation Mono",ui-monospace,monospace; --bordo:3px solid var(--inchiostro); --ombra:4px 4px 0 var(--inchiostro); --ombra-alta:6px 6px 0 var(--inchiostro); } /* Tema scuro: sfondo profondo, schede grigie, testo nero. */ :root[data-tema="scuro"]{ --carta:#000000; --scheda:#02031C; --scheda-cupa:#0A0C2E; --inchiostro:#E7EDFF; --blu:#6E93FF; --paga:#A9E80F; --su-accento:#0B0B0E; /* Il blu qui e' schiarito per staccare dal fondo nero, e il bianco sopra scenderebbe a 2,88:1. Con il testo scuro sale a 6,81:1. */ --su-blu:var(--su-accento); --si:#4BE0A0; --no:#FF8A80; --chiudi:#FF8A1F; /* sul nero il rosso spegne: arancione acceso */ /* Sul nero le stesse quattro vanno schiarite, se no spengono: 12.08, 7.05, 9.26 e 13.24:1. Qui il leggendario torna oro, che e' il suo posto. */ --rar-noncomune:#4BE0A0; --rar-raro:#6E93FF; --rar-epico:#C79BFF; --rar-leggendario:#FFC93C; } /* Qui c'erano tre ritocchi cablati che nel tema scuro sostituivano il giallo del marchio con un arancione e il corallo con un rosso, fuori palette. Servivano a rimediare al colore di testo mancante, non a un problema di colore: col testo dichiarato il giallo del marchio fa 12,80:1 contro gli 8,78:1 dell'arancione, e il corallo fa 3,94:1 contro 3,92:1. Tolti: il marchio tiene i suoi colori in tutti e due i temi. */ *{box-sizing:border-box} /* Lo sfondo va forzato su html e body: alcuni contenitori impongono un tema scuro e il testo scuro sparisce. */ html{background:var(--carta) !important} /* Tela dipinta dietro tutto: regge anche se il contenitore impone un tema scuro sul body. */ .fondale{position:fixed;inset:0;background:var(--carta);z-index:-1;pointer-events:none} html,body{margin:0;padding:0} body{ background:var(--carta) !important;color:var(--inchiostro); font-family:"Arial Rounded MT Bold","Trebuchet MS",system-ui,-apple-system,sans-serif; /* Le safe area tengono i contenuti fuori da notch, isola dinamica, bordi curvi e barra gesti. Una volta sola, vale su tutti e due. */ min-height:100dvh; padding: calc(18px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); -webkit-font-smoothing:antialiased; overscroll-behavior-y:none; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; } .wrap{max-width:520px;margin:0 auto} h1{font-size:32px;line-height:1;letter-spacing:-.03em;margin:0;font-weight:900} .sottotesta{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:14px; font-weight:700;color:var(--paga)} .targa{flex:none;background:var(--corallo);color:var(--su-corallo);border:var(--bordo); border-radius:9px;padding:3px 10px;font-size:12.5px;font-weight:900; letter-spacing:.09em;text-transform:uppercase;transform:rotate(-2deg); box-shadow:2px 2px 0 var(--inchiostro)} h1 span{display:inline-block;background:var(--giallo);color:var(--su-giallo);border:var(--bordo); border-radius:10px;padding:3px 10px;transform:rotate(-2deg);box-shadow:var(--ombra)} /* Il selettore della lingua sta nella testata, non sepolto nel profilo: chi apre l'app nella lingua sbagliata deve trovarlo senza dover capire una parola di quello che c'e' scritto intorno. */ .testata{display:flex;align-items:center;justify-content:space-between;gap:12px} /* Tema e lingua stanno accanto perche' sono la stessa categoria di scelta: come vedo questa app su questo dispositivo. Non dicono chi sei. */ button.tema{ flex:none;width:38px;height:38px;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center; background:var(--scheda);color:var(--inchiostro); border:var(--bordo);border-radius:10px;box-shadow:2px 2px 0 var(--inchiostro); } button.tema svg{width:20px;height:20px;display:none} button.tema:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--inchiostro)} button.tema:focus-visible{outline:3px solid var(--blu);outline-offset:2px} :root[data-tema="scuro"] button.tema .sole{display:block} :root[data-tema="chiaro"] button.tema .luna{display:block} /* Solo le differenze di taglia: la scatola vera sta nella regola comune a tutti i menu a tendina, più in basso. */ select.lingua{ flex:none;width:auto;height:38px;font-size:13.5px; border-radius:10px;box-shadow:2px 2px 0 var(--inchiostro); padding:0 33px 0 15px; background-position:calc(100% - 20px) 54%,calc(100% - 15px) 54%; background-size:5px 5px,5px 5px; } select.lingua:active{box-shadow:0 0 0 var(--inchiostro)} @supports (appearance:base-select){ select.lingua{padding:0 15px;gap:9px} select.lingua option{padding:8px 12px;font-size:13.5px} select.lingua::picker-icon{width:11px;height:11px} } /* barra icone */ nav{display:flex;gap:6px;margin:18px 0 16px} nav button{ flex:1;background:var(--scheda);border:var(--bordo);border-radius:14px;cursor:pointer; padding:9px 4px 7px;box-shadow:var(--ombra);font:inherit;color:var(--inchiostro); display:flex;flex-direction:column;align-items:center;gap:4px; } nav button svg{width:24px;height:24px;display:block} nav button b{font-size:10.5px;font-weight:800} nav button[aria-pressed="true"]{background:var(--giallo);color:var(--su-giallo)} nav button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--inchiostro)} nav button:focus-visible{outline:3px solid var(--blu);outline-offset:3px} nav.via{display:none} .scheda{background:var(--scheda);border:var(--bordo);border-radius:16px;box-shadow:var(--ombra);padding:14px;margin-bottom:12px} .riga{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap} .riga:last-child{margin-bottom:0} .riga > label{font-size:14px;font-weight:700} h3{font-size:17px;font-weight:900;margin:0 0 12px;letter-spacing:-.02em} .seg{display:flex;gap:5px;flex-wrap:wrap} .seg button{border:var(--bordo);background:var(--scheda);color:var(--inchiostro); font:inherit;font-size:13.5px;font-weight:700;padding:7px 11px;border-radius:9px;cursor:pointer} .seg button[aria-pressed="true"]{background:var(--giallo);color:var(--su-giallo);box-shadow:2px 2px 0 var(--inchiostro)} .seg button:focus-visible{outline:3px solid var(--blu);outline-offset:2px} .colonna{display:block} .colonna > label{display:block;margin-bottom:10px;font-size:14px;font-weight:700} /* Anche qui il colore va ridichiarato: lo sfondo diventa giallo ma il testo ereditava --inchiostro, che nel tema scuro e' quasi bianco — 1,31:1 sul giallo, illeggibile. --su-accento e' scuro in entrambi i temi. */ .colonna > label b{background:var(--giallo);color:var(--su-giallo);border:2px solid var(--inchiostro);border-radius:7px;padding:0 7px;font-weight:900} .facce{display:flex;gap:6px;flex-wrap:wrap} .facce button{width:46px;height:46px;border:var(--bordo);border-radius:12px;background:var(--scheda); color:var(--inchiostro);font:inherit;font-weight:800;font-size:17px;cursor:pointer;font-variant-numeric:tabular-nums} .facce button[aria-pressed="true"]{background:var(--giallo);color:var(--su-giallo);box-shadow:2px 2px 0 var(--inchiostro)} .facce button.bloccato{opacity:.32;cursor:default;background:var(--scheda);box-shadow:none;position:relative} .facce button.bloccato::after{content:"·";position:absolute;bottom:1px;left:0;right:0;font-size:22px;line-height:.4} .facce button:focus-visible{outline:3px solid var(--blu);outline-offset:2px} .altro{display:flex;align-items:center;gap:9px;margin-top:10px} .altro label{font-size:13px;font-weight:700;opacity:.7} .altro input{width:74px;height:46px} input[type=number],input[type=text],select{ background:var(--scheda);border:var(--bordo);color:var(--inchiostro); font:inherit;font-weight:800;font-size:16px; /* mai sotto 16: iOS zooma */padding:0 10px;height:46px;border-radius:11px; } input[type=number]{width:84px;text-align:center} input:focus-visible,select:focus-visible{outline:3px solid var(--blu);outline-offset:2px} /* Un menu a tendina è un bottone che si apre: quindi ha la scatola degli altri bottoni — bordo spesso, angoli tondi, ombra piena, e si abbassa quando lo premi. La freccia è disegnata qui invece di lasciare quella di sistema, che su certi Android resta bianca su bianco e nel tema scuro sparisce. */ select{ width:100%;cursor:pointer;box-shadow:var(--ombra); padding:0 32px 0 10px; -webkit-appearance:none;appearance:none; background-image: linear-gradient(45deg,transparent 50%,var(--inchiostro) 50%), linear-gradient(135deg,var(--inchiostro) 50%,transparent 50%); background-position:calc(100% - 17px) 54%,calc(100% - 11px) 54%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; } select:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inchiostro)} /* La lista aperta è disegnata dal sistema operativo: per anni non si è potuta toccare. Dove il browser lo consente (Chrome recenti) la prendiamo in mano anche noi; dove non lo consente, questo blocco viene ignorato in blocco e la tendina resta quella di sistema — che è brutta ma funziona. Niente si rompe per colpa di questo. */ @supports (appearance:base-select){ select,select::picker(select){appearance:base-select} /* Il rientro sta sul SELECT. Sull'opzione non funzionerebbe: quando il browser calcola quanto è largo il bottone chiuso non conta il padding dell'opzione dentro, e quel padding finisce tagliato via. */ select{background-image:none;padding:0 12px;display:flex;align-items:center; justify-content:space-between;gap:8px;text-align:left} /* La freccia qui la disegna il browser: basta darle il nostro colore e una misura. Disegnarne una a mano accanto significa averne due. */ select::picker-icon{width:13px;height:13px;flex:none;color:var(--inchiostro); transition:transform .12s} select:open::picker-icon{transform:rotate(180deg)} select::picker(select){ background:var(--scheda);color:var(--inchiostro); border:var(--bordo);border-radius:12px;box-shadow:var(--ombra); padding:6px;margin-top:6px;font:inherit;font-weight:800; } /* L'opzione scelta viene disegnata anche DENTRO il bottone chiuso: è lo stesso elemento. Quindi una regola sola, che vale in tutti e due i posti. */ /* L'imbottitura serve nella LISTA. Nel bottone chiuso l'opzione è solo il valore scelto e il rientro glielo dà già il select. */ select:not(:open) option{padding:0} select option{padding:10px 11px;border-radius:8px;background:transparent; color:var(--inchiostro);font-size:15px;cursor:pointer; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} select option::checkmark{display:none} select option:hover,select option:focus{background:var(--scheda-cupa);outline:none} select option:checked{background:var(--giallo);color:var(--su-giallo)} /* ...tranne una: dentro il bottone chiuso il giallo non ci va, lì è semplicemente il valore scelto, non una voce evidenziata. */ select:not(:open) option:checked{background:transparent;color:var(--inchiostro)} /* Qui la freccia non è più uno sfondo ma un figlio vero della riga: occupa spazio, quindi il rientro a destra tenuto per lo sfondo va tolto o "1995" finisce sotto la punta. */ .data select{padding:0 8px;gap:4px} } button{-webkit-user-select:none;user-select:none;touch-action:manipulation} .grosso{display:block;width:100%;border:var(--bordo);border-radius:14px;cursor:pointer; background:var(--menta);color:var(--su-menta);font:inherit;font-weight:900;font-size:19px; padding:16px;box-shadow:var(--ombra-alta);margin-bottom:10px} /* Il colore va RIDICHIARATO: .grosso imposta color:var(--su-accento), che nel tema chiaro e' inchiostro scuro su scheda chiara e funziona, ma nel tema scuro e' #0B0B0E su #02031C — due neri, contrasto 1,03:1, testo invisibile. Riguardava "Non accetto", "Allenamento contro il bot" e "Due sullo stesso telefono". Con --inchiostro il contrasto e' 17:1 nel tema scuro e 16,5:1 nel chiaro. */ .grosso.calmo{background:var(--scheda);color:var(--inchiostro);font-size:16px;padding:14px;box-shadow:var(--ombra)} /* Durante la ricerca il tasto si spacca in due: a sinistra quanto manca, a destra la via d'uscita. Un'attesa senza un modo di fermarla è un'attesa che si interrompe chiudendo l'app. */ .cerca{display:flex;gap:8px;align-items:stretch} .cerca .grosso{margin-bottom:10px} .cerca #btnPubblica{flex:1;width:auto;min-width:0} .cerca #btnAnnulla{flex:none;width:38%;font-size:15px;margin-bottom:10px} .cerca #btnPubblica[disabled]{opacity:1;cursor:default;transform:none; background:var(--scheda-cupa);color:var(--inchiostro)} /* Tre puntini che si alzano a turno: dicono "sto lavorando" e basta. Senza numeri, perché un numero che scende è una scadenza. */ .cercando{display:inline-flex;gap:4px;margin-right:9px;vertical-align:.06em} .cercando i{width:6px;height:6px;border-radius:99px;background:currentColor; animation:respira 1s infinite ease-in-out} .cercando i:nth-child(2){animation-delay:.16s} .cercando i:nth-child(3){animation-delay:.32s} @keyframes respira{0%,70%,100%{opacity:.25;transform:translateY(0)} 35%{opacity:1;transform:translateY(-4px)}} @media (prefers-reduced-motion:reduce){.cercando i{animation:none;opacity:.6}} .grosso:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--inchiostro)} .grosso:focus-visible{outline:3px solid var(--blu);outline-offset:3px} .grosso[disabled]{opacity:.45;cursor:default;transform:none} .entra{display:block;width:100%;border:var(--bordo);border-radius:13px;cursor:pointer; font:inherit;font-weight:800;font-size:16px;padding:15px;margin-bottom:10px; box-shadow:var(--ombra);background:var(--scheda);color:var(--inchiostro)} .entra.apple{background:#0B0B0E;color:#FFFFFF} /* nero fisso: nel tema scuro l'inchiostro è chiaro */ .entra.ospite{background:var(--scheda-cupa)} .entra:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--inchiostro)} .entra:focus-visible{outline:3px solid var(--blu);outline-offset:3px} /* Spenti: perdono il colore del marchio e prendono quello della scheda. Specificita' scritta per esteso, non affidata all'ordine delle righe — .entra.apple ha due classi e vincerebbe su un selettore piu' debole. */ .entra.google[disabled],.entra.apple[disabled],.entra.ospite[disabled]{ background:var(--scheda-cupa);color:var(--inchiostro);opacity:.5; border-style:dashed;box-shadow:none;pointer-events:none;transform:none} .entra[disabled] .presto{border-width:1.5px;opacity:.9} .intro{font-size:14.5px;font-weight:600;line-height:1.5;margin:2px 0 16px} .nota{font-size:12.5px;font-weight:600;line-height:1.5;margin:10px 2px 0;opacity:.75} .spiega{font-size:12.5px;font-weight:600;line-height:1.45;margin:6px 0 0;opacity:.7} /* !important non e' pigrizia, qui e' la definizione del compito: .via e' una utility che nasconde, e deve battere QUALSIASI display di componente. Senza, perde contro ogni regola dichiarata piu' in basso a parita' di specificita' — ed e' successo davvero: .scelta (display:grid, riga piu' sotto) restava visibile, quindi "Lo prendo" e "Glielo tolgo" erano premibili senza aver tirato, riusando il numero del turno precedente. Stesso difetto su .piu-uno. Il tampone nav.via qui sopra nasceva dalla stessa causa e ora e' superfluo. */ .via{display:none !important} .conto{display:flex;align-items:center;justify-content:space-between;gap:10px; margin-bottom:14px;padding-bottom:12px;border-bottom:2px dashed var(--inchiostro)} .conto span{font-size:13px;font-weight:800} /* Il dado in cima è la porta della personalizzazione. Sta dove prima c'era "Cambia account" perché quello si preme una volta ogni tanto e questo ogni volta che vinci qualcosa: il posto più vistoso va a chi lo usa di più. */ /* Un bordo solo: quello del dado. Il tasto aveva la sua cornice e il dado dentro ne aveva un'altra — due quadrati concentrici, una scatola dentro una scatola. Qui il disegno È il tasto, e la cornice che si vede è quella del dado, che è anche l'unica che significa qualcosa. */ .conto button.iconaDado{flex:none;width:44px;height:44px;padding:0;display:flex; align-items:center;justify-content:center;border:0;border-radius:11px; background:transparent;box-shadow:none;color:var(--inchiostro);cursor:pointer} /* Due disegni nello stesso tasto, come per il sole e la luna: si mostra quello che serve. Aperto il banco, il dado resta ma i puntini diventano una X — e il fondo giallo se ne va, altrimenti una X gialla su giallo sarebbe una X che non c'è. */ .conto button.iconaDado svg{width:44px;height:44px;display:none} .iconaDado[aria-pressed="false"] .dIcona{display:block} .iconaDado[aria-pressed="true"] .dChiudi{display:block} /* Senza ombra, spostarsi di due pixel sembrerebbe una deriva: qui il tasto si stringe, che è l'unico modo di dire "premuto" a un disegno che non ha una scatola sotto. */ .conto button.iconaDado:active{transform:scale(.9);background:transparent} .iconaDado:focus-visible{outline:3px solid var(--blu);outline-offset:1px;border-radius:12px} /* #btnCopia sta dentro .codice, non dentro .conto: il selettore non lo raggiungeva e restava il bottone grezzo del browser, grigio e squadrato in mezzo a tutto il resto. */ .conto button, .codice button, .mini{border:2px solid var(--inchiostro);background:var(--scheda);color:var(--inchiostro); font:inherit;font-size:12px;font-weight:700;padding:5px 9px;border-radius:8px;cursor:pointer} .mini{font-size:13.5px;padding:0 13px;height:46px;border:var(--bordo);border-radius:11px;white-space:nowrap} .mini:active{transform:translate(2px,2px)} .data{display:flex;gap:8px} .data select{flex:1;min-width:0;padding:0 20px 0 7px; background-position:calc(100% - 12px) 54%,calc(100% - 8px) 54%; background-size:5px 5px,5px 5px} /* "settembre" è lungo il doppio di "31" e di "1995": dargli la stessa frazione di riga significa troncarlo. Il mese si prende lo spazio che gli serve, gli altri due quello che avanza. */ .data #mese{flex:2.2} .data #anno{flex:1.25} /* Questo blocco sta QUI e non più su di proposito: .data select rimette un rientro destro di 20px che serviva alla freccia disegnata nello sfondo. Con la freccia vera quel rientro le toglie il posto e la taglia a metà. L'ultima parola deve essere di chi sa quale freccia c'è. */ @supports (appearance:base-select){ .data select{padding:0 9px;gap:4px} .data select option{padding:10px 7px} } .nick-riga{display:flex;gap:8px;align-items:center} /* "In arrivo": stesso vocabolario dei dadi non ancora disponibili — si vede che c'e', si vede che non si tocca, e si capisce perche'. */ .presto{display:inline-block;margin-left:6px;padding:1px 7px;border:2px solid var(--inchiostro); border-radius:99px;background:var(--scheda-cupa);color:var(--inchiostro); font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px} /* Disabilitato non basta: il campo continua a sembrare scrivibile e il tasto premibile. Con pointer-events il clic non arriva proprio, il testo non si seleziona, e il bordo tratteggiato dice a colpo d'occhio "non ora". */ .inArrivo .nick-riga{opacity:.45;pointer-events:none;user-select:none} /* La stessa targhetta cambia di senso invece di sparire: chi ha visto "in arrivo" per settimane deve accorgersi che ora c'e'. Un elemento che si dissolve non lo nota nessuno; uno che diventa verde si'. */ .presto.acceso{background:var(--menta);color:var(--su-menta);border-color:var(--inchiostro)} .inArrivo input[disabled]{border-style:dashed} .inArrivo button[disabled]{border-style:dashed;box-shadow:none} .nick-riga input{flex:1;min-width:0} .esito{font-size:12.5px;font-weight:700;line-height:1.4;margin:9px 0 0;min-height:17px} .esito.no{color:var(--no)} .esito.si{color:var(--si)} .codice{color:var(--su-giallo);display:flex;align-items:center;justify-content:space-between;gap:10px; margin-top:14px;padding:11px 13px;background:var(--giallo);border:var(--bordo); border-radius:13px;box-shadow:2px 2px 0 var(--inchiostro)} .codice small{display:block;font-size:11.5px;font-weight:700;opacity:.75} .codice b{font-size:20px;font-weight:900;word-break:break-all} /* ---------- il carattere dei codici sfida ---------- Un codice si legge da uno schermo e si DIGITA su un altro, spesso dettato a voce da un'altra stanza. Il carattere del testo normale non e' fatto per quello: Segoe UI e Arial disegnano il 2 e la Z, il 5 e la S, il 6 e la G quasi uguali, e a quel punto chi sbaglia non sbaglia per distrazione — sbaglia perche' non c'era niente da vedere. Un monospaziato si': e' il mestiere per cui e' stato disegnato. Consolas su Windows, SF Mono e Menlo su Mac, DejaVu Sans Mono su Linux — tutti umanisti, leggeri, e nessuno di loro stona accanto al carattere del testo. Tutti e tre risolvono le due coppie che contano davvero: 1 / l / I l'uno ha il piedino, la elle no, la i lunga ha le grazie 0 / O lo zero e' segnato — barrato in Consolas, col punto in DejaVu — la O e' liscia Courier era stato provato ed e' stato scartato: leggibilissimo, ma troppo sottile sul riquadro giallo, che e' l'elemento piu' in vista del profilo. E lo zero segnato non ce l'ha: glielo si doveva disegnare sopra, e una protesi di quel tipo si tiene solo se non c'e' alternativa. `slashed-zero` chiede lo zero barrato per via OpenType ai caratteri che sanno farlo. A Consolas non serve (lo ha gia' cosi'), ma non costa niente e copre i ripieghi in fondo alla lista. `letter-spacing` un po' largo perche' un codice si legge un carattere alla volta, non a parole: qui lo spazio aiuta invece di disturbare. */ .codice b, #codiceMio, #codiceAmico, .cod{font-family:var(--carattere-codice);font-variant-numeric:slashed-zero; letter-spacing:.06em} /* Il pallino disegnato sopra lo zero (c'era, e' stato tolto): serviva solo perche' Courier lo zero segnato non ce l'ha. Consolas ce l'ha barrato di suo, quindi quel trucco era una protesi per un problema che questo carattere non ha — e costava una span attorno a ogni zero e dei margini negativi da tenere allineati alle metriche. Se un giorno si torna a un carattere senza zero segnato, sta nella storia del file. */ /* Il codice sfida è il modo in cui il gioco si passa di mano: al 50% di opacità era un dettaglio da ignorare. Adesso è l'unica cosa colorata della riga, perchè è l'unica su cui si agisce. */ .cod{font-weight:800;font-size:.78em;margin-left:3px;color:var(--blu)} #codiceAmico{text-transform:uppercase} /* `.albo` tolto: quei due numeri erano la classifica, ferma a zero, e stavano sopra a statistiche vere che dicevano un'altra cosa. Due verita' diverse nella stessa scheda: ne e' rimasta una. */ /* ---------- le statistiche ---------- Una lista, non una tabella: sono sei righe con due numeri ciascuna, e una tabella vera a 360px diventa quattro colonne strette che si accavallano. I numeri sono `tabular-nums` perche' incolonnati si confrontano a occhio, che e' l'unica cosa che uno fa guardando delle statistiche. */ /* In cima il bottone sta accanto al dado e non deve rubargli la scena: piu' basso, piu' stretto. `min-width:0` sul nome del provider perche' su un telefono stretto e' lui che deve stringersi, non il bottone. */ .conto .mini{height:38px;font-size:12.5px;padding:0 11px;flex:none} .conto span{min-width:0} /* Aperte le statistiche, la scheda cambia mestiere: nome e codice vanno via e restano solo i numeri. Si nasconde con una classe sulla SCHEDA e non con `via` sui singoli pezzi, perche' `via` la accendono e spengono altre parti del codice e finirebbero per litigare: cosi' invece lo stato "statistiche aperte" e' un fatto solo, scritto in un posto solo. */ #schedaConto.statAperte .coperta{display:none} /* Senza nome e codice sopra, il filo del pannello sarebbe un doppione del bordo della riga in cima. */ #schedaConto.statAperte .stat{margin-top:0;padding-top:0;border-top:none} .stat{margin-top:12px;padding-top:12px;border-top:2px dashed var(--inchiostro)} .stat .righe{display:flex;flex-direction:column;gap:7px} .stat .r{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:700} .stat .r .et{flex:1;min-width:0} .stat .r .nu{font-variant-numeric:tabular-nums;font-weight:900;font-size:15px;white-space:nowrap} /* La riga dei totali e' una somma, e si vede che lo e': il filo sopra la stacca dagli addendi senza bisogno di scriverlo. */ .stat .r.somma{margin-top:2px;padding-top:8px;border-top:2px dashed var(--inchiostro)} .stat .r .pc{font-variant-numeric:tabular-nums;font-weight:900;font-size:15px; width:52px;text-align:right;white-space:nowrap} /* La barra e' la percentuale disegnata: un 47% si legge, ma due barre affiancate si capiscono senza leggere. Sottile apposta: e' un dato, non un grafico. */ .stat .barra{height:8px;margin-top:3px;border:2px solid var(--inchiostro);border-radius:6px; background:var(--scheda-cupa);overflow:hidden} .stat .barra i{display:block;height:100%;background:var(--giallo)} .stat .r.perse + .barra i{background:var(--inchiostro);opacity:.35} .stat .vuoto{margin:0;font-size:12.5px;font-weight:700;opacity:.65} .stat .nota{margin:10px 0 0;font-size:11.5px;font-weight:700;opacity:.6;line-height:1.35} /* Una riga di classifica è una tabella senza intestazione: le colonne devono allinearsi da sole, riga dopo riga, o l'occhio non le legge come colonne. Quindi larghezze FISSE per tutto tranne il nome, che è l'unico campo di lunghezza imprevedibile e quindi l'unico che può respirare. Prima il distintivo staff compariva solo su qualche riga e spostava tutto quello che aveva a destra: da lì il disallineamento. */ .fila{display:flex;align-items:center;gap:6px;margin-bottom:7px;font-size:13px;font-weight:700} .fila .bnd{font-size:19px;line-height:1;width:26px;flex:none;text-align:center} /* Numero e distintivo sono UNA colonna sola, larghezza fissa: il dado sta attaccato al numero di chi ce l'ha, e per tutti gli altri quella stessa larghezza diventa semplicemente il rientro da cui parte la bandiera. Non un buco in mezzo alla riga: un margine. */ .fila .pos{width:40px;flex:none;display:flex;align-items:center;gap:4px; font-size:12px;font-variant-numeric:tabular-nums} .fila .segno{width:17px;height:17px;flex:none;display:flex;align-items:center;justify-content:center} /* Una linea continua dove il tipo di dato cambia: nome | codice | stato | vinte. Fra bandiera e nome non serve, sono due modi di dire la stessa cosa (chi sei). */ .fila .taglia{border-left:2px solid var(--inchiostro);padding-left:7px;margin-left:1px} /* Distintivo dello staff: sta accanto alla bandiera, alto quanto una maiuscola, e non ruba spazio al nome. */ .staff{width:1.05em;height:1.05em;vertical-align:-.15em;margin:0 2px 0 3px;flex:none} .fila .bnd{width:auto;min-width:26px;white-space:nowrap} .fila .nz{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Il codice esce da dentro il nome e diventa una colonna sua: era l'unico dato appiccicato a un altro, ed era anche il motivo per cui la riga sembrava storta pur essendo allineata. */ .fila .cod{width:78px;flex:none;margin-left:0;font-size:10.5px;white-space:nowrap; font-variant-numeric:tabular-nums} .fila .asta{flex:1;height:12px;border:2px solid var(--inchiostro);border-radius:99px;background:var(--scheda);overflow:hidden} .fila .asta i{display:block;height:100%;background:var(--blu)} /* Finché nessuno ha vinto niente, una barra vuota accanto a uno zero non dice niente: dice solo che manca qualcosa. Al suo posto c'è l'unica informazione utile adesso — chi puoi sfidare in questo momento. L'offline non è sbiadito: un testo al 45% di opacità è un testo che qualcuno non legge. A distinguerli bastano la parola e il verde. */ .fila .stato{width:52px;flex:none;font-size:11.5px;font-weight:800;letter-spacing:.02em} .fila .stato.acceso{color:var(--paga)} /* Il distintivo staff sta sulla PERSONA, non sul paese: appiccicato alla bandiera sembrava una seconda bandierina. */ .fila .staff{width:17px;height:17px;margin:0;vertical-align:0} /* Un numero solo: le vinte che contano, cioè tutte meno il bot e meno le amichevoli. La colonna resta stretta apposta — ogni pixel preso qui lo paga il nome, e un nome tagliato a «S..» in una classifica è peggio di qualunque numero in più. */ .fila .qt{width:34px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px;flex:none} /* Fuori gara: stessa riga, meno voce. Non sbiadita al punto da non leggersi — sono persone, non un errore — ma abbastanza da far capire a colpo d'occhio dove finisce la gara e comincia l'elenco. */ .fila.fuoriGara{opacity:.72} .fila.fuoriGara .pos,.fila.fuoriGara .qt{opacity:.5;font-weight:800} /* La riga che divide i due gruppi, e dice perché sono due. */ .spartiacque{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; margin:14px 0 8px;padding-top:10px;border-top:2px dashed var(--inchiostro)} .spartiacque b{font-size:12.5px;font-weight:900;letter-spacing:.02em} .spartiacque i{font-style:normal;font-size:11.5px;font-weight:700;opacity:.6} @media (min-width:600px){ .spartiacque b{font-size:15px} .spartiacque i{font-size:13px} } /* ---- la colonna scorrevole, e il pannello che la comanda ---- * * Da 920 px in su la classifica si apre in due: a sinistra i nomi, che * scorrono DENTRO la loro scheda, a destra la ricerca e i filtri, che * restano fermi. Il motivo è tutto qui: un pannello che scappa in alto * mentre si scorre l'elenco non comanda piu' niente — si cerca, si scorre * per guardare, e per cambiare filtro si dovrebbe tornare su. * Sul telefono niente scatola e niente seconda colonna: lo scorrimento è * quello della pagina, come sempre. */ .fila{cursor:pointer;border-radius:9px;padding:2px 4px;margin-left:-4px;margin-right:-4px} .fila:focus-visible{outline:3px solid var(--blu);outline-offset:1px} /* Scelto, non «in evidenza»: è la riga di cui stai leggendo il codice a destra, e deve essere riconoscibile anche senza guardare il pannello. */ .fila.scelto{background:var(--scheda-cupa);box-shadow:inset 0 0 0 2px var(--inchiostro)} .fila.scelto .nz{text-decoration:underline} .cerca-gioc .riga-cerca{display:flex;gap:8px;margin-top:4px} .cerca-gioc input[type=search]{flex:1;min-width:0;background:var(--scheda);border:var(--bordo); color:var(--inchiostro);font:inherit;font-weight:800;font-size:16px; padding:0 10px;height:46px;border-radius:11px} .cerca-gioc input[type=search]:focus-visible{outline:3px solid var(--blu);outline-offset:2px} .cerca-gioc button[type=submit]{flex:none;border:var(--bordo);border-radius:11px;height:46px; padding:0 14px;background:var(--menta);color:var(--su-menta);font:inherit;font-weight:800; font-size:14px;cursor:pointer;box-shadow:var(--ombra)} .cerca-gioc button[type=submit]:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inchiostro)} .cerca-gioc .nota{margin:9px 0 0;font-size:11.5px;font-weight:700;opacity:.65;line-height:1.35} .cerca-gioc .scelte{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px} .cerca-gioc .scelte .etic{font-size:12px;font-weight:800;opacity:.6;letter-spacing:.03em} .cerca-gioc .mini{height:38px;font-size:12.5px;padding:0 11px;cursor:pointer;box-shadow:var(--ombra)} .cerca-gioc .mini[aria-pressed="true"]{background:var(--giallo);color:var(--su-giallo)} .cerca-gioc .mini:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inchiostro)} .cerca-gioc .mini.verso{display:inline-flex;align-items:center;gap:6px;padding:0 12px} .cerca-gioc .mini.verso b{font-size:16px;line-height:1} /* Sul telefono la ricerca sta SOPRA l'elenco, e non per gusto: sotto, per arrivarci, bisognerebbe scorrere cinquanta nomi — cioè fare a mano esattamente quello che la casella serve a evitare. Ma sopra e APERTA spingerebbe la classifica fuori schermo per una cosa che serve ogni tanto: quindi sopra e CHIUSA, dietro «Classifica | Cerca ⌄». Su schermo largo non c'è nessun sopra e nessun sotto: c'è una colonna a sinistra e una a destra, e lì l'ordine del markup è già quello giusto. */ #classifica{display:flex;flex-direction:column} #classifica .barra-cla{order:-2} #classifica .cerca-gioc{order:-1} .barra-cla{display:flex;align-items:center;gap:10px;margin:0 2px 12px} .barra-cla h3{margin:0;flex:1;min-width:0} /* Il tasto è una scheda come le altre: stesso bordo, stessa ombra, si abbassa quando lo premi. La freccia gira invece di cambiare carattere — una `transform` non cambia la larghezza del tasto, e un tasto che si allarga mentre lo premi sposta quello che ha intorno. */ .barra-cla .apri{display:inline-flex;align-items:center;gap:7px;flex:none; border:var(--bordo);border-radius:12px;background:var(--scheda);color:var(--inchiostro); font:inherit;font-weight:800;font-size:13.5px;padding:0 13px;height:40px; cursor:pointer;box-shadow:var(--ombra)} .barra-cla .apri b{font-size:15px;line-height:1;transition:transform .16s} .barra-cla .apri[aria-expanded="true"]{background:var(--giallo);color:var(--su-giallo)} .barra-cla .apri[aria-expanded="true"] b{transform:rotate(180deg)} .barra-cla .apri:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--inchiostro)} .barra-cla .apri:focus-visible{outline:3px solid var(--blu);outline-offset:3px} /* Chiusa di suo: si apre col tasto, e la classe sta sulla SEZIONE perché è la sezione a cambiare forma, non il pannello da solo. */ #classifica .cerca-gioc{display:none} #classifica.cercaAperta .cerca-gioc{display:block} .soloLargo{display:none} .cerca-gioc .mini.tutti{margin-top:10px;height:34px;font-size:12px} .schedaGioc .codice{margin-top:14px} .schedaGioc .codice small{display:flex;align-items:center;gap:5px} .schedaGioc .codice b{font-size:16px} .schedaGioc .nota{margin-top:8px} .fila.tu .asta i{background:var(--giallo)} .fila.tu .nz{text-decoration:underline} /* Su schermo largo lo spazio c'è: usarlo per far respirare i caratteri invece di lasciare mezza riga vuota. Sotto i 600px si resta com'era. */ @media (min-width:600px){ .fila{font-size:17px;gap:10px;margin-bottom:10px} .fila .pos{width:52px;gap:6px;font-size:16px} .fila .segno,.fila .staff{width:21px;height:21px} .fila .bnd{font-size:24px;min-width:32px} .fila .cod{width:100px;font-size:14px} .fila .stato{width:72px;font-size:14.5px} .fila .qt{width:44px;font-size:16px} .fila .taglia{padding-left:10px} } /* ---------- il banco dei dadi ---------- */ /* Due freccette e una vetrina in mezzo: la forma più vecchia che esista per scegliere una cosa fra tante, e l'unica che si capisce senza istruzioni. */ /* L'indice delle pagine. Le stesse frecce del banco ma basse: sopra alla vetrina devono leggersi come un comando minore, se no litigano con quelle grandi per l'attenzione e non si capisce piu' quale delle due cammina sui dadi e quale salta di pagina. */ .pagine{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 0} .pagine .frecc{height:34px;width:40px} .pagine .frecc svg{width:16px;height:16px} /* `tabular-nums`: da «Pagina 9 di 12» a «Pagina 10 di 12» la riga non deve ballare, se no sembra che si sia mosso qualcos'altro. */ .pagine b{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums; min-width:9.5em;text-align:center} .banco{display:flex;align-items:center;gap:10px;margin:14px 0 14px} .frecc{flex:none;width:44px;height:76px;border:var(--bordo);border-radius:12px; background:var(--scheda);color:var(--inchiostro);cursor:pointer; box-shadow:2px 2px 0 var(--inchiostro);display:flex;align-items:center;justify-content:center} .frecc svg{width:20px;height:20px} .frecc:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--inchiostro)} .frecc:focus-visible{outline:3px solid var(--blu);outline-offset:2px} .vetrina{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center} .vetrina b{font-size:18px;font-weight:900;margin-top:4px} .vetrina .spiega{margin:0;font-size:12.5px;min-height:1.2em} /* La rarita': una parola piccola, in maiuscoletto, sotto al nome. Il colore fa il lavoro — si riconosce prima di leggerla — ma la PAROLA c'e' sempre, perche' un colore da solo non dice niente a chi non lo distingue, e qui di colori ce ne sono cinque vicini. */ /* Sopra al dado e in grande: e' un'insegna, non una nota a pie' di pagina. `min-height` tiene il posto anche quando la parola non c'e' ancora, se no il dado salta su e giu' cambiando vetrina. */ .rarita{font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; line-height:1.3;min-height:1.3em;margin-bottom:2px; color:var(--inchiostro);opacity:.62} .rarita.nonComune{color:var(--rar-noncomune);opacity:1} .rarita.raro{color:var(--rar-raro);opacity:1} .rarita.epico{color:var(--rar-epico);opacity:1} .rarita.leggendario{color:var(--rar-leggendario);opacity:1} .dadoSvg{width:64px;height:64px;display:block} /* Nella vetrina il dado è il PEZZO, non un'icona accanto a un nome: è quello che hai sbloccato e che stai scegliendo, ed è l'unica cosa in quella scheda che valga la pena guardare da vicino. Nella griglia sotto resta piccolo — lì serve a riconoscerlo, non ad ammirarlo. `clamp` e non una misura fissa: su un telefono stretto deve stare fra le due frecce, su un monitor può prendersi tutto lo spazio che ha. */ /* Il contenitore prende tutta la riga e CENTRA il dado. Senza, restava un blocco largo quanto gli pareva con dentro un disegno appoggiato a sinistra: il nome e la rarita' erano al centro, il dado no, ed e' la prima cosa che si nota perche' e' l'unica che si guarda. */ #dadoGrande{width:100%;display:flex;justify-content:center} #dadoGrande .dadoSvg{width:clamp(140px,42vw,190px);height:clamp(140px,42vw,190px)} /* Chiuso non vuol dire sbiadito fino a sparire: si deve ancora vedere cosa stai per sbloccare, altrimenti non è un traguardo, è un buco. Il colore resta acceso — è il premio, ed è quello che ti fa tornare — cala solo la presenza. */ /* La trasparenza va sul CORPO, non sul numero: sbiadire anche quello spegnerebbe proprio il colore che stai inseguendo. Così il dado si vede ancora acceso e si legge lo stesso che non è tuo — a dirlo ci pensano il bordo tratteggiato della casella e il conto scritto sotto. */ .dadoSvg.chiuso rect{opacity:.4} /* ---- i dadi che si muovono, e i colori che sfumano ---- * * Tre cose distinte, e conviene tenerle separate in testa: * - la SFUMATURA e' com'e' fatto un colore: tinta piena, oppure un elenco * di fermate con un angolo. Una sfumatura sta ferma benissimo. * - il MOVIMENTO e' di OGNI PARTE, non del dado: corpo, bordo e valore * girano ognuno per conto suo, o non girano. Cosi' si puo' avere il solo * bordo che vive su un corpo fermo, o dei punti che cambiano tinta su * una faccia che non si muove — e non solo tutto o niente. * - il GIRO e' uno solo per tutto il dado: `--giro` va da 0 a 360 gradi * sull', e ci si aggancia chi deve. Che sia lo stesso per tutti non * e' una scorciatoia: tiene fissa la distanza fra due colori che girano * insieme, ed e' quello che rende il contrasto una cosa che si calcola * invece che sperarla. * * `@property` dice al browser che `--giro` e' un ANGOLO: senza, non saprebbe * cosa sta in mezzo fra 0 e 360 e il colore salterebbe invece di scorrere. * Dove non c'e' ancora, `--giro` resta 0 — e a 0 ogni colore e' esattamente * quello scritto nel catalogo. Il ripiego giusto. * * Si muove il CSS e non il JavaScript: col banco aperto ci sono fino a * undici dadi sullo schermo, e undici animazioni CSS le porta il compositore * mentre undici cicli JavaScript sono undici sveglie che singhiozzano ogni * volta che il gioco fa altro. */ @property --giro { syntax: ''; inherits: true; initial-value: 0deg; } @keyframes odadGiro { from { --giro: 0deg } to { --giro: 360deg } } /* L'animazione sta sull'SVG e parte se ALMENO una parte gira: `--giro` deve scorrere una volta sola per tutto il dado, poi ci si attacca chi vuole. */ .dadoSvg.gira{animation:odadGiro var(--dur,9s) linear infinite} /* Una fermata di gradiente: ferma mostra il suo colore, e con `gira` ci aggiunge il giro. Due regole invece di una perche' una fermata di una parte che non si muove NON deve leggere `--giro` — se no basterebbe una parte in movimento a far girare anche le altre. */ .dadoSvg .fermata{stop-color:hsl(var(--qh) var(--qs) var(--ql))} .dadoSvg .fermata.gira{stop-color:hsl(calc(var(--qh) + var(--giro)) var(--qs) var(--ql))} /* Le tinte piene che girano. `:not(.sf...)` perche' una parte dipinta con una sfumatura NON deve prendersi anche il colore piatto: la regola CSS batterebbe `fill="url(#...)"` e la sfumatura sparirebbe senza un errore da nessuna parte. Le sue fermate girano per conto loro, con le righe sopra. */ .dadoSvg rect.giraC:not(.sfC){fill:hsl(calc(var(--h0) + var(--giro)) var(--s) var(--l))} .dadoSvg rect.giraB:not(.sfB){stroke:hsl(calc(var(--hB) + var(--giro)) var(--sB) var(--lB))} .dadoSvg .segno.giraS:not(.sfS){fill:hsl(calc(var(--hS) + var(--giro)) var(--sS) var(--lS))} /* Chi ha chiesto meno movimento lo ha chiesto sul serio. Fermarsi riporta ogni colore a quello del catalogo: non si spegne niente, si sta fermi. */ @media (prefers-reduced-motion: reduce){ .dadoSvg.gira{animation:none} } /* 96 e non piu' 74: da quando un dado puo' avere due vie, sotto la casella ci sono due righe di conti invece di una, e a 74px «0/15 pubbliche» da solo andava gia' a capo in mezzo alla parola. Su un telefono stretto fanno tre colonne invece di quattro — sette dadi in tre righe, che si guardano meglio di due righe illeggibili. */ .collezione{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:12px} .casella{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px 7px; border:2px solid var(--inchiostro);border-radius:12px;background:var(--scheda); color:var(--inchiostro);font:inherit;cursor:pointer} .casella .dadoSvg{width:38px;height:38px} /* Le vie impilate: una per riga, la `o` in mezzo. `align-self:stretch` fa si' che la colonna occupi tutta la larghezza della casella, se no il testo piu' corto si centra rispetto a se stesso e le due righe ballano. */ .casella .quanto{display:flex;flex-direction:column;align-items:center;align-self:stretch; gap:1px;font-size:10px;font-weight:800;line-height:1.2;opacity:.75; font-variant-numeric:tabular-nums} .casella .quanto .cond{display:block;font-weight:800} /* La `o` non e' una parola come le altre: e' la cerniera fra due strade, e deve leggersi come un segno piu' che come un testo. Piu' piccola, piu' chiara, in tondo, e IN TESTA alla riga che introduce invece che su una riga sua: sotto il dado ci stanno due righe, non tre. */ .quanto .opp,.vetrina .spiega .opp{font-style:normal;font-weight:700;opacity:.55} .casella .quanto .opp{font-size:9px} /* `cond` e non `via`: `.via{display:none !important}` è la classe con cui questo progetto nasconde gli elementi, e chiamare cosi' le righe delle condizioni le faceva sparire in silenzio. Nella vetrina le condizioni stanno sotto il nome, una riga per richiesta: «Ancora 20 partite pubbliche» / «oppure ancora 15 partite con amici». Tutto di fila sarebbe una riga sola lunghissima che va a capo dove capita, e la seconda strada si perderebbe in mezzo. */ .vetrina .spiega .cond{display:block} .casella.chiusa{border-style:dashed;background:var(--scheda-cupa)} .casella.inUso{background:var(--giallo);color:var(--su-giallo);box-shadow:2px 2px 0 var(--inchiostro)} .casella.inUso .quanto{opacity:.9} /* Il banco di lavoro dello staff. Staccato dal resto da una riga, perche' non fa parte del gioco: e' l'attrezzo di chi lo costruisce, e non deve sembrare un'altra cosa da premere per giocare. */ .semina{margin-top:14px;padding-top:12px;border-top:2px dashed var(--inchiostro)} .semina input[type=file]{display:block;width:100%;margin:8px 0 10px;padding:9px; border:var(--bordo);border-radius:12px;background:var(--scheda); color:var(--inchiostro);font:inherit;font-size:13px;cursor:pointer} .semina input[type=file]::file-selector-button{margin-right:10px;padding:6px 11px; border:2px solid var(--inchiostro);border-radius:9px;background:var(--giallo); color:var(--su-giallo);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer} .semina input[type=file]:focus-visible{outline:3px solid var(--blu);outline-offset:3px} .casella:focus-visible{outline:3px solid var(--blu);outline-offset:2px} .voceStorico{display:flex;align-items:center;gap:9px;padding:9px 10px;border:2px solid var(--inchiostro); border-radius:11px;margin-bottom:7px;background:var(--scheda);font-size:13px;font-weight:700} .voceStorico .bnd{font-size:20px} .voceStorico .chi{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .voceStorico .res{font-size:11.5px;font-weight:900;border:2px solid var(--inchiostro);border-radius:99px;padding:2px 8px} .voceStorico .res.v{background:var(--menta);color:var(--su-menta)} .voceStorico .res.p{background:var(--corallo);color:var(--su-corallo)} .voceStorico .qd{font-size:11px;opacity:.6;white-space:nowrap} /* Il conto con un amico non è una partita: niente data, niente bandiera — il codice, quanto siete messi, da che parte pende. */ .voceAmico .cod{flex:none;font-size:12px;color:var(--blu)} .voceAmico .chi{font-weight:800} .voceAmico .res.n{background:var(--scheda-cupa);color:var(--inchiostro)} /* Sul telefono si vede un elenco alla volta; su schermo largo tutti e due, affiancati DENTRO LA STESSA SCHEDA. Due riquadri separati li farebbero sembrare due pannelli diversi, e non lo sono: sono le tue partite, divise per tipo. A separarli basta un filo. */ #storico #barraPartite{gap:8px} #storico #cartaAmichevoli{display:none} #storico.vediAmici #cartaPubbliche{display:none} #storico.vediAmici #cartaAmichevoli{display:block} /* I due tasti sono una scelta fra due, non un interruttore: `aria-pressed`, e il giallo dice quale stai guardando. */ .barra-cla .apri.sceltaLista{flex:1;justify-content:center} .barra-cla .apri.sceltaLista[aria-pressed="true"]{background:var(--giallo);color:var(--su-giallo)} .vuoto{font-size:14px;font-weight:600;line-height:1.5;opacity:.75} .regola{padding:11px 0;border-bottom:2px dotted var(--inchiostro)} .regola:last-child{border-bottom:0;padding-bottom:2px} .regola b{display:block;font-size:14.5px;font-weight:900;margin-bottom:4px} .regola p{margin:0;font-size:13.5px;font-weight:600;line-height:1.5;opacity:.85} .regola i{font-style:normal;font-weight:800;opacity:1} .patto{font-size:13.5px;font-weight:600;line-height:1.6;margin:0 0 12px} .patto b{font-weight:900} .elenco{margin:0 0 14px;padding-left:20px;font-size:13.5px;font-weight:600;line-height:1.6} .elenco li{margin-bottom:6px} /* tavolo */ /* La X sta in alto a destra, piccola e discreta: deve essere raggiungibile ma non invitante — si sta regalando la partita. Alla conferma diventa corallo, cosi' il secondo tocco e' visibilmente diverso dal primo. */ .barra-tavolo{display:flex;justify-content:flex-end;margin-bottom:10px} .lascia{display:flex;align-items:center;gap:6px;background:var(--scheda);color:var(--inchiostro); border:2px solid var(--inchiostro);border-radius:99px;padding:5px 11px 5px 8px;cursor:pointer; font:inherit;font-size:12.5px;font-weight:700} .lascia svg{width:15px;height:15px;flex:none} .lascia:active{transform:translate(2px,2px)} .lascia:focus-visible{outline:3px solid var(--blu);outline-offset:3px} .lascia.conferma{background:var(--corallo);color:var(--su-corallo);border-color:var(--inchiostro)} .giocatore{border:var(--bordo);border-radius:16px;padding:12px 14px;margin-bottom:10px;background:var(--scheda);box-shadow:var(--ombra)} .giocatore.uno.attivo{background:var(--giallo);color:var(--su-giallo)} /* Sulla scheda attiva il fondo e' gia' giallo: il distintivo si invertirebbe in giallo su giallo, salvato solo dal bordo. Qui scambia i due colori. */ .giocatore.uno.attivo .staff rect{fill:var(--scheda)} .giocatore.uno.attivo .staff circle{fill:var(--giallo)} .giocatore.due.attivo{background:var(--blu);color:var(--su-blu)} .giocatore.due.attivo .gettone{border-color:var(--su-blu)} .giocatore.due.attivo .gettone.vivo{background:var(--scheda)} .testa{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;margin-bottom:4px} .etichetta{font-size:11px;font-weight:700;border:2px solid currentColor;border-radius:99px;padding:1px 7px} .gettoni{display:flex;gap:4px;margin-left:auto} .gettone{width:11px;height:11px;border-radius:50%;border:2px solid var(--inchiostro)} .gettone.vivo{background:var(--corallo)} .cifre{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums} .punti{font-size:44px;font-weight:900;letter-spacing:-.05em;line-height:1} .su{font-size:16px;font-weight:700;opacity:.72} .manca{margin-left:auto;font-size:12.5px;font-weight:700;opacity:.72} .zona-dado{text-align:center;margin:20px 0 14px} /* I tre colori arrivano dal dado scelto, con il vecchio aspetto come ripiego: se per qualsiasi motivo non arrivano, il tavolo resta quello di sempre invece di diventare un rettangolo bianco. Il ripiego pero' vale solo se la variabile NON e' stata scritta: se qualcuno ci mette dentro una cosa che colore non e', `var()` prende quella, la riga diventa invalida e il bordo sparisce del tutto — niente bordo e nessun errore. E' esattamente quello che succedeva al tavolo. */ .dado{color:var(--tavolo-segno,var(--inchiostro));display:inline-flex;align-items:center; justify-content:center;width:104px;height:104px;border-radius:22px; /* Due strati, e l'ordine conta: il PRIMO sta sopra. · la faccia, tagliata DENTRO il bordo (`padding-box`); · il bordo, steso fino al margine (`border-box`), che si vede solo nell'anello lasciato libero dalla faccia. Il bordo CSS e' trasparente e serve solo a fare quell'anello. Cosi' il bordo puo' sfumare come nel banco (il Sunset non e' giallo) e gli angoli restano tondi — `border-image` li avrebbe fatti a spigolo. Il primo strato DEVE essere un'immagine: un colore nudo li' invalida la riga intera, faccia e bordo insieme. Per questo `tinta` arriva sempre come `linear-gradient`, anche quando e' un colore solo. */ background: var(--tavolo-grana,none) padding-box, var(--tavolo-faccia,linear-gradient(var(--scheda),var(--scheda))) padding-box, var(--tavolo-bordo,var(--inchiostro)) border-box; /* La grana (se il dado ce l'ha) si fonde con la faccia in `overlay`: schiarisce e scurisce senza cambiarle colore. Gli altri due strati restano come sono. */ background-blend-mode:overlay,normal,normal; /* Lo spessore: 4 px su 104, scelto da Leo guardando 3/4/5/6 affiancati. Era 3, cioe' lo stesso di ogni riquadro della pagina (`--bordo`), quindi il dado non si staccava da niente, e l'ombra da 6 px accanto lo faceva sembrare ancora piu' sottile. Il banco disegna lo stesso dado con 3.5 su 48, che a questa misura farebbero 7.6 px: il tetto e' quello, oltre il tavolo avrebbe un dado piu' pesante di quello disegnato. prove-vernice tiene lo spessore fra i due. */ border:4px solid transparent; box-shadow:var(--ombra-alta)} /* Segnaposto: il `?` dell'attesa e la A/B del sorteggio non sono un tiro, e il bordo li farebbe sembrare tali. Resta uno strato solo, la faccia, e arriva fino al margine (`border-box`): niente anello, e niente filo di sfondo fra la faccia e l'ombra. La larghezza del bordo non si tocca, se no il quadrato si restringe e il dado saltella a ogni tiro. */ .dado.liscio{background:var(--tavolo-faccia,linear-gradient(var(--scheda),var(--scheda))) border-box} .dado b{font-size:46px;font-weight:900;letter-spacing:-.05em;font-variant-numeric:tabular-nums} .dado.salta{animation:salta .55s ease} @keyframes salta{ 0%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-16px) rotate(-10deg)} 55%{transform:translateY(0) rotate(7deg)} 75%{transform:translateY(-6px) rotate(-3deg)} 100%{transform:translateY(0) rotate(0)} } @media (prefers-reduced-motion:reduce){.dado.salta{animation:none}} .pips{display:grid;grid-template-columns:repeat(3,16px);grid-template-rows:repeat(3,16px);gap:8px} .pips i{display:block;width:16px;height:16px;border-radius:50%;background:var(--tavolo-segno,var(--inchiostro))} .pips u{display:block} /* ---- schermi larghi: la colonna si sdoppia ---- * * Il gioco e' nato per il telefono, quindi tutto sta in una colonna da 520 * px: su un monitor restava un nastro al centro, e meta' di quello che c'e' * in una scheda finiva sotto al bordo dello schermo. Da 920 px in su la * colonna si allarga e le sezioni lunghe si dividono in DUE: `columns` e * non una griglia, perche' quello che serve e' proprio il suo modo di * riempire — prima la colonna di sinistra, e quello che non ci sta va a * destra invece che sotto il bordo. * * `break-inside:avoid` su ogni scheda e su ogni riga: una scheda tagliata a * meta' fra due colonne e' peggio di una scheda sotto la piega. Il tavolo, * l'accesso e le schermate di una scheda sola restano in colonna, centrate: * li' non c'e' niente da affiancare, e durante la partita gli occhi devono * stare dove stavano. */ @media (min-width:920px){ .wrap{max-width:1040px} /* I tasti in alto non si stirano per tutta la larghezza — cinque tasti da 200 px non sono tasti, sono fasce — ma nemmeno si stringono alla prima colonna: restano un filo piu' lunghi, cosi' la riga sotto al logo pesa quanto quello che le sta sotto invece di finire a meta' strada. */ nav{max-width:660px;margin-inline:auto} #gioca,#regole,#profilo{columns:2;column-gap:20px} #gioca>*,#regole>*,#profilo>*{break-inside:avoid} /* La riga del «Cerca un avversario» e i suoi avvisi non si spezzano dal tasto: stanno insieme in fondo alla prima colonna. */ #gioca .cerca,#gioca>.esito{break-before:avoid} /* Classifica e Partite sono UNA scheda con dentro un elenco lungo: li' a sdoppiarsi e' l'elenco, non la scheda. */ /* Partite: una scheda sola, due colonne dentro. A dividerle bastano i due titoli e lo spazio in mezzo — il filo tratteggiato c'è stato per un'ora e faceva sembrare la scheda spezzata in due invece che divisa. I tasti che le alternavano spariscono: non c'è più niente da alternare. */ #duePartite{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;align-items:start} #storico #barraPartite{display:none} #storico #cartaAmichevoli, #storico.vediAmici #cartaPubbliche{display:block} /* La classifica no: sono due schede con due mestieri diversi, e quale vada a destra non lo si lascia decidere all'altezza del contenuto. Griglia, non `columns`: l'elenco prende quello che resta, il pannello ha la sua larghezza e non si stira. */ #classifica{display:grid;grid-template-columns:minmax(0,1fr) 322px; column-gap:20px;align-items:start} /* ---- il banco dei dadi, su schermo largo ---- * * Aperto il banco, la scheda prende tutta la larghezza — `column-span:all`, * perché `#profilo` è a due colonne e un pannello alto come questo in mezza * colonna lascia l'altra metà vuota — e dentro si divide in due: a sinistra * la griglia con il suo indice di pagina, a destra la vetrina. * Il motivo è uno solo: il dado che hai scelto è il pezzo, e in una colonna * da 250 px non si vede. Di là, con mezza scheda a disposizione, si vede. */ #schedaDadi{column-span:all} #schedaDadi:not(.via){ display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start; grid-template-areas: "testa testa" "pagine dado" "griglia dado" "nota dado" "semina semina"; } #schedaDadi > .conto{grid-area:testa} #schedaDadi > #pagine{grid-area:pagine} /* La vetrina si tiene stretta e centrata nella sua colonna: senza, con il dado a 260 px le frecce finivano ai due estremi, e quella di sinistra andava a sbattere contro la griglia come se appartenesse a lei. */ #schedaDadi > .vetrinaLato{grid-area:dado;position:sticky;top:14px; max-width:420px;margin-inline:auto;width:100%} #schedaDadi > #collezione{grid-area:griglia} #schedaDadi > .spiega{grid-area:nota} #schedaDadi > #semina{grid-area:semina} /* Mezza scheda tutta per lui: qui il dado può essere grande davvero. `100%` e non `70%`: la percentuale si misura sul contenitore, e quello adesso e' largo quanto la vetrina — il 70% lo rimpiccioliva e basta. */ #dadoGrande .dadoSvg{width:min(260px,100%);height:auto;aspect-ratio:1} .vetrinaLato .frecc{height:96px} #classifica .cerca-gioc{order:0;display:block} /* La barra con «Cerca ⌄» serviva ad aprire una cosa che qui è gia' aperta: sparisce, e i titoli tornano dentro le loro schede. */ #classifica .barra-cla{display:none} .soloLargo{display:block} /* Che l'elenco continui si deve VEDERE. L'ultima riga visibile è seguita dalla nota in fondo alla scheda, quindi senza un segno l'elenco sembra finito lì — e un elenco che sembra finito e non lo è è peggio di un elenco lungo. Due segni, perché uno solo non basta dappertutto: la barra di scorrimento disegnata da noi (su certi sistemi è «a velo» e compare solo mentre si scorre), e l'ombra ai bordi. L'ombra sa da sola quando togliersi: i due veli in `local` scorrono col contenuto e coprono le due ombre, che invece stanno ferme. In cima al primo giro il velo di sopra è lì e nasconde la sua ombra; appena si scorre se ne va e l'ombra compare. Nessun JavaScript, nessun evento di scorrimento: lo fa il browser. */ #tabellone.scorre{max-height:min(66vh,620px);overflow-y:scroll; padding-right:8px;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:var(--inchiostro) var(--scheda-cupa); background: linear-gradient(var(--scheda) 34%, transparent) top /100% 20px local no-repeat, linear-gradient(transparent, var(--scheda) 66%) bottom /100% 20px local no-repeat, radial-gradient(farthest-side at 50% 0, var(--inchiostro), transparent) top /100% 9px scroll no-repeat, radial-gradient(farthest-side at 50% 100%,var(--inchiostro), transparent) bottom /100% 9px scroll no-repeat} #tabellone.scorre::-webkit-scrollbar{width:10px} #tabellone.scorre::-webkit-scrollbar-track{background:var(--scheda-cupa);border-radius:99px} #tabellone.scorre::-webkit-scrollbar-thumb{background:var(--inchiostro);border-radius:99px} /* Il tavolo non si spalma: il dado resta grande al centro e il tasto resta un tasto. L'unica cosa che guadagna dalla larghezza e' il punteggio, che diventa un tabellone a due: tu a sinistra, lui a destra. Tutto il resto tiene la sua riga intera. */ #tavolo{display:grid;grid-template-columns:1fr 1fr;column-gap:12px; max-width:760px;margin-inline:auto} #tavolo>*{grid-column:1/-1} #tavolo>.giocatore{grid-column:auto;margin-bottom:0} .zona-dado{margin-top:18px} #fine{display:block;max-width:560px;margin-inline:auto} } .tempo{border:var(--bordo);border-radius:99px;height:14px;background:var(--scheda);overflow:hidden;margin:0 0 12px} .tempo i{display:block;height:100%;width:100%;background:var(--menta)} .tempo.corto i{background:var(--corallo)} .voce{text-align:center;font-size:15.5px;font-weight:700;line-height:1.45;color:var(--inchiostro); background:var(--scheda);border:var(--bordo);border-radius:14px;box-shadow:var(--ombra); padding:13px 12px;margin-bottom:12px;min-height:52px;display:flex;align-items:center;justify-content:center} .voce .ev{background:var(--giallo);color:var(--su-giallo);border-radius:6px;padding:1px 7px} .voce .male{background:var(--corallo);color:var(--su-corallo);border-radius:6px;padding:1px 7px} .scelta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .scelta button{border:var(--bordo);border-radius:14px;cursor:pointer;font:inherit;font-weight:800; font-size:15px;padding:14px 10px;line-height:1.3;box-shadow:var(--ombra)} .scelta button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--inchiostro)} .scelta .prendi{background:var(--menta);color:var(--su-menta)} .scelta .togli{background:var(--corallo);color:var(--su-corallo)} .scelta button small{display:block;font-size:11.5px;font-weight:600;margin-top:4px;opacity:.85} .scelta button[disabled]{opacity:.4;cursor:default;transform:none} .scelta button:focus-visible{outline:3px solid var(--blu);outline-offset:3px} .diario{margin-top:18px} .diario ul{list-style:none;margin:0;padding:0;font-size:13px;font-weight:600;line-height:1.5} .diario li{padding:6px 10px;background:var(--scheda);color:var(--inchiostro); border:2px solid var(--inchiostro);border-radius:9px;margin-bottom:6px} /* Quarta volta lo stesso errore: lo sfondo diventa giallo e il colore resta quello ereditato da .diario li, cioe' --inchiostro, che nel tema scuro e' quasi bianco. Sul giallo fa 1,31:1. --su-accento e' scuro in entrambi i temi ed e' il token gia' usato ovunque per il testo sugli accenti. */ .diario li:first-child{background:var(--giallo);color:var(--su-giallo)} .fine{text-align:center;padding:22px 12px;background:var(--scheda);border:var(--bordo); border-radius:16px;box-shadow:var(--ombra-alta)} .fine h2{font-size:28px;font-weight:900;letter-spacing:-.03em;margin:0 0 10px} .fine p{font-size:15px;font-weight:600;line-height:1.5;margin:0 0 20px} .piu-uno{display:inline-block;background:var(--menta);color:var(--su-menta);border:var(--bordo);border-radius:10px; padding:3px 10px;font-weight:900;font-size:17px;margin-bottom:12px;box-shadow:2px 2px 0 var(--inchiostro)} .piu-uno.amichevole{background:var(--giallo);font-size:15px} /* Il tabellone di fine partita: due righe, i numeri incolonnati a destra. La riga di chi vince è gialla come la casella del dado in uso — lo stesso segno vuol dire la stessa cosa in tutto il gioco. */ .esitoFinale{margin:14px 0 12px;text-align:left} .rigaFine{display:flex;align-items:center;gap:10px;padding:9px 11px;margin-bottom:7px; border:2px solid var(--inchiostro);border-radius:12px;background:var(--scheda-cupa); font-size:14px;font-weight:800} .rigaFine .chi{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rigaFine .pt{flex:none;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums} .rigaFine .pt i{font-style:normal;font-size:13px;font-weight:800;opacity:.55} .rigaFine.vince{background:var(--giallo);color:var(--su-giallo);box-shadow:2px 2px 0 var(--inchiostro)} .rigaFine.vince .pt i{opacity:.7} .rigaFine .staff{width:16px;height:16px;margin:0 4px 0 0} .versione{display:block;width:fit-content;margin:24px auto 0;padding:8px 14px; background:var(--scheda);color:var(--inchiostro);border:var(--bordo); border-radius:99px;text-align:center;font-size:12px;font-weight:800; font-variant-numeric:tabular-nums;box-shadow:2px 2px 0 var(--inchiostro)} .versione b{display:flex;align-items:center;justify-content:center;gap:6px; margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.05em;opacity:.62} .versione b .staff{width:15px;height:15px;margin:0;flex:none;opacity:1} /* La spiegazione del dado: piccola, perché è una nota — ma sta attaccata alla firma, che è l'unico posto dove qualcuno si chiede di chi sia. */ .versione i{display:block;max-width:290px;margin:6px auto 0;font-style:normal; font-size:10.5px;font-weight:700;line-height:1.35;letter-spacing:0;opacity:.5}