@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #f6f1e8;
  --ink: #302e28;
  --orange: #b64027;
  --bubble: #fffcf3;
  --mono: "Courier New", Courier, monospace;
  --sans: "Trebuchet MS", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-x: hidden; background-color: var(--paper); background-image: radial-gradient(#59472d12 .6px, transparent .6px); background-size: 8px 8px; color: var(--ink); font-family: var(--sans); -webkit-text-size-adjust: 100%; }
button, textarea { font: inherit; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible, textarea:focus-visible { outline: 3px solid #285c67; outline-offset: 5px; }
button:disabled { cursor: default; }
button:not(:disabled) { cursor: pointer; }
[hidden] { display: none !important; }
/* Niente «tira giù per ricaricare» né rimbalzi: la pagina sta ferma. */
html { overscroll-behavior: none; }
/* La pagina occupa esattamente lo schermo visibile (barre del browser comprese): il pulsante
   prende lo spazio che resta, fra --btn-min e --btn-max, così non serve mai scorrere. */
.app { --pad-top: max(24px, env(safe-area-inset-top)); width: min(100% - 44px, 480px); margin: 0 auto; padding: var(--pad-top) 0 max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.generator { flex: 1 0 auto; display: flex; flex-direction: column; }
h1 { font-size: clamp(48px, 14.5vw, 70px); font-weight: 900; letter-spacing: -3px; margin: 0; line-height: 1.02; }
h1 > span { color: var(--orange); }

.mascot-scene { height: 222px; margin: 14px 0 0; position: relative; display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.mascot, .mascot-video { height: 214px; width: 214px; object-fit: contain; position: relative; z-index: 1; margin-right: 108px; transform-origin: 50% 90%; animation: sway 2.6s ease-in-out infinite; }
/* Toccandola torna quella col casco (app.js): niente evidenziazione o menu del sistema. */
.mascot, .mascot-video { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* La mascotte ondeggia piano fra un'estrazione e l'altra. */
/* Alla pressione traballa più in fretta, come se pensasse; la scusa vecchia sbiadisce. */
.mascot.is-thinking, .mascot-video.is-thinking { animation: think .32s ease-in-out infinite; }
@keyframes think { 0%, 100% { rotate: -4deg; translate: -2px 0; } 50% { rotate: 4deg; translate: 2px -2px; } }
.result.is-waiting { opacity: .35; transition: opacity .2s; }
@keyframes sway { 0%, 100% { rotate: -2deg; translate: 0 0; } 25% { translate: 0 -3px; } 50% { rotate: 2deg; translate: 0 0; } 75% { translate: 0 -3px; } }
.mascot-halo { position: absolute; width: 180px; height: 180px; border-radius: 46% 54% 57% 43%; background: #e6d7bf; left: calc(50% - 151px); top: 22px; transform: rotate(-14deg); }
.speech { position: absolute; font-family: Georgia, "Times New Roman", serif; font-size: 32px; line-height: 1.04; letter-spacing: -.8px; top: 58px; right: calc(50% - 165px); transform: rotate(6deg); z-index: 2; transition: translate .75s cubic-bezier(.45, 0, .2, 1), scale .75s cubic-bezier(.45, 0, .2, 1), opacity .2s ease-out; }
/* All'apertura «Volentieri, ma…» compare quando lo si sente, grande nello spazio vuoto del fumetto,
   poi scivola qui (app.js). */
.speech.is-intro { translate: var(--intro-x, 0) var(--intro-y, 0); scale: var(--intro-scale, 1.6); }
.speech.is-silent { opacity: 0; }
.speech, .spark { pointer-events: none; } /* il tocco arriva alla mascotte sotto */
.speech em { color: var(--orange); font-weight: bold; font-size: 43px; }
.spark { position: absolute; font: 26px Georgia, serif; color: #7c8264; }
.spark svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1; }
.spark-one { left: calc(50% - 159px); top: 18px; }
.spark-two { right: 18px; bottom: 16px; font-size: 22px; }

.result-space { display: grid; margin-top: 24px; }
.result { display: grid; align-items: center; text-align: center; grid-area: 1 / 1; position: relative; padding: 16px 18px; border: 2px solid var(--ink); border-radius: 19px 23px 22px 9px; background: var(--bubble); }
/* Il fumetto segue il dito: scartato a destra o a sinistra cambia scusa, tenuto premuto la copia. */
.result { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; translate: var(--dx, 0px) 0; rotate: var(--tilt, 0deg); transition: translate .2s ease-out, rotate .2s ease-out, scale .15s ease-out; }
.result.is-dragging { transition: none; cursor: grabbing; }
.result.is-leaving { opacity: 0; transition: translate .18s ease-in, rotate .18s ease-in, opacity .18s ease-in; }
.result.is-held { scale: 1.03; }
.result:focus { outline: none; }
.result:focus-visible { outline: 3px solid #285c67; outline-offset: 5px; }
.copied { position: absolute; left: 50%; bottom: -15px; translate: -50% 0; padding: 4px 12px; border-radius: 99px; background: var(--ink); color: var(--bubble); font: 12px/1.35 var(--sans); letter-spacing: .3px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; }
.copied:empty { display: none; }
.copied.is-on { opacity: 1; }
.bubble-tail { position: absolute; top: -25px; left: calc(50% - 95px); width: 40px; height: 26px; fill: var(--bubble); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
/* Righe di lunghezza simile, senza a capo scritti a mano (dove il browser non lo supporta, a capo normale). */
.excuse { font: 27px/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.5px; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.result-sizer { display: grid; visibility: hidden; pointer-events: none; }
.result-sizer .excuse { grid-area: 1 / 1; }

/* --extra = riga di stato (28 + 6) e margini della base (4 + 20). «flex: 1 1 0»: con «auto»
   Chrome misura il contenitore a 0 e il pulsante resterebbe sempre al minimo. */
.controls { --btn-max: 200px; --btn-min: 100px; --extra: 58px; flex: 1 1 0; margin-top: 12px; container-type: size; display: flex; flex-direction: column; justify-content: center; min-height: calc(var(--btn-min) + var(--extra)); }
.activity { min-height: 28px; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 0 6px; font: 9px/1.45 var(--mono); letter-spacing: .45px; color: #6c6254; overflow-wrap: anywhere; }
.emergency-base { width: min(var(--btn-max), 100%); width: min(clamp(var(--btn-min), 100cqh - var(--extra), var(--btn-max)), 100%); aspect-ratio: 1; margin: 4px auto 20px; padding: 14px; border: 1px solid #24211c; border-radius: 50%; background: #3c3831; box-shadow: 0 5px 0 #b4a58f, 0 9px 0 #d8ccb9, 0 15px 20px #3c2d1d20, inset 0 2px 1px #ffffff38; }
.generate-button { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1; gap: 10px; padding: 18px; color: #fff9eb; background: radial-gradient(ellipse at 40% 18%, #ed7950 0%, #d94c2a 44%, #bd351e 100%); border: 2px solid #a2351c; border-radius: 50%; box-shadow: 0 10px 0 #7d2518, 0 13px 9px #1b100a66, inset 0 3px 3px #ffd7b780, inset 0 -4px 6px #9a291b99; font-size: 19px; line-height: 1.15; font-weight: 900; letter-spacing: .55px; text-transform: uppercase; text-shadow: 0 1px 1px #7d251866; transform: translateY(-6px); transition: transform .12s, box-shadow .12s, filter .12s; }
/* Alone che pulsa piano attorno al pulsante, per invitare a premerlo. */
.emergency-base { position: relative; }
.emergency-base::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none; animation: invite 2.2s ease-out infinite; }
.emergency-base:has(> [aria-disabled="true"])::before { animation: none; }
.generate-button[aria-disabled="true"] { cursor: default; }
@keyframes invite { 0% { box-shadow: 0 0 0 0 #d94c2a55; } 70%, 100% { box-shadow: 0 0 0 16px #d94c2a00; } }
.generate-button:not(:disabled):hover { filter: brightness(1.05); }
.generate-button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 #7d2518, inset 0 2px 3px #ffd7b74d, inset 0 -2px 4px #9a291b80; }
.generate-button:focus-visible { outline-width: 4px; outline-offset: 16px; }
.copy-buffer { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; font-size: 16px; }

/* Copertina: titolo in alto, mascotte e freccia; il foglio accenna il gesto verso l'alto. */
html.has-cover, html.has-cover body { overflow: hidden; overscroll-behavior: none; }
.cover { position: fixed; inset: 0; z-index: 10; touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.cover.is-dragging { cursor: grabbing; }
.cover.is-open { pointer-events: none; }
.cover-sheet { position: absolute; inset: 0 0 -60px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; align-items: center; justify-items: center; gap: 16px; padding: max(40px, env(safe-area-inset-top)) 22px calc(84px + env(safe-area-inset-bottom)); background-color: #eedec6; background-image: radial-gradient(#59472d1a .6px, transparent .6px); background-size: 8px 8px; transform: translateY(var(--drag, 0px)); transition: transform .25s ease-out; animation: cover-peek 3.8s ease-in-out 1.3s infinite; }
.cover-title { position: relative; z-index: 1; margin: 0; color: var(--orange); font: italic 700 clamp(47px, 15.65vw, 70px)/1.05 Georgia, "Times New Roman", serif; letter-spacing: -3px; white-space: nowrap; transform: rotate(-5deg); }
.cover-title span { color: var(--ink); }
.cover-portrait { position: relative; isolation: isolate; width: min(100% + 24px, 440px, calc(100vh - 270px)); max-height: 100%; aspect-ratio: 1; pointer-events: none; }
.cover-portrait::before { content: ""; position: absolute; z-index: -1; width: 86%; aspect-ratio: 1; left: 7%; top: 12%; border-radius: 45% 55% 57% 43%; background: #dfc7a4; transform: rotate(-12deg); }
.cover-mascot { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.cover.is-dragging .cover-sheet { transition: none; animation: none; }
.cover.is-open .cover-sheet { transform: translateY(calc(-100% - 20px)); transition: transform .42s cubic-bezier(.3, .7, .4, 1); animation: none; }
.cover-hint { display: flex; align-items: center; justify-content: center; min-width: 72px; min-height: 72px; flex: none; padding: 14px; border: 0; background: transparent; cursor: inherit; }
.cover-hint svg { width: 42px; height: 42px; fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s ease-in-out infinite; }
.cover-volume { margin: -18px 0 0; color: var(--ink); font: 700 18px/1.2 var(--sans); letter-spacing: .2px; white-space: nowrap; }
.cover-volume span { display: inline-block; margin-left: 4px; animation: volume-pulse 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes volume-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
@keyframes cover-peek { 0%, 72%, 100% { transform: translateY(0); } 81% { transform: translateY(-20px); } 89% { transform: translateY(0); } 94% { transform: translateY(-6px); } }

/* Faccia di Paolo che sbuca dai bordi e, toccata, esplode (app.js). Lo strato non riceve tocchi, la faccia sì. */
.faccia-strato { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.faccia, .faccia-scoppio { position: absolute; left: 0; top: 0; }
.faccia { pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.faccia img, .faccia-scoppio img { display: block; width: 100%; height: 100%; }
.faccia img.is-mirrored, .faccia-scoppio .is-mirrored { transform: scaleX(-1); }
.faccia-pezzi { position: absolute; inset: 0; }
.faccia-pezzo { position: absolute; background-repeat: no-repeat; }
.faccia-lampo { position: absolute; left: -10%; top: 0; width: 120%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd88a 0 18%, #ef7a4fcc 42%, #d94c2a00 70%); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.noscript { background: #fffcf3; padding: 15px; font-size: 15px; border: 1px solid var(--orange); border-radius: 8px; }

.result.is-fresh { animation: reveal .25s ease-out; }
@keyframes reveal { from { opacity: .4; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 700px) {
  .app { --pad-top: 40px; padding-bottom: 30px; }
  .mascot-scene { height: 250px; margin-top: 18px; }
  .mascot, .mascot-video { width: 242px; height: 242px; margin-right: 133px; }
  .mascot-halo { width: 206px; height: 206px; left: calc(50% - 180px); }
  .speech { font-size: 36px; top: 68px; right: calc(50% - 181px); }
  .speech em { font-size: 49px; }
  .spark-one { left: calc(50% - 198px); top: 30px; }
  .excuse { font-size: 31px; }
  .controls { --btn-max: 220px; }
}
@media (max-width: 360px) {
  .app { width: calc(100% - 36px); }
  .mascot-scene { height: 192px; }
  .mascot, .mascot-video { width: 186px; height: 186px; margin-right: 88px; }
  .mascot-halo { width: 156px; height: 156px; left: calc(50% - 130px); }
  .speech { font-size: 28px; right: calc(50% - 141px); top: 50px; }
  .speech em { font-size: 37px; }
  .spark-one { left: 0; }
  .spark-two { right: 7px; }
  .excuse { font-size: 25px; }
}
/* Schermi medi (come un Pixel con le barre di Chrome): pulsante al massimo 176 px e lo spazio
   che resta alla mascotte, un po' più piccola di quella degli schermi alti. */
@media (max-height: 850px) and (max-width: 699px) {
  .mascot-scene { height: 192px; }
  .mascot, .mascot-video { width: 186px; height: 186px; margin-right: 88px; }
  .mascot-halo { width: 156px; height: 156px; left: calc(50% - 130px); }
  .speech { font-size: 28px; right: calc(50% - 141px); top: 50px; }
  .speech em { font-size: 37px; }
  .spark-one { top: 14px; left: calc(50% - 140px); }
  .controls { --btn-max: 176px; }
}
/* Schermi bassi: tutto più raccolto. */
@media (max-height: 760px) and (max-width: 699px) {
  .app { --pad-top: max(16px, env(safe-area-inset-top)); }
  h1 { font-size: 48px; }
  .mascot-scene { height: 157px; margin-top: 12px; }
  .mascot, .mascot-video { width: 154px; height: 154px; margin-right: 96px; }
  .mascot-halo { width: 128px; height: 128px; left: calc(50% - 120px); top: 17px; }
  .speech { font-size: 27px; top: 35px; right: calc(50% - 132px); }
  .speech em { font-size: 34px; }
  .spark-one { font-size: 21px; top: 14px; left: calc(50% - 140px); }
  .result-space { margin-top: 22px; }
  .result { padding: 13px 16px; }
  .excuse { font-size: 23px; }
  .controls { margin-top: 6px; }
  .activity { min-height: 25px; font-size: 8px; }
  .controls { --btn-max: 176px; }
  .emergency-base { padding: 12px; }
  .generate-button { padding: 10px; gap: 8px; font-size: 17px; }
}
/* Schermi molto bassi (telefoni piccoli con le barre del browser): circa tre quarti del formato raccolto. */
@media (max-height: 660px) and (max-width: 699px) {
  .app { --pad-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  h1 { font-size: 40px; letter-spacing: -2.5px; }
  .mascot-scene { height: 118px; margin-top: 4px; }
  .mascot, .mascot-video { width: 116px; height: 116px; margin-right: 72px; }
  .mascot-halo { width: 96px; height: 96px; left: calc(50% - 90px); top: 13px; }
  .speech { font-size: 20px; top: 26px; right: calc(50% - 99px); }
  .speech em { font-size: 26px; }
  .spark-one { font-size: 16px; top: 10px; left: calc(50% - 105px); }
  .spark-two { font-size: 17px; }
  .result-space { margin-top: 20px; }
  .result { padding: 10px 14px; }
  .excuse { font-size: 20px; }
  .controls { margin-top: 4px; --btn-min: 80px; --btn-max: 150px; --extra: 48px; }
  .activity { min-height: 22px; }
  .emergency-base { padding: 10px; margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}