/* ═══════════════════════════════════════════════════════════════
   SimClin — tema "Dossier d'indagine"
   Inchiostro caldo + carta + ottone. Il tema del CASO (colore
   accento, sfondi) resta protagonista su team e proiettore:
   questo è il tavolo di legno su cui si apre il fascicolo.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg: #16120d;          /* inchiostro caldo */
  --panel: #211a13;       /* cuoio scuro */
  --panel2: #2a2118;
  --line: #3d3222;
  --line2: #55462f;
  --tx: #ece3d0;          /* crema */
  --dim: #a3937a;
  --acc: #c9973b;         /* ottone */
  --acc-tx: #241a05;
  --oro: #c9973b;
  --ok: #6da85e;
  --err: #c05a4a;         /* ceralacca */
  --carta: #f1e7d0;       /* la carta degli indizi */
  --carta-tx: #2b2115;
  --carta-line: #d8c9a8;
  --r: 12px;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: 'Courier New', Courier, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #2a211455, transparent 60%),
    var(--bg);
  color: var(--tx);
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: .01em; }
h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 10px; }
.kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
}
.card {
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; margin-bottom: 14px;
  box-shadow: 0 1px 0 #00000055, inset 0 1px 0 #ffffff07;
}
.card2 { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.dim { color: var(--dim); font-size: 14px; }
.small { font-size: 13px; }

button, .btn {
  background: var(--acc); color: var(--acc-tx); border: 0; border-radius: 9px;
  padding: 10px 16px; font: inherit; font-weight: 700; cursor: pointer;
  text-decoration: none; display: inline-block;
  box-shadow: 0 1px 0 #00000066;
}
button:hover, .btn:hover { filter: brightness(1.07); }
button:disabled { opacity: .45; cursor: default; filter: none; }
.btn2 { background: var(--panel2); border: 1px solid var(--line2); color: var(--tx); box-shadow: none; }
.btn-ok { background: var(--ok); color: #10200c; }
.btn-err { background: transparent; border: 1px solid var(--err); color: var(--err); box-shadow: none; }
.btn-oro { background: var(--acc); color: var(--acc-tx); }

input, textarea, select {
  background: #0f0c08; border: 1px solid var(--line); border-radius: 9px;
  color: var(--tx); font: inherit; padding: 10px 12px; width: 100%;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--line2); }
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--dim); margin: 10px 0 4px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 99px; padding: 5px 12px; font-size: 13px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* Scheda di carta: gli indizi, i dati, tutto ciò che "si raccoglie" */
.carta {
  background:
    linear-gradient(160deg, #ffffff18, transparent 30%),
    var(--carta);
  color: var(--carta-tx);
  border: 1px solid var(--carta-line);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 2px 3px 8px #00000060;
}
.carta strong { color: #6b4a12; }
.carta .c-label {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #8a6d3b;
}

/* Timbro (risultati, certificazioni) */
.timbro {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  border: 2px solid currentColor; border-radius: 6px; padding: 4px 10px;
  transform: rotate(-2deg);
}
.timbro.ok { color: #3e7a33; }
.timbro.no { color: var(--err); }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: #0c0905ee; border: 1px solid var(--line2); color: var(--tx);
  padding: 10px 18px; border-radius: 99px;
  font-size: 14px; opacity: 0; transition: opacity .25s; pointer-events: none; z-index: 99; max-width: 92vw;
}
.toast.on { opacity: 1; }
.hidden { display: none !important; }
.stars { color: var(--oro); letter-spacing: 2px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 700; font-family: var(--mono); }
.timer.rosso { color: var(--err); }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 #c05a4a55; } 50% { box-shadow: 0 0 0 7px #c05a4a00; } }
.timer.scaduto { color: var(--err); animation: pulsa 1.2s infinite; }
.msg-tecnico { background: #3a2d10; border: 1px solid #6b5416; color: #ffd985; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; }
@media (max-width: 640px) { .wrap { padding: 14px 10px 50px; } }