/* ==========================================================================
   micro.css — microgioco.com
   Classless, text-first stylesheet: one narrow column, one accent, hairlines.
   Elements are styled by tag and structure. Only three classes exist:
     .skip (skip link)   .pro / .contro (plus / minus lists)
   Structural hooks:  #classifica > ol  = ranked operator list
                      #sintesi          = score summary on the review page
                      section > ol      = numbered steps
                      figure > table    = wide table (scrolls on small screens)
                      aside             = margin note (inline on mobile)
                      [role="note"]     = inline callout
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #111111;
  --paper: #ffffff;
  --rose: #e11d48;
  --rule: #e5e5e5;
  --mute: #5c5c5c;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --measure: 37.5rem;   /* about 66 characters at body size */
  --gutter: 1.25rem;
}

/* 2. Page ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 var(--gutter);
  background: var(--paper);
  color: var(--ink);
  font: 1.125rem/1.7 var(--serif);
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  counter-reset: nota;
}

body > header, main, body > footer { max-width: var(--measure); margin-inline: auto; }

/* 3. Site header: wordmark + comma-separated text nav ---------------------- */
body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem 1.5rem;
  padding: 1.75rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}
body > header > a {
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
body > header > a svg { width: .5em; height: .5em; margin-right: .45em; vertical-align: .08em; }
body > header nav {
  color: var(--mute);
  font-size: 1.08rem;
  font-variant-caps: all-small-caps;
  letter-spacing: .05em;
  line-height: 1.5;
}
body > header nav a { display: inline-block; padding: .1rem 0; color: var(--ink); text-decoration: none; }
body > header nav a:hover { color: var(--rose); text-decoration: underline; }
body > header nav a[aria-current="page"] { color: var(--rose); }

/* 4. Type ------------------------------------------------------------------ */
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
h1 {
  margin: .5rem 0 1.25rem;
  font-size: clamp(2rem, 1.45rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
h2 {
  position: relative;
  margin: 3.75rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 1.6rem;
  line-height: 1.22;
  letter-spacing: -.01em;
  scroll-margin-top: 1rem;
}
h3 { margin: 2rem 0 .4rem; font-size: 1.125rem; font-weight: 700; line-height: 1.35; scroll-margin-top: 1rem; }
p { margin: 0 0 1.15rem; hanging-punctuation: first; }
h1 + p { font-size: 1.28rem; line-height: 1.55; }           /* lead paragraph */
small { display: inline-block; font-size: .8rem; line-height: 1.5; }
strong, b { font-weight: 700; }
hr { margin: 3rem 0; border: 0; border-top: 1px solid var(--rule); }

a { color: var(--rose); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.skip { position: absolute; left: -999rem; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 2; padding: .5rem .8rem; background: var(--ink); color: var(--paper); }

/* 5. Page head: breadcrumb, byline, disclosure ----------------------------- */
main { padding-top: 2.25rem; }
main header { margin-bottom: 2.75rem; }
main header small,                                           /* byline / last updated */
nav[aria-label="Percorso"] ol {
  color: var(--mute);
  font: .7rem/1.6 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
nav[aria-label="Percorso"] ol { display: flex; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 0; list-style: none; }
nav[aria-label="Percorso"] li + li::before { content: "/"; margin: 0 .6em; color: #a3a3a3; }
nav[aria-label="Percorso"] a { color: inherit; }
nav[aria-label="Percorso"] a:hover { color: var(--rose); }

main header > [role="note"] {                                          /* affiliate + 18+ + licence notice */
  margin-top: 1.5rem;
  padding: .9rem 0 .5rem;
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  color: var(--mute);
  font-size: .86rem;
  line-height: 1.55;
}
main header + section > h2 { margin-top: 0; }                /* no double gap/rule under the page head */
main header > [role="note"] p { margin-bottom: .45rem; }
main header > [role="note"] strong { color: var(--ink); }

/* 6. Lists ----------------------------------------------------------------- */
ul { margin: 0 0 1.15rem; padding-left: 1.25rem; list-style-type: "–  "; }
li { margin-bottom: .4rem; }

/* numbered steps: rose old-style numerals hanging left of the text */
section > ol { margin: 1.5rem 0; padding-left: 2rem; list-style: none; counter-reset: n; }
section > ol > li { position: relative; margin-bottom: .9rem; counter-increment: n; }
section > ol > li::before {
  content: counter(n);
  position: absolute;
  left: -2rem;
  width: 1.35rem;
  color: var(--rose);
  text-align: right;
}

/* plus / minus lists */
.pro, .contro { padding-left: 1.6rem; list-style: none; }
.pro > li, .contro > li { position: relative; }
.pro > li::before, .contro > li::before {
  position: absolute;
  left: -1.6rem;
  font: 700 1rem/1.9 var(--mono);
}
.pro > li::before { content: "+"; }
.contro > li::before { content: "\2212"; color: var(--rose); }

/* 7. Definition lists: two ruled columns ----------------------------------- */
dl {
  display: grid;
  grid-template-columns: minmax(0, min(42%, 12rem)) minmax(0, 1fr);
  column-gap: 1.25rem;
  margin: 1rem 0 1.15rem;
  border-bottom: 1px solid var(--rule);
}
dt, dd { margin: 0; padding: .32rem 0; border-top: 1px solid var(--rule); }
dt {
  padding-top: .6rem;
  color: var(--mute);
  font: .68rem/1.5 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
dd { font-variant-numeric: lining-nums tabular-nums; }

/* 8. Ranked operator list -------------------------------------------------- */
#classifica > ol { margin: 1.75rem 0 1rem; padding: 0; border-bottom: 1px solid var(--ink); }
#classifica > ol > li { margin: 0; padding: 1.5rem 0 .75rem; border-top: 1px solid var(--ink); }
#classifica > ol > li::before {                              /* mobile: small label above the name */
  content: "N. " counter(n, decimal-leading-zero);
  position: static;
  display: block;
  width: auto;
  font: .7rem/1.6 var(--mono);
  letter-spacing: .07em;
  text-align: left;
}
#classifica h3 { margin: .15rem 0 .35rem; font-size: 1.35rem; }
h3 > span[aria-hidden] {                                     /* placeholder mark instead of a logo */
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: .45rem;
  border: 1px solid var(--ink);
  font: 700 .6rem/calc(1.5rem - 2px) var(--mono);
  text-align: center;
  vertical-align: .22em;
}

/* affiliate call to action: an underlined rose text link that inverts on hover */
a[rel~="sponsored"] {
  display: inline-block;
  margin: 0 1.1rem 0 -.3em;
  padding: .12em .3em;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: .24em;
}
a[rel~="sponsored"] + a { white-space: nowrap; }           /* "leggi la recensione" */
a[rel~="sponsored"]:hover { background: var(--rose); color: var(--paper); text-decoration: none; }

/* 9. Tables: horizontal rules only ----------------------------------------- */
figure { margin: 1.75rem 0; overflow-x: auto; }
figure > table { min-width: 31rem; }
table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border-top: 1px solid var(--ink);
  font-size: .95rem;
  line-height: 1.45;
  font-variant-numeric: lining-nums tabular-nums;
}
figure > table { margin: 0; }
th, td { padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
th:last-child, td:last-child { padding-right: 0; }
thead th {
  border-bottom-color: var(--ink);
  font-size: 1.02rem;
  font-weight: 400;
  font-variant-caps: all-small-caps;
  letter-spacing: .05em;
  white-space: nowrap;
}
tbody th { font-weight: 700; }
caption, figcaption {
  padding: 0 0 .6rem;
  color: var(--mute);
  font: .68rem/1.5 var(--mono);
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
}
figcaption { padding: .6rem 0 0; }

/* 10. Notes ---------------------------------------------------------------- */
aside {                                                      /* mobile: inline note */
  margin: 1.5rem 0;
  padding: .1rem 0 .1rem 1rem;
  border-left: 2px solid var(--rose);
  color: var(--mute);
  font-size: .9rem;
  line-height: 1.55;
  counter-increment: nota;
}
aside::before {
  content: "Nota " counter(nota);
  display: block;
  color: var(--ink);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
}
aside p { margin: 0; }

[role="note"] {                                              /* callout between two rules */
  margin: 2rem 0;
  padding: 1rem 0 .1rem;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
[role="note"] b:first-child { font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--rose); }

/* 11. Table of contents ---------------------------------------------------- */
nav[aria-label="Indice"] { margin: 0; padding: 1rem 0 .6rem; border-top: 1px solid var(--ink); }
nav[aria-label="Indice"] + section > h2 { margin-top: 1.25rem; }
nav[aria-label="Indice"] p { margin: 0 0 .4rem; font-variant-caps: all-small-caps; letter-spacing: .06em; }
nav[aria-label="Indice"] ol { margin: 0; padding: 0; list-style: none; counter-reset: i; }
nav[aria-label="Indice"] li { counter-increment: i; }
nav[aria-label="Indice"] li::before {
  content: counter(i, decimal-leading-zero);
  margin-right: .9rem;
  color: var(--mute);
  font: .7rem var(--mono);
}
nav[aria-label="Indice"] a { color: var(--ink); text-decoration-color: var(--rule); }
nav[aria-label="Indice"] a:hover { color: var(--rose); text-decoration-color: currentColor; }

/* 12. Score summary (review page) ------------------------------------------ */
#sintesi { margin: 0 0 1rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); }
#sintesi h2 {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--mute);
  font: .7rem/1.6 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
#sintesi h2::before { content: none; }
data { font-size: 4.75rem; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: lining-nums; }
data + span { margin: 0 .6rem 0 .3rem; color: var(--mute); font-size: 1.5rem; font-variant-numeric: lining-nums; }

/* 13. Author box and other in-page footers --------------------------------- */
main footer { margin-top: 4rem; padding-top: 1.1rem; border-top: 2px solid var(--ink); font-size: .95rem; line-height: 1.6; }
main footer p { margin-bottom: .5rem; }
main footer small { color: var(--mute); font: .7rem/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; }

/* 14. Forms ---------------------------------------------------------------- */
form { margin: 1.5rem 0 2rem; }
fieldset { margin: 1.5rem 0; padding: 0; border: 0; }
legend { padding: 0; font-weight: 700; }
label { display: block; margin-top: 1.4rem; color: var(--mute); font: .7rem/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
input, textarea, select {
  display: block;
  width: 100%;
  padding: .45rem 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 0; border-bottom: 2px solid var(--rose); }
input[type="checkbox"] { display: inline-block; width: 1.05rem; height: 1.05rem; margin: 0 .55rem 0 0; accent-color: var(--rose); vertical-align: -.12em; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
input[type="checkbox"] + label { display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; }
fieldset p, form > p { margin: .7rem 0; }
button {
  margin-top: 1.25rem;
  padding: .6rem 1.3rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font: 700 1rem/1.4 var(--serif);
  cursor: pointer;
}
button:hover { border-color: var(--rose); background: var(--rose); }

/* 15. Site footer ---------------------------------------------------------- */
body > footer {
  margin-top: 5rem;
  padding: 1.5rem 0 3.5rem;
  border-top: 1px solid var(--ink);
  color: var(--mute);
  font-size: .88rem;
  line-height: 1.6;
}
body > footer p { margin-bottom: .6rem; }
body > footer a { color: var(--ink); }
body > footer a:hover { color: var(--rose); }
body > footer strong { color: var(--ink); }

/* 16. Desktop: column shifts left, notes and numerals move into the margins - */
@media (min-width: 1100px) {
  body > header, main, body > footer { margin-left: calc(50% - 27.25rem); margin-right: 0; }

  /* small square, echo of the logo, beside each section title */
  section > h2::before {
    content: "";
    position: absolute;
    left: -1.6rem;
    top: calc(1.4rem + .62em);
    width: .42rem;
    height: .42rem;
    background: var(--rose);
  }

  ul { padding-left: 0; }
  .pro, .contro { padding-left: 0; }
  section > ol { padding-left: 0; }
  section > ol > li::before { left: -2.4rem; width: 1.6rem; }

  #classifica > ol > li::before {                            /* large numeral in the left margin */
    content: counter(n);
    position: absolute;
    left: -5rem;
    top: 1.1rem;
    width: 3.6rem;
    color: var(--ink);
    font: 3rem/1 var(--serif);
    font-variant-numeric: oldstyle-nums;
    letter-spacing: 0;
    text-align: right;
  }

  aside {                                                    /* margin note */
    float: right;
    clear: right;
    width: 14rem;
    margin: .4rem -17rem 1.25rem 0;
    padding: .55rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--ink);
    font-size: .82rem;
    line-height: 1.5;
  }
}

/* 17. Motion and print ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media print {
  body > header nav, body > footer, form { display: none; }
  a { color: inherit; }
}

/* 18. Phase 2: bylines, profiles, LinkedIn link, highlighted facts ---------- */
main header small a { color: inherit; }
main header small a:hover { color: var(--rose); }

a[rel~="me"] {                                               /* "Profilo LinkedIn" text button */
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .7rem .3rem .3rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  font: .7rem/1.4 var(--mono);
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
a[rel~="me"] svg { width: 1.15rem; height: 1.15rem; }
a[rel~="me"]:hover { border-color: var(--rose); color: var(--rose); }

main svg[role="img"] { display: block; margin: 1.5rem 0 1rem; }  /* initials tile instead of a portrait */
main header svg[role="img"] { margin-top: 0; }
svg[role="img"] + h3 { margin-top: 0; }

#sintesi dl:first-of-type dd { font-size: 1.2rem; font-weight: 700; }   /* angle facts in the score box */
[role="note"] dl { margin-bottom: 0; border-bottom: 0; }
#sintesi h3 { margin: 1.25rem 0 0; color: var(--mute); font: .7rem/1.6 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
#sintesi h3 + dl { margin-top: .4rem; }

/* 19. microgioco.com: aggiunte (controllo carta, esiti, accessibilità, mobile) ---------------- */
html { -webkit-tap-highlight-color: transparent; }
a, select, button { touch-action: manipulation; }
input, select, textarea { font-size: 16px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h1 + p.lead { font-size: 1.28rem; line-height: 1.55; }
#carta-form { margin: 1.25rem 0 .5rem; padding: 1rem 0 .25rem; border-top: 2px solid var(--ink); }
#carta-form label:first-of-type { margin-top: .6rem; }
#carta-form select { cursor: pointer; }
#carta-form [data-esito] { margin: 1.1rem 0 0; font-size: .95rem; }
#carta-esito td:last-child { color: var(--mute); font-size: .88rem; }
mark[data-st] { padding: .05em .4em; background: transparent; border: 1px solid currentColor; font: 700 .68rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
mark[data-st="si"] { color: #166534; }
mark[data-st="forse"] { color: #a16207; }
mark[data-st="no"] { color: var(--rose); }
mark[data-st="nv"] { color: var(--mute); }
main footer img { float: right; width: 4.5rem; height: 4.5rem; margin: 0 0 .5rem 1rem; object-fit: cover; border-radius: 50%; }
#classifica > ol > li h3 { margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) { mark[data-st] { transition: none; } }