/* The Project Game — stile custom (Bootstrap 5 fa il resto) */

:root {
  --tpg-sfondo-da: #0f172a;   /* slate-900 */
  --tpg-sfondo-a:  #334155;   /* slate-700 */
  --tpg-testo:     #1e293b;   /* slate-800 */
  --tpg-carta-h:   21rem;
}

/* ---------- Layout generale ---------- */

.tpg-body {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--tpg-sfondo-da), var(--tpg-sfondo-a)) fixed;
  color: #fff;
}

.tpg-sottotitolo { max-width: 46rem; color: rgba(255, 255, 255, .8); }
.tpg-ripresa     { color: rgba(255, 255, 255, .55); }
.tpg-link-sessione { color: rgba(255, 255, 255, .75); text-decoration: underline dotted; word-break: break-all; }
.tpg-link-sessione:hover { color: #fff; }

.tpg-footer { color: rgba(255, 255, 255, .5); }

.tpg-btn-vetro {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-weight: 600;
  border: 0;
  backdrop-filter: blur(4px);
  transition: background-color .3s ease, transform .3s ease;
}
.tpg-btn-vetro:hover, .tpg-btn-vetro:focus-visible {
  background: rgba(255, 255, 255, .3);
  color: #fff;
}

/* ---------- Pulsante del mazzo ---------- */

.tpg-btn-mazzo {
  background-color: var(--tpg-btn);
  border: 0;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.tpg-btn-mazzo:hover {
  transform: scale(1.05);
  box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .4);
  background-color: var(--tpg-btn);
  color: #fff;
}
.tpg-btn-mazzo.attivo { filter: saturate(1.15); box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .35); }

.tpg-stato-mazzo { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 500; }
.tpg-suggerimento { color: rgba(255, 255, 255, .55); }

/* ---------- Carta e flip 3D ---------- */

.tpg-carta { padding-bottom: 1.25rem; }        /* spazio per la barra sotto la carta */

.tpg-flip {
  position: relative;
  width: 100%;
  height: var(--tpg-carta-h);
  perspective: 1000px;                          /* prospettiva sul contenitore */
}

.tpg-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;                 /* senza questo, in Safari il retro traspare */
  -webkit-transform-style: preserve-3d;
  transition: transform .6s ease-in-out;
  transform: rotateY(0deg);
}
.tpg-inner.flipped { transform: rotateY(180deg); }

.tpg-faccia {
  position: absolute;                           /* le due facce sovrapposte */
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: .75rem;
  box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, .35);
  backface-visibility: hidden;                  /* il retro non traspare */
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transform: translateZ(0);                     /* evita lo z-fighting fra le facce */
}

.tpg-retro {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .8);
}
.tpg-retro .bi { font-size: 4.5rem; line-height: 1; }

.tpg-fronte {
  background: #fff;
  color: var(--tpg-testo);
  transform: rotateY(180deg) translateZ(0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  padding: 1rem;
  overflow-y: auto;
  pointer-events: none;                         /* non cliccabile finché è girata */
}
.tpg-inner.flipped .tpg-fronte { pointer-events: auto; }
.tpg-inner.flipped .tpg-retro  { pointer-events: none; }

.tpg-domanda {
  margin: 0;
  text-align: center;
  font-size: .98rem;
  line-height: 1.4;
}

.tpg-risposta { width: 100%; margin-top: auto; }
.tpg-textarea { resize: vertical; font-size: .9rem; }
.tpg-salvataggio { min-height: 1.1rem; color: #6c757d; }
.tpg-salvataggio.ok      { color: #198754; }
.tpg-salvataggio.errore  { color: #dc3545; }

/* ---------- Barra dei 30 secondi ---------- */

.tpg-progress {
  height: .5rem;
  margin-top: .75rem;
  background: rgba(255, 255, 255, .25);
}
.tpg-progress-bar {
  background-image: linear-gradient(90deg, #4ade80, #3b82f6);
  transition: width .25s linear;
}

/* ---------- Countdown 180 s ---------- */

.tpg-timer { position: relative; width: 8rem; height: 8rem; flex: 0 0 auto; }
.tpg-ring  { width: 100%; height: 100%; transform: rotate(-90deg); }
.tpg-ring-bg { fill: none; stroke: #e5e7eb; stroke-width: 8; }
.tpg-ring-fg {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s linear;
}
.tpg-timer-testo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  color: var(--tpg-testo);
}
.tpg-timer-testo .bi { color: #3b82f6; font-size: 1.1rem; }
.tpg-mmss { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tpg-timer.scaduto .tpg-mmss { color: #dc3545; }

/* ---------- Modale istruzioni ---------- */

.tpg-modale { border-radius: 1rem; color: var(--tpg-testo); }
.tpg-passo-icona {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Riepilogo ---------- */

.tpg-pannello {
  background: rgba(255, 255, 255, .96);
  color: var(--tpg-testo);
  border-radius: 1rem;
}
.tpg-riga { cursor: grab; }
.tpg-riga:active { cursor: grabbing; }
.tpg-riga .tpg-maniglia { color: #94a3b8; }
.tpg-placeholder {
  border: 2px dashed #94a3b8;
  border-radius: .5rem;
  background: #f8fafc;
  margin-bottom: .75rem;
}
.tpg-badge-mazzo { background-color: var(--tpg-btn); color: #fff; }
.tpg-posizione {
  width: 2rem; height: 2rem; flex: 0 0 auto;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 575.98px) {
  :root { --tpg-carta-h: 19rem; }
  .display-4 { font-size: 2rem; }
  .tpg-retro .bi { font-size: 3.5rem; }
  .tpg-timer { width: 6.5rem; height: 6.5rem; }
  .tpg-mmss { font-size: 1.25rem; }
}

/* ---------- Stampa / PDF (pagina di riepilogo) ---------- */

@media print {
  .tpg-body { background: #fff !important; color: #000; }
  .tpg-no-stampa, .tpg-footer, .btn { display: none !important; }
  .tpg-pannello { background: #fff !important; border: 0; box-shadow: none; }
  .tpg-riga { break-inside: avoid; border-bottom: 1px solid #ddd; }
  a[href]::after { content: ""; }
}