:root{
  --cream:#FBF3E7;
  --cream-deep:#F3E6D2;
  --red:#C41E2A;
  --red-dark:#9E1620;
  --brown:#3A2418;
  --brown-soft:#6B5545;
  --gold:#C99A2E;
  --green:#4C8B4A;
  --line:#E4D3B8;
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:var(--brown);
  font-family:var(--font-body);
  color:var(--brown);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font-family:inherit;cursor:pointer;border:none;}
.hidden{display:none !important;}

/* ---------- Screen scaffolding ---------- */
.screen{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.phone-frame{
  width:100%;max-width:420px;
  background:var(--cream);
  border-radius:28px;
  padding:22px 20px 28px;
  position:relative;
  box-shadow:0 30px 60px rgba(0,0,0,.4);
  display:flex;flex-direction:column;align-items:center;
  min-height:640px;
}

/* ---------- Gatekeeper ---------- */
.gate{background:var(--brown);}
.gate-card{
  background:var(--cream);border-radius:20px;padding:32px 24px;max-width:380px;text-align:center;
}
.gate-icon{font-size:36px;margin-bottom:8px;}
.gate-card h2{font-family:var(--font-display);color:var(--red);margin:0 0 10px;}
.gate-card p{color:var(--brown-soft);font-size:14px;line-height:1.5;}
.gate-instructions{margin:16px 0;font-size:14px;background:var(--cream-deep);border-radius:12px;padding:14px;text-align:left;}
.btn-secondary{
  margin-top:10px;background:transparent;color:var(--brown-soft);
  text-decoration:underline;font-size:13px;padding:8px;
}

/* ---------- Brand / typography ---------- */
.brand-tag{
  font-size:12px;letter-spacing:2px;font-weight:700;color:var(--red);
  background:#fff;border:1.5px solid var(--red);border-radius:20px;padding:4px 14px;
}
.brand-tag.small{font-size:10px;padding:3px 10px;margin-bottom:6px;}
.hero-title{
  font-family:var(--font-display);color:var(--red);font-size:34px;margin:6px 0 0;
}
.hero-sub{font-family:var(--font-display);font-style:italic;color:var(--brown);font-size:16px;margin-top:2px;}
.brand-lockup{text-align:center;margin-bottom:8px;}
.pack-visual{font-size:60px;text-align:center;margin:8px 0;}
.start-copy{text-align:center;margin:10px 0 18px;}
.prompt-strong{font-weight:700;font-size:16px;margin:0 0 6px;}
.prompt-light{font-size:13px;color:var(--brown-soft);margin:0;line-height:1.5;}

.sound-toggle{
  position:absolute;top:16px;right:16px;background:#fff;border-radius:50%;
  width:38px;height:38px;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.cta-primary{
  width:100%;background:var(--red);color:#fff;font-weight:700;font-size:15px;
  padding:15px;border-radius:30px;letter-spacing:.5px;
  box-shadow:0 8px 18px rgba(196,30,42,.35);
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease;
}
.cta-primary:active{transform:scale(.97);}
.cta-outline{
  width:100%;background:#fff;color:var(--brown);font-weight:600;font-size:14px;
  padding:13px;border-radius:30px;border:1.5px solid var(--line);margin-top:10px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.arrow{font-size:16px;}

/* ---------- Level chrome ---------- */
.level-badge{
  background:var(--red);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;
  padding:5px 12px;border-radius:14px;align-self:flex-start;margin-bottom:10px;
}
.level-title{font-family:var(--font-display);font-size:22px;margin:0 0 2px;text-align:center;width:100%;}
.level-title.celebrate{color:var(--red);}
.level-sub{font-size:13px;color:var(--brown-soft);text-align:center;margin:0 0 14px;}

.progress-dots{display:flex;gap:8px;margin-top:auto;padding-top:14px;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line);}
.dot.active{background:var(--gold);width:20px;border-radius:5px;}
.dot.done{background:var(--red);}

/* ---------- Level 1: Fill ---------- */
.game-stage{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;flex:1;justify-content:center;}
.jug{font-size:44px;position:absolute;top:0;left:20%;transition:transform .15s ease;}
.jug.pouring{transform:translateY(4px) rotate(-8deg);}
.glass-wrap{position:relative;width:110px;height:200px;margin-top:40px;}
.glass{
  width:100%;height:100%;border:3px solid var(--brown);border-top:none;border-radius:0 0 14px 14px;
  position:relative;overflow:hidden;background:rgba(255,255,255,.4);
}
.glass.small{height:170px;}
.fill-line{
  position:absolute;left:-14px;right:-14px;top:38%;border-top:2px dashed var(--gold);z-index:3;
}
.hint-line{font-size:10px;letter-spacing:1px;color:var(--gold);font-weight:700;margin-top:8px;}
.liquid{
  position:absolute;bottom:0;left:0;right:0;height:0%;
  background:linear-gradient(180deg,#FFF7E8,#F2D9A8);
  transition:height .05s linear;
}
.liquid.full{height:55%;background:linear-gradient(180deg,#E8C688,#D8A85E);}
.hold-control{width:100%;margin-top:16px;}
.hold-btn{
  width:100%;background:var(--brown);color:#fff;font-weight:700;padding:16px;border-radius:30px;
  letter-spacing:.5px;user-select:none;
}
.hold-btn.pressed{background:var(--red);}

/* ---------- Level 2: Add taste ---------- */
.spoon{font-size:36px;position:absolute;top:-6px;right:22%;transition:transform .2s ease;}
.spoon.dropping{transform:translateY(30px) rotate(30deg);}
.powder-fall{position:absolute;top:-10px;left:50%;width:6px;height:6px;background:var(--gold);border-radius:50%;opacity:0;}
.powder-fall.active{animation:fall .35s ease-in forwards;}
@keyframes fall{from{top:-10px;opacity:1;}to{top:70%;opacity:0;}}
.taste-meter{width:100%;margin-top:14px;}
.meter-track{position:relative;height:14px;background:var(--cream-deep);border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--green));transition:width .2s ease;}
.meter-zone{position:absolute;left:60%;width:20%;top:0;bottom:0;border-left:2px solid var(--green);border-right:2px solid var(--green);}
.meter-label{text-align:center;font-size:11px;font-weight:700;color:var(--green);margin-top:6px;letter-spacing:.5px;}

/* ---------- Level 3: Catch ---------- */
.catch-stage{width:100%;height:420px;position:relative;background:linear-gradient(180deg,#fff,var(--cream-deep));border-radius:16px;overflow:hidden;border:1px solid var(--line);touch-action:none;}
.lives{position:absolute;top:8px;left:10px;font-size:16px;z-index:5;}
.catch-glass{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:40px;z-index:4;}
.falling-item{
  position:absolute;top:-10%;font-size:30px;user-select:none;cursor:pointer;
  transition:transform .1s ease;
}
.falling-item.caught{transform:scale(1.4);opacity:0;}
.falling-item.sugar-hit{filter:brightness(.5) saturate(0);}
.catch-score-float{position:absolute;font-weight:700;font-size:13px;pointer-events:none;animation:floatUp .6s ease-out forwards;z-index:6;}
.catch-score-float.good{color:var(--green);}
.catch-score-float.bad{color:var(--red);}
@keyframes floatUp{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-30px);}}

/* ---------- Level 4: Stir ---------- */
.stir-stage{width:100%;display:flex;flex-direction:column;align-items:center;position:relative;height:260px;touch-action:none;}
.stir-glass{font-size:70px;position:relative;z-index:1;}
.stir-arrow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:200px;height:200px;animation:spin 3s linear infinite;opacity:.5;}
@keyframes spin{from{transform:translateX(-50%) rotate(0deg);}to{transform:translateX(-50%) rotate(360deg);}}
.taste-meter-vertical{width:14px;height:120px;background:var(--cream-deep);border-radius:10px;position:absolute;right:6px;top:20px;overflow:hidden;border:1px solid var(--line);}
.meter-fill-vertical{position:absolute;bottom:0;left:0;right:0;height:0%;background:linear-gradient(180deg,var(--green),var(--gold));transition:height .1s linear;}
.stir-stage-labels{display:flex;justify-content:space-between;width:100%;margin-top:14px;}
.stage-label{font-size:10px;color:var(--brown-soft);text-align:center;flex:1;padding:6px 2px;border-radius:8px;}
.stage-label.active{background:var(--green);color:#fff;font-weight:700;}

/* ---------- Goodness / Final / Summary ---------- */
.goodness-layout{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;flex:1;justify-content:center;}
.final-glass-art{font-size:70px;}
.final-glass-art.center{text-align:center;width:100%;}
.goodness-cards{display:flex;flex-direction:column;gap:10px;width:100%;}
.goodness-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14px;
  display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;
}
.goodness-card strong{color:var(--red);}
.final-drink-hero{text-align:center;margin:14px 0;}
.final-glass-big{font-size:90px;}
.tag-words{font-family:var(--font-display);font-style:italic;font-size:18px;margin-top:6px;}
.no-sugar-seal{
  display:inline-block;background:var(--red);color:#fff;border-radius:50%;width:70px;height:70px;
  font-size:11px;font-weight:700;line-height:1.2;display:flex;align-items:center;justify-content:center;
  margin-top:10px;
}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:12px 0;}
.summary-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;font-size:13px;}
.summary-card.no-sugar{color:var(--red);}

/* ---------- Score ---------- */
.score-ring-wrap{position:relative;width:200px;height:200px;margin:10px 0;}
.score-ring{width:100%;height:100%;}
#scoreRingProgress{stroke-dasharray:534;stroke-dashoffset:534;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);}
.score-ring-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.score-number{font-family:var(--font-display);font-size:36px;color:var(--brown);}
.score-caption{font-size:13px;color:var(--green);font-weight:700;margin-top:4px;}
.badge-ribbon{
  background:linear-gradient(180deg,var(--gold),#A87A1E);color:#fff;font-weight:700;font-size:14px;
  padding:10px 24px;border-radius:8px;letter-spacing:1px;margin:10px 0 18px;
}

/* ---------- Result ---------- */
.champion-medal{text-align:center;margin:8px 0 18px;}
.medal-art{font-size:70px;}
.champion-ribbon{
  display:inline-block;background:var(--red);color:#fff;font-weight:700;font-size:13px;
  padding:8px 20px;border-radius:20px;margin-top:6px;letter-spacing:.5px;
}
.cta-stack{width:100%;}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-card{background:var(--cream);border-radius:20px;padding:24px;width:100%;max-width:360px;position:relative;}
.modal-card h3{font-family:var(--font-display);margin:0 0 4px;}
.modal-sub{font-size:13px;color:var(--brown-soft);margin:0 0 14px;}
#sampleForm{display:flex;flex-direction:column;gap:10px;}
#sampleForm input{padding:12px;border-radius:10px;border:1px solid var(--line);font-size:14px;}
.modal-close{position:absolute;top:14px;right:14px;background:none;font-size:16px;color:var(--brown-soft);}

@media (max-width:380px){
  .phone-frame{padding:18px 14px 22px;}
}