/* Zycord Mercato: light or dark following the system, cards on a soft background, one column below 760 px, the "ember"
   (brace) orange as the identity colour. No external resources: system fonts only (the pixel titles are drawn by
   pixel.js on a canvas). */
:root {
  color-scheme: light dark;
  /* light theme: warm paper and the "ember" (brace) orange of the identity; the pairs of text and background are
     checked for WCAG AA contrast in both themes by app/prove/colori.test.js, which reads these values */
  --pagina: #f4f1ea; --card: #fffdf8; --card-2: #f6f2e9; --campo: #fffdf8;
  --testo: #1d1a16; --tenue: #6b655b; --riga: #e2dccf; --riga-forte: #cfc7b6;
  /* ember: --brace fills (main buttons, the active tab's line, focus rings), --brace-forte is its hover and its colour
     as text (links, the logo's first word), --su-brace the text on it, --brace-sfondo a soft tint (hints, pills) */
  --brace: #c24a12; --brace-forte: #a83d0c; --su-brace: #ffffff; --brace-sfondo: #fbe6d6; --link: var(--brace-forte);
  --ok: #1b7a3d; --ok-sfondo: #e4f4e9; --male: #b3261e; --male-sfondo: #fbe9e7;
  --rete: #8a5a00; --rete-sfondo: #fff1d1;
  /* gold: the legendary piece's line on the starting page */
  --oro: #8a6400; --oro-sfondo: #fbf0cf;
  --codice: #ece7dc;
  --ombra-pixel: rgb(29 26 22 / .22);
  --ombra: 0 1px 2px rgb(0 0 0 / .04), 0 4px 14px rgb(0 0 0 / .04);
  --ombra-tela: 0 1px 3px rgb(0 0 0 / .14), 0 10px 28px rgb(0 0 0 / .12);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --raggio: 12px;
  /* the phone's bottom menu (up to 760 px): the height of its items, over the screen's bottom safe area */
  --alto-menu-basso: 56px;
  /* the buttons' light stepped corners (3 px steps), and the same shape 1 px inside it for the fill over the border */
  --gradino: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  --gradino-dentro: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
}
@media (prefers-color-scheme: dark) {
  :root {
    --pagina: #0e1013; --card: #181b21; --card-2: #1f232a; --campo: #13161b;
    --testo: #eceae6; --tenue: #9aa0aa; --riga: #292e37; --riga-forte: #3a404b;
    --brace: #ff7a2f; --brace-forte: #ffa060; --su-brace: #1a0d04; --brace-sfondo: #2a170b; --link: var(--brace-forte);
    --ok: #6fd394; --ok-sfondo: #15301f; --male: #ff8a80; --male-sfondo: #3a1a18;
    --rete: #ffcf70; --rete-sfondo: #2b2310;
    --oro: #f2c14e; --oro-sfondo: #262010;
    --codice: #252a32;
    --ombra-pixel: rgb(0 0 0 / .55);
    --ombra: 0 1px 2px rgb(0 0 0 / .3);
    --ombra-tela: 0 0 0 1px rgb(255 255 255 / .07), 0 1px 3px rgb(0 0 0 / .5), 0 10px 28px rgb(0 0 0 / .45);
  }
}

/* ---- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the sticky header's height (app.js sets --alto-testata): links and focus scroll to just below it */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-testata, 8rem) + 12px); }
/* the side gutters: 16 px, or the screen's safe area where it is wider (a notch, viewport-fit=cover in index.html) */
body { --margine-s: max(16px, env(safe-area-inset-left, 0px)); --margine-d: max(16px, env(safe-area-inset-right, 0px));
  margin: 0; padding: 0 var(--margine-d) 48px var(--margine-s); background: var(--pagina); color: var(--testo); font: 16px/1.5 var(--sans); }
.testata-dentro, .wallet-messaggio, .fascia, main, footer { max-width: 1100px; margin-inline: auto; }
a { color: var(--link); text-underline-offset: 2px; }
h1, h2, h3, h4 { line-height: 1.25; }
/* a section's title is its h2; its cards' titles (and "You") are h3, the parts of "You" h4 */
h2, h3 { font-size: 1rem; font-weight: 650; margin: 0 0 12px; }
h4 { font-size: .95rem; font-weight: 650; margin: 0 0 8px; }
code { font-family: var(--mono); font-size: .88em; background: var(--codice); padding: 1px 5px; border-radius: 4px; }
pre { white-space: pre-wrap; word-break: break-all; font-family: var(--mono); font-size: .82rem; line-height: 1.45; background: var(--codice); padding: 10px 12px; border-radius: 8px; margin: 8px 0; }
.nota { color: var(--tenue); font-size: .9rem; }
.nota code, .sicurezza code { overflow-wrap: anywhere; }
/* visually hidden, still read by screen readers */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* long addresses must not widen the page at 375 px */
:focus-visible { outline: 2px solid var(--brace); outline-offset: 2px; }
summary { cursor: pointer; }

/* ---- buttons and fields: outlined by default, filled in ember for the main actions, with light stepped corners. The
   button itself stays a plain box (so its focus ring is not clipped): the shape is drawn by two layers under its text,
   ::before (the border colour, the stepped outline) and ::after (the fill, 1 px inside), coloured by --bordo-bottone
   and --fondo-bottone. A link that leads to a section looks the same (.bottone: the starting page's buttons). */
.bottone { display: inline-block; text-decoration: none; }
button, .bottone { position: relative; isolation: isolate; font: inherit; font-size: .95rem; font-weight: 550; line-height: 1.3; padding: 8px 14px; border-radius: 0; border: 1px solid transparent; background: transparent; color: var(--testo); cursor: pointer;
  --bordo-bottone: var(--riga-forte); --fondo-bottone: var(--card-2); }
button::before, button::after, .bottone::before, .bottone::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
button::before, .bottone::before { inset: -1px; background: var(--bordo-bottone); clip-path: var(--gradino); }
button::after, .bottone::after { inset: 0; background: var(--fondo-bottone); clip-path: var(--gradino-dentro); }
button:hover:not(:disabled), .bottone:hover { --bordo-bottone: var(--tenue); }
.primario, .campi > button { --bordo-bottone: var(--brace); --fondo-bottone: var(--brace); color: var(--su-brace); font-weight: 600; }
.primario::after, .campi > button::after { box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2); }
.primario:hover:not(:disabled), .campi > button:hover:not(:disabled), .bottone.primario:hover { --bordo-bottone: var(--brace-forte); --fondo-bottone: var(--brace-forte); }
button:disabled { opacity: .45; cursor: not-allowed; }
/* buttons that keep their own shape: the palette's colour squares and the header's address pill */
#tavolozza button::before, #tavolozza button::after, .indirizzo-bottone::before, .indirizzo-bottone::after { content: none; }
/* Windows high contrast drops backgrounds: a real border keeps every button visible */
@media (forced-colors: active) {
  button, .bottone { border-color: ButtonText; }
  button::before, button::after, .bottone::before, .bottone::after { content: none; }
}
input, select { font: inherit; font-size: .95rem; padding: 7px 10px; border: 1px solid var(--riga-forte); border-radius: 8px; background: var(--campo); color: inherit; min-width: 0; max-width: 100%; }
input:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--brace); }

/* ---- cards */
.card { background: var(--card); border: 1px solid var(--riga); border-radius: var(--raggio); padding: 16px 18px; box-shadow: var(--ombra); min-width: 0; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
fieldset.card { margin: 0; }
fieldset.card > legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-weight: 650; }
fieldset.card > legend + * { clear: both; }

/* ---- header: one bar sticky at the top, full width (over the body's 16 px gutters), content up to 1100 px. First row:
   the brand on the left, the network pill, the address and the wallet on the right (wrapping under the brand on narrow
   screens); second row: the section menu, whose active tab sits on the bar's bottom line. */
.testata { position: sticky; top: 0; z-index: 20; margin: 0 calc(-1 * var(--margine-d)) 0 calc(-1 * var(--margine-s)); padding: 0 var(--margine-d) 0 var(--margine-s); background: var(--pagina); border-bottom: 1px solid var(--riga); box-shadow: 0 8px 16px -14px rgb(0 0 0 / .35); }
.testata-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0 6px; }
.marchio { display: flex; align-items: center; gap: 10px; }
h1 { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -.01em; white-space: nowrap; }
/* titles drawn in the 5×7 pixel font (pixel.js): the canvas, crisp, and the real text, visually hidden once drawn */
.titolo-pixel canvas.pixel { display: block; image-rendering: pixelated; }
.titolo-pixel.disegnato .titolo-testo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.testata-destra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; min-width: 0; }
.rete { display: inline-block; vertical-align: middle; margin-left: 4px; font-size: .72rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--rete); background: var(--rete-sfondo); border-radius: 999px; padding: 2px 8px; }
/* network pill: app.js writes the classes "stato", "stato ok" and "stato male"; the words carry the state too */
.stato { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; max-width: 100%; padding: 5px 12px; border-radius: 16px; font-size: .85rem; font-weight: 600; color: var(--tenue); background: var(--card-2); border: 1px solid var(--riga); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stato::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7; transform: translateY(-1px); }
.stato.ok { color: var(--ok); background: var(--ok-sfondo); border-color: transparent; }
.stato.male { color: var(--male); background: var(--male-sfondo); border-color: transparent; }
.stato.ok::before, .stato.male::before { opacity: 1; }
.stato-corto { display: none; }   /* the phone's short form (up to 760 px) */
/* "Your address": the short form (monospace once there is one) and the native balance; "Add your address" dashed */
.indirizzo-bottone { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; max-width: 100%; padding: 5px 12px; border-radius: 16px; border-color: var(--riga-forte); background: var(--card); font-size: .85rem; font-weight: 600; text-align: left; }
.indirizzo-bottone:hover:not(:disabled) { border-color: var(--tenue); }
.indirizzo-bottone:not([title]), .indirizzo-bottone[title=""] { border-style: dashed; color: var(--link); }
.indirizzo-bottone[title]:not([title=""]) #indirizzoCorto { font-family: var(--mono); font-size: .95em; }
.indirizzo-bottone[aria-expanded="true"] { background: var(--brace-sfondo); border-color: var(--brace); }
.saldo-testata { color: var(--tenue); font-weight: 500; font-variant-numeric: tabular-nums; }
/* the page's single wallet connection (wallet-ui.js): the main button, its state beside it (long messages wrap) */
.wallet-area { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; max-width: 100%; }
.testata .wallet-area .primario { padding: 6px 14px; }
.wallet-stato { font-size: .85rem; color: var(--tenue); max-width: 40ch; overflow-wrap: anywhere; }
.wallet-stato.ok { color: var(--ok); }
.wallet-stato.male { color: var(--male); }
/* the wallet's full message, under the header (wallet-ui.js): a hint while connecting, an error (.errore) otherwise */
.wallet-messaggio { margin-top: 12px; margin-bottom: 0; padding: 8px 14px; border-radius: var(--raggio); background: var(--brace-sfondo); font-size: .9rem; overflow-wrap: anywhere; }
.wallet-messaggio.errore { background: var(--male-sfondo); }
/* next to the signing actions: "Connect your wallet first" (empty once connected) and the persistent-address line */
.collega-prima:empty { display: none; }
/* the line before the leader's secondary "Raise your bid anyway" (IN_TESTA), a block inside the actions' <p> */
.in-testa { display: block; margin-bottom: 8px; }
/* the status bar at the bottom of the window (barra-stato.js): the section's wallet line when it is out of view; above
   the phone's bottom menu there (see the phone rules) */
.barra-stato { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 25; width: max-content; max-width: min(640px, calc(100% - 32px));
  padding: 10px 14px; border: 2px solid var(--brace); border-radius: var(--raggio); background: var(--card); color: var(--testo);
  box-shadow: 0 8px 24px rgb(0 0 0 / .3); font-size: .9rem; overflow-wrap: anywhere; cursor: pointer; }
.barra-stato.barra-errore { border-color: var(--male); }
.nota-persistente, .collega-prima { margin: 10px 0 0; }
/* the address field, opened from the header under its first row: the full address, editable and copiable */
.barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--riga); border-radius: var(--raggio); box-shadow: var(--ombra); }
.barra label { font-weight: 650; font-size: .9rem; white-space: nowrap; }
.barra-campo { flex: 1 1 280px; display: flex; gap: 8px; min-width: 0; }
#indirizzo { flex: 1; width: 100%; font-family: var(--mono); font-size: .88rem; }
#erroreIndirizzo { flex-basis: 100%; margin: 0; font-size: .88rem; overflow-wrap: anywhere; }
/* the section menu: links to the sections (schede.js), the one shown marked by aria-current; Start here last, in the
   link colour */
.menu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 4px; }
.menu a { display: block; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; padding: 8px 14px; font-weight: 650; color: var(--tenue); text-decoration: none; }
.menu a:hover { color: var(--testo); background: var(--card-2); }
.menu .apri-guida { color: var(--link); }
.menu a[aria-current="page"] { color: var(--testo); border-bottom-color: var(--brace); }
.menu :focus-visible { outline-offset: -2px; }
/* the notice band under the header, one line that wraps gracefully on a phone */
.fascia { margin-top: 12px; padding: 8px 14px; border-radius: var(--raggio); background: var(--rete-sfondo); color: var(--testo); font-size: .88rem; }
.fascia p { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.fascia a { font-weight: 650; white-space: nowrap; }
/* <main> opens with the wallet's message (hidden when there is none); its padding keeps the space above the first
   section that the page's subtitle used to give (the subtitle is now in the starting page's hero, .eroe-sotto) */
main { margin-top: 0; padding-top: 22px; }
.pannello:focus-visible { outline-offset: 6px; border-radius: 4px; }
/* the Console's first line: it is the advanced path, everything else is done from the page */
.riga-consolle { margin: 0 0 14px; padding: 8px 12px; max-width: 85ch; border-radius: 8px; background: var(--card-2); }
/* each section: one line on top saying what you do there; its rules at the bottom, in a closed "How it works" */
.riga-intro { margin: 0 0 18px; max-width: 100ch; font-size: 1.05rem; }
.riga-consolle.riga-intro { font-size: inherit; }
.come { margin-top: 24px; padding: 12px 18px; background: var(--card); border: 1px solid var(--riga); border-radius: var(--raggio); }
/* ---- the common layout of Zyclings, Names, Wall and Exchange: the head (the pixel title, the one line, Zyclings' view
   selector on its right), the actions on the left and "You" on the right from 1000 px, one column below that with
   "You" first; at the bottom "How it works" and "Advanced: command line", closed. "You" comes first in the markup, so
   that the reading and tab order are the visual one at every width: from 1000 px grid placement puts it on the right */
.testa-sezione { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 6px 0 18px; }
.testa-testo { flex: 1 1 420px; min-width: 0; }
.testa-sezione .titolo-pixel { margin: 0 0 10px; font-size: 1.6rem; }
.testa-sezione .riga-intro { margin: 0; }
.gioca-qui { margin: 8px 0 0; font-weight: 650; }   /* Zyclings: the link to the game's own site */
.colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.colonna-azioni { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* "You": the wallet's network as wallet.js verified it, your native balance (tu.js), your things in the section (the
   section's own script fills them) and the reminder before signing */
.tu { display: flex; flex-direction: column; gap: 12px; }
.tu > * { margin: 0; }
.tu h3 { margin: 0; font-size: 1.05rem; }
.tu h4 { margin: 0 0 8px; font-size: .92rem; }
.tu-rete { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; font-size: .9rem; font-weight: 600; color: var(--tenue); background: var(--card-2); }
.tu-rete::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tu-rete.ok { color: var(--ok); background: var(--ok-sfondo); }
.tu-rete.male { color: var(--male); background: var(--male-sfondo); }
.tu-invito { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tu-invito .nota { margin: 0; }
.tu-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; max-width: 360px; font-variant-numeric: tabular-nums; }
.tu-etichetta { color: var(--tenue); }
.tu-valore { font-weight: 650; text-align: right; overflow-wrap: anywhere; }
.tu .azioni { margin: 0; }
.tu .dati { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }   /* the amounts on one line, the labels wrap */
.tu-ritira { font-variant-numeric: tabular-nums; }
.tu-ritira:has(> span:empty):not(:has(> button:not([hidden]))) { display: none; }   /* nothing to withdraw: no empty row */
.tu > div:not(:has(> :not([hidden]))) { display: none; }                          /* a hidden table alone: no empty gap */
/* without an address "Add your address" (.tu-invito) says it once for the box: your things, empty, wait for it */
.tu .suggerimento, .tu:has(> .tu-invito:not([hidden])) :is(.tu-cose, .tu-ritira) { display: none; }
.tu-cose > :last-child { margin-bottom: 0; }
.tu .griglia-creature { margin: 0 0 12px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tu #miei { margin: 0; }
.tu-promemoria { padding: 2px 0 2px 10px; border-left: 3px solid var(--brace); color: var(--tenue); font-size: .88rem; }
/* Zyclings' Mine view: "You" at full width (your creatures are always in it; the left column has nothing to show) */
#creature[data-vista="mie"] .colonna-azioni { display: none; }
@media (min-width: 1000px) {
  .colonne { grid-template-columns: minmax(0, 1fr) 300px; }
  .colonne > .tu { grid-column: 2; grid-row: 1; }
  .colonne > .colonna-azioni { grid-column: 1; grid-row: 1; }
  #creature[data-vista="mie"] .colonne { grid-template-columns: minmax(0, 1fr); }
  #creature[data-vista="mie"] .colonne > .tu { grid-column: 1; }
}
/* the view selector: one segmented control of links, the view shown filled in ember */
.selettore { display: inline-flex; flex-wrap: wrap; }
.selettore a { padding: 8px 18px; border: 1px solid var(--riga-forte); margin-left: -1px; background: var(--card); color: var(--tenue); font-weight: 600; text-decoration: none; }
.selettore a:first-child { margin-left: 0; border-radius: 8px 0 0 8px; }
.selettore a:last-child { border-radius: 0 8px 8px 0; }
.selettore a:hover { color: var(--testo); background: var(--card-2); }
.selettore a[aria-current="page"] { position: relative; background: var(--brace); border-color: var(--brace); color: var(--su-brace); }
.selettore a:focus-visible { position: relative; z-index: 1; }
.come summary { font-weight: 650; }
.come p { margin: 10px 0 0; max-width: 85ch; font-size: .95rem; }
.come code { overflow-wrap: anywhere; }

/* ---- Wall: canvas on the left (up to 512 px), controls on the right; one column below 760 px, canvas first */
.muro-griglia { display: grid; grid-template-columns: minmax(0, 512px) minmax(200px, 1fr); gap: 24px; align-items: start; }
.colonna-comandi { display: flex; flex-direction: column; min-width: 0; }
.colonna-comandi > * + * { margin-top: 14px; }
.tela { max-width: 512px; }
#tela { display: block; width: 100%; height: auto; image-rendering: pixelated; border-radius: 10px; box-shadow: var(--ombra-tela); cursor: crosshair; touch-action: manipulation; }
.colonna-tela .nota { margin: 10px 0 0; min-height: 1.5em; font-variant-numeric: tabular-nums; }
#tavolozza { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
#tavolozza button { width: 100%; aspect-ratio: 1; height: auto; padding: 0; border: 1px solid var(--riga-forte); border-radius: 6px; }
#tavolozza button[aria-checked="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--testo); }
/* next to "You" the controls' column is narrow: the palette in 4 rows of 4 */
@media (min-width: 1000px) { #tavolozza { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 220px; } }
.riga-pittura { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; }
.contatore { font-variant-numeric: tabular-nums; color: var(--tenue); font-size: .92rem; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 0; }
.riga-pittura .azioni { margin: 0; }
.azioni:not(:has(> :not([hidden]))) { display: none; }   /* no visible button: no empty row */
#mieiCrediti:not([hidden]) ~ .suggerimento, #saldi:not([hidden]) ~ .suggerimento { display: none; }
.suggerimento { margin: 0; }
/* the messages take no room while empty: their wrapper is transparent to layout and an empty notice has no margin */
.messaggi { display: contents; }
.messaggi > p { margin: 10px 0 0; }
.messaggi > p:empty { margin: 0; }
.avviso:not(:empty) { padding: 8px 12px; border-radius: 8px; background: var(--brace-sfondo); font-size: .9rem; overflow-wrap: anywhere; }
.errore { color: var(--male); }
.messaggi .errore, .modulo .errore { padding: 8px 12px; border-radius: 8px; background: var(--male-sfondo); font-size: .9rem; overflow-wrap: anywhere; }
.riga-comando { margin-top: 24px; }
.come + .riga-comando { margin-top: 12px; }
.riga-comando summary { font-weight: 650; }
.riga-comando[open] summary { margin-bottom: 4px; }

/* ---- data lists and numbers */
.dati { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 0; }
.dati dt { color: var(--tenue); }
.dati dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.cifre > div { background: var(--card-2); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.cifre dt { font-size: .82rem; color: var(--tenue); }
.cifre dd { margin: 4px 0 0; font-size: 1.3rem; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---- Exchange */
#notaCrediti { margin-top: 12px; margin-bottom: 0; }
.due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tabella { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--tenue); font-size: .85rem; font-weight: 600; padding-bottom: 6px; }
th, td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--riga); }
th { color: var(--tenue); font-weight: 500; font-size: .8rem; }
td[colspan] { text-align: left; color: var(--tenue); }
tr.mio td { color: var(--link); background: var(--brace-sfondo); }
#miei { margin-top: 16px; }
#miei button { padding: 3px 10px; font-size: .85rem; }

/* ---- Console */
.campi-ambiente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.campi-ambiente label, .campi label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--tenue); min-width: 0; }
.campi-ambiente input, .campi input, .campi select { width: 100%; color: var(--testo); }
#moduli { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-top: 16px; align-items: start; }
.campi { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.campi label { flex: 1 1 120px; }
.modulo .errore { margin: 12px 0 0; }
.esito { margin-top: 12px; border-top: 1px solid var(--riga); padding-top: 4px; }
.spiega { margin: 8px 0 4px; font-size: .92rem; }
.immagini { color: var(--tenue); font-size: .85rem; margin: 0 0 4px; overflow-wrap: anywhere; }
.copia { padding: 5px 12px; font-size: .88rem; }
.esito details { margin-top: 10px; font-size: .9rem; }
.esito summary { color: var(--tenue); }

/* ---- footer */
footer { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--riga); font-size: .9rem; color: var(--tenue); }
footer p { margin: 6px 0; }
.sicurezza { margin: 0 0 16px; padding: 10px 14px; color: var(--testo); background: var(--card); border: 1px solid var(--riga); border-left: 3px solid var(--brace); border-radius: var(--raggio); }
.sicurezza h2 { font-size: .95rem; margin: 0 0 4px; }
.sicurezza p { overflow-wrap: anywhere; }
.caffe { margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--riga); border-radius: 8px; }
.indirizzo-caffe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.indirizzo-caffe code { overflow-wrap: anywhere; min-width: 0; }   /* a 66-character address must not widen the page at 375 px */
.indirizzo-caffe .rete { font-weight: 600; color: var(--testo); }

/* ---- narrow screens */
@media (max-width: 760px) {
  .muro-griglia { grid-template-columns: minmax(0, 1fr); }
  .tela { margin-inline: auto; }
}
@media (max-width: 480px) {
  .card { padding: 14px; }
  .cifre { grid-template-columns: minmax(0, 1fr); }
  .due { gap: 12px; }
  .due th, .due td { padding: 6px 4px; }
}

/* Names tab: the list of your names, and the inline fields an action asks for. */
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li { margin: 8px 0; overflow-wrap: anywhere; }
#campiNome { margin-top: 10px; }
#campiNome label { display: block; margin: 6px 0; }
#campiNome input { width: 100%; }

/* Names tab, Pay a name: the full destination address, and the warning for a name in its grace. */
.indirizzo-pieno { overflow-wrap: anywhere; }
.avvertenza { padding: 8px 12px; border-radius: 8px; background: var(--male-sfondo); color: var(--male); font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
#pagaEsitoNome { margin-top: 12px; }
#pagaEsito:not(:empty), #pagaErrore { margin: 10px 0 0; }

/* Creatures tab: the grids of tiles (a 24×24 image drawn at 72 px, pixels kept square), the gold
   border of a legendary piece, a creature's page. */
.messaggi-creature > p { margin: 0 0 12px; }
.messaggi-creature > p:empty { margin: 0; }
#erroreCreature { padding: 8px 12px; border-radius: 8px; background: var(--male-sfondo); font-size: .9rem; overflow-wrap: anywhere; }
#vistaOndata .cifre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin-top: 12px; }
#vistaOndata .cifre dd { font-size: 1.05rem; }
.griglia-creature { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.creatura { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: var(--card-2); border: 1px solid var(--riga); border-radius: 10px; text-align: center; min-width: 0; font-size: .85rem; }
.creatura a { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--testo); text-decoration: none; font-weight: 600; }
.creatura canvas, .leggendaria canvas { width: 72px; height: 72px; image-rendering: pixelated; border-radius: 6px; background: var(--codice); }
.creatura .distintivo { color: var(--tenue); font-size: .8rem; overflow-wrap: anywhere; }
.creatura button { padding: 4px 10px; font-size: .82rem; }
.creatura.invenduta-chiusa { opacity: .55; }
.leggendaria { border: 2px solid #c9a227; }
.creatura.leggendaria { border-width: 2px; }
.creatura .nota { font-size: .75rem; }
.creatura .livello { padding: 1px 8px; border-radius: 999px; background: var(--codice); color: var(--testo); font-size: .75rem; font-weight: 600; }   /* the gym's level, "Lv 3" */
.palestra-mie p { margin: 0 0 8px; }
.classifica .creatura { position: relative; }
.classifica .posto { position: absolute; top: 6px; left: 8px; font-weight: 700; font-size: .8rem; color: var(--tenue); }
.griglia-creature .vuota { grid-column: 1 / -1; list-style: none; }
#leggendarioOndata { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; }
#leggendarioOndata > div { flex: 1 1 240px; min-width: 0; }
#leggendarioOndata p { margin: 0 0 8px; }
#campiOndata, #campiCreatura { margin-top: 12px; }
.scheda-creatura { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.scheda-testo { flex: 1 1 280px; min-width: 0; }
#immagineCreatura { width: 192px; height: 192px; flex: none; image-rendering: pixelated; border-radius: 10px; background: var(--codice); box-shadow: var(--ombra-tela); }
#vistaCreatura > h3 { margin-top: 20px; }
.tratti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px 16px; font-size: .92rem; }
.tratti li { overflow-wrap: anywhere; }
.tratti .categoria { color: var(--tenue); }
#galleriaRari h4 { font-size: .95rem; margin: 18px 0 0; }
/* the Breed view: two parents, one pair of choices per trait, the child's preview */
.genitori-incrocio { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.genitori-incrocio label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
.genitori-incrocio select { width: 100%; min-width: 0; }
.scelta-incrocio { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--riga); border-radius: 8px; min-width: 0; }
.scelta-incrocio legend { padding: 0 4px; color: var(--tenue); font-size: .9rem; }
.interruttori { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.interruttori li { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; align-items: center; font-size: .92rem; }
.interruttori .categoria { color: var(--tenue); }
.interruttori label { display: flex; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.interruttori .perche { grid-column: 1 / -1; font-size: .8rem; color: var(--tenue); }
#anteprimaIncrocio { width: 144px; height: 144px; flex: none; image-rendering: pixelated; border-radius: 10px; background: var(--codice); box-shadow: var(--ombra-tela); }
#figlioIncrocio { margin: 12px 0; }
#figlioIncrocio h4 { margin: 0 0 8px; }
.mutazione { margin: 0 0 8px; color: var(--oro); font-weight: 700; }
#trattiIncrocio { margin-bottom: 12px; }
#percheIncrocio { overflow-wrap: anywhere; }
/* the Breed link is the selector's last one, hidden without a module: then Mine ends the selector */
.selettore a:has(+ a[hidden]:last-child) { border-radius: 0 8px 8px 0; }
@media (prefers-color-scheme: dark) {
  .leggendaria { border-color: #c9a227; }
}
@media (max-width: 480px) {
  #immagineCreatura { width: 144px; height: 144px; }
  .interruttori li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .interruttori .categoria { grid-column: 1 / -1; }
  .selettore { display: flex; width: 100%; }
  .selettore a { flex: 1; padding: 8px 6px; text-align: center; }
}

/* "Start here" guide (#start; guida.js switches its language): a section like the others, as a card; one column of
   numbered steps, readable at 375 px. */
.guida { padding: 16px 18px; background: var(--card); border: 1px solid var(--riga);
  border-left: 3px solid var(--brace); border-radius: var(--raggio); box-shadow: var(--ombra); overflow-wrap: anywhere; }
.guida-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.lingue { display: inline-flex; gap: 4px; }
.lingue button { padding: 4px 12px; font-size: .88rem; }
.lingue button[aria-pressed="true"] { --bordo-bottone: var(--brace); --fondo-bottone: var(--brace); color: var(--su-brace); }
.guida h2 { font-size: 1.15rem; margin: 12px 0 8px; }
.guida h2:focus-visible { outline-offset: 4px; }
.guida h3 { font-size: 1rem; margin: 0 0 6px; }
.guida h4 { font-size: .95rem; margin: 10px 0 2px; }
.guida p, .guida li { max-width: 85ch; }
.guida-nota { padding: 8px 12px; border-radius: 8px; background: var(--rete-sfondo); color: var(--testo); }
.guida-avviso { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--male-sfondo); }
.passi { margin: 12px 0 0; padding-left: 1.4em; }
.passo { margin: 0 0 16px; padding-top: 12px; border-top: 1px solid var(--riga); }
.passo::marker { font-weight: 650; }
.passo ul, .passo ol { margin: 4px 0 0; padding-left: 1.2em; }
.passo li + li { margin-top: 4px; }
.guida code { overflow-wrap: anywhere; }
.guida [lang="zh-CN"] em { font-style: normal; font-weight: 600; }   /* no slanted Chinese text: English labels stand out by weight */
@media (max-width: 480px) {
  .guida { padding: 14px; }
  .passi { padding-left: 1.2em; }
}

/* ---- the starting page (#home, section #benvenuto; home-app.js): the hero with the mascot, the "Connect your wallet"
   box first, three boxes with one live datum and one button each, and the Exchange's row. One column below 760 px,
   the mascot above the text. */
.casa { display: flex; flex-direction: column; gap: 18px; }
.eroe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; align-items: center; padding: 18px 0 6px; }
.eroe-testo > * { margin: 0 0 14px; }
.eroe-titolo { font-size: 1.9rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; max-width: 24ch; }
.eroe-riga { font-size: 1.1rem; color: var(--tenue); max-width: 40ch; }
.eroe-sotto { color: var(--tenue); max-width: 52ch; }
.eroe-bottoni { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.eroe-bottoni .bottone { padding: 10px 18px; }
.mascotte { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* the 24×24 sprite, 8 times larger, its pixels kept square */
#casaMascotteTela { width: 192px; height: 192px; image-rendering: pixelated; background: var(--card-2); border: 1px solid var(--riga); border-radius: 6px; }
.mascotte figcaption { font-size: .9rem; color: var(--tenue); text-align: center; }
.casa-collega { border-left: 3px solid var(--brace); }
.casa-collega h3 { font-size: 1.15rem; }
.casa-collega h3.ok { color: var(--ok); margin-bottom: 8px; }
.casa-collega h3:focus-visible { outline-offset: 4px; }
.casa-riga { margin: 0 0 8px; }
.casa-collega .errore { margin: 0 0 8px; overflow-wrap: anywhere; }
.casa-cosa { margin: 0; padding-left: 1.2em; color: var(--tenue); }
.casa-cosa li + li { margin-top: 2px; }
.casa-passi { margin: 4px 0 0; padding-left: 1.4em; }
.casa-passi li { margin: 6px 0; overflow-wrap: anywhere; }
.casa-passi li.fatto::marker { color: var(--ok); }
.casa-passi .bottone, .casa-passi button { margin-left: 4px; padding: 4px 12px; font-size: .9rem; }
.casa-riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 16px; align-items: stretch; }
.casa-riquadro { display: flex; flex-direction: column; gap: 12px; }
.casa-riquadro > * { margin: 0; }
.casa-riquadro .nota { margin: 0; }
.casa-piede { margin-top: auto !important; padding-top: 4px; }
.casa-pezzi { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* each sprite at twice its size */
.casa-pezzi canvas { display: block; width: 48px; height: 48px; image-rendering: pixelated; background: var(--card-2); border-radius: 4px; }
.casa-dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.casa-dati > div { background: var(--card-2); border-radius: 6px; padding: 8px 10px; min-width: 0; }
.casa-dati dt { font-size: .8rem; color: var(--tenue); }
.casa-dati dd { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.casa-oro { padding: 6px 10px; border-radius: 6px; background: var(--oro-sfondo); color: var(--oro); font-weight: 600; font-size: .9rem; }
.casa-nome { display: flex; gap: 8px; }
.casa-campo { flex: 1; min-width: 0; display: flex; align-items: center; border: 1px solid var(--riga-forte); border-radius: 8px; background: var(--campo); }
.casa-campo:focus-within { border-color: var(--brace); outline: 2px solid var(--brace); outline-offset: 0; }
.casa-campo input { flex: 1; min-width: 0; border: 0; background: transparent; }
.casa-campo input:focus-visible { outline: none; }
.casa-campo span { padding: 0 10px 0 2px; color: var(--tenue); font-family: var(--mono); font-size: .9rem; }
.casa-esempi { font-size: .9rem; color: var(--tenue); }
.casa-esempi a { font-family: var(--mono); }
#casaErroreNome { font-size: .9rem; }
#casaTela { width: 128px; height: 128px; image-rendering: pixelated; border-radius: 4px; box-shadow: var(--ombra-tela); }
.casa-mercato { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.casa-mercato h3 { margin: 0; }
.casa-mercato .casa-dati { flex: 2 1 320px; }
.casa-mercato .nota { flex: 1 1 200px; margin: 0; }
@media (max-width: 760px) {
  .eroe { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 6px; }
  .mascotte { order: -1; }
  #casaMascotteTela { width: 144px; height: 144px; }
  .eroe-titolo { font-size: 1.45rem; }
  .eroe-riga { font-size: 1rem; }
  .eroe-bottoni .bottone { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
}

/* ---- the phone (up to 760 px): a compact header, the bottom menu in place of the menu above, "You" compact.
   The header keeps two short rows (under 64 px at 320 and 375 px): the logo and the network pill in its short form,
   then "Your address" and the wallet's button; the wallet's state is read by screen readers only (its button says
   Connect, Cancel connecting or Disconnect, and a message shows under the header, #walletMessaggio). */
.menu-basso, .tu-apri { display: none; }
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(var(--alto-menu-basso) + env(safe-area-inset-bottom, 0px) + 12px); }
  body { padding-bottom: calc(var(--alto-menu-basso) + env(safe-area-inset-bottom, 0px) + 32px); }
  .barra-stato { bottom: calc(var(--alto-menu-basso) + env(safe-area-inset-bottom, 0px) + 10px); }
  .testata .menu { display: none; }
  .testata-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marchio stato" "indirizzo wallet"; align-items: center; gap: 4px 8px; padding: 5px 0; }
  .testata-destra { display: contents; }
  .marchio { grid-area: marchio; min-width: 0; }
  /* the pill beside the logo: at most the row's width less the logo's drawn width (pixel.js --larghezza-logo, which
     follows the device pixel ratio) and the gap; a longer short text is cut with an ellipsis (the full one is in the
     title and read by screen readers) */
  .stato { grid-area: stato; justify-self: end; padding: 1px 8px; gap: 6px; font-size: .75rem; line-height: 1.3; overflow-wrap: normal; white-space: nowrap;
    min-width: 0; max-width: calc(100vw - var(--margine-s) - var(--margine-d) - 8px - var(--larghezza-logo, 194px)); }
  .stato::before { width: 7px; height: 7px; transform: none; align-self: center; }
  .stato-lungo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stato-corto { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .indirizzo-area { grid-area: indirizzo; min-width: 0; }
  .indirizzo-bottone { display: block; padding: 3px 10px; font-size: .8rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wallet-area { grid-area: wallet; flex-wrap: nowrap; }
  .testata .wallet-area .primario { padding: 4px 10px; font-size: .85rem; white-space: nowrap; }
  .wallet-stato { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .barra { margin-top: 0; }

  /* the bottom menu: fixed, full width, over the screen's bottom safe area; five items of equal width, each at least
     44 px wide and 56 px tall, an icon over its label; the item shown (and More while its list's is) in ember */
  .menu-basso { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--card); border-top: 1px solid var(--riga); box-shadow: 0 -8px 16px -14px rgb(0 0 0 / .35); }
  .menu-basso > a, .menu-piu { flex: 1 1 0; min-width: 44px; }
  .menu-basso > a, #bassoPiu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: var(--alto-menu-basso);
    padding: 6px 0; border: 0; background: none; color: var(--tenue); font-size: .75rem; font-weight: 500; line-height: 1.2; text-decoration: none; }
  #bassoPiu::before, #bassoPiu::after { content: none; }
  .menu-basso > a:hover, #bassoPiu:hover { color: var(--testo); }
  /* the current item is marked by more than its colour (WCAG 1.4.1): a 3 px ember bar on its top edge and a bold label */
  .menu-basso > a[aria-current="page"], #bassoPiu[aria-current] { color: var(--brace-forte); font-weight: 800; box-shadow: inset 0 3px 0 var(--brace); }
  #bassoPiu[aria-expanded="true"] { color: var(--brace-forte); }
  .menu-basso canvas { display: block; image-rendering: pixelated; }
  .menu-basso :focus-visible { outline-offset: -3px; }
  .menu-piu { position: relative; }
  /* More's list: above the bar, at its right edge */
  .foglio-piu { position: absolute; right: 8px; bottom: calc(100% + 8px); width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 6px; list-style: none;
    background: var(--card); border: 1px solid var(--riga-forte); border-radius: var(--raggio); box-shadow: var(--ombra-tela); }
  .foglio-piu a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; color: var(--testo); font-weight: 600; text-decoration: none; }
  .foglio-piu a:hover { background: var(--card-2); }
  .foglio-piu a[aria-current="page"] { color: var(--brace-forte); background: var(--brace-sfondo); }

  /* "You" compact (tu.js sets data-aperto): the network, the balance, "Add your address", the "to withdraw" line, the
     Wall's credit buttons and the Exchange's balances; .tu-apri shows the rest. Zyclings' Mine view is "You" alone:
     always whole. */
  .pannello:not([data-vista="mie"]) .tu[data-aperto] .tu-apri { display: block; align-self: flex-start; padding: 6px 12px; font-size: .88rem; }
  .pannello:not([data-vista="mie"]) .tu[data-aperto="false"] > .tu-promemoria,
  .pannello:not([data-vista="mie"]) .tu[data-aperto="false"] > .tu-cose:not(:has(> .azioni > :not([hidden]), > #saldi:not([hidden]))),
  .pannello:not([data-vista="mie"]) .tu[data-aperto="false"] > .tu-cose > :not(.azioni, #saldi) { display: none; }
  .tu { padding: 12px 14px; gap: 10px; }

  /* the Zyclings' grids: 3 columns (a tile is at least 80 px wide at 320 px, its 72 px image fits) */
  .griglia-creature, .tu .griglia-creature { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .creatura { padding: 8px 4px; }
}

/* ---- forced colours (Windows high contrast): backgrounds and shadows are dropped and colours become the system's, so
   the states drawn by them get a real border, and the pixel titles (canvas, drawn in the theme's colours) give way to
   their own text. The bottom menu's icons follow their item's system colour (pixel.js draws them in its computed
   colour, and again when forced colours turn on or off). */
@media (forced-colors: active) {
  .titolo-pixel canvas.pixel { display: none; }
  .titolo-pixel.disegnato .titolo-testo { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .menu-basso > a[aria-current="page"], #bassoPiu[aria-current] { border-top: 3px solid Highlight; }
  .selettore a[aria-current="page"] { border: 3px solid Highlight; padding-block: 6px; }
}