/* Coverlab Kiosk IFA — schermo visitatore (portrait 1080×1920, fluido).
   Impianto UI replicato dal totem Cellularline (header brand, card bianche,
   bottom bar scura, bottom-sheet tool) in brand Coverlab 2026:
   beige #E9E8E3, marrone #4A3A2B, rosso #D7392F, rosa #F4A7B9. Font grandi. */

:root {
  --beige: #E9E8E3;
  --beige-2: #F6F5F2;
  --brown: #4A3A2B;
  --brown-deep: #38291c;
  --brown-soft: rgba(74, 58, 43, .12);
  --red: #D7392F;
  --pink: #F4A7B9;
  --card: #FFFFFF;
  --radius: 34px;
  --header-h: 120px;
  --bottbar-h: 118px;
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-hand: 'Caveat', cursive;
  --font-ui: 'Manrope', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --shadow-card: 0 18px 44px rgba(74, 58, 43, .14);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--beige);
  color: var(--brown);
  font-family: var(--font-ui);
  font-size: 1.15rem;
  user-select: none; cursor: default;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

#app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

/* ============ HEADER (stile totem: banda brand con angoli bassi arrotondati) */
.hd {
  flex: 0 0 var(--header-h);
  background: linear-gradient(120deg, #F5E9DC 0%, #F6D9CB 55%, var(--pink) 130%);
  border-radius: 0 0 40px 40px;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 20;
  box-shadow: 0 10px 30px rgba(74, 58, 43, .10);
}
.hd .wordmark { height: 44px; color: var(--brown); }
.hd .wordmark svg { height: 100%; width: auto; display: block; }
.hd .homebtn {
  position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.65); display: none;
  align-items: center; justify-content: center; font-size: 1.5rem;
}
.hd.can-home .homebtn { display: flex; }
.hd .step {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  font-size: 1rem; font-weight: 800; letter-spacing: .06em;
  background: rgba(255,255,255,.65); border-radius: 999px; padding: 12px 22px;
}

/* ============ CONTENUTO */
.vw { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.vw--scroll { overflow-y: auto; }

/* transizione di ingresso di ogni vista */
.vw > * { animation: viewIn .5s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ============ BOTTOM BAR (stile totem: barra scura, Indietro + azione) */
.bb {
  flex: 0 0 var(--bottbar-h);
  background: var(--brown-deep);
  border-radius: 40px 40px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 30px; gap: 18px; position: relative; z-index: 20;
}
.bb .bb-back {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--beige); font-size: 1.3rem; font-weight: 700;
  border: 2.5px solid rgba(233,232,227,.5); border-radius: 999px;
  padding: 18px 34px; visibility: hidden;
}
.bb.can-back .bb-back { visibility: visible; }
.bb .bb-cta {
  background: var(--red); color: #fff; font-size: 1.35rem; font-weight: 800;
  border-radius: 999px; padding: 20px 42px; display: none;
  box-shadow: 0 10px 28px rgba(215,57,47,.4);
}
.bb .bb-cta.on { display: inline-flex; }
.bb .bb-cta:active, .bb .bb-back:active { transform: scale(.96); }

/* ============ Comuni */
.h-display { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -.01em; }
.hand { font-family: var(--font-hand); color: var(--red); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--brown); color: var(--beige);
  font-size: 1.35rem; font-weight: 700; padding: 20px 44px;
  border-radius: 999px; transition: transform .12s ease;
}
.btn:active { transform: scale(.96); }
.btn--red { background: var(--red); color: #fff; box-shadow: 0 12px 30px rgba(215,57,47,.35); }
.btn--ghost { background: transparent; color: var(--brown); box-shadow: inset 0 0 0 2.5px var(--brown); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ============ ATTRACT */
.attract {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3vh; text-align: center; padding: 3vh 60px; position: relative; overflow: hidden;
}
.attract h1 { font-size: clamp(4rem, 8.2vw, 7.6rem); z-index: 2; }
.attract h1 em { font-style: italic; color: var(--red); }
.attract .sub { font-size: 1.55rem; opacity: .82; max-width: 36ch; z-index: 2; }
.attract .fanwrap {
  width: min(78%, 760px); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-card); background: #fff; z-index: 2;
}
.attract .fanwrap img { width: 100%; }
.attract .cta { font-size: 1.8rem; padding: 28px 66px; z-index: 2; }
.attract .float {
  position: absolute; font-family: var(--font-hand); font-size: 2.2rem;
  color: var(--brown); opacity: .4; animation: floaty 6s ease-in-out infinite; z-index: 1;
}
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-4deg);} 50% { transform: translateY(-16px) rotate(3deg);} }
/* nastro foto clienti che scorre all'infinito */
.attract .marquee { width: 100vw; overflow: hidden; z-index: 2; padding: 14px 0; }
.attract .marquee-track {
  display: flex; gap: 26px; width: max-content;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.attract .lifecard {
  width: 172px; height: 172px; border-radius: 26px; overflow: hidden; flex: 0 0 auto;
  box-shadow: var(--shadow-card); border: 6px solid #fff; background: #fff;
  transform: rotate(var(--r, 0deg));
}
.attract .lifecard img { width: 100%; height: 100%; object-fit: cover; }
.attract .proof { font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; opacity: .65; z-index: 2; }
/* pulse solo su transform+opacity (GPU): l'alone è un ::after che sfuma */
.pulse { animation: pulse 2.4s ease-in-out infinite; position: relative; will-change: transform; }
.pulse::after {
  content: ''; position: absolute; inset: -6px; border-radius: 999px; z-index: -1;
  box-shadow: 0 16px 44px rgba(215,57,47,.55);
  animation: pulseGlow 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes pulseGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ============ SCELTA MARCA / MODELLO (card bianche stile totem) */
.pick { flex: 1; display: flex; flex-direction: column; padding: 4vh 64px 3vh; overflow: hidden; }
.pick h2 { font-size: clamp(2.8rem, 5vw, 4.2rem); text-align: center; }
.pick .sub { text-align: center; font-size: 1.3rem; opacity: .7; margin: 14px 0 4vh; }
.brandgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-content: start; }
.brandcard {
  padding: 52px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  font-size: 1.7rem; font-weight: 800;
}
.brandcard .glyph { font-size: 3rem; line-height: 1; }
.brandcard:active { transform: scale(.97); }
.modelgrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
  overflow-y: auto; padding: 6px 2px 30px;
}
.modelcard {
  padding: 26px 18px 30px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.modelcard img { width: 74%; }
.modelcard b { font-size: 1.45rem; font-weight: 800; }
.modelcard:active { transform: scale(.97); }

/* card template (punto di partenza) */
.tplgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  overflow-y: auto; padding: 6px 2px 30px;
}
.tplcard {
  padding: 14px 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.tplcard img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 20px; }
.tplcard b { font-size: 1.2rem; font-weight: 800; }
.tplcard:active { transform: scale(.96); }
.tplcard--blank { justify-content: center; min-height: 300px; }
.tplcard--blank .plus {
  width: 88px; height: 88px; border-radius: 50%; background: var(--beige-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; box-shadow: inset 0 0 0 2.5px var(--brown-soft);
}

/* ============ DESIGNER */
.dz { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.dz .stagewrap {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 5vh 60px 2vh; position: relative;
}
.dz .modeltag {
  position: absolute; top: 18px; left: 34px; z-index: 6;
  font-family: var(--font-hand); font-size: 1.9rem; color: var(--brown);
}
.case {
  position: relative;
  animation: caseIn .7s cubic-bezier(.2, .9, .3, 1) both;
}
/* ombra sulla cornice statica (non sul canvas che si ridisegna): il filter
   non viene ricalcolato mentre il cliente disegna */
.case .frame { filter: drop-shadow(0 26px 44px rgba(56,41,28,.35)); }
@keyframes caseIn {
  from { opacity: 0; transform: translateY(50px) scale(.93); }
  to { opacity: 1; transform: none; }
}
.stagebtns {
  position: absolute; top: 18px; right: 34px; z-index: 6; display: flex; gap: 10px;
}
.stagebtns button {
  width: 62px; height: 62px; border-radius: 50%; background: var(--card);
  box-shadow: var(--shadow-card); font-size: 1.5rem; color: var(--brown);
}
.stagebtns button:disabled { opacity: .3; }
.stagebtns button:active { transform: scale(.92); }
.case .frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.case .frame svg { display: block; width: 100%; height: 100%; }
.case .cnv { position: absolute; z-index: 2; background: #fff; }

/* riga tool (pill scure stile totem) */
.toolrow {
  flex: 0 0 auto; display: flex; justify-content: center; gap: 14px;
  padding: 12px 20px 16px; flex-wrap: wrap;
}
.tool {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 116px; padding: 16px 0 12px; border-radius: 24px;
  background: var(--card); box-shadow: var(--shadow-card);
  font-size: .95rem; font-weight: 800;
}
.tool .ico { font-size: 1.9rem; line-height: 1; }
.tool.on { background: var(--brown); color: var(--beige); }
.tool--danger { color: var(--red); }
.tool:active { transform: scale(.95); }

/* bottom sheet (pattern totem) */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--card); border-radius: 40px 40px 0 0;
  box-shadow: 0 -20px 60px rgba(56,41,28,.25);
  padding: 26px 40px 34px; max-height: 62%;
  display: flex; flex-direction: column; gap: 18px; overflow-y: auto;
  transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.9,.3,1);
}
.sheet.open { transform: translateY(0); }
.sheet .grab { width: 74px; height: 6px; border-radius: 3px; background: var(--brown-soft); margin: 0 auto; }
.sheet h3 { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; }
.sheet .hint { font-size: 1.05rem; opacity: .7; }
.sheet .closex {
  position: absolute; top: 20px; right: 24px; width: 52px; height: 52px;
  border-radius: 50%; background: var(--beige-2); font-size: 1.3rem; font-weight: 800;
}

.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.swatch { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(74,58,43,.18); }
.swatch:active { transform: scale(.9); }
.stickers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sticker {
  aspect-ratio: 1; font-size: 2.4rem; background: var(--beige-2); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
}
.sticker--svg svg { width: 62%; height: 62%; }
.sticker:active { transform: scale(.9); }
.fontrow { display: flex; gap: 10px; flex-wrap: wrap; }
.fontbtn {
  font-size: 1.35rem; padding: 12px 22px; background: var(--beige-2); border-radius: 16px;
  box-shadow: inset 0 0 0 2px var(--brown-soft);
}
.fontbtn.on { background: var(--brown); color: var(--beige); }
.qrbox { display: flex; align-items: center; gap: 26px; }
.qrbox .qr { width: 210px; height: 210px; background: #fff; padding: 12px; border-radius: 20px; box-shadow: inset 0 0 0 2px var(--brown-soft); flex: 0 0 auto; }
.qrbox .qr svg { width: 100%; height: 100%; }
.qrbox .txt { font-size: 1.2rem; line-height: 1.45; }
.aideas { display: flex; flex-wrap: wrap; gap: 10px; }
.aidea { font-size: 1.02rem; font-weight: 700; padding: 12px 20px; border-radius: 999px; background: var(--pink); color: var(--brown); }
.aidea:active { transform: scale(.95); }
.spin {
  width: 52px; height: 52px; border-radius: 50%;
  border: 5px solid var(--brown-soft); border-top-color: var(--red);
  animation: spin 1s linear infinite; margin: 12px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ TASTIERA */
.kbwrap { width: 100%; }
.kbfield {
  width: 100%; font-size: 1.5rem; padding: 16px 20px; border-radius: 18px;
  border: 2.5px solid var(--brown); background: #fff; color: var(--brown);
  font-family: inherit; margin-bottom: 12px; text-align: center;
}
.kb { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.kbrow { display: flex; gap: 8px; justify-content: center; }
.kbkey {
  flex: 1 1 0; min-width: 0; height: 62px; font-size: 1.35rem; font-weight: 700;
  background: var(--beige-2); border-radius: 13px; box-shadow: inset 0 0 0 2px var(--brown-soft);
  display: flex; align-items: center; justify-content: center; max-width: 104px;
}
.kbkey:active { background: var(--brown); color: var(--beige); }
.kbkey--wide { flex: 2 1 0; max-width: 210px; font-size: 1.1rem; }
.kbkey--space { flex: 4 1 0; max-width: 500px; }

/* ============ NOME / DONE */
.nameview { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: 0 70px; }
.nameview h2 { font-size: clamp(2.6rem, 5.4vw, 4.2rem); text-align: center; }
.nameview p { text-align: center; font-size: 1.25rem; opacity: .75; }

.done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; text-align: center; padding: 40px; }
.done h2 { font-size: clamp(3.2rem, 7.4vw, 6rem); }
.done .code {
  font-family: var(--font-display); font-size: 4.4rem; color: var(--red);
  background: #fff; padding: 20px 58px; border-radius: 28px; box-shadow: var(--shadow-card);
}
.done p { font-size: 1.45rem; opacity: .85; max-width: 40ch; }
.done .hand { font-size: 2.4rem; }

/* landscape fallback (se lo schermo fosse orizzontale) */
@media (orientation: landscape) {
  .attract .fanwrap { width: min(44%, 620px); }
  .brandgrid, .modelgrid { grid-template-columns: repeat(4, 1fr); }
}