:root{
  --bg:#0f1225;
  --card:#191d36;
  --ink:#e6e9ff;
  --muted:#aeb6ff;
  --accent:#8ac6ff;
  --primary:#ff7cc2;
  --good:#7dffb0;
  --warn:#ffd37d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Fredoka','Baloo 2',system-ui,Segoe UI,Arial;
  color:var(--ink); background: radial-gradient(1200px 800px at 20% -10%, #26306b 0%, transparent 60%), linear-gradient(180deg,#0a0c1a, #14183a 60%, #0f1225);
}
#app, body{transition:background .6s ease, color .3s ease}
body.theme-party{
  background: radial-gradient(1000px 700px at 80% -20%, #ffb3d6 0%, transparent 60%),
              radial-gradient(900px 700px at 10% 0%, #9fd8ff 0%, transparent 55%),
              linear-gradient(180deg,#2b0f35,#40165b 50%, #1a0f2b);
}
#app{max-width:1100px;margin:0 auto;padding:24px}
.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.app-header h1{font-weight:700;font-size:28px;letter-spacing:0.5px}
.header-actions button{margin-left:8px}
/* Tap feedback when holding an item in touch mode */
.holding{outline:2px solid var(--accent)}
body.theme-party .app-header h1{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}

.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:10px 0 18px}
.step{background:#1b2040;border:1px solid #2a3163;border-radius:10px;padding:8px;text-align:center;color:var(--muted);font-size:13px}
.step.active{background:#2a3163;color:#fff}

.screen{display:none}
.screen.active{display:block}

.card{background:var(--card);border:1px solid #2a3163;border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
.inline{display:flex;gap:8px;align-items:center;margin:10px 0 18px}
.inline.full{flex-direction:column;align-items:stretch}
textarea{background:#202653;border:1px solid #344099;border-radius:12px;padding:10px 12px;color:#fff;resize:vertical}

.layout{display:grid;grid-template-columns:340px 1fr;gap:18px}
.left .ingredients,.left .decor-palette{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ing,.decor{background:#22264f;border:1px solid #2c3472;border-radius:10px;padding:8px;cursor:grab;user-select:none}
.ing:active,.decor:active{cursor:grabbing}
.actions{display:flex;gap:8px;margin:10px 0}
.nav{display:flex;justify-content:space-between;margin-top:12px}

button{background:#2b356e;border:1px solid #3a4694;color:#eaf1ff;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
button.primary{background:linear-gradient(180deg,#ff7cc2,#ff53ad);border-color:#ff80c7;color:#19152b}
button.ghost{background:transparent;border-color:#3a4694;color:#c6ccff}
button:disabled{opacity:.5;cursor:not-allowed}
input{background:#202653;border:1px solid #344099;border-radius:10px;padding:10px 12px;color:#fff}

.workarea{position:relative;min-height:360px;background:#14183a;border:1px dashed #2a3163;border-radius:14px;display:flex;align-items:center;justify-content:center}
.bowl{width:280px;height:180px;border-bottom-left-radius:50% 80%;border-bottom-right-radius:50% 80%;border:6px solid #9db3ff;position:relative;background:linear-gradient(180deg,#b6c5ff,#92a7ff);box-shadow:inset 0 -10px 20px rgba(0,0,0,0.25)}
.bowl-inner{position:absolute;left:18px;right:18px;bottom:10px;height:70px;border-radius:18px;background:linear-gradient(180deg,#ffe4a3,#ffcd7a);display:flex;align-items:center;justify-content:center;color:#7a4f11;font-weight:700}
.bowl .anim{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none}
.egg-anim{bottom:48px;width:90px;height:80px}
.egg-anim .shell{position:absolute;top:0;width:32px;height:26px;background:#eaeaea;border:2px solid #d0d0d0;border-radius:50% 50% 40% 40%}
.egg-anim .shell.left{left:6px;animation:eggOpenLeft .7s ease-out forwards .25s}
.egg-anim .shell.right{right:6px;animation:eggOpenRight .7s ease-out forwards .25s}
.egg-anim .yolk{position:absolute;left:50%;top:10px;width:22px;height:22px;background:#ffcc33;border-radius:50%;transform:translate(-50%, -60px);animation:yolkDrop .6s ease-out forwards}
.egg-anim .white{position:absolute;left:50%;top:18px;width:42px;height:18px;background:radial-gradient(ellipse at center, #ffffff 40%, rgba(255,255,255,0.75) 70%, rgba(255,255,255,0.4));border-radius:50%;transform:translate(-50%, -60px);filter:blur(0.2px);animation:whiteDrop .6s ease-out forwards}
@keyframes yolkDrop{from{transform:translate(-50%,-80px)} to{transform:translate(-50%,32px)}}
@keyframes whiteDrop{from{transform:translate(-50%,-80px)} to{transform:translate(-50%,34px)}}
@keyframes eggOpenLeft{to{transform:translate(-30px, -14px) rotate(-35deg); opacity:.9}}
@keyframes eggOpenRight{to{transform:translate(30px, -14px) rotate(35deg); opacity:.9}}

.milk-anim{bottom:56px;width:120px;height:80px}
.milk-anim .stream{position:absolute;left:50%;top:-40px;width:10px;height:0;background:linear-gradient(180deg,#ffffff,#e8f5ff);border-radius:6px;transform:translateX(-50%);animation:milkPour 0.8s ease-out forwards}
.milk-anim .splash{position:absolute;left:50%;top:24px;width:60px;height:18px;background:radial-gradient(ellipse at center, #ffffff 40%, rgba(255,255,255,0.75) 70%, rgba(255,255,255,0.35));border-radius:50%;transform:translateX(-50%) scale(0.6);opacity:0;animation:milkSplash .8s ease-out forwards .2s}
@keyframes milkPour{to{height:72px}}
@keyframes milkSplash{to{opacity:1; transform:translateX(-50%) scale(1)}}
.dropzone{outline:2px dashed transparent}
.dropzone.over{outline-color:#9acbff}

.progress{width:80%;height:16px;border-radius:10px;background:#252b5c;border:1px solid #2d367b;margin:16px auto;overflow:hidden}
.progress .bar{height:100%;width:0%;background:linear-gradient(90deg,#79ffa6,#27f1ff);animation:grow 4s linear forwards}
.hidden{display:none}
@keyframes grow{to{width:100%}}

.cake-stage{position:relative;width:340px;height:260px;margin:0 auto}
.cake-base{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;width:260px;height:120px;border-radius:16px;background:linear-gradient(180deg,#b88a58,#8a5b2f);box-shadow:0 8px 0 #5a3315,inset 0 10px 0 rgba(255,255,255,0.12)}
.cake-frost{position:absolute;left:50%;transform:translateX(-50%);bottom:120px;width:280px;height:90px;border-radius:18px;background:#ffeccc;box-shadow:0 8px 0 rgba(0,0,0,0.25)}
.cake-frost{overflow:hidden}
.cake-frost.dripping::after{content:"";position:absolute;left:8px;right:8px;bottom:-10px;height:24px;background:
  radial-gradient(12px 16px at 10px 0, var(--frost,#ffeccc) 98%, transparent 100%),
  radial-gradient(10px 14px at 60px 0, var(--frost,#ffeccc) 98%, transparent 100%),
  radial-gradient(14px 18px at 110px 0, var(--frost,#ffeccc) 98%, transparent 100%),
  radial-gradient(10px 14px at 160px 0, var(--frost,#ffeccc) 98%, transparent 100%),
  radial-gradient(12px 16px at 210px 0, var(--frost,#ffeccc) 98%, transparent 100%);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))
}
.decor-layer{position:absolute;inset:0;}

.swatches{display:grid;grid-template-columns:repeat(6,40px);gap:8px;margin:8px 0}
.swatch{width:40px;height:40px;border-radius:10px;border:2px solid #3240a3;background:#ffeccc}
@media (hover:none) and (pointer:coarse){
  .swatch{width:44px;height:44px}
}

.decor-item{position:absolute;transform:translate(-50%,-50%);font-size:22px;user-select:none}
.decor-item.candle{font-size:18px;color:#ffe5a1}
.flame{position:absolute;top:-18px;left:50%;transform:translateX(-50%);width:8px;height:12px;border-radius:50% 50% 40% 40%;background:radial-gradient(ellipse at center,#fffbc7 0%,#ffd56a 45%,#ff8a00 80%);box-shadow:0 0 10px #ffd56a,0 0 20px #ff8a00}
.flame{animation:flicker .12s infinite alternate}
@keyframes flicker{from{transform:translateX(-50%) scale(1)} to{transform:translateX(-50%) scale(1.07) translateY(-1px)}}

.slices{position:absolute;inset:0}
.slice{position:absolute;left:50%;bottom:20px;width:240px;height:120px;transform-origin:50% 100%;clip-path:polygon(50% 100%, 44% 58%, 56% 58%);background:linear-gradient(180deg,#b88a58,#8a5b2f)}
.slice .top{position:absolute;left:50%;top:-68px;width:260px;height:90px;transform:translateX(-50%);clip-path:polygon(50% 100%, 42% 24%, 58% 24%);background:var(--frost,#ffeccc)}

.party-area{display:grid;grid-template-columns:1fr;gap:12px}
.party-controls{display:flex;gap:8px;justify-content:center}

#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.confetti-bit{position:absolute;width:10px;height:14px;opacity:.9}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

#balloons{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.balloon{position:absolute;width:36px;height:48px;border-radius:50% 50% 48% 48%;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 30%), var(--balloon,#ff7cc2);box-shadow:inset -6px -10px 12px rgba(0,0,0,.18);opacity:.95}
.balloon:after{content:"";position:absolute;left:50%;bottom:-14px;width:2px;height:22px;background:rgba(255,255,255,.6);transform:translateX(-50%)}
@keyframes floatUp{from{transform:translateY(110vh)} to{transform:translateY(-20vh)}}

#garlands{position:fixed;top:0;left:0;right:0;height:80px;pointer-events:none;opacity:.95}
#garlands:before,#garlands:after{content:"";position:absolute;left:0;right:0;height:80px}
#garlands:before{background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.05) 14px 16px)}
#garlands:after{background:
  linear-gradient( to right,
    transparent 0 10px,
    #ff7cc2 10px 20px,
    #ffd37d 20px 30px,
    #7dffb0 30px 40px,
    #8ac6ff 40px 50px,
    #caa3ff 50px 60px,
    transparent 60px 70px
  );
  mask: linear-gradient(#000, #000) top/100% 4px no-repeat,
        radial-gradient(20px 20px at 15px 22px, #000 49%, transparent 50%) repeat-x;
  -webkit-mask: linear-gradient(#000, #000) top/100% 4px no-repeat,
        radial-gradient(20px 20px at 15px 22px, #000 49%, transparent 50%) repeat-x;
  background-size: 70px 80px; background-position: 0 0;
}

#lights{position:fixed;top:56px;left:0;right:0;height:40px;pointer-events:none}
#lights .bulb{position:absolute;top:0;width:10px;height:10px;border-radius:50%;box-shadow:0 0 8px currentColor, 0 0 16px currentColor;opacity:.9;animation:glow 1.2s ease-in-out infinite}
@keyframes glow{0%,100%{transform:translateY(0);filter:brightness(1)}50%{transform:translateY(2px);filter:brightness(1.4)}}

.guest-rail{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:10px;opacity:.95}
.guest{font-size:22px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.guest.bob{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.secret-card{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center}
.secret-card.hidden{display:none}
.secret-content{background:var(--card);border:1px solid #2a3163;border-radius:16px;padding:20px;max-width:520px;width:min(92vw,520px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.secret-content h3{margin-top:0}
.secret-from{color:var(--muted);margin-top:6px}
.secret-actions{margin-top:12px}

.frost-dot{position:absolute;width:28px;height:18px;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.25);opacity:.96}

/* Mobile layout */
@media (max-width: 640px){
  #app{padding:14px}
  .app-header h1{font-size:22px}
  .steps{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .step{min-width:88px;padding:6px;font-size:12px}
  .layout{grid-template-columns:1fr}
  .workarea{min-height:260px}
  .cake-stage{width:280px;height:220px}
  .cake-base{width:220px;height:100px}
  .cake-frost{width:240px;height:80px;bottom:110px}
  .bowl{width:240px;height:160px}
  button{padding:10px 12px}
  .left .ingredients,.left .decor-palette{grid-template-columns:1fr 1fr}
}