/* Ospite · il telefono — leggero, una cosa alla volta, tutto col pollice (390×844) */

.guest-app {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 22px max(18px, env(safe-area-inset-bottom));
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* schermate d'attesa: centrate in verticale (neutro dove c'è .bottom o margin-top:auto) */
.screen.center:not(:has(.bottom)) { justify-content: center; }

/* header logo */
.wordmark { display: flex; align-items: baseline; gap: 6px; justify-content: center; }
.wordmark .w { font: 700 26px var(--f-display); letter-spacing: -1px; }
.wordmark .q { font: 700 32px var(--f-mano); color: var(--pomodoro); }

.top-row { display: flex; align-items: center; justify-content: space-between; min-height: 30px; }
.back-link { font: 600 14px var(--f-display); color: var(--tenue); }

.h-title { text-align: center; font: 700 28px/1.12 var(--f-display); }
.h-title-first { margin-top: 48px; }
.h-sub { margin-top: 10px; text-align: center; font: 600 16px var(--f-mano); color: var(--tenue); }

/* O1 · codice */
.code-tiles { display: flex; gap: 11px; justify-content: center; margin-top: 28px; }
.code-tile {
  width: 60px; height: 76px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid var(--inchiostro);
  box-shadow: 3px 3px 0 var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 40px var(--f-display);
  text-transform: uppercase;
}
.code-tile.active { border-color: var(--inchiostro); box-shadow: 3px 3px 0 var(--sole); color: var(--inchiostro); }
.code-hidden-input { position: absolute; opacity: 0; pointer-events: none; }

.field {
  margin-top: 30px;
  background: #fff;
  border: 3px solid var(--inchiostro);
  border-radius: 16px;
  box-shadow: 3px 3px 0 var(--inchiostro);
  padding: 14px 16px;
  font: 700 24px var(--f-display);
  width: 100%;
  outline: none;
}
.field:focus { border-color: var(--inchiostro); box-shadow: 3px 3px 0 var(--sole); }
.field-hint { margin-top: 10px; font: 500 13px var(--f-display); color: var(--tenue); text-align: right; }

.err {
  margin-top: 12px; text-align: center;
  font: 600 15px var(--f-display); color: var(--pomodoro-scuro);
  min-height: 20px;
}

.bottom { margin-top: auto; padding-top: 16px; }

/* O1 · disegno */
.draw-wrap { display: flex; flex-direction: column; align-items: center; }
.draw-blob {
  margin-top: 20px;
  width: 248px; height: 248px;
  border: 3px solid var(--inchiostro);
  box-shadow: 3px 3px 0 var(--inchiostro);
  position: relative;
  overflow: hidden;
  touch-action: none;
}
.draw-blob canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.swatches { margin-top: 18px; display: flex; gap: 6px; align-items: center; }
.swatch, .undo-btn { flex: none; }
.swatch {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2.5px solid var(--inchiostro);
  transition: box-shadow var(--t-tap), transform var(--t-tap);
}
.swatch.sel { box-shadow: 0 0 0 2.5px var(--carta), 0 0 0 5px var(--inchiostro); transform: scale(1.06); }
/* micro-tap 120ms anche sui controlli minori */
.vote-opt { transition: transform var(--t-tap); }
.vote-opt:active { transform: translate(1px, 1px); }
.swatch:active { transform: scale(.9); }
.undo-btn:active { transform: scale(.94); background: var(--carta); }
.help-link:active, .back-link:active, .skip-link:active { opacity: .55; }
.undo-btn {
  width: 44px; height: 44px; border-radius: 12px;
  background: #fff; border: 2.5px solid var(--inchiostro);
  font: 700 20px var(--f-display); color: var(--tenue);
  margin-left: 0;
}
.skip-link { margin-top: 12px; text-align: center; font: 600 14px var(--f-display); color: var(--tenue); text-decoration: underline; }

/* O2 · attesa lobby */
.big-avatar-wrap { display: flex; justify-content: center; margin-top: 24px; }
.dots { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }
.dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--inchiostro); } /* 2px: eccezione decorativa (pallino da 11px) */
.table-card { margin-top: auto; background: #fff; border: 2.5px solid var(--inchiostro); border-radius: 16px; padding: 12px 14px; text-align: left; }
.table-label { font: 600 13px var(--f-display); color: var(--tenue); margin-bottom: 8px; }
.table-avatars { display: flex; }
.table-avatars > * { margin-right: -8px; }

/* O3 · scrittura */
.round-pill { font: 600 13px var(--f-display); background: var(--sole); border: 2.5px solid var(--inchiostro); border-radius: 20px; padding: 2px 10px; }
.round-pill.target { background: var(--rosa); }
.timer-ring {
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 3px solid var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--f-display);
}
.timer-ring.urgent { border-color: var(--pomodoro); color: var(--pomodoro); }
.prompt-bubble {
  margin-top: 18px;
  background: #fff;
  border: 3px solid var(--inchiostro);
  border-radius: 16px 16px 16px 5px;
  padding: 13px 15px;
  font: 600 22px/1.3 var(--f-display); /* scala ospite: prompt 22 */
  overflow-wrap: anywhere;
  box-shadow: var(--ombra-carta);
}
.answer-box {
  margin-top: 16px;
  flex: 1;
  min-height: 120px;
  background: #fff;
  border: 3px solid var(--inchiostro);
  border-radius: 16px;
  padding: 14px 15px;
  box-shadow: 3px 3px 0 var(--inchiostro);
  font: 500 17px/1.4 var(--f-display);
  width: 100%;
  resize: none;
  outline: none;
}
.answer-box:focus { box-shadow: 3px 3px 0 var(--sole); }
.answer-box.truth, .answer-box.truth:focus { border-color: var(--menta); box-shadow: 3px 3px 0 var(--menta); }
.write-hint { margin: 12px 0 14px; text-align: center; font: 600 16px var(--f-mano); color: var(--tenue); }

/* O4 · attesa */
.check-big {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--menta); border: 4px solid var(--inchiostro);
  box-shadow: 4px 4px 0 var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 46px var(--f-display); color: #fff;
  margin: 20px auto 0;
}
.recap-card { margin-top: 22px; background: #fff; border: 2.5px solid var(--inchiostro); border-radius: 16px; padding: 12px 14px; text-align: left; }
.recap-label { font: 600 14px var(--f-mano); color: var(--tenue); }
.recap-text { font: 600 16px/1.3 var(--f-display); margin-top: 3px; }
.progress-avatars { margin-top: 26px; display: flex; gap: 10px; justify-content: center; }

/* O5 · voto */
.vote-list { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; padding: 0 4px 4px 0; }
.vote-opt {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2.5px solid var(--sabbia); border-radius: 14px;
  padding: 11px 12px;
  text-align: left;
  font: 600 15px/1.3 var(--f-display);
  min-height: 48px;
  width: 100%;
}
.vote-opt .letter {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--carta); border: 2.5px solid var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--f-display);
}
.vote-opt.sel { background: var(--sole); border: 2.5px solid var(--inchiostro); box-shadow: 3px 3px 0 var(--inchiostro); font-weight: 700; }
.vote-opt.sel .letter { background: #fff; }
.vote-opt .sel-check {
  margin-left: auto; width: 22px; height: 22px; flex: none;
  background: var(--inchiostro); border-radius: 50%; color: var(--sole);
  font: 700 12px var(--f-display);
  display: flex; align-items: center; justify-content: center;
}

/* O7 · risultato */
.loot-label { text-align: center; font: 700 22px var(--f-mano); color: var(--pomodoro); margin-top: 8px; }
.loot-score { text-align: center; font: 700 68px/.9 var(--f-display); margin-top: 6px; }
.loot-rank {
  margin: 8px auto 0; width: fit-content;
  font: 700 20px var(--f-display); color: #fff;
  background: var(--uva); border: 2.5px solid var(--inchiostro); border-radius: 20px;
  padding: 3px 16px; box-shadow: 3px 3px 0 var(--inchiostro);
}
.loot-stats { margin-top: 20px; display: flex; gap: 9px; }
.loot-stat { flex: 1; background: #fff; border: 2.5px solid var(--inchiostro); border-radius: 16px; padding: 10px 8px; text-align: center; }
.loot-stat .n { font: 700 26px var(--f-display); }
.loot-stat .l { font: 600 13px var(--f-display); color: var(--tenue); }
.mini-board { margin-top: 14px; background: #fff; border: 2.5px solid var(--inchiostro); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.mini-row { display: flex; align-items: center; gap: 8px; font: 600 15px var(--f-display); }
.mini-row.me { background: var(--sole); border-radius: 8px; padding: 2px 6px; margin: 0 -6px; font-weight: 700; }
.mini-row .pos { width: 16px; font: 700 15px var(--f-display); color: var(--tenue); }
.mini-row .nick { flex: 1; text-align: left; }

/* giurato / bersaglio in voto */
.jury-note { margin-top: 14px; text-align: center; font: 600 16px var(--f-mano); color: var(--tenue); }

.offline-banner {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: var(--inchiostro); color: var(--sole);
  font: 600 13px var(--f-display);
  border-radius: 20px; padding: 6px 14px; z-index: 90;
  box-shadow: 3px 3px 0 rgba(38, 33, 27, .25);
}

/* spettatore */
.spect-note { margin-top: 40px; text-align: center; font: 600 18px var(--f-mano); color: var(--tenue); }

/* i testi dei giocatori possono essere senza spazi: mai fuori dalla card */
.vote-opt, .recap-text, .answer-box { overflow-wrap: anywhere; }

/* ---------- come si gioca ---------- */
.help-link {
  font: 600 14px var(--f-display);
  color: var(--tenue);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: none;
}
/* tap-target ≥44px: il padding è compensato dai margini negativi (zero impatto sul layout) */
.help-link, .back-link, .skip-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 8px;
  margin: -10px -8px;
}
.back-link { text-decoration: none; } /* la freccia è già l'affordance */
.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 33, 27, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 18px;
}
.help-card {
  width: 100%;
  max-width: 420px;
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  background-color: var(--carta);
  background-image: radial-gradient(rgba(38, 33, 27, .07) 1.3px, transparent 1.3px);
  background-size: 18px 18px;
  border: 3px solid var(--inchiostro);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--inchiostro);
  padding: 22px 20px 18px;
}
.help-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.help-head .t { font: 700 26px var(--f-display); letter-spacing: -.5px; }
.help-head .c { font: 700 16px var(--f-mano); color: var(--pomodoro); }
.help-steps { display: flex; flex-direction: column; gap: 12px; }
.help-step { display: flex; gap: 12px; align-items: flex-start; }
.help-step .n {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 15px var(--f-display);
  background: var(--sole);
  border: 2.5px solid var(--inchiostro);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--inchiostro);
}
.help-step:nth-child(6) .n { background: var(--pomodoro); color: #fff; }
.help-step .tx { font: 500 15px/1.4 var(--f-display); }
.help-foot { margin-top: 18px; border-top: 2px dashed var(--sabbia); padding-top: 14px; }
.help-foot .mano { display: block; text-align: center; font: 700 16px var(--f-mano); color: var(--tenue); margin-bottom: 12px; }

/* ---------- home ---------- */
.home-hero { margin-top: 18vh; }
.home-hero .wordmark .w { font-size: 44px; letter-spacing: -2px; }
.home-hero .wordmark .q { font-size: 54px; }
.home-tag { margin-top: 10px; text-align: center; font-size: 17px; }
.home-ctas { margin-top: 44px; display: flex; flex-direction: column; gap: 14px; }
.home-links { margin-top: auto; padding-top: 24px; display: flex; gap: 26px; justify-content: center; }
.home-foot { margin-top: 14px; padding-top: 20px; text-wrap: balance; text-align: center; font: 500 13px var(--f-display); color: var(--tenue); }

/* ---------- lobby capotavola ---------- */
.lobby-code { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.lobby-code-tile {
  width: 52px; height: 64px; border-radius: 14px;
  background: #fff; border: 3px solid var(--inchiostro);
  box-shadow: 3px 3px 0 var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 34px var(--f-display);
}
.lobby-share-row { margin-top: 16px; display: flex; gap: 14px; align-items: center; justify-content: center; }
.lobby-qr {
  width: 108px; height: 108px; background: #fff;
  border: 2.5px solid var(--inchiostro); border-radius: 16px;
  box-shadow: 3px 3px 0 var(--inchiostro); padding: 7px;
}
.lobby-share-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 200px; }
.lobby-url { font: 600 13px var(--f-display); color: var(--tenue); overflow-wrap: anywhere; text-align: left; }
.lobby-players { display: flex; flex-direction: column; gap: 8px; max-height: 30vh; overflow-y: auto; }
.lobby-player { display: flex; align-items: center; gap: 10px; }
.lobby-player .nm { font: 600 15px var(--f-display); }
.lobby-player .crown { color: var(--sole); font-size: 16px; text-shadow: 1px 1px 0 var(--inchiostro); }
.table-card.lobby-table { margin-top: 16px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lobby-table .lobby-players { flex: 1; max-height: none; }

/* ---------- reveal tascabile ---------- */
.mr-screen { position: relative; }
.mob-reveal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 10px 4px 40px;
}
.mr-kicker { font: 700 20px var(--f-mano); color: var(--tenue); }
.mr-truth {
  position: relative;
  background: var(--menta); color: #fff;
  border: 3px solid var(--inchiostro); border-radius: 18px;
  box-shadow: 4px 4px 0 var(--inchiostro);
  padding: 18px 22px;
  font: 700 22px/1.3 var(--f-display);
  transform: rotate(-1.5deg);
  max-width: 92%;
  overflow-wrap: anywhere;
}
.mr-vera-stamp {
  position: absolute; top: -16px; right: -10px;
  font: 700 16px var(--f-mano); color: var(--inchiostro);
  background: var(--sole); border: 2.5px solid var(--inchiostro);
  border-radius: 20px; padding: 1px 12px; transform: rotate(9deg);
}
.mr-outcome { font: 600 16px var(--f-mano); color: var(--tenue); }
.mr-outcome-badge {
  font: 700 22px var(--f-display);
  border: 3px solid var(--inchiostro); border-radius: 16px;
  padding: 6px 18px; box-shadow: 3px 3px 0 var(--inchiostro);
  transform: rotate(-2deg);
}
.mr-outcome-badge.good { background: var(--sole); }
.mr-outcome-badge.bad { background: var(--carta-scura); color: var(--testo-2); }
.mr-fake {
  background: #fff;
  border: 3px solid var(--inchiostro); border-radius: 16px 16px 16px 5px;
  box-shadow: var(--ombra-carta);
  padding: 16px 20px;
  font: 600 19px/1.35 var(--f-display);
  max-width: 92%;
  overflow-wrap: anywhere;
}
.mr-fake.shaking { animation: whoshake .28s infinite; }
.mr-whodis {
  font: 700 52px/.9 var(--f-display);
  color: var(--pomodoro); letter-spacing: -1px;
  text-shadow: 3px 4px 0 var(--inchiostro);
  transform: rotate(-3deg);
}
.stamp-big { animation: stampInBig 250ms var(--pop) both; }
.mr-impostor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 0 8px; }
.mr-impostor .mano { font-size: 16px; }
.mr-imp-name { font: 700 32px var(--f-display); letter-spacing: -1px; }
.mr-intruso-face {
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background: var(--tenue); color: var(--carta);
  border: 3px solid var(--inchiostro);
  display: flex; align-items: center; justify-content: center;
  font: 700 24px var(--f-display);
}
.mr-points { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.mr-point-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 2.5px solid var(--inchiostro); border-radius: 12px;
  padding: 8px 12px;
}
.mr-point-row .nick { flex: 1; text-align: left; font: 700 15px var(--f-display); }
.mr-point-row .pts {
  font: 700 18px var(--f-display);
  background: var(--sole); border: 2.5px solid var(--inchiostro); border-radius: 10px;
  padding: 1px 10px; transform: rotate(3deg);
}
.mr-jury {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 3px solid var(--inchiostro); border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(38, 33, 27, .2);
  padding: 18px 20px; max-width: 92%;
  font: 600 18px/1.4 var(--f-display);
}
.mr-jury .jk { color: var(--pomodoro); font-size: 18px; }
.skip-reveal {
  position: fixed; bottom: 14px; right: 16px;
  font: 600 13px var(--f-display); color: var(--tenue);
  background: #fff; border: 2px dashed var(--sabbia); border-radius: 20px; /* 2px: eccezione decorativa (tratteggio) */
  padding: 12px 16px; z-index: 50;
}

/* ---------- share dal telefono ---------- */
.share-sheet { display: flex; flex-direction: column; gap: 14px; align-items: center; max-height: calc(100dvh - 40px); }
.share-img {
  max-height: 62dvh; border-radius: 18px;
  border: 4px solid var(--carta);
  box-shadow: 8px 8px 0 rgba(38, 33, 27, .4);
}
.share-btns { display: flex; flex-direction: column; gap: 10px; width: min(300px, 86vw); }
.finale-ctas { display: flex; flex-direction: column; gap: 10px; }

/* ---------- scelta lingua del tavolo (solo alla creazione) ---------- */
.lang-row { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.lang-lab { font: 600 14px var(--f-display); color: var(--tenue); }
.lang-opt {
  font: 600 15px var(--f-display);
  color: var(--inchiostro);
  background: var(--carta);
  border: 2px solid var(--inchiostro);
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 44px;
  box-shadow: 2px 2px 0 var(--inchiostro);
}
.lang-opt.sel {
  background: var(--inchiostro);
  color: var(--carta);
  box-shadow: none;
  transform: translate(2px, 2px);
}