/*
 * Hoof Rush — design system.
 * Mood: gioco mobile cartoon: cielo azzurro, pannelli chiari con
 * contorno scuro spesso, pulsanti "gommosi" a rilievo, scritte bianche bordate, cavallini cartoon
 * (illustrazioni create con Magnific). Condiviso da sito, back office e app per telefono. Mobile first.
 * Font (in assets/fonts/, sul sito): Lilita One (titoli, pulsanti, numeri), Fredoka (testo).
 * Riferimento vivo: artefatto "Hoof Rush" (docs/DESIGN.md).
 */
/* Caratteri ospitati sul sito (niente Google Fonts): Lilita One per titoli, pulsanti e numeri, Fredoka per il testo */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lilita-one.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lilita-one-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 100 500; font-display: swap; src: url("fonts/fredoka-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 100 500; font-display: swap; src: url("fonts/fredoka-500-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/fredoka-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/fredoka-600-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/fredoka-700.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("fonts/fredoka-700-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  /* Cielo e pannelli */
  --sky-top: #5cc8ff;
  --sky: #2f8fe8;
  --sky-deep: #1a5fc0;
  --night: #16264d;      /* blu notte: barre, codice, contorni morbidi */
  --bg: #2f8fe8;
  --surface: #fff8ea;    /* pannello crema */
  --surface-2: #f1e3c4;  /* pannello incassato / riga alternata */
  --line: #1c2a4a;       /* contorno di tutto (3px) */
  --ink: #23314f;        /* testo su pannelli chiari */
  --muted: #5d6a86;
  --white: #ffffff;

  /* Colori di gioco */
  --yellow: #ffcd2e;     --yellow-dark: #e09a00;   /* azione principale */
  --green: #6ad13b;      --green-dark: #369a17;    /* conferma, positivo, prato */
  --blue: #45a8ff;       --blue-dark: #1b67d1;     /* secondario */
  --red: #ff5a4f;        --red-dark: #c7271d;      /* pericolo */
  --purple: #b264ff;     --purple-dark: #7a2fd1;   /* epico, speciale */
  --gold: #ffcd2e;

  /* Alias semantici usati dai componenti */
  --turf: var(--green);
  --hot: var(--purple);
  --cyan: var(--blue);
  --danger: var(--red);
  --danger-soft: #ffe1dc;
  --ok: var(--green-dark);
  --ok-soft: #e1f6d3;
  --gold-soft: #fff0c2;
  --turf-ink: #ffffff;

  --radius: 14px;
  --radius-lg: 20px;
  --px: 3px;
  --shadow: 0 5px 0 rgb(16 30 70 / .35);
  --outline: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line),
             1.5px 1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px -1.5px 0 var(--line),
             0 4px 0 var(--line);
  --font: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Arial Black", sans-serif;
  --font-digits: var(--font-display);
  color-scheme: light;
  /* margini sicuri del telefono (tacca, angoli arrotondati, barra della home): su iPhone li dà env(), nell'app Android
     li inietta Capacitor (SystemBars, insetsHandling «css») come --safe-area-inset-*; altrove valgono 0 */
  --sa-t: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --sa-r: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --sa-b: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --sa-l: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font); font-weight: 600; color: var(--ink); font-size: 16px; line-height: 1.45;
  background-color: var(--sky);
  background-image:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .05) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .05) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky) 45%, var(--sky-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--blue-dark); font-weight: 800; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
::selection { background: var(--yellow); color: var(--ink); }

/* Titoli: bianchi bordati sul cielo, blu notte dentro i pannelli */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0 0 .6rem; letter-spacing: .01em; }
h1 { font-size: 30px; color: var(--white); text-shadow: var(--outline); }
h2 { font-size: 24px; color: var(--ink); }
h3 { font-size: 19px; color: var(--ink); }
.hr-outline { color: var(--white); text-shadow: var(--outline); }

/* ---------- Pannelli ---------- */
.hr-card {
  position: relative; background: var(--surface); border: var(--px) solid var(--line); border-radius: var(--radius-lg);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / .9), inset 0 -4px 0 rgb(0 0 0 / .06), var(--shadow);
  padding: 20px;
}

/* ---------- Pulsanti gommosi ---------- */
.hr-btn {
  --c1: #ffe680; --c2: var(--yellow); --c3: var(--yellow-dark);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px 4px; width: 100%; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-size: 21px; line-height: 1.1; letter-spacing: .02em;
  color: var(--white); text-shadow: var(--outline);
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);
  border: var(--px) solid var(--line); border-radius: var(--radius);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / .6), inset 0 -5px 0 rgb(0 0 0 / .15), 0 5px 0 var(--line);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.hr-btn::after { /* riflesso lucido in alto */
  content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 30%; border-radius: 10px;
  background: linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / 0)); pointer-events: none;
}
.hr-btn:hover { filter: brightness(1.05) saturate(1.05); }
.hr-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: inset 0 3px 0 rgb(255 255 255 / .6), inset 0 -5px 0 rgb(0 0 0 / .15), 0 1px 0 var(--line); }
.hr-btn:disabled { filter: grayscale(.85) brightness(.95); cursor: default; }
.hr-btn.green { --c1: #a6f07a; --c2: var(--green); --c3: var(--green-dark); }
.hr-btn.ghost, .hr-btn.blue { --c1: #9fd4ff; --c2: var(--blue); --c3: var(--blue-dark); }
.hr-btn.danger { --c1: #ffa79f; --c2: var(--red); --c3: var(--red-dark); }
.hr-btn.hot, .hr-btn.purple { --c1: #dcb3ff; --c2: var(--purple); --c3: var(--purple-dark); }
.hr-btn.gold { --c1: #ffe680; --c2: var(--yellow); --c3: var(--yellow-dark); }
.hr-btn.sm { min-height: 40px; padding: 0 14px 3px; width: auto; font-size: 16px; border-radius: 11px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .6), inset 0 -3px 0 rgb(0 0 0 / .15), 0 3px 0 var(--line); }
.hr-btn.sm::after { top: 3px; left: 6px; right: 6px; }
.hr-btn.sm:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 rgb(255 255 255 / .6), 0 1px 0 var(--line); }
.hr-btn:focus-visible, .hr-link:focus-visible { outline: 4px solid var(--white); outline-offset: 3px; }
.hr-link {
  background: none; border: 0; padding: 6px 0; cursor: pointer; color: var(--blue-dark);
  font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.hr-link:disabled { color: var(--muted); text-decoration: none; cursor: default; }

/* ---------- Moduli ---------- */
/* quello che è nascosto resta nascosto anche se la sua classe dice display (campi del modulo, caselle…) */
[hidden] { display: none !important; }
.hr-field { display: block; margin-bottom: 18px; }
.hr-label { display: block; font-family: var(--font-display); font-size: 17px; font-weight: 400; color: var(--ink); margin-bottom: 7px; letter-spacing: .01em; }
.hr-hint { font-size: 14px; color: var(--muted); margin-top: 7px; }
.hr-input {
  width: 100%; min-height: 54px; padding: 0 14px; border-radius: 12px;
  border: var(--px) solid var(--line); background: var(--white); font-size: 18px; font-weight: 800;
  box-shadow: inset 0 3px 0 rgb(28 42 74 / .12);
}
.hr-input::placeholder, .hr-phone input::placeholder { color: #9aa3b8; font-weight: 600; }
.hr-input:focus, .hr-phone:focus-within, .hr-pin:focus-within i.cur { outline: none; border-color: var(--line); box-shadow: inset 0 3px 0 rgb(28 42 74 / .12), 0 0 0 4px var(--yellow); }
select.hr-input { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 15px) 52%; background-size: 7px 7px; background-repeat: no-repeat; }

.hr-phone { display: flex; align-items: stretch; border: var(--px) solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; box-shadow: inset 0 3px 0 rgb(28 42 74 / .12); }
.hr-phone span { display: flex; align-items: center; padding: 0 12px; background: var(--yellow); color: var(--white); text-shadow: var(--outline); font-family: var(--font-display); font-size: 20px; border-right: var(--px) solid var(--line); }
.hr-phone .hr-cc { appearance: none; -webkit-appearance: none; border: 0; border-right: var(--px) solid var(--line); border-radius: 0; margin: 0; padding: 0 10px; background: var(--yellow); color: var(--ink, #1c2a4a); font-family: var(--font-display); font-size: 18px; cursor: pointer; max-width: 42%; }
.hr-phone .hr-cc:focus { outline: none; box-shadow: inset 0 0 0 3px var(--white); }
.hr-phone input { border: 0; outline: 0; flex: 1; min-width: 0; min-height: 54px; padding: 0 14px; background: transparent; font-weight: 900; font-size: 20px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* PIN / codice: un input trasparente (sola lettura) sopra le caselle: si compila dal tastierino a schermo o incollando */
.hr-pin { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 8px; }
.hr-pin input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0;
  font-size: 16px; letter-spacing: 3em; caret-color: transparent; color: transparent; background: transparent;
}
.hr-pin i {
  display: grid; place-items: center; height: 60px; font-style: normal; border-radius: 12px;
  border: var(--px) solid var(--line); background: var(--white); box-shadow: inset 0 3px 0 rgb(28 42 74 / .12);
  font-family: var(--font-digits); font-size: 30px; line-height: 1; color: var(--ink);
}
.hr-pin i.on { background: #fffbe8; }
.hr-pin i.cur { box-shadow: inset 0 3px 0 rgb(28 42 74 / .12), 0 0 0 4px var(--yellow); }
.hr-pin i.cur::after { content: ""; width: 16px; height: 4px; border-radius: 2px; background: var(--blue-dark); align-self: end; margin-bottom: 10px; }
@media (prefers-reduced-motion: no-preference) { .hr-pin i.cur::after { animation: hr-blink 1s steps(2, start) infinite; } }
.hr-pin i.cur:not(:empty)::after, .hr-pin i.dot::after { display: none; }
.hr-pin i.dot::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 -3px 0 rgb(0 0 0 / .3); }
@keyframes hr-blink { to { visibility: hidden; } }

.hr-alert { border: var(--px) solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 15px; font-weight: 800; margin-bottom: 16px; color: var(--ink); }
.hr-alert.err { background: var(--danger-soft); color: var(--red-dark); }
.hr-alert.ok { background: var(--ok-soft); color: var(--green-dark); }
.hr-alert.info { background: var(--gold-soft); }
.hr-alert a { color: inherit; }
.hr-check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.hr-check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--green-dark); }
.hr-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hr-center { text-align: center; }
.hr-muted { color: var(--muted); }
.hr-score { font-family: var(--font-digits); font-size: 30px; color: var(--white); text-shadow: var(--outline); }
.hr-badge {
  display: inline-block; padding: 3px 10px 4px; border-radius: 999px; font-family: var(--font-display); font-size: 13px; line-height: 1.2;
  letter-spacing: .02em; color: var(--white); text-shadow: 1px 1px 0 var(--line), -1px 1px 0 var(--line), 1px -1px 0 var(--line), -1px -1px 0 var(--line), 0 2px 0 var(--line);
  background: #8b96b0; border: 2px solid var(--line); box-shadow: inset 0 2px 0 rgb(255 255 255 / .4);
}
.hr-badge.ok { background: var(--green); }
.hr-badge.err { background: var(--red); }
.hr-badge.gold { background: var(--yellow); }

.hr-spin { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--white); border-right-color: transparent; animation: hr-spin .7s linear infinite; }
@keyframes hr-spin { to { transform: rotate(360deg); } }

/* ---------- Schermata di accesso ---------- */
.hr-auth { width: 100%; max-width: 440px; margin: 0 auto; }
.hr-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 18px; text-align: center; }
.hr-mascot { width: 170px; height: 170px; object-fit: contain; margin-bottom: -26px; position: relative; z-index: 1; filter: drop-shadow(0 6px 0 rgb(16 30 70 / .25)); }
.hr-logo {
  width: 84px; height: 84px; display: grid; place-items: center; flex: none;
  filter: drop-shadow(0 5px 0 rgb(16 30 70 / .35));
}
.hr-logo svg, .hr-logo img { width: 100%; height: 100%; }
.hr-brand h1 { font-size: 40px; margin: 6px 0 0; line-height: 1; }
.hr-brand p {
  margin: 4px 0 0; padding: 4px 16px 6px; border: var(--px) solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, #9fd4ff, var(--blue)); color: var(--white); text-shadow: var(--outline);
  font-family: var(--font-display); font-size: 16px; box-shadow: 0 3px 0 var(--line);
}
.hr-auth > form, .hr-auth > .hr-panel { background: var(--surface); border: var(--px) solid var(--line); border-radius: var(--radius-lg); padding: 22px 18px; box-shadow: inset 0 3px 0 rgb(255 255 255 / .9), var(--shadow); }
.hr-steps { display: flex; gap: 6px; margin: 0 0 12px; }
.hr-steps b { flex: 1; height: 14px; border-radius: 8px; background: var(--night); border: 2px solid var(--line); box-shadow: inset 0 2px 0 rgb(0 0 0 / .3); }
.hr-steps b.on { background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); }
.hr-auth h2 { font-size: 26px; }
.hr-auth .hr-sub { color: var(--muted); margin: -4px 0 18px; font-size: 16px; }
.hr-foot { margin-top: 16px; text-align: center; font-size: 15px; color: var(--white); display: grid; gap: 4px; text-shadow: 0 2px 0 rgb(16 30 70 / .5); }
.hr-foot .hr-link { color: var(--white); text-shadow: 0 2px 0 rgb(16 30 70 / .5); }

/* ---------- Guscio applicazione (sito e back office) ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.app-top {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: calc(var(--sa-t) + 10px) 16px 12px;
  background: linear-gradient(180deg, #2a6fd6, var(--sky-deep)); border-bottom: var(--px) solid var(--line);
  box-shadow: 0 4px 0 rgb(16 30 70 / .3);
}
.app-top .hr-logo { width: 46px; height: 46px; filter: drop-shadow(0 3px 0 rgb(16 30 70 / .4)); }
.app-top strong { font-family: var(--font-display); font-size: 20px; font-weight: 400; display: block; line-height: 1.1; color: var(--white); text-shadow: var(--outline); }
.app-top small { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 900; color: var(--white); background: var(--night); border: 2px solid var(--line); border-radius: 999px; padding: 0 8px; }
.app-main { padding: 20px 16px calc(100px + var(--sa-b)); max-width: 1080px; margin: 0 auto; }
.app-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  padding: 6px 6px calc(6px + var(--sa-b));
  background: linear-gradient(180deg, #2a4f99, var(--night)); border-top: var(--px) solid var(--line);
}
.app-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; text-decoration: none; border-radius: 12px;
  font-family: var(--font-display); font-size: 12px; color: #b9c8ec; border: 2px solid transparent; min-width: 0;
}
.app-nav a.on {
  color: var(--white); text-shadow: var(--outline); border-color: var(--line); transform: translateY(-6px);
  background: linear-gradient(180deg, #7cc2ff, var(--blue) 55%, var(--blue-dark)); box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), 0 4px 0 var(--line);
}
.app-nav svg { width: 26px; height: 26px; }
.app-nav a.on svg { filter: drop-shadow(0 2px 0 var(--line)); }
.grid { display: grid; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile {
  position: relative; padding: 12px 14px 12px 14px; border-radius: 16px; border: var(--px) solid var(--line); min-width: 0;
  container-type: inline-size; /* le cifre lunghe (293.542) si rimpiccioliscono invece di uscire dal riquadro */
  background: linear-gradient(180deg, #3d7fe0, #2459b8); box-shadow: inset 0 3px 0 rgb(255 255 255 / .3), 0 4px 0 rgb(16 30 70 / .35);
}
.tile b { display: block; font-family: var(--font-digits); font-size: 32px; white-space: nowrap; font-weight: 400; line-height: 1.1; color: var(--white); text-shadow: var(--outline); }
.tile b.long { font-size: min(32px, 28cqi); }
.tile b.xlong { font-size: min(32px, 21cqi); }
.tile span { font-family: var(--font-display); font-size: 15px; color: #d6e6ff; }
.soon { display: flex; gap: 14px; align-items: center; }
.soon .ico { flex: none; width: 52px; height: 52px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); border: var(--px) solid var(--line); border-radius: 14px; }
.soon h3 { margin: 0 0 4px; }
.soon p { margin: 0; color: var(--muted); font-size: 15px; }
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: calc(var(--sa-t) + 20px) 16px 28px; }

/* ---------- Scene illustrate ----------
 * <div class="hr-scene"><img class="hr-scene-img" src="assets/img/….webp" alt="" onerror="this.remove()"> <div class="hr-scene-body">…</div></div>
 * Le illustrazioni (cavallini cartoon, create con Magnific) restano nitide; sotto il
 * titolo c'è un'etichetta-banner. Se l'immagine manca resta il paesaggio di riserva: cielo, nuvole, colline.
 */
.hr-scene {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg);
  border: var(--px) solid var(--line); box-shadow: var(--shadow); min-height: 220px;
  background:
    radial-gradient(60% 40% at 20% 108%, #4fb52b 0 98%, transparent 100%),
    radial-gradient(70% 45% at 85% 112%, var(--green) 0 98%, transparent 100%),
    radial-gradient(90% 40% at 50% 120%, #82dc4f 0 98%, transparent 100%),
    linear-gradient(180deg, #8fdcff 0%, #4fb6ff 70%);
}
.hr-scene::before { /* nuvole */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(closest-side, #fff 96%, transparent) 12% 22% / 22% 14% no-repeat,
    radial-gradient(closest-side, #fff 96%, transparent) 20% 18% / 16% 16% no-repeat,
    radial-gradient(closest-side, #fff 96%, transparent) 72% 30% / 26% 13% no-repeat,
    radial-gradient(closest-side, #fff 96%, transparent) 80% 25% / 15% 15% no-repeat;
  opacity: .95;
}
.hr-scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hr-scene-body { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; }
.hr-scene-body h2 {
  display: inline-block; margin: 0; padding: 4px 14px 6px; border: var(--px) solid var(--line); border-radius: 12px;
  background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); color: var(--white); text-shadow: var(--outline);
  box-shadow: 0 4px 0 var(--line); font-size: 22px;
}
.hr-scene-body p {
  margin: 8px 0 0; display: inline-block; padding: 4px 10px; border-radius: 10px; background: rgb(255 255 255 / .92);
  border: 2px solid var(--line); color: var(--ink); font-weight: 800; font-size: 15px;
}
.hr-scene.square { aspect-ratio: 1; min-height: 0; }
.hr-scene.wide { aspect-ratio: 16 / 10; min-height: 0; }
.tiles.cards .hr-scene-body { left: 8px; right: 8px; bottom: 8px; }
.tiles.cards .hr-scene-body h2 { font-size: 17px; padding: 3px 10px 5px; }
.tiles.cards .hr-scene-body p { display: none; }

@media (min-width: 900px) {
  h1 { font-size: 38px; }
  /* minmax(0, …): un contenuto largo (le 24 ore del meteo) scorre dentro il suo riquadro invece di allargare la pagina */
  .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .app-top { grid-column: 1 / -1; }
  .app-nav {
    position: sticky; top: 74px; height: calc(100vh - 74px); display: flex; flex-direction: column; gap: 8px;
    border-top: 0; border-right: var(--px) solid var(--line); padding: 18px 12px;
  }
  .app-nav a { flex-direction: row; gap: 12px; padding: 10px 14px; font-size: 18px; }
  .app-nav a.on { transform: translateX(4px); }
  .app-main { padding: 32px 36px; width: 100%; min-width: 0; box-sizing: border-box; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .grid.two { grid-template-columns: 1fr 1fr; }
  .hr-scene.wide { aspect-ratio: 21 / 8; }
  .tiles.cards .hr-scene-body p { display: inline-block; }
}

.hr-lead { color: #eaf3ff; font-size: 17px; font-weight: 800; margin: -4px 0 16px; max-width: 62ch; text-shadow: 0 2px 0 rgb(16 30 70 / .45); }

/* Selettore lingua IT / FR / EN */
.hr-lang { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgb(16 30 70 / .35); border: 2px solid var(--line); }
.hr-auth > .hr-lang { display: flex; width: max-content; margin: 0 0 8px auto; }
.hr-lang button {
  min-width: 42px; min-height: 34px; padding: 0 8px; border-radius: 9px; border: 2px solid transparent; cursor: pointer;
  background: transparent; color: #dbe8ff; font-family: var(--font-display); font-size: 15px;
}
.hr-lang button.on { background: linear-gradient(180deg, #ffe680, var(--yellow)); color: var(--white); text-shadow: var(--outline); border-color: var(--line); }
.hr-card .hr-lang { background: var(--surface-2); }
.hr-card .hr-lang button:not(.on) { color: var(--ink); }

/* Scelta tra opzioni (es. specialità): grossi bottoni-carta */
.hr-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hr-choice {
  display: grid; gap: 2px; padding: 10px 6px; cursor: pointer; text-align: center; border-radius: 12px; font: inherit;
  background: var(--white); border: var(--px) solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.hr-choice b { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--ink); }
.hr-choice small { font-size: 12px; font-weight: 800; color: var(--muted); line-height: 1.2; }
.hr-choice.on { background: linear-gradient(180deg, #ffe680, var(--yellow)); box-shadow: 0 0 0 4px var(--white), 0 3px 0 var(--line); }
.hr-choice.on b { color: var(--white); text-shadow: var(--outline); }
.hr-choice.on small { color: var(--ink); }

/* ---------- Giubba: editor (assets/hr-silk.js) ---------- */
.silk-editor { display: grid; gap: 16px; }
.silk-preview { display: grid; justify-items: center; gap: 10px; padding-top: 14px;
  background: radial-gradient(70% 55% at 50% 45%, #fff 0, var(--surface) 70%); }
.silk-name { font-family: var(--font-display); font-size: 22px; color: var(--white); text-shadow: var(--outline);
  background: linear-gradient(180deg, #9fd4ff, var(--blue) 60%, var(--blue-dark)); border: var(--px) solid var(--line);
  border-radius: 12px; padding: 4px 14px 6px; box-shadow: 0 4px 0 var(--line); text-align: center; }
.silk-stage svg { display: block; filter: drop-shadow(0 4px 0 rgb(16 30 70 / .15)); }
@media (prefers-reduced-motion: no-preference) {
  .silk-stage svg { animation: silk-bob 2.6s ease-in-out infinite; }
}
@keyframes silk-bob { 50% { transform: translateY(-5px); } }
.silk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.silk-tabs .hr-btn { flex: 1 1 auto; }
.silk-tools h3 { margin: 14px 0 8px; font-size: 17px; }
.silk-patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.silk-pattern {
  display: grid; justify-items: center; gap: 2px; padding: 6px 4px 6px; cursor: pointer; border-radius: 12px;
  background: var(--white); border: var(--px) solid var(--line); box-shadow: 0 3px 0 var(--line); font: inherit;
}
.silk-pattern svg { display: block; }
.silk-pattern small { font-size: 12px; font-weight: 800; color: var(--ink); line-height: 1.15; text-align: center; }
.silk-pattern.on { background: #fff4c2; box-shadow: 0 0 0 4px var(--yellow), 0 3px 0 var(--line); }
.silk-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.silk-color {
  aspect-ratio: 1; border-radius: 50%; cursor: pointer; background: var(--c); border: var(--px) solid var(--line);
  box-shadow: inset 0 4px 0 rgb(255 255 255 / .35), inset 0 -4px 0 rgb(0 0 0 / .18), 0 3px 0 var(--line);
}
.silk-color.on { box-shadow: 0 0 0 4px var(--yellow), inset 0 4px 0 rgb(255 255 255 / .35), 0 3px 0 var(--line); transform: scale(1.08); }
.silk-tools > .hr-btn { margin-top: 18px; }
.app-top .hr-silk-mini { width: 44px; height: 52px; flex: none; }
@media (min-width: 900px) {
  .silk-editor { grid-template-columns: minmax(280px, 380px) 1fr; align-items: start; }
  .silk-preview { position: sticky; top: 100px; }
}

/* ---------- Player della corsa (assets/hr-race.js) ---------- */
.race { display: grid; gap: 10px; }
.race-stage {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); border: var(--px) solid var(--line);
  box-shadow: var(--shadow); background: #8fdcff; min-height: 240px;
}
.race-canvas { display: block; cursor: pointer; }
.race-top {
  position: absolute; top: 8px; left: 8px; display: grid; justify-items: start; gap: 4px; pointer-events: none;
}
.race-top span {
  padding: 3px 10px 4px; border-radius: 10px; border: 2px solid var(--line); box-shadow: 0 3px 0 var(--line);
  background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark));
  font-family: var(--font-display); font-size: 16px; color: var(--white); text-shadow: var(--outline);
  /* larghezza fissa: i due riquadri non si allargano e stringono mentre cambiano i numeri */
  width: 9.2em; box-sizing: border-box; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.race-top span + span { background: var(--night); text-shadow: none; font-variant-numeric: tabular-nums; }
.race-board {
  position: absolute; top: 8px; right: 8px; margin: 0; padding: 4px; list-style: none; display: grid; gap: 3px;
  background: rgb(22 38 77 / .82); border: 2px solid var(--line); border-radius: 12px; pointer-events: none; min-width: 120px;
}
.race-board li { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 900; color: var(--white); line-height: 1.2; }
.race-board li b { width: 14px; text-align: center; font-family: var(--font-display); font-weight: 400; color: var(--yellow); }
.race-board li i {
  display: grid; place-items: center; width: 20px; height: 18px; border-radius: 5px; border: 2px solid var(--line);
  font-style: normal; font-family: var(--font-display); font-size: 11px; color: var(--white); text-shadow: 0 1px 0 var(--line);
}
.race-board li:nth-child(n+4) { display: none; }
.race-board li span { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-board { pointer-events: auto; }
.race-board li { cursor: pointer; border-radius: 6px; padding: 1px 3px; }
.race-board li.me span { color: var(--yellow); }
.race-board li.pov { background: rgb(255 205 46 / .3); }
.race-map { position: absolute; left: 8px; bottom: 8px; width: 78px; cursor: pointer; filter: drop-shadow(0 3px 0 rgb(16 30 70 / .4)); }
.race-map:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 12px; }
.race-map svg { display: block; width: 100%; height: auto; }
.race-ticker {
  position: absolute; left: 94px; right: 8px; bottom: 8px; display: grid; gap: 2px; justify-items: end; pointer-events: none;
}
.race-ticker p {
  margin: 0; padding: 3px 10px 4px; border-radius: 10px; background: rgb(255 255 255 / .75); border: 2px solid var(--line);
  font-size: 12px; font-weight: 900; color: var(--muted); max-width: 100%;
}
.race-ticker p:not(.now) { display: none; }
.race-ticker p.now { background: var(--white); color: var(--ink); font-size: 13px; }
.race-result {
  position: absolute; inset: 10px; overflow: auto; padding: 12px; border-radius: 16px; border: var(--px) solid var(--line);
  background: var(--surface); box-shadow: var(--shadow); display: grid; align-content: start; gap: 8px;
}
.race-result[hidden] { display: none; }
.race-result h3 { margin: 0; text-align: center; }
.race-result ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.race-result li {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; background: var(--white); border: 2px solid var(--line);
}
.race-result li.me { background: var(--gold-soft); }
.race-result li > b { width: 28px; font-family: var(--font-display); font-weight: 400; font-size: 18px; text-align: center; }
.race-result li span { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.race-result li span strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-result li small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-result li em { font-style: normal; font-weight: 900; font-size: 13px; color: var(--muted); white-space: nowrap; }
.race-result > .hr-btn { justify-self: center; }
.runners-kg { flex: none; padding: 2px 8px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface-2); font-family: var(--font-display); font-size: 13px; color: var(--ink); white-space: nowrap; }
/* podio di fine corsa: 2° 1° 3°, cavallino sul blocco, fantino o driver di fianco, coccarda al vincitore */
.race-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; padding: 4px 2px 0; }
.race-step { display: grid; justify-items: center; text-align: center; min-width: 0; }
.race-step-stage { position: relative; width: 100%; max-width: 150px; height: 84px; }
.race-step-horse { position: absolute; left: 4%; bottom: -2px; width: 74%; }
.race-step-horse svg, .race-step-rider svg, .race-rosette svg { display: block; width: 100%; height: auto; }
.race-step-rider { position: absolute; right: 2%; bottom: -2px; width: 18%; }
.race-rosette { position: absolute; left: 44%; top: 4px; width: 20%; z-index: 1; animation: race-rosette 1.6s ease-in-out infinite; }
@keyframes race-rosette { 50% { transform: rotate(-8deg) scale(1.06); } }
.race-step-block { width: 100%; max-width: 150px; display: grid; place-items: center; border: var(--px) solid var(--line); border-radius: 10px 10px 4px 4px; box-shadow: inset 0 3px 0 rgb(255 255 255 / .6), 0 3px 0 var(--line); }
.race-step-block b { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--white); text-shadow: var(--outline); }
.race-step.p1 .race-step-block { height: 62px; background: linear-gradient(#ffe680, var(--gold) 60%, var(--yellow-dark)); }
.race-step.p2 .race-step-block { height: 44px; background: linear-gradient(#ffffff, #d9e1ee 60%, #a9b6cc); }
.race-step.p3 .race-step-block { height: 32px; background: linear-gradient(#f6c79a, #e7a76a 60%, #b8743a); }
.race-step strong { margin-top: 6px; font-size: 13px; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-step small { font-size: 11px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .race-rosette { animation: none; } }
.race-controls { display: flex; align-items: center; gap: 10px; }
.race-controls > .hr-btn { width: 48px; padding: 0 0 3px; }
.race-controls > .race-fullbtn { width: 44px; flex: none; }
.race-controls > .race-fullbtn[hidden] { display: none; }
/* telefono: due righe di comandi (sopra play, barra e tutto schermo; sotto regia e velocità), niente fuori schermo */
@media (max-width: 560px) {
  .race-controls { flex-wrap: wrap; row-gap: 8px; }
  .race-controls > .race-scrub { flex: 1 1 calc(100% - 128px); order: 1; }
  .race-controls > .race-fullbtn { order: 2; }
  .race-controls > .race-auto { order: 3; }
  .race-controls > .race-cam { order: 4; }
  .race-controls > .race-speeds { order: 5; margin-left: auto; }
  .race.full .race-controls { flex-wrap: nowrap; }
  .race.full .race-controls > * { order: 0; }
}
.race-scrub { flex: 1; min-width: 0; accent-color: var(--yellow-dark); height: 28px; }
.race-speeds { display: flex; gap: 4px; }
.race-cam { flex: none; white-space: nowrap; padding: 0 10px 3px; min-height: 36px; min-width: 44px; font-size: 18px; }
.race-auto { flex: none; white-space: nowrap; padding: 0 10px 3px; min-height: 36px; font-size: 14px; }
.race-controls > .race-auto { width: auto; }
.race-auto:not(.on), .race-cam:not(.on) { filter: grayscale(.6) brightness(.9); }
.race.wide .race-map { display: none; }
.race.wide .race-ticker { left: 8px; }
.race-close {
  position: absolute; top: max(8px, var(--sa-t)); left: 50%; transform: translateX(-50%); z-index: 4;
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: rgb(255 255 255 / .85);
  font-weight: 900; color: var(--ink); cursor: pointer;
}
.race-close[hidden] { display: none; }
/* telefono in orizzontale: la corsa occupa tutto lo schermo, comandi sovrapposti */
html.race-lock, html.race-lock body { overflow: hidden; }
.race.full { position: fixed; inset: 0; z-index: 1000; gap: 0; background: var(--night);
  --rt: var(--sa-t); --rr: var(--sa-r); --rb: var(--sa-b); --rl: var(--sa-l); }
.race.full.rot { --rt: var(--sa-r); --rr: var(--sa-b); --rb: var(--sa-l); --rl: var(--sa-t); }
.race.full .race-top { top: max(6px, var(--rt)); left: max(6px, calc(var(--rl) + 4px)); }
.race.full .race-board { top: max(6px, var(--rt)); right: max(6px, calc(var(--rr) + 4px)); }
.race.full .race-close { top: max(8px, var(--rt)); }
.race.full .race-map { left: max(6px, calc(var(--rl) + 4px)); }
.race.full .race-ticker { right: max(6px, calc(var(--rr) + 4px)); left: calc(max(6px, calc(var(--rl) + 4px)) + 66px); }
.race.full .race-result { top: max(10px, var(--rt)); right: max(10px, calc(var(--rr) + 4px)); left: max(10px, calc(var(--rl) + 4px)); }
/* telefono in verticale con il bottone «a tutto schermo»: la corsa si gira di 90°, si gira il telefono per guardarla */
.race.full.rot { right: auto; bottom: auto; width: 100vh; width: 100dvh; height: 100vw; height: 100dvw; transform-origin: top left; transform: translateX(100vw) rotate(90deg); }
.race.full .race-stage { position: absolute; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
.race.full .race-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 6px max(10px, calc(var(--rr) + 4px)) max(6px, var(--rb)) max(10px, calc(var(--rl) + 4px));
  background: linear-gradient(180deg, transparent, rgb(16 30 70 / .6));
}
.race.full .race-controls .hr-btn { min-height: 34px; }
.race.full .race-map, .race.full .race-ticker, .race.full .race-result { bottom: calc(var(--ctrl-h, 54px) + 8px); }
.race-speeds .hr-btn { padding: 0 8px 3px; min-height: 36px; font-size: 14px; }
.race-speeds .hr-btn:not(.on) { filter: grayscale(.6) brightness(.9); }
@media (min-width: 900px) {
  .race-board li { font-size: 13px; }
  .race-board li:nth-child(n+4) { display: flex; }
  .race-ticker p:not(.now) { display: block; }
  .race-ticker p.now { font-size: 14px; }
  .race-map { width: 130px; }
  .race-ticker { left: 150px; }
}

/* ---------- Gioco: crediti, schede, corse, ordini, scuderia, mercato (assets/app.js) ---------- */
.app-credits {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 5px 6px; border-radius: 999px; text-decoration: none; flex: none;
  background: var(--night); border: 2px solid var(--line); box-shadow: inset 0 2px 0 rgb(255 255 255 / .15);
}
.app-credits i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: radial-gradient(circle at 35% 35%, #fff3b0, var(--yellow) 45%, var(--yellow-dark)); }
.app-credits b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: var(--white); font-variant-numeric: tabular-nums; }

.hr-tabs { display: flex; gap: 6px; margin: 0 0 14px; padding: 5px; border-radius: 14px; background: rgb(16 30 70 / .35); border: 2px solid var(--line); }
.hr-tabs button {
  flex: 1; min-height: 40px; border-radius: 10px; border: 2px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: 16px; color: #dbe8ff;
}
.hr-tabs button.on { background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); color: var(--white); text-shadow: var(--outline); border-color: var(--line); box-shadow: 0 3px 0 var(--line); }

.hr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-seg button {
  flex: 1 1 auto; min-height: 42px; padding: 0 12px; border-radius: 11px; cursor: pointer; font-weight: 900; font-size: 14px;
  background: var(--white); border: var(--px) solid var(--line); box-shadow: 0 3px 0 var(--line); color: var(--ink);
}
.hr-seg button.on { background: linear-gradient(180deg, #9fd4ff, var(--blue) 60%, var(--blue-dark)); color: var(--white); text-shadow: 0 1px 0 var(--line), 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); }

.race-card { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 12px 14px; text-decoration: none; color: inherit; }
.race-card.mine { background: var(--gold-soft); }
.race-card-time { display: grid; justify-items: center; min-width: 62px; padding: 6px 4px; border-radius: 12px; background: var(--night); border: 2px solid var(--line); }
.race-card-time b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--white); line-height: 1; }
.race-card-time small { font-size: 11px; font-weight: 900; color: #b9c8ec; text-transform: uppercase; }
.race-card-body { display: grid; gap: 2px; min-width: 0; }
.race-card-body strong { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.15; }
.race-card-body > small { font-size: 13px; color: var(--muted); font-weight: 800; }
.race-card-meta { font-size: 13px; font-weight: 800; color: var(--ink); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 3px; }
.race-card-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; font-weight: 800; color: var(--muted); }
.race-card-purse { color: var(--ink); }
@media (min-width: 700px) {
  .race-card { grid-template-columns: auto 1fr auto; }
  .race-card-side { grid-column: auto; display: grid; justify-items: end; gap: 3px; }
}
.race-head h1 { margin-top: 6px; }
/* il sottotitolo (ippodromo, pista, ora) staccato dal conto alla rovescia sotto */
.race-head .hr-lead { margin: 4px 0 18px; }
.race-back { display: inline-block; color: var(--white); text-shadow: 0 2px 0 rgb(16 30 70 / .5); }
.race-facts { display: grid; gap: 10px; margin-bottom: 16px; }
.race-facts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-weight: 900; font-size: 15px; }
.race-wait { display: grid; justify-items: center; gap: 10px; }
.race-wait h3 { margin: 0; }
.race-box { min-height: 200px; }

.runners { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.runners li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: var(--white); border: 2px solid var(--line); }
.runners li.me { background: var(--gold-soft); box-shadow: 0 0 0 3px var(--yellow); }
.runners li > b { width: 26px; text-align: center; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.runners-silk { flex: none; display: grid; }
.runners-name { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.runners-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runners-name small { font-size: 12px; color: var(--muted); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runners li em { font-style: normal; font-weight: 900; font-size: 13px; display: grid; justify-items: end; }
.runners li em small { color: var(--green-dark); }

.order-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.order-grid button {
  min-height: 46px; border-radius: 11px; cursor: pointer; padding: 0;
  font-family: var(--font-display); font-size: 21px; color: var(--ink);
  background: var(--white); border: var(--px) solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.order-grid button.on { background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); color: var(--white); text-shadow: var(--outline); transform: translateY(-3px); box-shadow: 0 6px 0 var(--line); }
@media (max-width: 420px) { .order-grid { grid-template-columns: repeat(5, 1fr); } }
.order-chart { padding: 10px 12px 8px; border-radius: 14px; background: var(--night); border: var(--px) solid var(--line); margin-bottom: 8px; }
.order-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--yellow); margin-bottom: 6px; }
.order-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; height: 70px; }
.order-bars i { display: block; border-radius: 5px 5px 2px 2px; border: 2px solid var(--line); background: linear-gradient(180deg, #a6f07a, var(--green) 50%, var(--green-dark)); min-height: 6px; }
.order-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; font-weight: 900; color: #b9c8ec; text-transform: uppercase; }

.form-two { display: grid; gap: 0 14px; }
@media (min-width: 700px) { .form-two { grid-template-columns: 1fr 1fr; } }

.horse-grid { display: grid; gap: 16px; align-items: start; }
.stock-search { display: flex; gap: 8px; margin-bottom: 10px; }
.stock-search .hr-input { flex: 1; min-width: 0; margin: 0; }
.stock-search .hr-btn { flex: none; }
.stock-ai { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: -2px 0 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.stock-ai .ply-link { width: auto; min-height: 0; padding: 0; border: 0; }
.stock-ai[hidden] { display: none; }
.stock-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.stock-anc { margin: 0; font-size: 13px; font-weight: 700; color: var(--blue-dark); }
@media (min-width: 900px) { .horse-grid { grid-template-columns: 1fr 1fr; } }
.horse-card { display: grid; gap: 12px; }
.horse-card-pic {
  display: grid; place-items: center; height: 150px; margin: -20px -20px 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: var(--px) solid var(--line);
  background: radial-gradient(70% 40% at 50% 100%, #4fb52b 0 98%, transparent 100%), linear-gradient(180deg, #8fdcff, #c9efff);
}
.horse-card-pic svg { filter: drop-shadow(0 5px 0 rgb(16 30 70 / .25)); }
/* nella scheda il cavallo cammina: il prato lo disegna il canvas, l'altezza segue la larghezza */
.horse-card-pic.walker { display: block; height: auto; min-height: 150px; background: linear-gradient(180deg, #8fdcff, #c9efff); }
.horse-card-head { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; }
.horse-card-head h3 { margin: 0; font-size: 22px; }
.horse-card-head small { grid-column: 1; font-size: 13px; color: var(--muted); font-weight: 800; }
.horse-rating {
  grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: center; padding: 6px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #dcb3ff, var(--purple) 60%, var(--purple-dark)); border: var(--px) solid var(--line); box-shadow: 0 3px 0 var(--line);
}
.horse-rating b { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--white); text-shadow: var(--outline); }
.horse-rating span { font-size: 11px; font-weight: 900; color: var(--white); text-transform: uppercase; }
.meters { display: grid; gap: 6px; }
.meter { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; }
.meter > div { height: 14px; border-radius: 8px; background: var(--surface-2); border: 2px solid var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(180deg, #a6f07a, var(--green-dark)); }
.meter.fresh i { background: linear-gradient(180deg, #9fd4ff, var(--blue-dark)); }
.meter b { text-align: right; }
.horse-record { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.horse-record span { display: grid; justify-items: center; padding: 6px 2px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); font-size: 12px; font-weight: 800; color: var(--muted); }
.horse-record b { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--ink); }
.rating-chart:empty { display: none; }
.rating-chart { margin-top: 12px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); }
.rating-chart-head, .rating-chart-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted); }
.rating-chart-head b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--ink); }
.rating-chart-foot { font-size: 11px; font-weight: 700; }
.rating-chart-svg svg { display: block; width: 100%; height: 64px; margin: 4px 0; }
.rating-chart-svg .line { fill: none; stroke: var(--blue-dark); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rating-chart-svg .area { fill: var(--blue); opacity: .18; stroke: none; }
.horse-traits summary { cursor: pointer; font-family: var(--font-display); font-size: 17px; color: var(--blue-dark); }
.horse-traits dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; font-size: 14px; }
.horse-traits dt { font-weight: 900; }
.horse-traits dd { margin: 0; color: var(--muted); font-weight: 800; }
.trait { display: grid; grid-template-columns: 110px 1fr 56px; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; margin-top: 6px; }
.trait-bar { position: relative; height: 12px; border-radius: 7px; background: var(--surface-2); border: 2px solid var(--line); overflow: hidden; }
.trait-bar i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, var(--yellow), var(--yellow-dark)); border-radius: 5px; }
.trait.unknown .trait-bar i { background: repeating-linear-gradient(45deg, #c8cfdc 0 5px, #dde2ea 5px 10px); }
.trait b { text-align: right; }
.horse-actions { justify-content: flex-start; }
.sell-box { padding: 12px; border-radius: 14px; background: #f3e6ff; border: 2px solid var(--line); }

.market-head { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.market-head h3 { margin: 0 0 2px; }
.market-head p { margin: 0; font-size: 14px; }
.market-head > .hr-badge { grid-column: 1 / -1; justify-self: start; }
.market-gavel { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; border: var(--px) solid var(--line); background: linear-gradient(180deg, #dcb3ff, var(--purple)); color: var(--white); }
.market-gavel svg { width: 30px; height: 30px; }
.lot { display: grid; gap: 10px; }
.lot.leading { box-shadow: 0 0 0 4px var(--green), var(--shadow); }
.lot h3 a { color: inherit; text-decoration: none; }
.lot h3 a:hover { text-decoration: underline; }
.lot-pic { display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, #8fdcff, #c9efff); border: 2px solid var(--line); padding: 6px; }
.lot-body { display: grid; gap: 4px; justify-items: start; }
.lot-body h3 { margin: 0; }
.lot-body > small { font-size: 13px; color: var(--muted); font-weight: 800; }
.lot-body > small.lot-ped { font-style: italic; font-weight: 700; }
.lot-body > small.lot-where { color: var(--blue-dark); }
/* riquadro d'acquisto del mercato: prezzo, trasporto e totale, con il pulsante che dice quanto si paga davvero */
.buy-box { width: 100%; max-width: 420px; display: grid; gap: 6px; margin-top: 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 2px solid var(--line); }
.buy-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 800; color: var(--muted); }
.buy-row b { color: var(--ink); font-weight: 900; white-space: nowrap; }
.buy-row.tot { padding-top: 6px; border-top: 2px dashed rgb(0 0 0 / .18); color: var(--ink); }
.buy-row.tot b { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.buy-box .hr-btn { width: 100%; margin-top: 4px; }
.lot-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; }
.lot-price span { font-size: 13px; font-weight: 900; color: var(--muted); }
.lot-price b { font-family: var(--font-display); font-weight: 400; font-size: 26px; }
.lot-price small { font-size: 12px; color: var(--muted); font-weight: 800; }
.lot-leading { margin: 0; font-weight: 900; color: var(--green-dark); }
.lot-bid { display: flex; gap: 8px; width: 100%; }
.lot-bid .hr-input { min-height: 44px; flex: 1; }
@media (min-width: 700px) { .lot { grid-template-columns: 200px 1fr; align-items: center; } }

/* Ippodromi e meteo */
.track-info { display: grid; gap: 12px; }
.track-info-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.track-info-head h2 { margin: 0; }
.track-info-head small { color: var(--muted); font-weight: 800; }
.track-now { display: grid; justify-items: center; padding: 6px 12px; border-radius: 14px; background: linear-gradient(180deg, #9fd4ff, var(--blue)); border: var(--px) solid var(--line); box-shadow: 0 3px 0 var(--line); }
.track-now b { font-size: 28px; line-height: 1; }
.track-now span { font-size: 12px; font-weight: 900; color: var(--white); text-shadow: 0 1px 0 var(--line); }
.track-going { display: flex; flex-wrap: wrap; gap: 6px; }
.going-pill { display: grid; padding: 4px 10px; border-radius: 12px; border: 2px solid var(--line); background: #a6f07a; line-height: 1.15; }
.going-pill small { font-size: 11px; font-weight: 900; color: var(--ink); opacity: .75; }
.going-pill b { font-size: 14px; }
.going-pill.g0, .going-pill.g1, .going-pill.g2 { background: #8a6238; color: var(--white); }
.going-pill.g0 small, .going-pill.g1 small, .going-pill.g2 small { color: var(--white); }
.going-pill.g3, .going-pill.g4 { background: #c9b07a; }
.going-pill.g8, .going-pill.g9 { background: #ffe680; }
.track-hours { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
.track-hours span { flex: none; display: grid; justify-items: center; min-width: 46px; padding: 4px 2px; border-radius: 10px; background: var(--white); border: 2px solid var(--surface-2); }
.track-hours span.fc { background: var(--surface-2); font-style: italic; }
.track-hours small { font-size: 11px; font-weight: 900; color: var(--muted); }
.track-hours b { font-size: 18px; }
/* i prossimi giorni: tempo prevalente e terreno previsto */
.track-days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 4px; }
.track-day { flex: none; display: grid; justify-items: center; gap: 2px; min-width: 76px; padding: 6px 6px 8px; border-radius: 12px; background: var(--white); border: 2px solid var(--surface-2); }
.track-day.fc { background: var(--surface-2); }
.track-day small { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: capitalize; }
.track-day b { font-size: 22px; line-height: 1.1; }
.going-mini { font-style: normal; font-size: 11px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: #e1f6d3; color: #2a6e12; white-space: nowrap; }
.going-mini.g0, .going-mini.g1, .going-mini.g2 { background: #8a6238; color: var(--white); }
.going-mini.g3, .going-mini.g4 { background: #c9b07a; color: var(--ink); }
.going-mini.g8, .going-mini.g9 { background: #ffe9a8; color: #7a4f00; }
.track-map { padding: 8px; border-radius: 14px; background: #4f9d35; border: 3px solid var(--line); justify-self: center; max-width: 100%; }
.track-map svg { display: block; max-width: 100%; height: auto; }
.track-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.track-courses li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.track-courses small { grid-column: 2; font-size: 12px; font-weight: 800; color: var(--muted); }
.sf-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: #7fd35a; }
.sf-dot.sabbia { background: #dcb57e; }
.sf-dot.all_weather { background: #8a6b55; }
.stock-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.stock-facts dt { font-weight: 900; }
.stock-facts dd { margin: 0; color: var(--muted); font-weight: 800; }
.stock-facts.warn dd { color: var(--red-dark); }
.stock-cross-out { display: grid; gap: 8px; }
.name-form { display: grid; gap: 8px; margin-top: 10px; }
.name-form .hr-row { flex-wrap: nowrap; }
.name-form .hr-input { flex: 1; min-width: 0; }
.stock-fee { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stock-cross-out p { margin: 0; font-weight: 800; }

/* Albero genealogico: quattro generazioni, maschi in azzurro e femmine in rosa */
.pedigree-wrap { overflow-x: auto; margin-top: 8px; }
.pedigree { display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); grid-template-rows: repeat(16, minmax(26px, auto)); gap: 3px; font-size: 12px; min-width: 380px; }
.ped-cell { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 2px 6px; border-radius: 8px; border: 2px solid var(--surface-2); background: var(--white); line-height: 1.15; }
.ped-cell.m { border-left: 5px solid var(--blue); }
.ped-cell.f { border-left: 5px solid #ff8fc7; }
.ped-cell > a, .ped-cell > span { font-weight: 800; overflow-wrap: anywhere; }
.ped-cell.known > a { color: var(--blue-dark); }
.ped-cell small { font-size: 10px; font-weight: 800; color: var(--muted); }
.ped-cell.g1 { font-size: 14px; }
.ped-cell.g2 { font-size: 13px; }

/* Trasferte: costo per andare a correre fuori casa */
.travel { font-weight: 800; color: var(--ink-soft, #4a5778); }
.travel.home { color: var(--green-dark, #2f8a1f); }
.track-travel { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.home-track { margin-bottom: 16px; }
.home-track h2 { margin: 0 0 4px; }

/* Scommesse: quote come bottoni, freccia se la quota è scesa o salita dall'apertura */
.bets-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; }
.bets-table th { text-align: left; font-size: 12px; color: var(--ink-soft, #4a5778); padding: 4px 6px; }
.bets-table td { padding: 5px 6px; border-top: 2px solid rgb(28 42 74 / .08); vertical-align: middle; }
.bets-table td small { display: block; font-size: 12px; color: var(--ink-soft, #4a5778); }
.odds {
  /* tutti i bottoni della stessa larghezza: cifre a larghezza fissa e spazio per la freccia */
  display: inline-flex; align-items: baseline; gap: 3px; width: 84px; justify-content: center; padding: 6px 4px; cursor: pointer;
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--line); border-radius: 10px; background: var(--white); font-family: var(--font-display); font-size: 16px; color: var(--ink, #1c2a4a);
  box-shadow: 0 3px 0 var(--line);
}
.odds.on { background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); }
.odds:disabled { opacity: .5; cursor: default; }
.odds small.down { color: var(--green-dark); }
.odds small.up { color: #d64545; }
.bets-go { display: grid; gap: 8px; }
.my-bets { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.my-bets .bet-when { display: block; margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.my-bets li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgb(28 42 74 / .05); }

/* Allenamento nella scheda del cavallo */
.train-box { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border-radius: 12px; background: rgb(28 42 74 / .05); }
.train-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.train-head small { margin-left: auto; color: var(--ink-soft, #4a5778); font-weight: 800; }

/* Notizie in home */
.news { margin-top: 18px; }
.news ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.news li { padding: 10px 12px; border-radius: 12px; background: rgb(28 42 74 / .05); }
.news li small { display: block; font-size: 12px; color: var(--ink-soft, #4a5778); font-weight: 800; }
.news li p { margin: 2px 0 0; }
.news li.news-giornata { background: rgb(255 205 46 / .18); }
.news a { color: inherit; }


/* banner consenso Analytics (firebase.js) */
.cookie-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto; padding: 12px 14px; background: var(--surface); border: var(--px) solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 0 rgba(0,0,0,.18); color: var(--ink); font-size: 14px; font-weight: 700; }
.cookie-bar span { flex: 1 1 220px; }
.push-box .hr-muted { display: block; margin-top: 6px; }

/* tastierino numerico a schermo (hr-auth.js): foglio dal basso su telefono, finestra al centro su computer */
.hr-kb-veil { position: fixed; inset: 0; z-index: 90; background: rgb(16 30 70 / .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
.hr-kb-veil.open { opacity: 1; pointer-events: auto; }
.hr-kb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; display: flex; flex-direction: column; gap: 12px; max-height: 100dvh; overflow-y: auto; margin: 0 auto; max-width: 480px; padding: 14px 16px calc(18px + var(--sa-b)); background: var(--surface); color: var(--ink); border: var(--px) solid var(--line); border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -6px 0 rgb(16 30 70 / .25); transform: translateY(105%); transition: transform .26s cubic-bezier(.32,.72,0,1); outline: none; }
.hr-kb.open { transform: translateY(0); }
.hr-kb * { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hr-kb-head { display: flex; align-items: center; gap: 10px; }
.hr-kb-title { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.hr-kb-x { width: 44px; height: 44px; flex: none; border: var(--px) solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font-family: var(--font-display); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.hr-kb-display { min-height: 56px; display: flex; align-items: center; padding: 0 14px; border: var(--px) solid var(--line); border-radius: 12px; background: var(--white); box-shadow: inset 0 3px 0 rgb(28 42 74 / .12); font-family: var(--font-digits); font-size: 26px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hr-kb-display.empty { color: #9aa3b8; }
.hr-kb-display.boxes { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; }
.hr-kb-display.boxes i { height: 52px; display: flex; align-items: center; justify-content: center; font-style: normal; border: var(--px) solid var(--line); border-radius: 12px; background: var(--white); box-shadow: inset 0 3px 0 rgb(28 42 74 / .12); }
.hr-kb-display.boxes i.on { background: var(--yellow); }
.hr-kb-display.boxes i.on:empty::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.hr-kb-display.boxes i.cur { box-shadow: 0 0 0 4px var(--yellow); }
.hr-kb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hr-kb-key { height: 62px; padding: 0 0 3px; border: var(--px) solid var(--line); border-radius: 14px; background: linear-gradient(#fff, #f3ead6); color: var(--ink); font-family: var(--font-display); font-size: 30px; line-height: 1; cursor: pointer; box-shadow: inset 0 3px 0 #fff, 0 4px 0 var(--line); display: flex; align-items: center; justify-content: center; user-select: none; }
.hr-kb-key:active { transform: translateY(3px); box-shadow: inset 0 3px 0 #fff, 0 1px 0 var(--line); }
.hr-kb-key.alt { background: linear-gradient(#9fd4ff, var(--blue)); color: var(--white); text-shadow: var(--outline); }
.hr-kb-key.alt svg { filter: drop-shadow(0 2px 0 var(--line)); }
.hr-kb-done { margin-top: 2px; }
@media (min-width: 760px) {
  .hr-kb { top: 50%; bottom: auto; left: 50%; right: auto; width: min(420px, calc(100vw - 48px)); border-bottom: var(--px) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translate(-50%, -46%); transition: opacity .18s, transform .18s; }
  .hr-kb.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) { .hr-kb, .hr-kb-veil { transition: none; } }
.hr-phone input[readonly], .hr-pin { cursor: pointer; }

/* ---------- Sito pubblico (chi non è entrato): cos'è, TV con le corse in onda, classifiche, ultimi arrivi ---------- */
.pub { max-width: 1120px; margin: 0 auto; padding: 16px 16px calc(28px + var(--sa-b)); display: grid; gap: 26px; }
.pub section { display: grid; gap: 14px; min-width: 0; }
.pub-top { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: calc(var(--sa-t) + 10px) max(16px, calc((100% - 1088px) / 2)) 10px; background: linear-gradient(180deg, #2a6fd6, var(--sky-deep)); border-bottom: var(--px) solid var(--line); box-shadow: 0 4px 0 rgb(16 30 70 / .3); }
.pub-brand { display: flex; align-items: center; flex: 1; min-width: 0; text-decoration: none; }
.pub-brand img { display: block; height: 38px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: drop-shadow(0 3px 0 rgb(16 30 70 / .35)); }
.pub-logo { margin: 0 0 10px; }
.pub-logo img { display: block; width: min(100%, 520px); height: auto; filter: drop-shadow(0 8px 0 rgb(16 30 70 / .3)); }
.pub-logo span { display: block; margin-top: 10px; font-size: clamp(24px, 6vw, 34px); color: var(--white); text-shadow: var(--outline); }
.pub-brand .hr-logo { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 3px 0 rgb(16 30 70 / .4)); }
.pub-top .hr-lang button { min-width: 0; padding: 0 7px; }
.pub-top .hr-btn.sm { flex: none; }
.pub-h { font-size: 28px; color: var(--white); text-shadow: var(--outline); margin: 0; }
.pub-hero { display: grid; gap: 16px; align-items: center; padding-top: 6px; }
.pub-hero p { color: var(--white); font-size: 18px; font-weight: 800; text-shadow: 0 2px 0 rgb(16 30 70 / .5); margin: 0 0 16px; max-width: 34em; }
.pub-cta { display: grid; gap: 10px; }
/* copertina: cielo e prato cartoon con due cavalli che corrono (sopra l'illustrazione, se c'è) */
.pub-hero-art { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); border: var(--px) solid var(--line); box-shadow: var(--shadow);
  background: linear-gradient(180deg, #8fd6ff 0, #c9ecff 52%, #7ccf4a 52%, #5cb233 100%); }
.pub-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pub-rail { position: absolute; left: 0; right: 0; top: 49%; height: 14px; border-top: 4px solid #fff; border-bottom: 4px solid #fff; background: repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 46px); opacity: .95; }
.pub-runner { position: absolute; filter: drop-shadow(0 6px 0 rgb(16 30 70 / .25)); }
.pub-runner svg { display: block; width: 100%; height: auto; }
.pub-runner.r0 { left: 8%; top: 30%; width: 44%; animation: pub-run 3.2s ease-in-out infinite; }
.pub-runner.r1 { left: 42%; top: 52%; width: 54%; animation: pub-run 3.6s ease-in-out infinite reverse; }
@keyframes pub-run { 50% { transform: translateX(6%); } }
@media (prefers-reduced-motion: reduce) { .pub-runner { animation: none; } }
.pub-stats { grid-template-columns: repeat(2, 1fr); }
/* TV: cornice da televisore con il player dentro, cartello DIRETTA/REPLAY, canali se più corse sono in onda */
.tv { min-width: 0; border: var(--px) solid var(--line); border-radius: var(--radius-lg); padding: 10px; background: linear-gradient(180deg, #2c3d6b, var(--night)); box-shadow: inset 0 3px 0 rgb(255 255 255 / .15), var(--shadow); display: grid; gap: 10px; }
.tv-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tv-badge { flex: none; padding: 3px 10px 4px; border: 2px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-size: 15px; color: var(--white); text-shadow: var(--outline); }
.tv-badge.live { background: var(--red); animation: tv-pulse 1.4s ease-in-out infinite; }
.tv-badge.replay { background: var(--purple); }
@keyframes tv-pulse { 50% { filter: brightness(1.25); } }
.tv-title { min-width: 0; color: var(--white); }
.tv-title b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--outline); }
.tv-title small { display: block; color: #b9c8ec; font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-screen { min-height: 200px; border-radius: 12px; overflow: hidden; background: #0d1a38; display: grid; }
.tv-screen > .hr-center { align-self: center; }
.tv-empty { margin: auto; padding: 30px 16px; text-align: center; color: #b9c8ec; font-weight: 800; }
/* tra una corsa e l'altra: il logo al centro dello schermo, che tiene l'altezza del player */
.tv-hold { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; }
.tv-hold img { width: min(240px, 50%); opacity: .9; }
.tv-hold .tv-empty { padding: 0; }
.tv-channels { display: flex; gap: 8px; overflow-x: auto; }
.tv-channels:empty { display: none; }
.tv-ch { flex: none; display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border: 2px solid var(--line); border-radius: 12px; background: #3a4f86; color: var(--white); font-weight: 900; cursor: pointer; }
.tv-ch b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--night); font-family: var(--font-display); font-weight: 400; }
.tv-ch.on { background: linear-gradient(180deg, #7cc2ff, var(--blue)); text-shadow: var(--outline); }
.tv-ch.on b { background: var(--yellow); color: var(--ink); text-shadow: none; }
.pub-next { background: var(--surface); border: var(--px) solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow); }
.pub-next h3 { margin: 0 0 8px; }
.pub-next ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub-next li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.pub-next li strong { display: block; line-height: 1.2; }
.pub-next li small { color: var(--muted); font-weight: 700; }
.pub-clock { font-family: var(--font-digits); font-weight: 400; font-size: 22px; color: var(--ink); }
.pub-steps { display: grid; gap: 12px; }
.pub-step { position: relative; }
.pub-step-ico { position: absolute; right: 14px; top: 12px; font-size: 34px; }
.pub-step small { font-family: var(--font-display); color: var(--blue-dark); font-size: 15px; }
.pub-step h3 { margin: 2px 0 6px; padding-right: 44px; }
.pub-step p { margin: 0; color: var(--muted); font-weight: 700; }
.pub-period { max-width: 420px; margin: 0 0 10px; }
.pub-rank-hint { margin: 0 0 14px; font-weight: 700; color: var(--white); text-shadow: 0 1px 0 rgb(16 30 70 / .5); }
.pub-rank-grid { display: grid; gap: 12px; }
.pub-rank-disc { margin: 18px 0 10px; font-family: var(--font-display); font-size: 24px; color: var(--white); -webkit-text-stroke: 1px var(--line); text-shadow: 0 2px 0 var(--line); }
.pub-rank-hint + .pub-rank-disc { margin-top: 4px; }
.pub-rank h3 { margin: 0 0 8px; }
.pub-rank ol, .pub-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pub-rank li, .pub-podium li { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; min-width: 0; }
.pub-rank li b, .pub-podium li b { display: block; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-rank li small, .pub-podium li small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-rank li > div, .pub-podium li > div { min-width: 0; }
.pub-rank i, .pub-podium i { display: grid; place-items: center; width: 28px; height: 28px; font-style: normal; border: 2px solid var(--line); border-radius: 9px; background: var(--surface-2); font-family: var(--font-display); color: var(--ink); }
.pub-rank i.r1, .pub-podium .p1 i { background: var(--gold); }
.pub-rank i.r2, .pub-podium .p2 i { background: #d9e1ee; }
.pub-rank i.r3, .pub-podium .p3 i { background: #e7a76a; }
.pub-silk { display: block; width: 30px; height: 30px; }
.pub-silk svg { display: block; }
.pub-results { display: grid; gap: 12px; }
.pub-result { display: grid; gap: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.pub-result-head b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 18px; }
.pub-result-head small { color: var(--muted); font-weight: 700; }
.pub-watch { justify-self: start; font-family: var(--font-display); color: var(--blue-dark); }
.pub-final { text-align: center; justify-items: center; padding: 22px 16px; border: var(--px) solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); box-shadow: inset 0 3px 0 rgb(255 255 255 / .6), var(--shadow); }
.pub-final h2 { font-size: 30px; margin: 0; }
.pub-final p { margin: 0; font-weight: 800; color: var(--ink); }
.pub-final .hr-btn { max-width: 320px; --c1: #9fd4ff; --c2: var(--blue); --c3: var(--blue-dark); }
.pub-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; color: #d6e6ff; font-weight: 800; }
.pub-foot a { color: var(--white); }
.auth-page { position: relative; }
.auth-back { position: absolute; top: calc(var(--sa-t) + 26px); left: 16px; z-index: 2; color: var(--white); font-family: var(--font-display); font-size: 18px; text-decoration: none; text-shadow: var(--outline); }
@media (min-width: 700px) {
  .pub-cta { grid-template-columns: auto auto; justify-content: start; }
  .pub-cta .hr-btn { width: auto; padding-left: 28px; padding-right: 28px; }
  .pub-stats { grid-template-columns: repeat(4, 1fr); }
  .pub-steps { grid-template-columns: repeat(2, 1fr); }
  .pub-results { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .pub-hero { grid-template-columns: 1.1fr 1fr; padding-top: 18px; }
  .pub-tv { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: start; }
  .pub-tv .pub-h { grid-column: 1 / -1; }
  .pub-steps { grid-template-columns: repeat(4, 1fr); }
  .pub-rank-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pub-results { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) { .pub-brand img { height: 32px; } }
/* copertina del gioco (assets/img/copertina.png): nella home pubblica e sopra l'accesso, al posto di scudo e nome */
.pub-cover { display: block; width: 100%; max-width: 620px; height: auto; justify-self: center; filter: drop-shadow(0 8px 0 rgb(16 30 70 / .3)); }
.hr-cover { display: block; width: min(64vw, 260px); height: auto; filter: drop-shadow(0 5px 0 rgb(16 30 70 / .3)); }
.hr-brand.has-cover > .hr-logo, .hr-brand.has-cover > h1, .hr-brand.has-cover > .hr-mascot, .hr-brand.has-cover > p { display: none; }

/* telefono (quasi tutti i giocatori): il logo sta nella barra in alto, la home va subito al titolo, ai bottoni e alla TV */
@media (max-width: 699px) {
  .pub { gap: 22px; }
  .pub-hero-art { display: none; }
  .pub-logo img { width: min(78vw, 320px); margin: 0 auto; }
  .pub-logo span { margin-top: 10px; font-size: 30px; line-height: 1.1; }
  .pub-hero p { font-size: 16px; margin-bottom: 14px; }
  .pub-h { font-size: 24px; }
}

/* ---------- Chat, scuderie, registro pubblico, segnalazioni ---------- */
.app-chat {
  position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--night); border: 2px solid var(--line); color: var(--white); box-shadow: inset 0 2px 0 rgb(255 255 255 / .15);
}
.app-chat svg { width: 24px; height: 24px; }
.app-chat-n {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--red); border: 2px solid var(--line); color: var(--white); font-size: 12px; font-weight: 900; line-height: 16px; text-align: center;
}
.app-chat-n.soft { min-width: 12px; width: 12px; height: 12px; top: -2px; right: -2px; padding: 0; background: var(--yellow); }
.home-links { margin: 14px 0; }

.sell-seg button { flex: 1 1 40%; }
.sell-value { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 4px; font-weight: 800; color: var(--ink); }
.sell-value b { font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.sell-info { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.stable-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.stable-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
  background: var(--white); border: 2px solid var(--line); font: inherit; font-weight: 800; color: var(--ink);
}

.stable-list { display: grid; gap: 8px; margin-top: 12px; }
.stable-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: var(--ink); }
.stable-row b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stable-silk { flex: none; line-height: 0; }
.stable-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; align-items: center; }
.stable-head .tiles, .stable-head .hr-row { grid-column: 1 / -1; }
.stable-head .tiles, .ply .stable-head .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
/* i tre bottoni sotto le tre caselle, sulla stessa griglia (stesse colonne, stesso spazio); sul telefono uno sotto l'altro */
.stable-head .stable-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.stable-head .stable-actions > * { width: 100%; margin: 0; }
@media (min-width: 560px) { .stable-head .stable-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.stable-horses { display: grid; gap: 8px; }
@media (min-width: 700px) { .stable-horses { grid-template-columns: 1fr 1fr; } }
.stable-horse { display: flex; gap: 10px; align-items: center; padding: 8px 12px; color: inherit; text-decoration: none; }
a.stable-horse:hover { border-color: var(--yellow); }
.stable-horse > div:last-child { display: grid; gap: 2px; min-width: 0; }

.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.log-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 12px; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink);
}
.log-when { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--muted); }
.log-text { font-size: 15px; }
.log-amount { font-family: var(--font-display); font-weight: 400; font-size: 17px; align-self: center; color: var(--muted); }
.log-amount.in { color: var(--ok); }
.log-amount.out { color: var(--red-dark); }

/* Operazioni economiche: totali e gruppi (si toccano per filtrare) */
.money-tiles { margin-bottom: 12px; }
@media (min-width: 700px) { .money-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
a.tile { text-decoration: none; color: inherit; }
.money-groups { display: grid; gap: 4px; padding: 8px; margin-bottom: 12px; }
.money-group {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: inherit; cursor: pointer;
}
.money-group:hover, .money-group:focus-visible { background: var(--gold-soft, #fff0c2); color: var(--ink); outline: none; box-shadow: inset 0 0 0 2px var(--yellow); }
.money-group .log-amount { font-size: 15px; min-width: 64px; text-align: right; }
@media (max-width: 520px) { .money-group { grid-template-columns: minmax(0, 1fr) auto; } .money-group .log-amount:not(:last-child) { display: none; } }

.modal-back { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgb(16 30 70 / .6); }
.modal { width: min(100%, 440px); display: grid; gap: 10px; }
/* home: più cavalli pronti a correre, uno per riga con il suo «Cerca una corsa» */
.ply-ready { display: grid; gap: 6px; }
.ply-ready-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); text-decoration: none; }
.ply-ready-name { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.ply-ready-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ply-ready-name small { font-size: 12px; font-weight: 800; color: var(--green-dark); }
.ply-ready-name small.gold { color: #9a6b00; }
.ply-ready-name small.err { color: var(--red-dark); }
.ply-ready-go { flex: none; font-weight: 800; font-size: 13px; color: var(--blue-dark); }
/* «Avvisami» nella pagina di una corsa non mia */
.watch-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.watch-card .watch-text { flex: 1 1 220px; display: grid; gap: 2px; }
.watch-card .hr-btn { width: auto; flex: none; }
.watch-card .hr-alert { flex-basis: 100%; }
/* conferma grafica (askBox): «Annulla» e «Sì» affiancati, il cavallo al centro */
.ask-box { text-align: center; }
.ask-box h3 { margin: 0; }
.ask-horse { display: grid; place-items: center; }
.ask-horse svg { width: 110px; height: auto; }
.ask-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.modal h3 { margin: 0; }
.report-reasons { display: grid; gap: 6px; }
.modal textarea.hr-input { min-height: 80px; padding: 10px 14px; font-size: 16px; resize: vertical; }

.chat { display: grid; gap: 12px; }
@media (min-width: 900px) { .chat { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.chat-rooms { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
@media (min-width: 900px) { .chat-rooms { flex-direction: column; overflow: visible; } }
.chat-room {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px 6px 6px; border-radius: 999px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink); font-weight: 800; white-space: nowrap;
}
.chat-room.on { background: var(--yellow); }
.chat-room.new { padding-left: 12px; background: var(--white); }
.chat-room-ico svg { width: 22px; height: 22px; display: block; }
.chat-unread { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: var(--white); border: 2px solid var(--line); font-size: 12px; text-align: center; }
.chat-main { min-width: 0; }
.chat-title { margin: 0 0 4px; }
.chat-list {
  display: flex; flex-direction: column; gap: 8px; height: max(220px, calc(100dvh - 450px)); max-height: 560px; overflow-y: auto; padding: 12px;
  border-radius: var(--radius); background: rgb(16 30 70 / .25); border: 2px solid var(--line);
}
.chat-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-silk { flex: none; line-height: 0; }
.chat-bubble { padding: 6px 12px 4px; border-radius: 14px 14px 14px 4px; background: var(--surface); border: 2px solid var(--line); color: var(--ink); min-width: 0; }
.chat-msg.mine .chat-bubble { border-radius: 14px 14px 4px 14px; background: #d9f2c7; }
.chat-msg.gone .chat-bubble p { font-style: italic; color: var(--muted); }
.chat-tr { margin: 0 0 0 6px; padding: 0; border: 0; background: none; color: var(--blue-dark); font: 700 11px var(--font); text-decoration: underline; cursor: pointer; }
.chat-bubble p { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.chat-who { display: block; font-size: 13px; font-weight: 900; color: var(--blue-dark); text-decoration: none; }
.chat-bubble small { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11px; color: var(--muted); }
.chat-flag { border: 0; background: none; padding: 0; cursor: pointer; color: var(--muted); line-height: 0; }
.chat-flag svg { width: 14px; height: 14px; }
.chat-empty { margin: auto; color: var(--white); }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form .hr-input { flex: 1; min-width: 0; }

/* Player: classifica che si fa da parte quando copre i cavalli, e si può spegnere */
.race-board { transition: opacity .25s; }
.race-board.under { opacity: .18; }
.race-board[hidden] { display: none; }
.race-boardbtn:not(.on), .race-soundbtn:not(.on) { filter: grayscale(.8); opacity: .75; }

/* Ricerca cavalli e classifiche */
.search-box { display: grid; gap: 8px; margin-bottom: 12px; }
.search-box .form-two { gap: 8px; }
.rank-card h3 { margin: 0 0 8px; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rank-list li { display: grid; grid-template-columns: 28px 30px minmax(0, 1fr); align-items: center; gap: 8px; }
.rank-list li > div { display: grid; min-width: 0; }
.rank-list li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.rank-pos { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--yellow-dark); text-align: center; }
.rank-list li:nth-child(1) .rank-pos { color: var(--gold); text-shadow: 0 1px 0 var(--line); }

/* Regolamento */
.rules { display: block; columns: 1; column-gap: 16px; }
.rules > .rules-sec { break-inside: avoid; margin: 0 0 16px; }
@media (min-width: 900px) { .rules { columns: 2; } }
.rules-privacy { margin: 4px 0 24px; text-align: center; font-weight: 700; }
.ply .rules-privacy { color: #fff; text-shadow: 0 2px 0 rgb(16 30 70 / .4); }
.ply .rules-privacy .hr-link { color: #fff; text-decoration: underline; }
.rules-sec h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 22px; }
.rules-ico { font-size: 22px; }
.rules-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); }
.pub-rules-btn { margin: 0 0 12px; min-height: 56px; font-size: 19px; }
.pub > .hr-link { display: inline-block; margin: 8px 0; }

/* Prova contro il bilancino */
.trial-form { display: grid; gap: 10px; margin-top: 4px; }
.trial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.trial-grid .hr-field { margin: 0; }
.trial-out { display: grid; gap: 8px; }
.trial-out:empty { display: none; }
.trial-result { margin: 0; font-weight: 800; color: var(--ink); }
.trial-log { width: 100%; border-collapse: collapse; font-size: 13px; font-weight: 700; }
.trial-log th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--ink-soft, #4a5778); padding: 4px 6px; }
.trial-log td { padding: 4px 6px; border-top: 1px solid rgb(28 42 74 / .1); }
.trial-log tr.up td:last-child { color: var(--green-dark, #1f7a33); }
.trial-log tr.down td:last-child { color: var(--red-dark, #b3261e); }
.trial-item { border-top: 1px solid rgb(28 42 74 / .12); padding: 6px 0; }
.trial-item summary { cursor: pointer; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.trial-item .trial-log { margin-top: 6px; }
.trial-gap { margin-left: auto; font-weight: 800; }
.trial-gap.up { color: var(--green-dark, #1f7a33); }
.trial-gap.down { color: var(--red-dark, #b3261e); }
.horse-note textarea { width: 100%; min-height: 84px; resize: vertical; font: 600 15px var(--font); }

/* Home: i cavalli della scuderia al pascolo sul prato dell'immagine in alto (canvas) */
.hero-paddock { position: absolute; inset: 0; z-index: 1; }
.hr-horse-canvas { display: block; }
@media (max-width: 600px) {
  /* sul telefono nella copertina resta solo il titolo, e il pascolo sta sopra il titolo */
  .hr-scene.wide.home-hero { aspect-ratio: auto; min-height: 300px; }
  .home-hero .hr-scene-body p { display: none; }
}

/* Cavalli ghost: del gioco, completano la corsa negli ultimi minuti */
.ghost-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 8px; background: rgb(28 42 74 / .1); color: var(--ink-soft, #4a5778); font-size: 11px; font-weight: 900; text-transform: uppercase; vertical-align: 2px; }

/* Magazzino della scuderia e cure del cavallo */
.store summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 20px; list-style: none; }
.store summary::-webkit-details-marker { display: none; }
.store[open] summary { margin-bottom: 8px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 12px; }
.store-item {
  display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center;
  padding: 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--white);
}
.store-icon { grid-row: span 2; font-size: 28px; text-align: center; }
.store-item > div:nth-child(2) { display: grid; }
.store-item > div:nth-child(2) small { color: var(--ink-soft, #4a5778); font-weight: 700; line-height: 1.2; }
.store-qty { display: grid; justify-items: end; }
.store-qty small { color: var(--ink-soft, #4a5778); font-weight: 800; }
.store-buy { grid-column: 2 / -1; display: flex; gap: 6px; justify-content: flex-end; }
.care-box { display: grid; gap: 8px; margin: 8px 0; padding: 10px; border-radius: 12px; background: rgb(106 209 59 / .1); }
.care-feed { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.care-feed .hr-seg button { font-size: 13px; }

/* Corsa: conto alla rovescia al via e scheda dei partenti */
.race-countdown {
  display: grid; justify-items: center; gap: 2px; margin: 0 0 14px; padding: 12px 16px; border: var(--px) solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); box-shadow: 0 5px 0 var(--line); color: var(--ink);
}
.race-countdown span { font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; }
.race-countdown .cd-time { font-size: 44px; line-height: 1; color: var(--white); text-shadow: var(--outline); font-variant-numeric: tabular-nums; }
.race-countdown small { font-weight: 800; }
.runners li.runner-open { cursor: pointer; }
.runners .runners-orders { flex: none; width: auto; padding: 4px 14px; font-size: 14px; }
.runners li.runner-open:hover, .runners li.runner-open:focus-visible { background: rgb(79 182 255 / .12); outline: none; }
.runner-dialog { width: min(100%, 520px); max-height: calc(100vh - 32px); overflow: auto; }
.runner-dialog-head { display: grid; grid-template-columns: 120px 1fr auto; gap: 10px; align-items: center; }
.runner-dialog-head h3 { margin: 0; }
.runner-dialog-head small { color: var(--ink-soft, #4a5778); font-weight: 800; }
.runner-dialog-pic svg { display: block; width: 120px; height: auto; }
.runner-dialog h4 { margin: 6px 0 0; }
.runner-parents { margin: 0; }
.runner-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.runner-history li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); }
.runner-history li.win { background: var(--gold-soft); }
.rh-pos { display: grid; justify-items: center; align-content: center; height: 52px; border-radius: 10px; background: var(--surface); border: 2px solid var(--line); }
.rh-pos b { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1; color: var(--ink); }
.rh-pos small { font-size: 10px; font-weight: 800; color: var(--muted); margin-top: 2px; }
.rh-pos.gold { background: var(--yellow); }
.rh-pos.silver { background: #dfe5ee; }
.rh-pos.bronze { background: #f0c49a; }
.rh-pos.out b { font-size: 13px; }
.rh-body { display: grid; gap: 1px; min-width: 0; }
.rh-name { font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.rh-name { color: var(--blue-dark); }
.rh-where, .rh-cond { font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-side { display: grid; gap: 4px; justify-items: end; }
.rh-prize { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); white-space: nowrap; }
.rh-prize::before { content: '🏆 '; }
.rh-rr { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
@media (max-width: 480px) { .runner-dialog-head { grid-template-columns: 80px 1fr auto; } .runner-dialog-pic svg { width: 80px; } }
.bet-horse { display: grid; text-align: left; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.bet-horse b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgb(28 42 74 / .25); }

/* Pubblicità: banner nelle pagine delle corse e pubblicità a tutto schermo */
.ad-slot { display: grid; gap: 4px; margin: 0 0 14px; }
.ad-label { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: rgb(255 255 255 / .85); }
.modal .ad-label { color: var(--ink-soft, #4a5778); }
.ad-banner { display: grid; place-items: center; overflow: hidden; border: var(--px) solid var(--line); border-radius: 14px; background: var(--white); box-shadow: 0 4px 0 var(--line); color: var(--ink); text-decoration: none; }
.ad-banner img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; }
.ad-banner b { padding: 14px 16px; font-size: 18px; text-align: center; }
.ad-interstitial .modal { width: min(100%, 520px); }
.ad-interstitial .ad-banner img { max-height: 60vh; }
.ad-interstitial .ad-banner p { margin: 0; padding: 10px 14px; font-weight: 800; text-align: center; }

/* Scuderie doppie: scelta della specialità e base della scuderia */
.home-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; }
.disc-switch button { font-size: 15px; }
.base-line { margin: 0; padding: 6px 12px; border-radius: 12px; background: rgb(255 255 255 / .92); border: 2px solid var(--line); color: var(--ink); font-weight: 700; }
.home-track .disc-switch { margin-bottom: 8px; }

/* Ippodromi: senso di marcia come icona accanto alla mappa */
.track-map-wrap { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
.dir-icons { display: grid; gap: 6px; }
.dir-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--line); background: var(--white); color: var(--ink); font-size: 26px; font-weight: 900; line-height: 1; box-shadow: 0 3px 0 var(--line); }
.horse-rating.none b { opacity: .8; }
.close-stable { justify-self: start; margin-top: 8px; }

/* Copertina della home: dove sta la scuderia, in piccolo */
.hero-place {
  position: absolute; top: 10px; left: 10px; z-index: 2; padding: 3px 10px; border-radius: 999px;
  background: rgb(255 255 255 / .85); color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none;
}

/* Crea una corsa: premio extra del gioco */
.race-extra { margin: 6px 0 0; font-weight: 800; color: var(--ok); }

/* ==========================================================================
 * App del giocatore — guscio e componenti del redesign «nuova app mobile».
 * Barra in alto (giubba, scuderia, specialità, crediti), menu in basso a 5 voci (Home, Scuderia, Corse,
 * Mercato, Altro) con il foglio «Altro»; sul computer la stessa colonna (max 480px) con il menu a sinistra.
 * Regole: Lilita One solo da 20px in su (titoli, numeri, il bottone giallo); il resto Fredoka 600/700
 * senza contorno. Un solo bottone giallo per schermata, i secondari crema bordati, il verde solo per
 * confermare. Illustrazioni su cielo e prato piatti (taglio al 60%). Tutto sotto .ply: il back office
 * (che usa .app-*) non cambia.
 * ========================================================================== */
.ply {
  --sky-flat: #d0edfd; --grass-flat: #c7e6ac; --dash: 2px dashed var(--surface-2); min-height: 100vh; min-height: 100dvh;
  --scene: url("img/paesaggio.svg"); --sky-d: linear-gradient(180deg, #5cc8ff 0, #2f8fe8 38%, #a6dcf8 100%);
  --sky-m: linear-gradient(180deg, var(--sky-top) 0, var(--sky) 300px, var(--sky-deep) 100%);
  background: var(--sky-m);
}
/* Sfondi per pagina (docs/DESIGN.md): una scena low-poly (img/scena-*.svg, da tools/build-scenes.php) e un cielo
   intonato, fermi dietro la pagina (livello fisso, non background-attachment che su iPhone non va) e in cover. */
.ply[data-bg] { background: none; }
.ply[data-bg]::before {
  content: ''; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
  background: var(--scene) center bottom / cover no-repeat, var(--sky-d);
  /* la scena resta dietro: sfocata, spenta e scurita, così i riquadri sopra si staccano bene */
  filter: blur(5px) saturate(.7) brightness(.62);
}
/* in verticale la scena (2,5:1) in cover diventerebbe enorme: prende la larghezza, il cielo copre il resto */
@media (max-aspect-ratio: 1/1) {
  .ply[data-bg]::before { background-size: max(100%, 1000px) auto, auto; background-position: center bottom calc(60px + var(--sa-b)), 0 0; }
}
.ply[data-bg="stalla"] { --scene: url("img/scena-stalla.svg"); --sky-m: linear-gradient(180deg, #8fd3ff 0, #5cb8f5 300px, #ffe2b8 100%); --sky-d: linear-gradient(180deg, #6cc6ff 0, #4aa8ef 40%, #ffd9a6 100%); }
.ply[data-bg="tribuna"] { --scene: url("img/scena-tribuna.svg"); }
.ply[data-bg="mappa"] { --scene: url("img/scena-mappa.svg"); --sky-m: linear-gradient(180deg, #7fe0e6 0, #46b9d6 300px, #b9ecd8 100%); --sky-d: linear-gradient(180deg, #74d9e8 0, #3fa9d0 40%, #c4f0dc 100%); }
.ply[data-bg="meteo"] { --scene: url("img/scena-meteo.svg"); --sky-m: linear-gradient(180deg, #a9e4ff 0, #6cc4f5 300px, #e3f5ff 100%); --sky-d: linear-gradient(180deg, #9fe0ff 0, #63bdf3 40%, #eaf8ff 100%); }
.ply[data-bg="mercato"] { --scene: url("img/scena-mercato.svg"); --sky-m: linear-gradient(180deg, #ffb27a 0, #f5866b 300px, #ffe0a8 100%); --sky-d: linear-gradient(180deg, #ffa96f 0, #ef7f6a 40%, #ffe1a6 100%); }
.ply[data-bg="pascolo"] { --scene: url("img/scena-pascolo.svg"); --sky-m: linear-gradient(180deg, #ffc3d8 0, #b8a4f0 300px, #d6f0ff 100%); --sky-d: linear-gradient(180deg, #ffbcd4 0, #a99cf0 40%, #d9f2ff 100%); }
.ply[data-bg="podio"] { --scene: url("img/scena-podio.svg"); --sky-m: linear-gradient(180deg, #3b2a7a 0, #5a3fa0 300px, #8a5cc4 100%); --sky-d: linear-gradient(180deg, #2a1f63 0, #4b3492 40%, #7d55bd 100%); }
.ply[data-bg="serale"] { --scene: url("img/scena-serale.svg"); --sky-m: linear-gradient(180deg, #14204a 0, #25366a 300px, #3a4f8a 100%); --sky-d: linear-gradient(180deg, #0f1a40 0, #22336a 40%, #3d5590 100%); }
.ply[data-bg="paese"] { --scene: url("img/scena-paese.svg"); --sky-m: linear-gradient(180deg, #ff9f80 0, #f7b27a 300px, #ffe6b0 100%); --sky-d: linear-gradient(180deg, #ff9575 0, #f5ad78 40%, #ffe8b4 100%); }
.ply[data-bg="colline"] { --scene: url("img/scena-colline.svg"); }
/* Il mondo in cui si gioca, in tutto il sito: galoppo su prato verde a strisce, trotto su sabbia beige con le righe
   della pista. Niente scena dietro: il colore dice subito se si è al galoppo o al trotto (come nei post social). */
/* Sfondi illustrati (docs/DESIGN.md): l'ippodromo disegnato, da Cloudflare R2 attraverso GET /sfondi/… (le variabili
   --sfondo-* e --sfondo-*-m, per il telefono in verticale, le mette app.js), con una patina nera più scura in alto e
   in basso perché titoli bianchi e riquadri restino leggibili.
   Galoppo: erba di giorno quasi ovunque, sabbia per scuderia e cavalli (la pista di allenamento), pioggia per il meteo,
   tramonto per classifiche, scommesse, mercato e negozio.
   Trotto: sabbia di giorno quasi ovunque, pioggia per il meteo, notte per le scommesse, tramonto per classifiche,
   mercato e negozio. */
.ply[data-disc="galoppo"][data-bg] { --gal: var(--sfondo-galoppo-giorno, none); --gal-m: var(--sfondo-galoppo-giorno-m, none); }
.ply[data-disc="galoppo"][data-bg="stalla"] { --gal: var(--sfondo-galoppo-sabbia, none); --gal-m: var(--sfondo-galoppo-sabbia-m, none); }
.ply[data-disc="galoppo"][data-bg="meteo"] { --gal: var(--sfondo-galoppo-pioggia, none); --gal-m: var(--sfondo-galoppo-pioggia-m, none); }
.ply[data-disc="galoppo"][data-bg="podio"], .ply[data-disc="galoppo"][data-bg="serale"], .ply[data-disc="galoppo"][data-bg="mercato"] { --gal: var(--sfondo-galoppo-tramonto, none); --gal-m: var(--sfondo-galoppo-tramonto-m, none); }
.ply[data-disc="trotto"][data-bg] { --gal: var(--sfondo-trotto-giorno, none); --gal-m: var(--sfondo-trotto-giorno-m, none); }
.ply[data-disc="trotto"][data-bg="meteo"] { --gal: var(--sfondo-trotto-pioggia, none); --gal-m: var(--sfondo-trotto-pioggia-m, none); }
.ply[data-disc="trotto"][data-bg="serale"] { --gal: var(--sfondo-trotto-notte, none); --gal-m: var(--sfondo-trotto-notte-m, none); }
.ply[data-disc="trotto"][data-bg="podio"], .ply[data-disc="trotto"][data-bg="mercato"] { --gal: var(--sfondo-trotto-tramonto, none); --gal-m: var(--sfondo-trotto-tramonto-m, none); }
.ply[data-disc][data-bg]::before { filter: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .32) 30%, rgb(0 0 0 / .32) 60%, rgb(0 0 0 / .55) 100%), var(--gal) center 45% / cover no-repeat, #2f6b2a; }
.ply[data-disc="trotto"][data-bg]::before { background-color: #9a7448; }
@media (max-aspect-ratio: 1/1) {
  .ply[data-disc][data-bg]::before { background-image: linear-gradient(180deg, rgb(0 0 0 / .5) 0%, rgb(0 0 0 / .32) 30%, rgb(0 0 0 / .32) 60%, rgb(0 0 0 / .55) 100%), var(--gal-m); background-size: auto, cover; background-position: 0 0, center 45%; }
}
.ply-top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: calc(64px + var(--sa-t));
  padding: var(--sa-t) max(16px, var(--sa-r)) 0 max(16px, var(--sa-l)); background: var(--sky-deep); border-bottom: var(--px) solid var(--line); color: var(--white);
}
.ply-av { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); border: var(--px) solid var(--line); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--blue-dark); }
.ply-av svg { display: block; width: 30px; height: auto; }
.ply-who { flex: 1; min-width: 0; line-height: 1.15; }
.ply-who b { display: block; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ply-who span { font-size: 12px; font-weight: 600; color: #dbe7ff; }
.ply-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; flex: none; white-space: nowrap;
  background: var(--night); color: var(--white); font: 700 14px var(--font); border: 2px solid var(--line); text-decoration: none; cursor: pointer;
}
.ply-pill svg { width: 16px; height: 16px; }
.ply-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ply-coin { width: 16px; height: 16px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 -2px 0 var(--yellow-dark); flex: none; }
.ply-ibtn {
  width: 44px; height: 44px; border-radius: 12px; background: var(--night); border: 2px solid var(--line); color: var(--white);
  display: grid; place-items: center; flex: none; text-decoration: none; cursor: pointer; padding: 0;
}
.ply-ibtn svg { width: 22px; height: 22px; }
.ply-ibtn.light { background: var(--surface); color: var(--blue-dark); border-width: 3px; box-shadow: 0 3px 0 var(--line); }
.ply-title {
  flex: 1; min-width: 0; text-align: center; font-family: var(--font-display); font-size: 22px; line-height: 1.1;
  text-shadow: 1.5px 0 0 var(--line), -1.5px 0 0 var(--line), 0 1.5px 0 var(--line), 0 -1.5px 0 var(--line), 0 3px 0 var(--line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ply-title.plain { font-family: var(--font); font-weight: 700; font-size: 17px; text-shadow: none; }
.ply-stepno, .ply-side { width: 44px; flex: none; text-align: center; font-weight: 700; font-size: 14px; color: #dbe7ff; }

.ply-main {
  display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 480px; margin: 0 auto;
  padding: 20px 16px calc(112px + var(--sa-b));
}
.ply-main > * { margin-top: 0; margin-bottom: 0; }
.ply-main > h1 + .hr-lead { margin-top: -10px; }
.ply.wide .ply-main { max-width: 900px; }
.ply.no-nav .ply-main { padding-bottom: 24px; }
.ply.has-dock .ply-main { min-height: calc(100dvh - 67px); padding-bottom: 0; }
.ply-head { display: grid; gap: 6px; }
.ply-head.row { grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.ply-head h1 { margin: 0; }

/* Menu in basso (sul computer a sinistra) */
.ply-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  padding: 8px max(8px, var(--sa-r)) max(8px, calc(var(--sa-b) - 14px)) max(8px, var(--sa-l)); background: var(--night); border-top: var(--px) solid var(--line);
}
.ply-nav a, .ply-nav button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 0;
  color: #c3cde4; font: 600 12px var(--font); text-decoration: none; border-radius: 14px; border: 2px solid transparent; background: none; cursor: pointer;
}
.ply-nav svg { width: 24px; height: 24px; flex: none; }
.ply-nav .on { background: var(--blue-dark); color: var(--white); border-color: var(--line); box-shadow: inset 0 2px 0 rgb(255 255 255 / .35); }
.ply-dot {
  position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--red); border: 2px solid var(--night); color: var(--white); font: 700 10px/14px var(--font); text-align: center;
}
.ply-dot[hidden] { display: none; }
.ply-dot.soft { min-width: 12px; width: 12px; height: 12px; padding: 0; }

/* Fogli dal basso: il menu «Altro», le schede di stalloni e fattrici, le azioni del cavallo */
.ply-scrim { position: fixed; inset: 0; z-index: 18; width: 100%; padding: 0; border: 0; background: rgb(16 30 70 / .6); cursor: pointer; }
.ply-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; max-width: 480px; margin: 0 auto; max-height: calc(100dvh - 40px); overflow: auto;
  background: var(--surface); border: var(--px) solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(20px + var(--sa-b)); box-shadow: inset 0 3px 0 rgb(255 255 255 / .9); color: var(--ink);
}
.ply-sheet.menu { padding-bottom: calc(104px + var(--sa-b)); }
.ply-sheet.top { z-index: 41; } .ply-scrim.top { z-index: 40; }
.ply-sheet.full { display: flex; flex-direction: column; padding: 0; height: calc(100dvh - 40px); }
.ply-sheet.full .ply-sheet-body { flex: 1; overflow: auto; padding: 4px 16px 20px; display: grid; gap: 16px; align-content: start; }
.ply-sheet.full .ply-handle { margin: 10px auto 6px; }
.ply-handle { width: 44px; height: 5px; border-radius: 999px; background: #c9b88f; margin: 0 auto 12px; }
.ply-shead { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: var(--dash); }
.ply-sheet.full .ply-shead { padding: 0 16px 10px; margin: 0; }
.ply-shead > div { flex: 1; min-width: 0; }
.ply-shead b { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; }
.ply-shead a { font-size: 14px; font-weight: 700; text-decoration: none; }
.ply-shead small { font-size: 13px; font-weight: 700; color: var(--muted); }
.ply-x {
  width: 44px; height: 44px; border-radius: 12px; border: var(--px) solid var(--line); background: var(--white); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: none;
}
.ply-x svg { width: 20px; height: 20px; }
.ply-silk { width: 48px; height: 48px; border-radius: 14px; background: #dceeff; border: var(--px) solid var(--line); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--blue-dark); }
.ply-silk svg { display: block; width: 36px; height: auto; }
.ply-silk.big { width: 64px; height: 64px; border-radius: 16px; }
.ply-silk.big svg { width: 50px; }
.ply-sgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ply-stile {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; padding: 8px 4px;
  border: var(--px) solid var(--line); border-radius: 16px; background: var(--white); box-shadow: 0 3px 0 rgb(16 30 70 / .3);
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2;
}
.ply-stile .ply-dot { top: 6px; left: auto; right: 8px; border-color: var(--white); }
.ply-sheet-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(16px + var(--sa-b)); background: var(--surface); border-top: var(--px) solid var(--line); }
.ply-sheet-foot > div { flex: 1; min-width: 0; }
.ply-sheet-foot .hr-btn { width: auto; flex: none; }

/* Icone quadrate colorate */
.ply-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 2px solid var(--line); flex: none; background: #dceeff; color: var(--blue-dark); }
.ply-ico svg { width: 22px; height: 22px; }
.ply-ico.sm { width: 36px; height: 36px; border-radius: 10px; }
.ply-ico.red { background: var(--danger-soft); color: #b3241b; }
.ply-ico.gold { background: var(--gold-soft); color: #7a4f00; }
.ply-ico.green { background: var(--ok-soft); color: #2a6e12; }
.ply-ico.purple { background: #efe0ff; color: #6a22c0; }

/* Testi, pannelli, righe */
.ply h2, .ply h3 { font-family: var(--font); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.ply h2 { font-size: 18px; }
.ply h3 { font-size: 17px; }
.ply h2.hr-outline { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: .01em; }
.ply .hr-lead { color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0; max-width: none; text-shadow: 0 1px 0 rgb(16 30 70 / .6); }
.ply .hr-label { font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: 0; }
.ply .hr-card { padding: 16px; }
.ply-ptitle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; margin: 0 0 8px; }
/* nei riquadri stretti il bollino va a capo intero sotto il titolo, non esce dal riquadro */
.ply-ptitle > .ply-chip, .ply-ptitle > .badge, .ply-ptitle > .hr-badge { white-space: nowrap; flex: none; }
.ply-ptitle h2 { margin: 0; }
.ply-ptitle a, .ply-ptitle button.lnk { font-size: 14px; font-weight: 700; color: var(--blue-dark); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.ply-muted { display: block; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.35; }
.ply-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; margin: 0; text-align: left; cursor: pointer;
  border: 0; border-top: var(--dash); background: none; color: var(--ink); font: 600 16px var(--font); text-decoration: none;
}
div.ply-row { cursor: default; }
.ply-row.first, .ply-ptitle + .ply-row, .ply-rows > .ply-row:first-child { border-top: 0; }
.ply-rt { flex: 1; min-width: 0; }
.ply-rt b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.ply-row > .hr-btn { flex: none; width: auto; }
.ply-val { color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ply-chev { width: 20px; height: 20px; color: var(--muted); flex: none; }
.ply-row.danger { color: var(--red-dark); }
.ply-glabel { color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin: 8px 4px -4px !important; text-shadow: 0 1px 0 rgb(16 30 70 / .6); }
.ply-group { padding: 4px 16px !important; }
.ply-more { padding: 0 0 12px; display: grid; gap: 10px; }
/* risultati: ricerca (corsa o cavallo), giorno per giorno, «Carica altre» in fondo */
.ply-search-bar { display: flex; gap: 10px; align-items: center; margin: 0 0 14px; }
.ply-search-bar .hr-input { flex: 1; min-width: 0; }
.ply-search-bar .hr-btn { width: auto; flex: none; }
.ply-dayhead { grid-column: 1 / -1; margin: 10px 2px 0; font: 22px/1.1 "Lilita One", sans-serif; color: #fff; text-shadow: 0 2px 0 rgb(16 30 70 / .55); text-transform: capitalize; }
.ply-dayhead:first-child { margin-top: 0; }
.ply-loadmore { grid-column: 1 / -1; justify-self: center; width: auto; min-width: 220px; margin-top: 6px; }
.ply-num { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--ink); }
.ply-stats { display: grid; grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
/* ogni colonna larga almeno quanto il suo numero: «100.000 vinti» si prende lo spazio che serve e non finisce sopra la riga accanto */
.ply-stats .ply-num { white-space: nowrap; padding: 0 6px; }
.ply-stats > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; border-left: var(--dash); text-align: center; }
.ply-stats > div:first-child { border-left: 0; }
.ply-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ply-tile {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; background: var(--surface); border: var(--px) solid var(--line);
  border-radius: 16px; box-shadow: 0 4px 0 rgb(16 30 70 / .35); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.2;
}
.ply-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 12px; padding: 12px 0 0; cursor: pointer;
  border: 0; border-top: var(--dash); background: none; font: 700 15px var(--font); color: var(--blue-dark); text-decoration: none; text-align: left;
}
.ply-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #e6ebf5; color: #3a4a6e; }
.ply .hr-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 0; box-shadow: none; text-shadow: none;
  font: 700 12px/1.2 var(--font); letter-spacing: 0; background: #e6ebf5; color: #3a4a6e;
}
.ply .hr-badge.ok, .ply-chip.ok { background: var(--ok-soft); color: #2a6e12; }
.ply .hr-badge.err, .ply-chip.err { background: var(--danger-soft); color: #b3241b; }
.ply .hr-badge.gold, .ply-chip.gold { background: var(--gold-soft); color: #7a4f00; }

/* Bottoni: il giallo resta l'azione principale; i piccoli e i colorati diventano secondari crema */
.ply .hr-btn.sm, .ply .hr-btn.ghost, .ply .hr-btn.blue, .ply .hr-btn.purple, .ply .hr-btn.hot, .ply .hr-btn.sec {
  min-height: 44px; padding: 0 14px; border-radius: 11px; font: 700 15px var(--font); letter-spacing: 0; text-shadow: none;
  background: var(--surface); color: var(--ink); box-shadow: 0 4px 0 var(--line);
}
.ply .hr-btn.ghost, .ply .hr-btn.sec:not(.sm), .ply .hr-btn.blue:not(.sm), .ply .hr-btn.purple:not(.sm) { min-height: 48px; font-size: 16px; border-radius: 14px; }
.ply .hr-btn.sm::after, .ply .hr-btn.ghost::after, .ply .hr-btn.blue::after, .ply .hr-btn.purple::after, .ply .hr-btn.hot::after, .ply .hr-btn.sec::after, .ply .hr-btn.green::after, .ply .hr-btn.danger::after { display: none; }
.ply .hr-btn.green {
  background: linear-gradient(#8ee561, #6ad13b 55%, #4fb522); color: var(--white); font-family: var(--font-display); font-size: 19px;
  text-shadow: 1.5px 0 0 var(--line), -1.5px 0 0 var(--line), 0 1.5px 0 var(--line), 0 -1.5px 0 var(--line), 1px 1px 0 var(--line), -1px -1px 0 var(--line), 0 3px 0 var(--line);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / .55), inset 0 -5px 0 rgb(0 0 0 / .15), 0 5px 0 var(--line);
}
.ply .hr-btn.green.sm { font: 700 15px var(--font); text-shadow: 0 1px 0 var(--line); box-shadow: inset 0 2px 0 rgb(255 255 255 / .5), 0 4px 0 var(--line); }
.ply .hr-btn.sm.gold { background: var(--surface); }
.ply .hr-btn.danger { background: var(--danger-soft); color: var(--red-dark); text-shadow: none; font: 700 15px var(--font); min-height: 44px; box-shadow: 0 4px 0 var(--line); }
.ply .hr-btn.sm:active:not(:disabled), .ply .hr-btn.sec:active:not(:disabled), .ply .hr-btn.ghost:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.ply .hr-btn:disabled { filter: none; opacity: .55; }
.ply .hr-btn.off { background: #3a4a6e; color: #d4dbea; border-color: #5d6a86; font: 700 16px var(--font); text-shadow: none; box-shadow: none; cursor: not-allowed; }
.ply .hr-btn.off::after { display: none; }
.ply .hr-row > .hr-btn.sm, .ply .hr-row > a.hr-btn.sm { flex: 1 1 0; }
.ply-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.ply .hr-link { font-weight: 700; }

/* Barra fissa in basso con le azioni della pagina */
.ply-dock {
  position: sticky; bottom: 0; z-index: 15; margin: auto -16px 0 !important; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px;
  align-items: center; padding: 12px 16px calc(20px + var(--sa-b)); background: var(--night); border-top: var(--px) solid var(--line); color: var(--white);
}
.ply-dock:empty { display: none; }
.ply-dock .hr-btn { min-height: 56px; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.ply-dock .hr-btn:not(.dark):not(.off) { font-size: 19px; }
.ply-dock .hr-btn.dark { background: var(--night); color: var(--white); border-color: #c3cde4; box-shadow: none; font: 700 17px var(--font); text-shadow: none; }
.ply-dock .hr-btn.dark::after { display: none; }
.ply-dock.info { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) auto; }
.ply-dock.info .hr-btn { padding: 0 20px; }
.ply-dock-info small { display: block; font-size: 13px; font-weight: 600; color: #c3cde4; }
.ply-dock-info b { display: block; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ply-dock.stack { grid-auto-flow: row; grid-template-columns: 1fr; gap: 10px; }

/* Schede di scelta (segmenti) e scelte a carta */
.ply .hr-tabs, .ply-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; margin: 0;
  background: var(--night); border: var(--px) solid var(--line); border-radius: 14px;
}
.ply .hr-tabs button, .ply-seg button {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px; border-radius: 10px; border: 0;
  background: none; color: var(--white); font: 700 15px var(--font); text-shadow: none; box-shadow: none; cursor: pointer; white-space: nowrap;
}
.ply .hr-tabs button.on, .ply-seg button.on { background: var(--surface); color: var(--ink); }
.ply-seg i { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--red); color: var(--white); font: 700 11px/20px var(--font); font-style: normal; }
.ply .hr-seg button {
  min-height: 44px; border-radius: 12px; font: 700 14px var(--font); text-shadow: none; background: var(--white); color: var(--ink); box-shadow: none;
}
.ply .hr-seg button.on { background: var(--gold-soft); color: var(--ink); text-shadow: none; box-shadow: 0 0 0 4px var(--yellow); }
.ply .hr-choice b { font-family: var(--font); font-weight: 700; font-size: 16px; }
.ply .hr-choice.on { background: var(--gold-soft); box-shadow: 0 0 0 4px var(--yellow); }
.ply .hr-choice.on b { color: var(--ink); text-shadow: none; }
.ply .hr-lang button { font: 700 15px var(--font); }
.ply .hr-lang button.on { text-shadow: none; color: var(--ink); }
/* i bottoni vanno a capo quando il riquadro è stretto (desktop a tre colonne): mai un nome che esce dal bottone */
.ply-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin-bottom: 12px; }
.ply-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 4px; cursor: pointer;
  border: var(--px) solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font-family: var(--font);
}
.ply-opt b { font-size: 15px; font-weight: 700; max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.15; }
.ply-opt span { font-size: 12px; font-weight: 600; color: var(--muted); }
.ply-opt.on { background: var(--gold-soft); box-shadow: 0 0 0 4px var(--yellow); }

/* Scene illustrate: cielo e prato piatti */
.ply .hr-scene, .ply-scene, .ply-thumb {
  background: linear-gradient(180deg, var(--sky-flat) 0 60%, var(--grass-flat) 60%);
}
.ply .hr-scene::before { display: none; }
.ply-scene { position: relative; overflow: hidden; border: var(--px) solid var(--line); border-radius: 14px; }
.ply-scene.big { min-height: 210px; border-radius: 20px; box-shadow: 0 5px 0 rgb(16 30 70 / .35); }
.ply-scene > .horse-rating { position: absolute; right: 12px; top: 12px; z-index: 2; }
.ply-scene .hr-horse-canvas { position: relative; z-index: 1; }
.ply-thumb { position: relative; width: 92px; height: 76px; flex: none; overflow: hidden; border: var(--px) solid var(--line); border-radius: 14px; display: grid; place-items: end center; }
.ply-thumb svg { display: block; width: 104%; height: auto; margin-bottom: -2px; }

/* Rating sfaccettato, barre, numeri della scheda */
.ply .horse-rating {
  width: 52px; height: 52px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  border-radius: 14px; border: var(--px) solid var(--line); color: var(--white);
  background: linear-gradient(155deg, #c993ff 0 42%, #b264ff 42% 68%, #9548e6 68%); box-shadow: inset 0 2px 0 rgb(255 255 255 / .4), 0 3px 0 var(--line);
}
.horse-rating.m, .ply .horse-rating.m { background: linear-gradient(155deg, #9fd6ff 0 42%, var(--blue) 42% 68%, var(--blue-dark) 68%); }
.horse-rating.f, .ply .horse-rating.f { background: linear-gradient(155deg, #ffc2dc 0 42%, #ff86b6 42% 68%, #e0508f 68%); }
.ply .horse-rating b { font-size: 22px; text-shadow: 1px 1px 0 var(--line), -1px 1px 0 var(--line), 1px -1px 0 var(--line), -1px -1px 0 var(--line); }
.ply .horse-rating span { font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.ply-scene.big > .horse-rating { width: 60px; height: 60px; border-radius: 16px; }
.ply-scene.big > .horse-rating b { font-size: 26px; }
.ply .meters { gap: 8px; }
.ply .meter { grid-template-columns: 88px minmax(0, 1fr) 40px; gap: 10px; font-size: 14px; font-weight: 700; }
.ply .meter > div { height: 12px; border-radius: 999px; }
.ply .meter i { background: var(--green); }
.ply .meter.fresh i { background: var(--blue); }
.ply .meter.low i { background: var(--red); }
.ply .horse-record { gap: 0; margin-top: 4px; padding-top: 12px; border-top: var(--dash); grid-template-columns: repeat(4, minmax(max-content, 1fr)); }
.ply .horse-record b { white-space: nowrap; padding: 0 6px; }
.ply .horse-record span { gap: 4px; padding: 0; border: 0; border-left: var(--dash); border-radius: 0; background: none; font-size: 13px; font-weight: 600; }
.ply .horse-record span:first-child { border-left: 0; }
.ply .horse-record b { font-size: 24px; line-height: 1; }
.ply .horse-traits summary { font: 700 15px var(--font); color: var(--blue-dark); }
.ply .tile { background: var(--surface); box-shadow: 0 4px 0 rgb(16 30 70 / .35); }
.ply .tile b { font-size: 24px; color: var(--ink); text-shadow: none; white-space: nowrap; }
.ply .tile b.long { font-size: min(24px, 25cqi); }
.ply .tile b.xlong { font-size: min(24px, 19cqi); }
.ply .tile span { font: 600 13px var(--font); color: var(--muted); }
.ply .runners-kg { font: 700 12px var(--font); }

/* Scuderia: schede compatte dei cavalli */
.ply-horse { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); }
.ply-hhead { display: flex; align-items: center; gap: 12px; }
.ply-hname { flex: 1; min-width: 0; }
.ply-hname b { display: block; font-size: 18px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.ply-hped { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.ply-hped .ply-rt b { display: block; font-size: 16px; font-weight: 700; color: var(--blue-dark); }
.ply-pedline { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ply-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ply-tags .ply-chev { margin-left: auto; }
.ply-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; border: var(--px) dashed var(--surface); border-radius: 20px;
  color: var(--white); font-weight: 700; font-size: 16px; text-decoration: none; text-shadow: 0 1px 0 rgb(16 30 70 / .6);
}
.ply-add svg { width: 22px; height: 22px; }
.ply-store-item { flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
.ply-store-item .ply-rt { flex-basis: calc(100% - 52px); }
.ply-store-item .ply-rt small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.3; }
.ply-store-buy { display: flex; gap: 6px; align-items: center; justify-content: flex-end; width: 100%; padding-left: 48px; }
.ply-store-buy .ply-qty { margin-right: auto; }
.ply-store-buy .hr-btn.sm { min-width: 52px; }
.ply-qty { font-family: var(--font-display); font-size: 20px; color: var(--ink); }

/* Corse, mercato, home */
.ply .race-card { border-radius: 18px; }
/* le corse si leggono una per riga: affiancate le colonne della scheda diventano strettissime */
.ply-cards.ply-races { grid-template-columns: minmax(0, 1fr); }
.ply .race-card-time { background: #dceeff; }
.ply .race-card-time b { color: var(--blue-dark); }
.ply .race-card-time small { color: var(--ink); }
.ply .race-card-body strong { font: 700 17px var(--font); }
.ply-date { width: 52px; height: 56px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: #dceeff; border: 2px solid var(--line); }
.ply-date b { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1; color: var(--blue-dark); }
.ply-date span { font-size: 11px; font-weight: 700; text-transform: uppercase; text-align: center; white-space: nowrap; line-height: 1.2; margin-top: 2px; }
.ply-date.time { width: 70px; }
.ply-date.time b { font-size: 18px; }
.ply-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ply-empty .ply-scene { width: 100%; height: 150px; margin-bottom: 4px; display: grid; place-items: end center; }
.ply-empty .ply-scene svg { width: 46%; height: auto; margin-bottom: 8px; }
.ply-empty h2 { margin: 0; }
.ply-empty p { margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 600; }
.ply-auction { display: flex; align-items: center; gap: 14px; background: linear-gradient(#8a3fe0, #7a2fd1) !important; color: var(--white); }
.ply-auction .ply-ico { width: 56px; height: 56px; border-radius: 16px; border-width: 3px; background: var(--surface); color: var(--purple-dark); }
.ply-auction .ply-ico { display: grid; place-items: center; }
.ply-auction .ply-ico svg { width: 40px; height: 40px; display: block; }
.ply-auction b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.1; text-shadow: var(--outline); }
.ply-auction span { display: block; font-size: 13px; font-weight: 600; color: #efe0ff; margin-top: 4px; }
.ply .lot-pic { background: linear-gradient(180deg, var(--sky-flat) 0 60%, var(--grass-flat) 60%); }
.ply .lot-body h3 { font-size: 18px; }
.ply-hero { padding: 0 !important; overflow: hidden; }
.ply-hero .ply-scene { height: 190px; border: 0; border-bottom: var(--px) solid var(--line); border-radius: 0; }
.ply-hero-body { display: grid; gap: 12px; padding: 16px; }
.ply-hero-body .ply-hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ply-hero-body .ply-big { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ply-news .ply-rt b { margin: 1px 0; }

/* Nuovo cavallo: passi, ricerca, carte di scelta, puledro */
.ply-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ply-steps div { display: flex; flex-direction: column; gap: 6px; color: var(--white); font-size: 12px; font-weight: 700; text-shadow: 0 1px 0 rgb(16 30 70 / .6); }
.ply-steps i { display: block; height: 8px; border-radius: 999px; border: 2px solid var(--line); background: rgb(22 38 77 / .45); }
.ply-steps .done i { background: var(--green); }
.ply-steps .cur i { background: var(--yellow); }
.ply-search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; background: var(--surface); border: var(--px) solid var(--line); border-radius: 12px; color: var(--muted); }
.ply-search svg { width: 20px; height: 20px; flex: none; }
.ply-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 600 16px var(--font); color: var(--ink); outline: none; }
.ply-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ply-filters select {
  appearance: none; height: 44px; padding: 0 30px 0 12px; border-radius: 11px; border: var(--px) solid var(--line); background: var(--night); color: var(--white);
  font: 700 14px var(--font); cursor: pointer; min-width: 0;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 11px) 52%; background-size: 6px 6px; background-repeat: no-repeat;
}
.ply-hint { color: var(--white); font-size: 14px; font-weight: 600; text-shadow: 0 1px 0 rgb(16 30 70 / .6); }
.ply-pick {
  position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; width: 100%; text-align: left;
  background: var(--surface); border: var(--px) solid var(--line); border-radius: 18px; box-shadow: 0 4px 0 rgb(16 30 70 / .35); color: var(--ink); font: inherit; cursor: pointer;
}
.ply-pick.on { background: var(--gold-soft); box-shadow: 0 0 0 4px var(--yellow), 0 4px 0 rgb(16 30 70 / .35); }
.ply-pick .ply-thumb { width: 96px; border-width: 2px; border-radius: 12px; }
.ply-nm { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; line-height: 1.2; min-width: 0; }
.ply-nm > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ply-flag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--night); color: var(--white); font-size: 11px; font-weight: 700; flex: none; }
.ply-price { font-size: 15px; font-weight: 700; color: var(--blue-dark); margin-top: 2px; }
.ply-pside { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px; align-self: stretch; }
.ply-pside .horse-rating { width: 46px; height: 46px; border-radius: 12px; }
.ply-pside .horse-rating b { font-size: 19px; }
.ply-pside .horse-rating span { font-size: 8px; }
.ply-pside small { font-size: 13px; font-weight: 700; color: var(--blue-dark); }
.ply-check { position: absolute; left: -8px; top: -8px; width: 28px; height: 28px; border-radius: 50%; background: var(--green); border: var(--px) solid var(--line); color: var(--white); display: grid; place-items: center; }
.ply-check svg { width: 14px; height: 14px; }
.ply-chosen { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: var(--night); border: var(--px) solid var(--line); border-radius: 14px; color: var(--white); }
.ply-chosen > div { flex: 1; min-width: 0; }
.ply-chosen small { display: block; font-size: 12px; font-weight: 600; color: #c3cde4; }
.ply-chosen b { display: block; font-size: 15px; font-weight: 700; }
.ply-chosen a { font-size: 14px; font-weight: 700; color: var(--white); padding: 10px 8px; }
.ply-pair { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: center; gap: 6px; }
.ply-parent { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.ply-parent .ply-thumb { width: 100%; height: 100px; border-width: 2px; border-radius: 12px; }
.ply-parent .ply-thumb svg { width: auto; height: 96%; max-width: 100%; }
.ply-parent b { font-size: 16px; font-weight: 700; line-height: 1.2; margin-top: 4px; }
.ply-plus { width: 36px; height: 36px; border-radius: 50%; background: var(--yellow); border: var(--px) solid var(--line); display: grid; place-items: center; color: var(--line); }
.ply-plus svg { width: 18px; height: 18px; }
.ply-foal { position: relative; height: 170px; display: grid; place-items: end center; border: 0; border-bottom: var(--px) solid var(--line); border-radius: 0; }
.ply-foal svg { width: 150px; height: auto; margin-bottom: 14px; filter: brightness(0) opacity(.28); }
.ply-q { position: absolute; left: 58%; top: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: var(--px) solid var(--line); display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; color: var(--purple-dark); }
.ply-kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; border-top: var(--dash); font-size: 15px; font-weight: 600; }
.ply-kv:first-of-type, .ply-ptitle + .ply-kv { border-top: 0; }
.ply-kv b { font-weight: 700; text-align: right; }
.ply-risk { display: grid; grid-template-columns: minmax(0, 1fr) 110px 40px; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; font-weight: 600; }
.ply-risk:first-of-type { margin-top: 6px; padding-top: 8px; border-top: var(--dash); }
.ply-bar { height: 12px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--line); overflow: hidden; }
.ply-bar i { display: block; height: 100%; background: var(--red); }
.ply-risk b { text-align: right; font-weight: 700; }
.ply-total { font-family: var(--font-display); font-size: 26px; color: var(--ink); }
.ply-alert { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--danger-soft); border: 2px solid var(--red-dark); color: #8f1a12; font-size: 14px; font-weight: 600; line-height: 1.4; }

/* Scheda di uno stallone o di una fattrice */
.ply-name { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 28px; line-height: 1.1; color: var(--ink); }
.ply-name .ply-flag { height: 22px; padding: 0 7px; border-radius: 7px; font-family: var(--font); font-size: 12px; }
.ply-stars { color: var(--yellow-dark); font-size: 16px; letter-spacing: 2px; }
.ply-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ply-fact { padding: 10px 12px; border-radius: 12px; background: var(--white); border: 2px solid var(--line); }
.ply-fact.wide { grid-column: 1 / -1; }
.ply-fact span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
.ply-fact b { display: block; font-size: 15px; font-weight: 700; line-height: 1.25; margin-top: 2px; }
.ply-ped { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ply-anc { padding: 8px 10px; border-radius: 10px; background: var(--white); border: 2px solid var(--line); border-left-width: 6px; border-left-color: var(--blue); }
.ply-anc.f { border-left-color: #ff8fb8; }
.ply-anc span { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.ply-anc b { display: block; font-size: 15px; font-weight: 700; }
.ply .trait { grid-template-columns: 104px minmax(0, 1fr) 56px; gap: 10px; font-size: 14px; font-weight: 600; }
.ply .trait-bar { border-radius: 999px; }

}
/* note grigie direttamente sul cielo: in bianco, se no non si leggono */
.ply-main > .hr-hint, .ply-main > p.hr-muted, .ply .chat-main > .hr-hint, .ply-main > .hr-link, .ply .race-back { color: #eaf3ff; text-shadow: 0 1px 0 rgb(16 30 70 / .6); }

/* Niente link sottolineati nell'app: si capisce che si toccano dal colore */
.ply a, .ply .hr-link, .ply .chat-tr { text-decoration: none; }

/*
 * Telefono: una colonna sola, mai due riquadri affiancati (non si leggono). Tablet: colonna più larga e le schede
 * a due a due. Computer: menu a sinistra e colonna ancora più larga, fino a tre schede per riga.
 */
.ply-cards { display: grid; gap: 16px; align-content: start; }
.ply-cards > .hr-btn.wide, .ply-cards > .ply-add, .ply-cards > .ply-empty, .ply-cards > .hr-muted, .ply-cards > .ply-store { grid-column: 1 / -1; }
.ply .grid.two, .ply .tiles, .ply .horse-grid, .ply .form-two, .ply .stable-horses, .ply .store-grid, .ply .pub-rank-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 699px) {
  .ply-grid2:has(> .ply-tile), .ply-facts, .ply-ped { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) {
  .ply-main { max-width: 720px; }
  .ply-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ply .grid.two, .ply .horse-grid, .ply .form-two, .ply .stable-horses, .ply .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ply .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ply-sheet { max-width: 640px; }
  /* dispensa: la scheda prende tutta la riga, il bottone resta della sua misura e gli articoli vanno in due colonne */
  .ply-store > .hr-btn.green { max-width: 420px; }
  .ply-store-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .ply-store-list > .ply-row:nth-child(-n+2) { border-top: 0; }
}
@media (min-width: 1200px) {
  .ply-grid2:has(> .ply-tile) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1600px) {
  .ply-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ply-store-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ply-store-list > .ply-row:nth-child(3) { border-top: 0; }
}

/* ==========================================================================
 * Player della corsa, stile della nuova app: comandi a icone a tratto su due righe e scritte in sovraimpressione
 * piccole e semitrasparenti, che non coprono la corsa.
 * ========================================================================== */
.race-controls { display: grid; gap: 8px; }
.race-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 6px; min-width: 0; }
/* nelle colonne strette (galoppo di prova sul computer) i bottoni vanno a capo invece di uscire dal riquadro */
.race-row .race-scrub { flex: 1; }
.race-ib {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 12px; border: 2px solid var(--line); background: var(--night); color: #c3cde4;
}
.race-ib svg { width: 20px; height: 20px; }
.race-ib.on, .race-ib.race-play, .race-ib.race-fullbtn { color: var(--white); }
.race-ib.race-play { background: var(--blue-dark); }
.race-ib.race-boardbtn.on, .race-ib.race-soundbtn.on, .race-ib.race-cam.on { background: var(--blue-dark); }
.race-ib.race-cam { min-width: 0; min-height: 0; padding: 0; } /* come gli altri bottoni a icona (la vecchia regola lo allargava) */
.race-ib[hidden] { display: none; }
.race-chip {
  height: 40px; padding: 0 14px; flex: none; cursor: pointer; border-radius: 12px; border: 2px solid var(--line);
  background: var(--night); color: #c3cde4; font: 700 14px var(--font);
}
.race-chip.on { background: var(--surface); color: var(--ink); }
.race-chip.race-mine { padding: 0 8px; display: inline-flex; align-items: center; }
.race-chip.race-mine svg { display: block; }
.race-row .race-speeds { margin-left: auto; display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--night); border: 2px solid var(--line); }
.race-sp { min-width: 36px; height: 30px; padding: 0 6px; border: 0; border-radius: 9px; background: none; color: #c3cde4; font: 700 13px var(--font); cursor: pointer; }
.race-sp.on { background: var(--surface); color: var(--ink); }
.race-auto:not(.on), .race-cam:not(.on), .race-boardbtn:not(.on), .race-soundbtn:not(.on) { filter: none; opacity: 1; }
.race.full .race-controls { display: flex; align-items: center; gap: 8px; }
.race.full .race-row { display: contents; }
.race.full .race-ib, .race.full .race-chip { height: 34px; }
.race.full .race-ib { width: 34px; }
/* telefono in verticale: tutti i comandi della seconda riga stanno su una riga sola (bottoni un po' più piccoli) */
@media (max-width: 440px) {
  .race:not(.full) .race-row { gap: 5px; }
  .race:not(.full) .race-row + .race-row { flex-wrap: nowrap; }
  .race:not(.full) .race-row + .race-row .race-ib { width: 34px; height: 34px; border-radius: 10px; }
  .race:not(.full) .race-row + .race-row .race-ib svg { width: 18px; height: 18px; }
  .race:not(.full) .race-row + .race-row .race-chip { height: 34px; padding: 0 10px; border-radius: 10px; font-size: 13px; }
  .race:not(.full) .race-row + .race-row .race-chip.race-mine { padding: 0 6px; }
  .race:not(.full) .race-row + .race-row .race-speeds { padding: 2px; border-radius: 10px; }
  .race:not(.full) .race-row + .race-row .race-sp { min-width: 28px; height: 26px; padding: 0 4px; font-size: 12px; }
}
@media (max-width: 380px) {
  .race:not(.full) .race-row { gap: 4px; }
  .race:not(.full) .race-row + .race-row .race-ib, .race:not(.full) .race-row + .race-row .race-chip { height: 32px; }
  .race:not(.full) .race-row + .race-row .race-ib { width: 32px; }
  .race:not(.full) .race-row + .race-row .race-chip { padding: 0 7px; font-size: 12px; }
  .race:not(.full) .race-row + .race-row .race-chip.race-mine { padding: 0 4px; }
  .race:not(.full) .race-row + .race-row .race-sp { min-width: 24px; height: 24px; padding: 0 3px; font-size: 11px; }
}
/* telefoni piccolissimi: se non ci stanno, meglio a capo che tagliati */
@media (max-width: 345px) { .race:not(.full) .race-row + .race-row { flex-wrap: wrap; } }

/* scritte sulla corsa: piccole, semitrasparenti */
.race-top { top: 6px; left: 6px; display: flex; gap: 4px; }
.race-top span, .race-top span + span {
  width: auto; padding: 2px 8px; border: 0; border-radius: 8px; box-shadow: none; text-shadow: none;
  background: rgb(22 38 77 / .7); color: var(--white); font: 700 12px/1.4 var(--font); font-variant-numeric: tabular-nums;
}
.race-top span:first-child { color: var(--yellow); }
.race-board { top: 6px; right: 6px; padding: 3px 4px; gap: 1px; border: 0; border-radius: 8px; background: rgb(22 38 77 / .6); min-width: 0; }
.race-board li { font: 700 11px/1.3 var(--font); gap: 4px; }
.race-board li b { width: 10px; font: 700 11px var(--font); }
.race-board li i { width: 16px; height: 14px; border-width: 1px; border-radius: 4px; font: 700 9px var(--font); text-shadow: none; }
.race-board li span { max-width: 84px; }
.race-map { left: 6px; bottom: 6px; width: 60px; opacity: .9; filter: none; }
.race-ticker { left: 72px; right: 6px; bottom: 6px; }
.race-ticker p, .race-ticker p.now { padding: 2px 8px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .82); font: 700 11px/1.35 var(--font); color: var(--ink); }
@media (min-width: 900px) {
  .race-top span, .race-top span + span { font-size: 13px; }
  .race-board li { font-size: 12px; }
  .race-map { width: 100px; }
  .race-ticker { left: 114px; }
  .race.full .race-ticker { left: calc(max(6px, calc(var(--rl) + 4px)) + 108px); }
  .race-ticker p, .race-ticker p.now { font-size: 12px; }
}
/* Articoli del magazzino: toccandoli si apre la spiegazione */
.ply-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ply-ptitle > .ply-info { flex: none; gap: 8px; }
.ply-q-ico { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #dceeff; color: var(--blue-dark); font: 700 13px var(--font); border: 2px solid var(--line); }
.ply-store-item .ply-info { flex-basis: calc(100% - 0px); }

/* Editor della giubba a passi: Giubba → Maniche → Berretto, si salva all'ultimo */
.silk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.silk-step { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: 700 13px var(--font); color: var(--muted); text-align: left; }
.silk-step i { display: block; height: 8px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface-2); }
.silk-step.done i { background: var(--green); }
.silk-step.cur i { background: var(--yellow); }
.silk-step.cur { color: var(--ink); }
.silk-nav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 10px; margin-top: 18px; align-items: center; }
.silk-nav .hr-btn { width: 100%; }
.silk-nav .hr-btn.sec { background: var(--surface); color: var(--ink); text-shadow: none; font: 700 16px var(--font); box-shadow: 0 4px 0 var(--line); }
.silk-nav .hr-btn.sec::after { display: none; }
.silk-nav .hr-btn:not(.sec):not(.green) { font-size: 18px; }
/* stato vuoto: il cavallino ha un'altezza fissa, non cresce con la larghezza (sul computer usciva dalla scena) */
.ply-empty .ply-scene svg { width: auto; height: 120px; max-width: 80%; margin-bottom: 6px; }
/* partenti: colonne a destra a larghezza fissa, così peso e tempi stanno in colonna su ogni riga */
.runners li .runners-kg { flex: none; min-width: 84px; text-align: center; }
.runners li em { flex: none; min-width: 64px; }
/* sul telefono la colonna del peso toglieva spazio al nome: il peso va nella riga piccola sotto il nome */
.runners-kg-inline { display: none; color: var(--ink); }
@media (max-width: 600px) {
  .runners li .runners-kg { display: none; }
  .runners-kg-inline { display: inline; }
  .runners li { gap: 8px; padding: 6px 8px; }
  .runners li em { min-width: 0; }
}

/* ==========================================================================
 * Computer (da 1024px), dal canvas «Hoof Rush · nuova app mobile» (tavole Desktop): menu a sinistra di 248px
 * con il logo, le quattro pagine, le altre sotto «Altro» e la scuderia in fondo; in cima a ogni pagina la barra
 * con titolo, Galoppo/Trotto, crediti e chat; colonna utile fino a 1160px; sotto il paesaggio dell'ippodromo.
 * Le pagine si dividono in colonne: 2/3 + 1/3 (.ply-d21), metà e metà (.ply-d11), elenco e scheda (.ply-md).
 * Sotto i 1024px questi contenitori spariscono (display: contents) e resta la colonna del telefono.
 * ========================================================================== */
.ply-sidebar, .ply-dtop, .ply-donly, .ply-hacts, .ply-hname-d { display: none; }
.ply-d21, .ply-d11, .ply-dcol, .ply-htop, .ply-g3, .ply-hdetail, .ply-foalbox, .ply-picks { display: contents; }
.ply-dtop[hidden], .ply-donly[hidden] { display: none !important; }
@media (min-width: 1024px) {
  .ply {
    display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr;
  }
  .ply {
    /* la prima striscia è il fondo del menu, così arriva fino in fondo anche nelle pagine lunghe */
    background: linear-gradient(90deg, var(--night) 0 245px, var(--line) 245px 248px, transparent 248px),
      var(--scene) center bottom / max(100%, 1200px) auto no-repeat, var(--sky-d);
  }
  .ply[data-bg] { background: linear-gradient(90deg, var(--night) 0 245px, var(--line) 245px 248px, transparent 248px); }
  /* lo sfondo fermo occupa solo lo spazio a destra del menu */
  .ply[data-bg]::before { left: 224px; }
  .ply-monly, .ply-nav, .ply-top:not(.bar), .ply-h1-d { display: none; }
  .ply-donly { display: block; }
  .ply-sidebar {
    grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: 4px;
    padding: 20px 14px; background: var(--night); border-right: var(--px) solid var(--line); color: #c3cde4;
  }
  .ply-logo { display: flex; justify-content: center; padding: 0 0 14px; margin-bottom: 8px; border-bottom: 2px solid rgb(255 255 255 / .08); }
  .ply-logo img { width: 180px; height: auto; }
  .ply-snav { display: flex; flex-direction: column; gap: 4px; }
  .ply-snav a {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 2px solid transparent;
    color: #c3cde4; font: 600 16px var(--font); text-decoration: none;
  }
  .ply-snav a svg { width: 22px; height: 22px; flex: none; }
  .ply-snav a:hover { background: rgb(255 255 255 / .06); color: var(--white); }
  .ply-snav a.on, .ply-me.on { background: var(--blue-dark); color: var(--white); border-color: var(--line); box-shadow: inset 0 2px 0 rgb(255 255 255 / .35); }
  .ply-snav.sm a { min-height: 40px; font-size: 14px; }
  .ply-ssep { padding: 18px 12px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8f9dbd; }
  .ply-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 2px solid transparent; background: rgb(255 255 255 / .06); color: var(--white); text-decoration: none; }
  .ply-me-t { min-width: 0; }
  .ply-me-t b { display: block; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ply-me-t small { font-size: 12px; font-weight: 600; color: #c3cde4; }
  .ply-me.on .ply-me-t small { color: #dbe7ff; }

  .ply-main, .ply.wide .ply-main { grid-column: 2; grid-row: 2; max-width: 1224px; padding: 24px 32px 300px; gap: 24px; }
  .ply.no-nav .ply-main { padding-bottom: 300px; }
  .ply.has-dock .ply-main { min-height: 0; padding-bottom: 0; }
  .ply-top.bar {
    grid-column: 2; grid-row: 1; position: static; width: 100%; max-width: 1224px; margin: 0 auto; box-sizing: border-box;
    min-height: 0; padding: 24px 32px 0; gap: 14px; background: none; border: 0;
  }
  .ply-top.bar .ply-title { text-align: left; font-family: var(--font-display); font-size: 38px; text-shadow: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line), 0 4px 0 var(--line); }
  .ply-top.bar .ply-stepno { width: auto; padding: 0 12px; color: var(--white); }
  .ply-dtop { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .ply-dtitle {
    flex: 1 1 280px; min-width: 0; margin: 0; color: var(--white); font-family: var(--font-display); font-size: 38px; line-height: 1.1;
    text-shadow: 2px 0 0 var(--line), -2px 0 0 var(--line), 0 2px 0 var(--line), 0 -2px 0 var(--line), 1.5px 1.5px 0 var(--line), -1.5px 1.5px 0 var(--line), 1.5px -1.5px 0 var(--line), -1.5px -1.5px 0 var(--line), 0 4px 0 var(--line);
  }
  .ply-dseg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--night); border: var(--px) solid var(--line); border-radius: 14px; }
  .ply-dseg button { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: none; color: var(--white); font: 700 15px var(--font); cursor: pointer; }
  .ply-dseg button.on { background: var(--surface); color: var(--ink); }
  .ply-dtop .ply-pill { height: 44px; padding: 0 16px; font-size: 16px; border-width: var(--px); }
  .ply-dtop .ply-coin { width: 18px; height: 18px; }
  .ply-dtop .ply-ibtn { position: relative; border-width: var(--px); }
  .ply-dtop .ply-dot { top: -6px; left: auto; right: -6px; }
  .ply-head h1 + .hr-lead, .ply-head .ply-h1-d + .hr-lead { margin-top: 0; }

  /* colonne */
  .ply-d21 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
  .ply-d11 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }
  .ply-dcol { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  /* home: la colonna destra alta quanto il riquadro del cavallo; «Prossime corse» si allunga e l'asta resta in fondo, allineata */
  .ply-d21.ply-home { align-items: stretch; }
  .ply-d21.ply-home > .ply-dcol > .ply-next { flex: 1; }
  .ply-d21 > .ply-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .ply-d21 > .ply-cards.ply-races { grid-template-columns: minmax(0, 1fr); }
  .ply-dcol > .ply-glabel { margin-bottom: -16px; }
  .ply-howto { margin: 0; padding: 0; list-style: none; counter-reset: passo; }
  .ply-howto li { counter-increment: passo; display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: var(--dash); font-size: 15px; font-weight: 600; line-height: 1.4; }
  .ply-howto li:first-child { border-top: 0; padding-top: 4px; }
  .ply-howto li::before {
    content: counter(passo); flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--night); color: var(--white);
    font-family: var(--font-display); display: grid; place-items: center;
  }

  /* Home: il cavallo pronto (prato e testo affiancati) e da fare oggi; sotto i cavalli e le notizie */
  /* il prato con i cavalli che passeggiano prende tutta la larghezza e più altezza; sotto, il testo e il bottone in riga */
  .ply-d21 > .ply-hero { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .ply-d21 > .ply-hero > .ply-scene { height: 380px; border: 0; border-bottom: var(--px) solid var(--line); border-radius: 0; margin: 0; }
  /* il bottone prende tutta la larghezza del riquadro, sotto il testo */
  .ply-d21 > .ply-hero > .ply-hero-body { padding: 18px 24px; display: grid; grid-template-columns: 1fr; gap: 12px; }
  .ply-d21 > .ply-hero > .ply-hero-body > .hr-btn { width: 100%; }
  .ply-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 8px; }
  .ply-minis > .ply-horse { box-shadow: none; }

  /* Scuderia: elenco a sinistra, scheda del cavallo scelto a destra */
  .ply-cards > .ply-md { grid-column: 1 / -1; }
  .ply-md { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 24px; align-items: start; }
  .ply-mdlist { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }
  .ply-mdlist .ply-horse .meters { display: none; }
  .ply-mdlist .ply-horse.on { background: #fff0c2; box-shadow: 0 0 0 4px var(--yellow), 0 4px 0 rgb(16 30 70 / .35); }
  .ply-hdetail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .ply-hdetail + .ply-dock { display: none; }
  .ply-htop {
    /* disegno a sinistra, scheda a destra su tutto lo spazio che resta */
    display: grid; grid-template-columns: minmax(260px, 2fr) minmax(0, 3fr); overflow: hidden;
    background: var(--surface); border: var(--px) solid var(--line); border-radius: 20px; box-shadow: inset 0 3px 0 rgb(255 255 255 / .9), 0 5px 0 rgb(16 30 70 / .35);
  }
  /* quando la scheda accanto si allunga (caratteristiche aperte) sotto il disegno continua il prato, non un altro cielo */
  .ply-htop > .ply-scene {
    margin: 0; border: 0; border-radius: 0; min-height: 300px; box-shadow: none;
    background: linear-gradient(180deg, var(--sky-flat) 0 95px, var(--grass-flat) 95px);
  }
  .ply-htop > .ply-hinfo { border-left: var(--px) solid var(--line); }
  .ply-htop > .ply-scene > .hr-horse-canvas { position: absolute; inset: 0; }
  .ply-htop > .ply-scene > .horse-rating { display: none; }
  .ply-htop > .ply-hinfo { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 24px; }
  .ply-hname-d { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
  .ply-hname-d b { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.1; }
  .ply-hname-d .horse-rating { width: 68px; height: 68px; border-radius: 18px; }
  .ply-hname-d .horse-rating b { font-family: var(--font-display); font-size: 30px; }
  /* bottoni del cavallo in colonne uguali, tutti sulla stessa riga quando ci stanno */
  .ply-hacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: stretch; grid-column: 1 / -1; padding: 16px 24px 20px; border-top: var(--px) solid var(--line); background: #f6ecd4; }
  .ply-hacts:empty { display: none; }
  .ply-hacts .hr-btn { width: 100%; min-width: 0; }
  .ply-g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; align-items: start; }
  .ply-g3 > .hr-card { margin: 0; }
  .ply-g3 > .ply-g3-wide { grid-column: 1 / -1; }
  .ply-g3-wide .ply-grid2 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

  /* Nuovo cavallo: catalogo a griglia, riepilogo fisso a destra */
  .ply-foalbox { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px 24px; align-items: start; }
  .ply-foalbox > * { grid-column: 1; margin: 0; }
  .ply-foalbox > .ply-fsum, .ply-foalbox.step3 > .ply-fcost { grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 24px; }
  .ply-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .ply-picks > .hr-btn, .ply-picks > .hr-card { grid-column: 1 / -1; }
  .ply-fsum { display: flex; flex-direction: column; gap: 8px; }
  .ply-fsum h2 { margin: 0 0 6px; font-size: 20px; }
  .ply-fslot { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px; border: var(--px) solid var(--line); background: var(--white); }
  .ply-fslot .ply-thumb { width: 84px; height: 64px; }
  .ply-fslot b { display: block; font-size: 17px; }
  .ply-fslot .ply-price { font-size: 14px; }
  .ply-fslot.empty { grid-template-columns: minmax(0, 1fr); min-height: 84px; text-align: center; border-style: dashed; background: none; color: var(--muted); align-content: center; }
  .ply-fslot.empty span { font-size: 13px; font-weight: 600; }
  .ply-fsum > .ply-plus { align-self: center; margin: -10px 0; position: relative; z-index: 1; }
  .ply-fsum > .hr-btn { margin-top: 10px; }
  .ply-foalbox.step3 + .ply-dock { position: static; }
  .ply-foalbox.pick + .ply-dock { display: none; }

  .ply-sheet { max-width: 640px; }
}

/* Ippodromi (schede compatte, la scheda completa si apre a parte) e Meteo (pagina a sé) */
.ply-base { display: flex; align-items: center; gap: 14px; }
.ply-base-map { width: 110px; flex: none; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); }
.ply-base-map svg, .ply-track-map svg { display: block; width: 100%; height: auto; }
.ply-base .hr-btn { width: auto; flex: none; }
.ply-track { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.ply-track-map { width: 96px; flex: none; border-radius: 10px; overflow: hidden; border: 2px solid var(--line); }
.ply-track .ply-rt b { display: block; font-size: 16px; font-weight: 700; }
.ply-track .ply-rt .ply-muted { display: block; font-size: 13px; }
.ply-track .travel { font-size: 13px; font-weight: 700; }
.ply-wx { font-size: 34px; line-height: 1; flex: none; }
.ply-wx-list { display: grid; gap: 16px; }
.ply-wx-card { display: grid; gap: 10px; }
.ply-wx-card.home { box-shadow: 0 0 0 4px var(--yellow), 0 5px 0 rgb(16 30 70 / .35); }
.ply-wx-head { display: flex; align-items: center; gap: 12px; }
.ply-wx-head .ply-rt b { display: block; font-size: 17px; font-weight: 700; }
@media (min-width: 1024px) {
  .ply-wx-list { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); align-items: start; }
}

/* ==========================================================================
 * Negozio (#/negozio): pacchetti di crediti e season pass; nell'app prezzi dello store, sul sito carta e PayPal
 * ========================================================================== */
.shop-list { grid-template-columns: minmax(0, 1fr) !important; }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shop-item .ply-rt { min-width: 0; flex: 1 1 240px; } /* il testo non si stringe a una colonna: se non c'è posto, prezzo e pulsanti vanno sotto */
@media (max-width: 560px) { .shop-acts { width: 100%; justify-content: flex-end; } }
.shop-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shop-price { font-size: 18px; font-weight: 800; white-space: nowrap; margin-right: 4px; }
.shop-pass.on { box-shadow: 0 0 0 4px var(--yellow), 0 5px 0 rgb(16 30 70 / .35); }
.shop-restore { display: flex; justify-content: center; }
.shop-note { font-size: 13px; text-align: center; margin: 0; padding: 12px 16px; }
/* link «‹ indietro» appoggiati sullo sfondo della pagina: chiari, per leggerli sopra le scene */
.ply-main > a.hr-link { color: #fff; text-shadow: 0 1px 3px rgb(16 30 70 / .7); font-weight: 700; }
/* registrazione: quante scuderie hanno la base nell'ippodromo scelto */
.hr-base-count { font-weight: 700; color: var(--blue-dark); }
.hr-base-count:empty { display: none; }

/* scheda del cavallo: la genealogia in una riga dentro la scheda (toccandola si apre l'albero) */
.ply-hped-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; width: 100%; min-height: 0; margin-top: 10px; padding: 8px 0; text-align: left; border: 0; border-top: 2px dashed rgb(28 42 74 / .12); border-bottom: 2px dashed rgb(28 42 74 / .12); border-radius: 0; background: none; }
.ply-hped-line small { width: 100%; font-size: 12px; font-weight: 700; color: var(--ink-soft, #4a5778); }
.ply-hped-line b { flex: 1; font-size: 15px; }

/* Iscrivi in questa corsa: scelta del cavallo nella finestra */
.enter-pick { display: grid; gap: 8px; }
.enter-horse {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; text-align: left; cursor: pointer;
  background: var(--white); border: var(--px) solid var(--line); border-radius: 14px; box-shadow: 0 3px 0 var(--line); font: inherit; color: var(--ink);
}
.enter-horse:hover { background: var(--gold-soft); }
.enter-horse > span:nth-child(2) { flex: 1; display: grid; }
.enter-horse small { color: var(--muted); font-weight: 700; }
.enter-horse i { font-style: normal; font-size: 22px; color: var(--muted); }
.enter-pic { width: 64px; height: 52px; flex: none; display: grid; place-items: center; background: #d9f0c8; border-radius: 10px; overflow: hidden; }
.enter-pic svg { width: 64px; height: auto; }

/* Livello della scuderia (profilo): numero e barra verso il prossimo */
.level-card { display: grid; gap: 8px; }
.level-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.level-head b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.level-bar { height: 14px; border: var(--px) solid var(--line); border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.level-bar i { display: block; height: 100%; background: linear-gradient(180deg, var(--yellow), var(--yellow-dark)); border-radius: 999px; }
.level-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.level-goals li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-weight: 700; }
.level-goals li .level-bar { grid-column: 1 / -1; height: 10px; }
.level-goals li small { color: var(--muted); font-variant-numeric: tabular-nums; }
.level-goals li.done .level-bar i { background: linear-gradient(180deg, var(--green), var(--green-dark)); }
/* il livello in alto porta alla pagina dei livelli */
.ply-lvl { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* pagina Livelli: regole e percorso (un livello per riga, raggiunti in verde, quello attuale in giallo) */
.level-rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.level-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.level-path li { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 12px; background: var(--surface-2); border: 2px solid var(--line); }
.level-path li.todo { opacity: .75; }
.level-path li.here { background: var(--gold-soft); }
.lp-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: var(--px) solid var(--line); background: var(--surface); font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.level-path li.done .lp-n { background: var(--green); color: #fff; }
.level-path li.here .lp-n { background: var(--yellow); }
.lp-body { display: grid; gap: 2px; min-width: 0; }
.lp-body small { font-size: 13px; }

/* galoppo di prova: i compagni sono tessere grandi da toccare, la tattica compare solo per chi galoppa */
.trial-mates { display: grid; gap: 8px; }
.trial-mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trial-mhead .hr-btn { width: auto; }
.trial-mrow { display: grid; gap: 6px; }
.trial-mate { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: var(--px, 3px) solid var(--line, #1c2a4a); border-radius: 16px; background: var(--surface, #fff); color: var(--ink, #1c2a4a); font: inherit; text-align: left; cursor: pointer; }
.trial-mate .trial-tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid currentColor; color: transparent; font-weight: 900; font-size: 16px; line-height: 1; }
.trial-mate.on { background: var(--gold-soft, #fff3c4); border-color: var(--gold-dark, #c98a00); }
.trial-mate.on .trial-tick { background: var(--green, #2f9e44); border-color: var(--green-dark, #1f7a33); color: #fff; }
.trial-mate:disabled { opacity: .55; cursor: not-allowed; }
.trial-mname { display: grid; min-width: 0; }
.trial-mname b { font-size: 16px; }
.trial-mname small { font-size: 12px; font-weight: 700; color: var(--ink-soft, #4a5778); }
.trial-mrow .hr-input[hidden] { display: none; }

/* tagli della puntata: banconote verdi con il bordo dentellato e il valore al centro */
.bet-bills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.bet-bill.max b { letter-spacing: 1.5px; }
.bet-bill { position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 92px; justify-content: center; padding: 10px 14px; border: 3px solid #2f6b2a; border-radius: 6px; cursor: pointer;
  background: radial-gradient(circle at 18% 50%, rgb(255 255 255 / .35) 0 9px, transparent 10px), repeating-linear-gradient(135deg, rgb(255 255 255 / .12) 0 4px, transparent 4px 8px), linear-gradient(180deg, #b9e7a4, #7cc66a);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / .45), 0 4px 0 #2f6b2a; color: #1d4a19; font: inherit; transition: transform .1s; }
.bet-bill b { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: .5px; }
.bet-bill i { font-style: normal; font-size: 14px; }
.bet-bill:hover { transform: translateY(-2px); }
.bet-bill.on { background: radial-gradient(circle at 18% 50%, rgb(255 255 255 / .4) 0 9px, transparent 10px), linear-gradient(180deg, #ffe680, var(--yellow) 60%, var(--yellow-dark)); border-color: var(--yellow-dark); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .5), 0 4px 0 #9a6b00; color: var(--ink); }

/* «Scarica la nostra app»: solo sul sito (mai nell'app), con i bottoni neri degli store */
.app-dl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; }
.app-dl[hidden] { display: none; }
.app-dl-text h2 { margin: 0; font-size: 20px; }
.app-dl-text p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.app-dl-links { display: flex; flex-wrap: wrap; gap: 10px; }
.app-dl-btn { display: inline-flex; align-items: center; gap: 9px; min-width: 138px; padding: 6px 14px 6px 10px; border-radius: 12px; background: #111; color: #fff; text-decoration: none; border: 2px solid #111; }
.app-dl-btn:hover { background: #2a2a2a; }
.app-dl-ico { line-height: 0; flex: none; }
.app-dl-btn small { display: block; font-size: 11px; line-height: 1.1; opacity: .85; }
.app-dl-btn b { display: block; font-size: 17px; line-height: 1.15; }
/* nel sito pubblico: largo come le altre sezioni (e il bottone del regolamento), una riga con testo e bottoni */
.pub .app-dl.pub-app { display: flex; max-width: none; margin: 0; }
.app-banner { display: flex; align-items: center; gap: 10px; padding: calc(var(--sa-t) + 8px) 12px 8px 8px; background: var(--surface); color: var(--ink); border-bottom: var(--px) solid var(--line); font-size: 14px; }
.app-banner img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.app-banner-x { flex: none; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.app-banner-txt { flex: 1; min-width: 0; }
.app-banner-txt b { display: block; font-size: 15px; line-height: 1.2; }
.app-banner-txt small { display: block; color: var(--muted); font-size: 12px; }
.app-banner-go { flex: none; padding: 7px 16px; border-radius: 999px; background: var(--blue-dark); color: #fff; font-weight: 800; text-decoration: none; }

/* sopra lo sfondo della pagina (non in un riquadro): bianco, come le altre righe introduttive */
.chat-lead { margin: 0 0 10px; font-size: 15px; }