:root{
  --ink:#2B1236;
  --plum:#3A1848;
  --plum-deep:#220E2C;
  --cream:#FFF1F7;
  --body:#FFE1EE;
  --gum:#FF5FA2;
  --tang:#FFA23E;
  --mint:#57D6BE;
  --lemon:#FFD84D;
  --lilac:#B98CFF;
  --line:4px solid var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 8%, #56206B 0%, var(--plum) 38%, var(--plum-deep) 100%);
  font-family:"Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  color:var(--cream);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:34px 18px 46px;
}

/* ---------- zaglavlje ---------- */
.masthead{text-align:center;margin-bottom:34px}
.masthead h1{
  font-family:"Fredoka", ui-rounded, system-ui, sans-serif;
  font-weight:700;
  font-size:clamp(32px,7.6vw,54px);
  line-height:.96;
  margin:0;
  color:var(--cream);
  text-shadow:0 4px 0 var(--gum), 0 8px 0 rgba(0,0,0,.22);
  letter-spacing:-.01em;
}
.masthead p{
  margin:14px auto 0;
  max-width:36ch;
  font-size:15px;
  line-height:1.5;
  color:#F0CFE2;
}

/* ---------- mašina ---------- */
.machine{
  width:min(400px,100%);
  background:var(--body);
  border:var(--line);
  border-radius:34px;
  box-shadow:0 14px 0 rgba(0,0,0,.28);
  padding:22px 22px 26px;
  position:relative;
}
/* nožice */
.machine::before,.machine::after{
  content:"";
  position:absolute;bottom:-22px;
  width:54px;height:22px;
  background:var(--gum);
  border:4px solid var(--ink);border-top:none;
  border-radius:0 0 14px 14px;
}
.machine::before{left:44px}
.machine::after{right:44px}
.machine.shake{animation:shake .5s ease}
@keyframes shake{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-2px,1px) rotate(-.3deg)}
  45%{transform:translate(2px,-1px) rotate(.35deg)}
  70%{transform:translate(-1px,1px) rotate(-.2deg)}
}

/* staklena kupola, poklopac, lampica i nalepnice */
.dome-wrap{position:relative}
.lid{
  position:absolute;top:-16px;left:50%;
  width:26%;height:28px;
  transform:translateX(-50%);
  background:var(--gum);
  border:4px solid var(--ink);
  border-radius:18px 18px 8px 8px;
  z-index:2;
}
.lamp{
  position:absolute;left:50%;top:-20px;
  width:22px;height:22px;margin-left:-11px;
  background:#FBE3EE;
  border:4px solid var(--ink);
  border-radius:50%;
  transition:background .2s, box-shadow .2s;
}
.lamp.blink{animation:blink .28s steps(1) infinite}
@keyframes blink{
  50%{background:var(--lemon);box-shadow:0 0 12px 3px rgba(255,216,77,.8)}
}
.lamp.special{
  background:var(--lemon);
  box-shadow:0 0 14px 5px rgba(255,216,77,.85);
  animation:glow 1.4s ease-in-out infinite;
}
@keyframes glow{
  50%{box-shadow:0 0 6px 2px rgba(255,216,77,.55)}
}
.sticker{
  position:absolute;z-index:2;
  width:17%;aspect-ratio:1/1;
  padding:1.4%;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:50%;
  box-shadow:0 3px 0 rgba(0,0,0,.18);
  pointer-events:none;
}
.sticker svg{display:block;width:100%;height:100%}
.sticker-bugi{top:0;left:0;transform:rotate(-12deg)}
.sticker-kornet{top:1%;right:0;transform:rotate(10deg)}
.sticker-biljka{bottom:2%;left:1%;transform:rotate(-7deg)}
.collar{
  position:relative;z-index:0;
  width:40%;height:20px;
  margin:-14px auto 0;
  background:var(--gum);
  border:4px solid var(--ink);
  border-radius:6px 6px 14px 14px;
}
.dome{
  position:relative;z-index:1;
  width:100%;
  aspect-ratio:1/1;
  border:var(--line);
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #ffffff 0%, rgba(255,255,255,.72) 34%, rgba(255,214,236,.55) 68%, rgba(255,168,214,.5) 100%);
  overflow:hidden;
}
.dome .glare{
  position:absolute;top:8%;left:14%;
  width:34%;height:22%;
  background:rgba(255,255,255,.85);
  border-radius:50%;
  transform:rotate(-28deg);
  filter:blur(2px);
  pointer-events:none;
}
.pod{
  position:absolute;
  width:22%;aspect-ratio:1/1;
  border:3px solid var(--ink);
  border-radius:50%;
  overflow:hidden;
  transition:
    left .75s cubic-bezier(.34,1.35,.5,1),
    top .75s cubic-bezier(.34,1.35,.5,1),
    transform .8s cubic-bezier(.2,.8,.3,1);
}
.pod::before{
  content:"";position:absolute;inset:0 0 50% 0;
  background:rgba(255,255,255,.62);
  border-bottom:3px solid var(--ink);
}
@media (prefers-reduced-motion:reduce){
  .pod{transition:none}
  .machine.shake{animation:none}
  .lamp.blink,.lamp.special{animation:none}
}

/* ---------- komande ---------- */
.controls{
  margin-top:20px;
  display:flex;
  align-items:center;
  gap:14px;
}
.knob{
  flex:0 0 auto;
  width:96px;height:96px;
  border:var(--line);
  border-radius:50%;
  background:conic-gradient(from 0deg, var(--lemon) 0 25%, var(--tang) 0 50%, var(--lemon) 0 75%, var(--tang) 0 100%);
  cursor:pointer;
  position:relative;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 6px 0 rgba(0,0,0,.24);
}
.knob:active{box-shadow:0 3px 0 rgba(0,0,0,.24)}
.knob::after{
  content:"";
  position:absolute;
  inset:31%;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:50%;
}
.knob .grip{
  position:absolute;
  top:6px;left:50%;
  width:10px;height:22px;
  margin-left:-5px;
  background:var(--ink);
  border-radius:6px;
}
.knob:focus-visible{outline:4px solid var(--mint);outline-offset:5px}

.strength{flex:1 1 auto}
.strength .lbl{
  font-size:13px;
  color:#6C3D5C;
  margin:0 0 8px 2px;
  font-weight:700;
}
.tiers{display:flex;flex-direction:column;gap:6px}
.tier{
  font-family:"Fredoka", system-ui, sans-serif;
  font-size:14px;
  font-weight:500;
  text-align:left;
  padding:7px 12px;
  border:3px solid var(--ink);
  border-radius:12px;
  background:var(--cream);
  color:var(--ink);
  cursor:pointer;
}
.tier[aria-pressed="true"]{background:var(--gum);color:#fff}
.tier:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* ---------- otvor i korito ---------- */
.chute{
  margin-top:20px;
  border:var(--line);
  border-radius:0 0 22px 22px;
  background:linear-gradient(var(--ink) 0 10px, #F7C9DF 10px 100%);
  min-height:210px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hint{
  font-size:14px;
  color:#7A4667;
  font-weight:700;
  margin:0;
  padding:0 16px;
  text-align:center;
}

/* ---------- kapsula ---------- */
.capsule{
  position:absolute;
  width:96px;height:96px;
  cursor:pointer;
  border:0;background:none;padding:0;
}
.capsule.drop{animation:drop .85s cubic-bezier(.3,1.1,.4,1)}
@keyframes drop{
  0%{transform:translateY(-260px) scale(.7)}
  55%{transform:translateY(6px) scale(1)}
  72%{transform:translateY(-26px)}
  86%{transform:translateY(2px)}
  100%{transform:translateY(0)}
}
.capsule .half{
  position:absolute;left:0;width:96px;height:48px;
  border:4px solid var(--ink);
  transition:transform .45s cubic-bezier(.3,.9,.3,1), opacity .45s ease;
}
.capsule .top{
  top:0;
  border-radius:96px 96px 0 0;
  border-bottom:none;
  background:rgba(255,255,255,.65);
}
.capsule .bot{
  bottom:0;
  border-radius:0 0 96px 96px;
  border-top:none;
}
.capsule.bounce{animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(-3deg)}
}
.capsule.open .top{transform:translate(-58px,-64px) rotate(-42deg);opacity:0}
.capsule.open .bot{transform:translate(58px,52px) rotate(38deg);opacity:0}

/* ---------- papirić ---------- */
.slip{
  position:relative;
  width:min(300px,86%);
  background:#FFFDF8;
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:6px;
  padding:22px 20px 18px;
  transform:rotate(-1.4deg) scale(.2);
  opacity:0;
  transition:transform .42s cubic-bezier(.2,1.3,.4,1), opacity .3s ease;
  box-shadow:0 8px 0 rgba(0,0,0,.18);
}
.slip.show{transform:rotate(-1.4deg) scale(1);opacity:1}
.slip::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg, var(--gum) 0 9px, transparent 9px 18px);
}
.slip p{
  margin:0;
  font-family:"Fredoka", system-ui, sans-serif;
  font-weight:500;
  font-size:19px;
  line-height:1.34;
  text-align:center;
}
.slip .stamp{
  display:block;
  margin-top:14px;
  font-family:"Nunito", sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  color:#B0799B;
  text-align:center;
}

/* specijalna kapsula — stvarno misli, pa izgleda drugačije */
.slip.special{
  background:var(--lemon);
  box-shadow:0 8px 0 var(--gum);
  transform:rotate(1.6deg) scale(.2);
}
.slip.special.show{transform:rotate(1.6deg) scale(1)}
.slip.special p{font-weight:600}
.slip.special .stamp{
  width:fit-content;
  margin:14px auto 0;
  padding:4px 12px;
  border-radius:999px;
  background:var(--gum);
  color:#fff;
  font-size:12px;
}
.slip.special::after{
  content:"✦";
  position:absolute;top:12px;right:10px;
  font-size:18px;line-height:1;
  color:var(--gum);
  animation:twinkle 1.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{transform:scale(1) rotate(0);opacity:1}
  50%{transform:scale(.65) rotate(25deg);opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .slip.special::after{animation:none}
}

/* ---------- brojač ---------- */
.tally{
  width:min(400px,100%);
  margin-top:38px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  color:#E7C2DC;
}
.dots{display:flex;gap:12px;flex-wrap:wrap}
.level-count{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(0,0,0,.35)}

/* ---------- istina ---------- */
.truth-zone{
  width:min(400px,100%);
  margin-top:26px;
  text-align:center;
}
.truth-btn{
  background:none;
  border:none;
  border-bottom:2px dashed rgba(240,207,226,.55);
  color:#E3B9D3;
  font-family:"Nunito",sans-serif;
  font-size:14px;
  padding:2px 3px;
  cursor:pointer;
}
.truth-btn:hover{color:#fff}
.truth-btn:focus-visible{outline:3px solid var(--mint);outline-offset:4px}
.truth-msg{
  min-height:22px;
  margin:12px 0 0;
  font-size:14px;
  font-style:italic;
  color:var(--mint);
}
.avoided{
  margin:6px 0 0;
  font-size:12px;
  color:#9C74A8;
}

footer{
  margin-top:34px;
  text-align:center;
  font-size:12px;
  color:#8A5E97;
  max-width:40ch;
  line-height:1.6;
}
footer .late{color:var(--lemon);display:block;margin-top:8px}

@media (max-width:400px){
  .controls{flex-direction:column;align-items:stretch}
  .knob{align-self:center}
  .tiers{flex-direction:row}
  .tier{flex:1;text-align:center;padding:8px 4px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .slip{transform:rotate(-1.4deg) scale(1);opacity:0}
  .slip.show{opacity:1}
}