:root{
  --bg:#FFF8E7;
  --ink:#111;
  --muted:#6b6b6b;
  --accent:#FF6B35;
  --accent2:#2EC4B6;
  --plank:#7B61FF;
  --ring:#111;
  --ui:"Arial Black",Haettenschweiler,Impact,sans-serif;
  --sans:"Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden}
.stage-wrap{width:100vw; min-height:calc(100dvh - 56px); min-height:calc(100svh - 56px); display:grid;place-items:center;background:#F2E9D8; padding:12px;}
.player-wrap{ width:100%; min-height:calc(100dvh - 56px); min-height:calc(100svh - 56px); display:grid; place-items:center; padding:10px; background:var(--bg); overflow:hidden; }
.stage{
  position:relative;
  width:min(92vw, calc((100dvh - 96px) * 16/9), 960px);
  height:auto;
  max-height:calc(100dvh - 80px);
  max-height:calc(100svh - 80px);
  aspect-ratio:16/9;
  min-height:0;
  background:var(--bg);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 18px 50px #0002,0 0 0 1px #0001;
  border-radius:18px;
}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:1.6% 3% 1%;gap:1%;font-size:clamp(10px,1.35vw,13px);font-weight:800}
.progress-dots{display:flex;gap:6px}
.progress-dots i{width:10px;height:10px;border-radius:50%;background:#E8DDC2;display:block}
.progress-dots i.on{background:var(--accent)}
.progress-dots i.done{background:var(--ink);opacity:.25}
.meta{color:var(--muted)}
.progressbar{height:8px;background:#F0E6CC;margin:0 3%;border-radius:99px;overflow:hidden}
.progressbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s linear}

.layer{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2% 2.5%;gap:1.5%;text-align:center; overflow:hidden; min-height:0; }
.layer.hidden{display:none}
.controls{ position:sticky; bottom:0; background:var(--bg); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); width:100%; z-index:2; flex-shrink:0; }
/* scroll solo quando serve (schermi bassi) — evita barra a pieno schermo */
@media (max-height: 760px), (max-width: 720px){
  .layer{ overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-gutter:auto; }
  .layer::-webkit-scrollbar{ width:6px; }
  .layer::-webkit-scrollbar-thumb{ background:#E8DDC2; border-radius:999px; }
}

/* Adatta a schermi bassi (es. laptop 768p, viewport bassa) */
@media (max-height: 820px){
  .stage{ max-height:calc(100dvh - 64px); }
  .demo-visual, .stage-figure{ min-height:160px; }
  .demo-visual{ aspect-ratio:1.3; }
  .stage-figure{ aspect-ratio:1.2; }
  .demo-info h1{ font-size:clamp(28px,5vw,52px); }
  .rep-big{ font-size:clamp(42px,7vw,72px); }
  .timer-big{ font-size:clamp(48px,8vw,88px); }
  .controls{ padding-top:6px; padding-bottom:6px; gap:6px; }
  .controls .ghost, .controls .cta{ padding:.6em .9em; font-size:clamp(12px,1.6vw,14px); }
}
@media (max-height: 640px){
  .stage{ max-height:calc(100dvh - 48px); border-radius:12px; }
  .layer{ padding:1.5% 2%; gap:1%; }
  .topbar{ padding:1% 2.5% .6%; }
  .progressbar{ height:6px; }
  .demo-grid, .work-grid{ gap:2%; }
  .pills span{ padding:4px 8px; font-size:11px; }
  .how-kid{ padding:6px 10px; font-size:12px; }
  .cues{ font-size:11px; }
}

/* DEMO */
.demo-grid{display:flex;gap:4%;width:100%;align-items:center;flex:1}
.demo-visual{width:44%;aspect-ratio:1.15;background:#fff;border:3px solid #111;border-radius:16px;display:grid;place-items:center;overflow:hidden;position:relative}
.demo-visual svg{width:82%;height:82%}
.demo-info{flex:1;text-align:left}
.demo-info h1{font-family:var(--ui);font-size:clamp(34px,6.2vw,78px);line-height:.9}
.pills{display:flex;gap:7px;flex-wrap:wrap;margin:.5em 0}
.pills span{background:#111;color:#fff;padding:6px 12px;border-radius:999px;font-weight:900;font-size:clamp(11px,1.45vw,13px);text-transform:uppercase;letter-spacing:.04em}
.how-kid{font-size:clamp(14px,1.9vw,18px);background:#fff;border:2px dashed #111;padding:8px 12px;border-radius:10px;display:inline-block;margin:.4em 0}
.how-kid b{color:var(--accent)}
.cues{margin:.5em 0 0 1.1em;line-height:1.35;font-size:clamp(12px,1.55vw,15px)}
.variant{font-size:clamp(11px,1.3vw,12px);color:var(--muted);font-style:italic;margin-top:.4em}
.demo-cta{display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%}
.cta{border:0;background:var(--accent);color:#fff;font-family:var(--ui);font-size:clamp(14px,2vw,19px);padding:.85em 1.6em;border-radius:999px;cursor:pointer;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 6px 0 #111}
.cta:active{transform:translateY(3px);box-shadow:0 3px 0 #111}
.cta.big{font-size:clamp(16px,2.3vw,22px)}
.tiny-hint{font-size:12px;color:var(--muted)}
.ghost{border:2px solid #111;background:#fff;color:#111;padding:.6em 1em;border-radius:999px;font-weight:900;cursor:pointer}
.ghost:active{transform:translateY(1px)}

/* WORK */
.work-grid{display:flex;gap:3%;width:100%;flex:1;align-items:center}
.stage-figure{width:52%;background:#fff;border:3px solid #111;border-radius:18px;position:relative;overflow:hidden;aspect-ratio:1.1;display:grid;place-items:center}
.figure-wrap{width:100%;height:100%;display:grid;place-items:center}
.figure-wrap svg{width:62%;height:62%}
.cue-big{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:var(--ui);padding:6px 14px;border-radius:999px;font-size:clamp(13px,1.8vw,18px);letter-spacing:.08em}
.stage-data{flex:1;text-align:center}
.stage-data h2{font-family:var(--ui);font-size:clamp(22px,3.2vw,36px)}
.rep-big{font-family:var(--ui);font-size:clamp(56px,9vw,96px);line-height:.9;margin:.15em 0 .05em}
.rep-big .sep{opacity:.25;margin:0 .06em}
.rep-label{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(11px,1.4vw,13px);color:var(--muted)}
.ring-wrap{width:78%;margin:.8em auto 0;height:10px;background:#F0E6CC;border-radius:99px;overflow:hidden;position:relative}
.ring{display:block;height:100%;background:#eee}
.ring i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.ring.rest i{background:var(--accent2)}
#rep-secs{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.06em}
.set-label{margin-top:.6em;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(11px,1.4vw,13px);color:var(--ink);background:#fff;border:2px solid #111;display:inline-block;padding:6px 12px;border-radius:999px}
.timer-big{font-family:var(--ui);font-size:clamp(72px,12vw,120px);line-height:.9}
.timer-sub{font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:12px}
.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:.4em}

/* REST */
.rest-card{background:#fff;border:3px solid #111;border-radius:18px;padding:3% 4%;width:min(62%,420px);display:flex;flex-direction:column;align-items:center;gap:.2em}
.rest-icon{font-size:32px}
.rest-card h2{font-family:var(--ui);font-size:clamp(20px,3vw,28px)}
.next{font-weight:900;color:var(--muted);font-size:13px;margin-top:.3em}

/* DONE */
.done-emoji{font-size:48px}
.done h2{font-family:var(--ui);font-size:clamp(28px,5vw,56px)}
.done-stats{font-weight:900;color:var(--muted)}
.done-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:.6em}
/* PAUSA — overlay totale schermo (non mezza card tagliata) */
#layer-pause{
  position:absolute; inset:0; z-index:7;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:6% 6% calc(6% + env(safe-area-inset-bottom));
  background:var(--bg);
  text-align:center;
}
#layer-pause.hidden{ display:none !important; }
#layer-pause h2{ font-family:var(--ui); font-size:clamp(36px,9vw,68px); line-height:.9; }
#layer-pause .cta{ font-size:clamp(18px,4.5vw,24px); padding:.9em 1.6em; }
#layer-pause .ghost{ font-size:clamp(14px,3.5vw,16px); }

/* Gate */
.gate{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:var(--bg);text-align:center;padding:4%}
.gate.hidden{display:none}
.gate h1{font-family:var(--ui);font-size:clamp(36px,8vw,96px)}
.gate p{margin:.9em 0 1.6em;line-height:1.45}
.gate p .dim{color:var(--muted);font-size:.92em}
.row{display:flex;gap:.7em;justify-content:center;flex-wrap:wrap}
.gate button{border:2px solid #111;background:#fff;color:#111;font-family:var(--ui);font-size:clamp(13px,1.8vw,17px);padding:.65em 1.1em;border-radius:999px;cursor:pointer;text-transform:uppercase}
.gate button:hover{background:#111;color:#fff}
.credits{margin-top:1.4em;max-width:38em;margin:auto;font-size:12px;opacity:.6}

/* Animations — 3 frame reali, no CSS fake */
.figure-squat{animation:none}
.figure-plank{animation:none}
@keyframes breathe{0%,100%{transform:scale(1)} 50%{transform:scale(1.04)}}

/* Responsive mobile — stage + animazione scalano insieme su telefono */
@media (max-width: 720px), (orientation: portrait) {
  html,body{ overflow:auto; height:auto; }
  .stage-wrap{ height:auto; min-height:100dvh; min-height:100svh; padding:0; align-items:stretch; }
  .stage{ width:100vw; height:auto; min-height:100dvh; min-height:100svh; border-radius:0; overflow:auto; }
  .layer{ overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0; padding:4% 4% calc(6% + env(safe-area-inset-bottom)); gap:4%; justify-content:flex-start; align-items:stretch; }
  .demo-grid, .work-grid{ flex-direction:column; gap:4%; align-items:stretch; justify-content:flex-start; }
  .demo-visual, .stage-figure{ width:100%; max-height:38vh; max-height:38svh; min-height:200px; aspect-ratio:1.2; flex-shrink:0; display:grid; place-items:center; }
  .demo-visual{ max-height:36vh; max-height:36svh; }
  .demo-visual img, .stage-figure img, #demo-img, #work-img, #figure-time img{
    width:min(88%, 88vw) !important;
    height:auto !important;
    max-height:32vh !important;
    max-height:32svh !important;
    object-fit:contain !important;
    display:block; margin:auto;
  }
  .figure-wrap{ width:100%; height:100%; display:grid; place-items:center; padding:1% 0; }
  .demo-info, .stage-data{ width:100%; text-align:center; display:flex; flex-direction:column; gap:8px; align-items:center; }
  .demo-info{ text-align:center; }
  .demo-info h1{ font-size:clamp(28px,8vw,48px); line-height:1; margin:0; }
  .pills{ margin:0; justify-content:center; }
  .how-kid{ font-size:clamp(12px,3.5vw,14px); margin:0; display:block; max-width:100%; line-height:1.3; }
  .demo-info .cues{ text-align:left; display:block; margin:0; padding-left:1.2em; width:100%; max-width:22em; line-height:1.35; }
  .demo-info .cues li{ margin:2px 0; }
  .variant{ margin:0; display:block; line-height:1.3; }
  .demo-cta{ margin-top:2px; }
  .controls{ gap:8px; flex-wrap:wrap; justify-content:center; padding-bottom: env(safe-area-inset-bottom); }
  .controls .ghost, .controls .cta{ min-height:44px; min-width:44px; padding:.75em 1.1em; font-size:clamp(13px,3.6vw,15px); flex:1 1 auto; max-width:48%; }
  .controls .ghost:active, .controls .cta:active{ transform:scale(0.97); }
  .rep-big, .timer-big{ font-size:clamp(44px,13vw,76px); }
  .cue-big{ font-size:clamp(13px,3.8vw,16px); bottom:8px; padding:7px 16px; }
  .topbar{ font-size:11px; padding:3% 4% 1.5%; flex-wrap:wrap; gap:4px; }
  .progressbar{ margin:0 4%; }
  .how-kid{ font-size:clamp(13px,3.8vw,16px); }
  @media (max-width: 380px){
    .demo-visual, .stage-figure{ max-height:52vh; }
    .demo-visual img, .stage-figure img{ max-height:44vh !important; }
  }
}