/* =========================================================================
   PasatWeb — foglio di stile
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --blu: #0C6895;
  --blu-scuro: #084b6d;
  --blu-chiaro: #4DB7E0;
  --verde: #2ecc71;
  --rosso: #e74c3c;

  --page: #f4f8fb;
  --card: #ffffff;
  --testo: #23303a;
  --muto: #7a8a95;
  --bordo: #e3ebf0;
  --field: #fbfdfe;
  --acqua: #eaf6fb;
  --ring-bg: #e6eef3;
  --ombra: 0 18px 45px rgba(12, 104, 149, 0.14);
  --raggio: 18px;
}

[data-theme="dark"]{
  --blu-chiaro: #57c4ec;
  --page: #0d151d;
  --card: #182430;
  --testo: #e7eef3;
  --muto: #93a4b0;
  --bordo: #2b3947;
  --field: #101b25;
  --acqua: #12303f;
  --ring-bg: #243441;
  --ombra: 0 18px 45px rgba(0, 0, 0, 0.5);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  font-family: "Poppins", "Segoe UI", system-ui, Arial, sans-serif;
  color: var(--testo);
  background: linear-gradient(180deg, var(--acqua) 0%, var(--page) 260px);
  min-height: 100%;
  padding: 32px 16px;
}

.noselect{ -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Controllo di accesso ---- */
#blockScreen{ display: none; }
[data-access="blocked"] #contenitore{ display: none; }
[data-access="blocked"] #blockScreen{
  display: flex; align-items: center; justify-content: center;
  min-height: 70vh; padding: 20px;
}
.block-card{
  max-width: 460px; text-align: center;
  background: var(--card); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: 40px 32px;
}
.block-card h1{
  margin: 0 0 16px; font-size: 28px;
  background: linear-gradient(120deg, var(--blu), var(--blu-chiaro));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.block-card p{ font-size: 16px; line-height: 1.5; margin: 8px 0; }
.block-card .block-sub{ color: var(--muto); font-size: 14px; }
.block-card .block-link{ margin: 14px 0 0; font-size: 15px; }
.block-card .block-link a{ color: var(--blu); font-weight: 600; word-break: break-all; }
[data-theme="dark"] .block-card .block-link a{ color: var(--blu-chiaro); }
.block-card .btn{ display: inline-block; text-decoration: none; line-height: 54px; margin-top: 22px; }

/* modalità Player: nasconde ciò che non serve */
body.player .theme-toggle{ display: none; }

/* ---- Card ---- */
#contenitore{
  max-width: 720px;
  margin: 0 auto;
  background: var(--card);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
}

/* ---- Header ---- */
#titlebg{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(120deg, var(--blu-scuro) 0%, var(--blu) 45%, var(--blu-chiaro) 100%);
  padding: 26px 28px;
  color: #fff;
  overflow: hidden;
}
#titlebg::after{
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,0.10);
  border-radius: 50%;
}
.head-left{ position: relative; z-index: 1; }
#titlebg h1{ margin: 0; font-size: 30px; font-weight: 700; letter-spacing: .5px; }
.sottotitolo{ display: block; margin-top: 4px; font-size: 14px; font-weight: 400; opacity: .9; }

.theme-toggle{
  position: relative; z-index: 1;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff; font-size: 20px; cursor: pointer;
  transition: background .15s, transform .15s;
}
.theme-toggle:hover{ background: rgba(255,255,255,0.30); transform: rotate(-15deg); }

/* ---- Impostazioni ---- */
#options{ padding: 18px 28px 28px; }

.presets{
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid var(--bordo);
}
.presets-label{ font-size: 13px; font-weight: 600; color: var(--muto); text-transform: uppercase; letter-spacing: .5px; }
.preset{
  padding: 8px 18px; border: 1.5px solid var(--bordo); border-radius: 100px;
  background: var(--field); color: var(--testo);
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.preset:hover{ border-color: var(--blu-chiaro); color: var(--blu); }
.preset.active{ background: var(--blu); border-color: var(--blu); color: #fff; }

.row{
  display: flex; align-items: center; gap: 16px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--bordo);
}
.row:last-of-type{ border-bottom: 0; }
.row.center{ justify-content: center; border-bottom: 0; }

.label{ flex: 0 0 42%; font-weight: 600; font-size: 15.5px; }
.field{ flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.slider-field{ gap: 14px; }

select, input[type="text"], input[type="number"]{
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 46px; padding: 0 16px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--testo);
  background: var(--field); border: 1.5px solid var(--bordo); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234DB7E0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px; cursor: pointer;
}
select:hover, input:hover{ background: var(--card); }
select:focus, input:focus{
  outline: none; border-color: var(--blu-chiaro);
  box-shadow: 0 0 0 4px rgba(77, 183, 224, 0.20); background: var(--card);
}
input.invalid{ border-color: var(--rosso) !important; box-shadow: 0 0 0 4px rgba(231,76,60,.15) !important; }

/* nascondi le frecce dei campi numerici */
input[type=number]{ -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* range */
input[type="range"]{
  -webkit-appearance: none; appearance: none;
  height: 6px; padding: 0; border: 0; border-radius: 100px;
  background: var(--ring-bg); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--blu); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px; border-radius: 50%; background: var(--blu); border: 3px solid #fff;
}
.slider-val{ flex: 0 0 auto; min-width: 44px; font-weight: 600; color: var(--blu); }

/* tooltip informativi */
.info{
  position: relative; flex: 0 0 auto;
  width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: var(--acqua); color: var(--blu);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: help;
  transition: background .15s, transform .15s;
}
.info:hover, .info:focus{ background: var(--blu); color: #fff; transform: scale(1.08); outline: none; }
.info::after{
  content: attr(data-tip);
  position: absolute; right: 0; bottom: 140%;
  width: 250px; max-width: 62vw;
  background: var(--testo); color: var(--card);
  padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s; pointer-events: none;
  z-index: 30; box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.info:hover::after, .info:focus::after{ opacity: 1; visibility: visible; transform: translateY(0); }

/* anteprima regola */
.regola{
  margin-top: 18px; padding: 14px 16px;
  background: var(--acqua); border-left: 4px solid var(--blu-chiaro); border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--testo);
}

.errore{
  color: var(--rosso); font-weight: 600; font-size: 14px; text-align: center;
  margin: 14px 0 0; padding: 12px 14px; background: rgba(231,76,60,.12); border-radius: 12px;
}

/* pulsanti */
.actions-home{ display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 26px 0 4px; }
.btn{
  min-width: 200px; height: 54px; padding: 0 28px;
  color: #fff; font-family: inherit; font-weight: 600; font-size: 16px; letter-spacing: .4px;
  border: 0; border-radius: 100px;
  background: linear-gradient(120deg, var(--blu) 0%, var(--blu-chiaro) 100%);
  box-shadow: 0 10px 22px rgba(12, 104, 149, 0.30); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px rgba(12,104,149,.38); filter: brightness(1.04); }
.btn:active{ transform: translateY(0); }
.btn.ghost{
  background: transparent; color: var(--blu);
  border: 2px solid var(--blu-chiaro); box-shadow: none;
}
[data-theme="dark"] .btn.ghost{ color: var(--blu-chiaro); }
.btn.ghost:hover{ background: var(--acqua); }

.share-box{
  display: flex; gap: 8px; align-items: center;
  max-width: 560px; margin: 4px auto 0; padding: 0 4px;
}
.share-url{
  flex: 1 1 auto; min-width: 0; height: 44px !important;
  font-size: 13px !important; color: var(--muto) !important;
}
.share-box .ctrl{ flex: 0 0 auto; }

.linkbtn{
  background: none; border: 0; color: var(--blu); font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px; text-decoration: none;
}
[data-theme="dark"] .linkbtn{ color: var(--blu-chiaro); }
.linkbtn:hover{ text-decoration: underline; }
.linkbtn.danger{ color: var(--rosso); }

/* storico */
.storico{ margin-top: 6px; border-top: 1px solid var(--bordo); padding-top: 14px; }
.storico-head{ display: flex; align-items: center; justify-content: space-between; }
.storico-head h3{ margin: 0; font-size: 17px; color: var(--blu); }
[data-theme="dark"] .storico-head h3{ color: var(--blu-chiaro); }
.storico-item{
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 10px 12px; margin-top: 8px;
  background: var(--field); border: 1px solid var(--bordo); border-radius: 12px; font-size: 13.5px;
}
.storico-item .sdata{ font-weight: 600; }
.storico-item .smeta{ color: var(--muto); }
.storico-item .sscore{ text-align: right; font-weight: 700; }
.storico-vuoto{ color: var(--muto); font-size: 14px; padding: 12px 4px; }

/* ---- Gioco ---- */
#game{
  padding: 22px 24px 32px; text-align: center;
  background: radial-gradient(700px 300px at 50% -20%, var(--acqua) 0%, transparent 60%);
}
.game-top{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px;
}
.indicatore{
  font-size: 14px; font-weight: 600; color: var(--blu);
  background: var(--acqua); padding: 8px 14px; border-radius: 100px; min-height: 34px;
}
[data-theme="dark"] .indicatore{ color: var(--blu-chiaro); }
.tempo-live{
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(120deg, var(--blu), var(--blu-chiaro));
  padding: 8px 14px; border-radius: 100px; white-space: nowrap;
}
.game-controls{ display: flex; gap: 8px; }
@media (max-width: 620px){ .game-top{ flex-wrap: wrap; } }
.ctrl{
  padding: 8px 14px; border: 1.5px solid var(--bordo); border-radius: 100px;
  background: var(--field); color: var(--testo);
  font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.ctrl:hover{ border-color: var(--blu-chiaro); color: var(--blu); }
.ctrl.danger:hover{ border-color: var(--rosso); color: var(--rosso); }

#screenwrap{
  position: relative; width: min(320px, 86vw); aspect-ratio: 1 / 1; margin: 8px auto 22px;
}
#ring{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg{ fill: none; stroke: var(--ring-bg); stroke-width: 12; }
.ring-fg{
  fill: none; stroke: var(--blu-chiaro); stroke-width: 12; stroke-linecap: round;
  transition: stroke-dashoffset .08s linear, stroke .2s;
}
#screen{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 84%; height: 84%; border-radius: 50%;
  background: var(--card); border: 1px solid var(--bordo);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .2s;
}
#screenwrap.flash-ok #screen{ box-shadow: 0 0 0 6px rgba(46,204,113,.35), 0 0 34px rgba(46,204,113,.5); }
#screenwrap.flash-ko #screen{ box-shadow: 0 0 0 6px rgba(231,76,60,.35), 0 0 34px rgba(231,76,60,.5); }
#screenwrap.flash-ok .ring-fg{ stroke: var(--verde); }
#screenwrap.flash-ko .ring-fg{ stroke: var(--rosso); }

#numero{
  font-size: clamp(60px, 22vw, 118px); font-weight: 700; line-height: 1; margin: 0; color: var(--blu);
}
[data-theme="dark"] #numero{ color: var(--blu-chiaro); }
.feedback{ position: absolute; font-size: clamp(70px, 26vw, 130px); line-height: 1; font-weight: 700; animation: pop .18s ease-out; }
.feedback.ok{ color: var(--verde); }
.feedback.ko{ color: var(--rosso); }
.countdown{ color: var(--blu) !important; animation: cd .6s ease-out; }
@keyframes pop{ from{ transform: scale(.55); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
@keyframes cd{ from{ transform: scale(1.5); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

#casella{
  width: 400px; max-width: 90%; height: 84px; text-align: center; margin: 0 auto 20px;
  font-size: 40px; font-weight: 600; color: var(--blu);
  border: 1.5px solid var(--bordo); border-radius: 16px; box-shadow: 0 12px 26px rgba(12,104,149,0.10);
}
[data-theme="dark"] #casella{ color: var(--blu-chiaro); }
#casella::placeholder{ font-size: 18px; font-weight: 500; color: var(--muto); }
#casella:focus{ outline: none; border-color: var(--blu-chiaro); box-shadow: 0 0 0 4px rgba(77,183,224,.20); }
#casella:disabled{ background: var(--field); }

/* display + tastierino (solo mobile: nascosti di default) */
.display{ display: none; }
.keypad{ display: none; }

.progress{
  width: 400px; max-width: 90%; height: 26px; margin: 0 auto;
  background: var(--ring-bg); border-radius: 100px; overflow: hidden;
}
.progress-bar{
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--blu) 0%, var(--blu-chiaro) 100%);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 26px; text-align: center;
  transition: width .25s ease; white-space: nowrap;
}

/* ---- Risultati ---- */
#results{ padding: 24px 28px 30px; }
#results h2{ margin: 4px 0 18px; color: var(--blu); font-size: 24px; }
[data-theme="dark"] #results h2, [data-theme="dark"] .chart-wrap h3, [data-theme="dark"] .table-wrap h3{ color: var(--blu-chiaro); }
.chart-wrap h3, .table-wrap h3{ color: var(--blu); font-size: 17px; margin: 24px 0 12px; }

.result-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 12px 4px; border-bottom: 1px solid var(--bordo); font-size: 15.5px;
}
.result-row > span:first-child{ color: var(--muto); }
.result-row > span:last-child{ text-align: right; word-break: break-word; }
.grassetto{ font-weight: 700; }
.nota{ font-size: 13px; color: var(--muto); margin: 14px 0 0; }

/* grafico */
.grafico{
  display: flex; align-items: flex-end; gap: 4px;
  height: 160px; padding: 8px 6px 0; overflow-x: auto;
  border-bottom: 2px solid var(--bordo);
}
.barra{
  flex: 1 0 14px; min-width: 14px; border-radius: 5px 5px 0 0; position: relative;
  display: flex; justify-content: center; align-items: flex-start;
  transition: filter .15s;
}
.barra.ok{ background: linear-gradient(180deg, var(--verde), #27ae60); }
.barra.ko{ background: linear-gradient(180deg, var(--rosso), #c0392b); }
.barra:hover{ filter: brightness(1.1); }
.barra .barra-val{
  position: absolute; top: -18px; font-size: 10px; font-weight: 600; color: var(--muto); white-space: nowrap;
}

/* tabella */
.tab{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tab th, .tab td{ padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--bordo); }
.tab th{ color: var(--muto); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.tab tr.r-ok td:last-child, .tab tr.r-ok .esito{ color: var(--verde); font-weight: 700; }
.tab tr.r-ko .esito{ color: var(--rosso); font-weight: 700; }
.tab td.numeri{ font-weight: 600; }

.export{ display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* ---- Responsive ---- */
@media (max-width: 620px){
  body{ padding: 14px 10px; }
  #titlebg{ padding: 20px; }
  #titlebg h1{ font-size: 25px; }
  #options{ padding: 14px 16px 22px; }
  .row{ flex-direction: column; align-items: stretch; gap: 8px; }
  .label{ flex-basis: auto; }
  .info{ align-self: flex-end; margin-top: -34px; }
  .progress{ width: 100%; }
  .btn{ width: 100%; }
}

/* Dispositivi touch (telefoni/tablet): niente input di sistema,
   si usa il display non cliccabile + tastierino a schermo. */
@media (pointer: coarse){
  #casella{ display: none !important; }

  /* compattazione: numero + tastierino (con Invia) visibili senza scroll */
  #game{ padding: 8px 12px 12px; }
  .game-top{ margin-bottom: 2px; }
  .indicatore, .tempo-live{ font-size: 12px; padding: 6px 10px; }
  .ctrl{ padding: 6px 10px; font-size: 12.5px; }

  #screenwrap{ width: 150px; margin: 4px auto 10px; }
  #numero{ font-size: 72px; }
  .feedback{ font-size: 80px; }

  .display{
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: 360px; min-height: 46px; margin: 0 auto 8px;
    font-size: 32px; font-weight: 700; color: var(--blu);
    background: var(--card); border: 1.5px solid var(--bordo); border-radius: 14px;
    box-shadow: 0 8px 18px rgba(12,104,149,.10);
    pointer-events: none; -webkit-user-select: none; user-select: none; overflow: hidden;
  }
  [data-theme="dark"] .display{ color: var(--blu-chiaro); }
  .display:empty::before{ content: "—"; color: var(--muto); font-weight: 500; }

  .keypad{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
    width: 100%; max-width: 340px; margin: 0 auto 6px;
  }
  .key{
    height: 46px; font-family: inherit; font-size: 21px; font-weight: 600;
    color: var(--testo); background: var(--field);
    border: 1.5px solid var(--bordo); border-radius: 12px; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    transition: background .1s, transform .05s;
  }
  .key:active{ background: var(--acqua); transform: translateY(1px); }
  .key-fn{ color: var(--blu); font-weight: 700; }
  [data-theme="dark"] .key-fn{ color: var(--blu-chiaro); }
  .key-ok{
    grid-column: 1 / -1; height: 42px; color: #fff; border: 0; font-size: 18px; font-weight: 700;
    background: linear-gradient(120deg, var(--blu), var(--blu-chiaro));
  }

  .progress{ height: 16px; margin-top: 2px; }
  .progress-bar{ line-height: 16px; font-size: 10px; }
}

/* ---- Meno animazioni ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}