/* ───── TUTORIAL GUIDATO + GUIDA "?" ───── */
#tut { position: fixed; inset: 0; z-index: 70; touch-action: manipulation; }
#tut.dim { background: rgba(4, 3, 2, .72); }
.tut-hole { position: fixed; border-radius: 12px; pointer-events: none; opacity: 0; transition: left .25s, top .25s, width .25s, height .25s, opacity .2s;
  box-shadow: 0 0 0 9999px rgba(4, 3, 2, .78), 0 0 0 3px #ffd36b, 0 0 26px 6px rgba(255, 211, 107, .55); animation: tutglow 1.6s ease-in-out infinite alternate; }
@keyframes tutglow { to { box-shadow: 0 0 0 9999px rgba(4, 3, 2, .78), 0 0 0 3px #fff0b8, 0 0 38px 10px rgba(255, 211, 107, .8); } }
.tut-card { position: fixed; z-index: 2; width: 380px; padding: 14px 16px 12px; border-radius: 12px; color: #f6eedc; background: linear-gradient(#3b2a1b, #1d140c); border: 3px solid var(--gold, #ffd36b);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 170, .25); transition: left .25s, top .25s; }
.tut-n { font-size: 11px; letter-spacing: 1px; color: #c9b58a; text-transform: uppercase; }
.tut-t { margin: 2px 0 6px; font-family: var(--font); font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--gold, #ffd36b); -webkit-text-stroke: 4px var(--ink, #1a0d04); paint-order: stroke fill; }
.tut-x { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.tut-dots { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tut-dots i { width: 7px; height: 7px; border-radius: 50%; background: #5a4630; }
.tut-dots i.done { background: #a8863d; } .tut-dots i.on { background: var(--gold, #ffd36b); box-shadow: 0 0 6px #ffd36b; transform: scale(1.3); }
.tut-btns { display: flex; align-items: center; gap: 8px; } .tut-sp { flex: 1; }
.tut-btns .btn { padding: 8px 16px; font-size: 16px; min-height: 40px; }

@media (max-height: 460px) {
  .tut-card { padding: 9px 12px 8px; width: 330px; }
  .tut-t { font-size: 17px; margin-bottom: 3px; -webkit-text-stroke-width: 3px; } .tut-x { font-size: 12px; line-height: 1.32; margin-bottom: 6px; }
  .tut-dots { display: none; } .tut-n { font-size: 10px; }
  .tut-btns .btn { padding: 5px 12px; font-size: 14px; min-height: 34px; }
}

/* guida: elenco dei pulsanti nel modale */
#modal.help .modal-box { width: min(520px, 100%); }
.help-list { display: grid; gap: 8px; margin: 10px 0 12px; }
.help-list .btn { display: flex; align-items: center; gap: 10px; justify-content: flex-start; width: 100%; text-align: left; padding: 10px 14px; font-size: 17px; min-height: 48px; }
.help-list .btn small { display: block; font-family: system-ui, sans-serif; font-size: 12px; opacity: .8; font-weight: 400; text-transform: none; letter-spacing: 0; -webkit-text-stroke: 0; text-shadow: none; }
.help-note { font-size: 13px; line-height: 1.4; color: #d8c9a6; margin: 0 0 6px; }
.hm-sqs { display: grid; gap: clamp(3px, .8vh, 6px); }