@font-face { font-family: 'Fredoka'; font-weight: 500; font-display: swap; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 600; font-display: swap; src: url('../fonts/fredoka-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }

:root {
  --ink: #5a3a2a;
  --cream: #fff8ef;
  --pink: #ff8fb1;
  --pink-d: #e0577f;
  --gold: #f7c531;
  --green: #6cc57c;
  --green-d: #3f9a50;
  --theme: #ff8fb1;
  --shadow: 0 6px 0 rgba(90, 58, 42, .18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #ffd9e4;
  font-family: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 600;
  color: var(--ink);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
svg.art { width: 100%; height: 100%; display: block; overflow: visible; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 800px;
  transform-origin: 50% 50%;
  overflow: hidden;
  background: var(--cream);
  border-radius: 6px;
}
.screen { position: absolute; inset: 0; overflow: hidden; }

#rotate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 99;
    background: rgba(255, 217, 228, .97); align-items: center; justify-content: center;
  }
  .rotate-card { font-size: 28px; text-align: center; padding: 30px; max-width: 320px; }
  .rotate-icon { font-size: 80px; animation: spin 2s ease-in-out infinite; }
}
@keyframes spin { 0%, 30% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }

/* ---------- Shared bits ---------- */
.title-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.6) 0 60px, transparent 61px),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.5) 0 90px, transparent 91px),
    repeating-linear-gradient(45deg, #ffe3ec 0 40px, #ffd2e0 40px 80px);
}
.card {
  position: relative; background: #fff; border-radius: 32px;
  box-shadow: 0 10px 0 rgba(90,58,42,.15), 0 20px 50px rgba(90,58,42,.2);
  padding: 32px; text-align: center;
}
h1, h2 { margin: 0; font-weight: 700; }
h2 { font-size: 40px; }
.fine { font-size: 17px; opacity: .7; margin-top: 8px; font-weight: 500; }

.big-btn {
  display: inline-block; min-width: 260px; padding: 18px 34px; margin: 8px;
  background: var(--green); color: #fff; font-size: 32px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 7px 0 var(--green-d);
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
  transition: transform .08s;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--green-d); }
.big-btn.soft { background: #f1e6dc; color: var(--ink); box-shadow: 0 7px 0 #d6c3b2; text-shadow: none; }
.big-btn.danger { background: #ef5f5f; box-shadow: 0 7px 0 #b23a3a; }
.mid-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  background: var(--green); color: #fff; font-size: 22px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 5px 0 var(--green-d);
}
.mid-btn.soft { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #d6c3b2; }
.mid-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #d6c3b2; }
.mid-btn svg { width: 40px; height: 40px; }
.icon-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: #fff; font-size: 28px; font-weight: 700;
  box-shadow: 0 5px 0 #d6c3b2; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #d6c3b2; }
.icon-btn.off { opacity: .45; }
.back-btn { position: absolute; left: 24px; top: 20px; z-index: 5; font-size: 34px; }

.coins-box {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px; padding: 6px 20px 6px 8px;
  font-size: 30px; font-weight: 700; box-shadow: 0 4px 0 #d6c3b2; min-width: 120px;
}
.coin-icon { width: 44px; height: 44px; display: inline-block; }
.coin-icon svg { width: 100%; height: 100%; }
.mini-coin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 3px; }
.mini-coin svg { width: 100%; height: 100%; }

.swatch {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c); border: 5px solid #fff;
  box-shadow: 0 0 0 3px #e7d9cc, 0 4px 0 3px #d6c3b2;
}
.swatch.on { box-shadow: 0 0 0 5px var(--ink), 0 4px 0 5px #d6c3b2; transform: scale(1.08); }
.swatch.none { background: #fff; font-size: 26px; color: #c0a898; }

.overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(90, 58, 42, .45);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .2s;
}
.pause-card { width: 560px; }
.pause-card h2 { margin-bottom: 16px; }
.pause-card p { font-size: 22px; font-weight: 500; }
.pause-card .big-btn { display: block; width: 100%; margin: 14px 0; }
@keyframes fadeIn { from { opacity: 0; } }

.stars { display: flex; justify-content: center; gap: 12px; margin: 10px 0; }
.star { width: 64px; height: 64px; color: #e8ddd2; }
.stars.big .star { width: 92px; height: 92px; }
.star.on { color: var(--gold); animation: starPop .5s backwards cubic-bezier(.3,1.8,.5,1); }
.star svg { width: 100%; height: 100%; }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } }

.flyer { position: absolute; z-index: 40; pointer-events: none; }
.float-text {
  position: absolute; z-index: 45; pointer-events: none; transform: translate(-50%, -50%);
  font-size: 40px; font-weight: 700; color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
  animation: floatUp 1.3s forwards ease-out; white-space: nowrap;
}
.float-text.coin-float { color: var(--gold); font-size: 48px; }
.float-text.tip-float { color: #9be7ff; font-size: 30px; }
.float-text.small-float { font-size: 24px; color: #fff; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }

.shake { animation: shake .4s; }
@keyframes shake { 20% { transform: translateX(-8px) rotate(-2deg); } 40% { transform: translateX(8px) rotate(2deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(5px); } }
.bounce { animation: bounce .45s; }
@keyframes bounce { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }
.confetti { position: absolute; top: 0; width: 14px; height: 22px; border-radius: 4px; z-index: 60; pointer-events: none; }
.toast {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; padding: 14px 28px; border-radius: 999px; font-size: 24px;
  animation: fadeIn .2s;
}
.sound-btns { position: absolute; right: 24px; top: 20px; display: flex; gap: 12px; z-index: 5; }

/* ---------- Title ---------- */
.title .logo { position: absolute; left: 0; right: 0; top: 40px; text-align: center; }
.logo-items { display: flex; justify-content: center; gap: 10px; height: 110px; }
.logo-items svg { width: 110px; height: 110px; animation: wobble 3s ease-in-out infinite; }
.logo-items svg:nth-child(2) { animation-delay: -1s; width: 130px; height: 130px; margin-top: -20px; }
.logo-items svg:nth-child(3) { animation-delay: -2s; }
@keyframes wobble { 50% { transform: translateY(-8px) rotate(3deg); } }
.logo h1 {
  font-size: 100px; line-height: 1; color: #fff;
  -webkit-text-stroke: 4px var(--pink-d); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--pink-d), 0 14px 20px rgba(160,40,80,.3);
}
.logo h1 span { color: #fff3a8; }
.logo-sub { font-size: 30px; margin-top: 14px; color: var(--pink-d); }
.who { position: absolute; top: 375px; left: 0; right: 0; text-align: center; font-size: 34px; }
.profiles {
  position: absolute; top: 440px; left: 40px; right: 40px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
}
.profile-card {
  position: relative; width: 170px; height: 200px; border-radius: 28px;
  background: #fff; box-shadow: 0 7px 0 #e3b9c8; padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
  border: 5px solid var(--c, #fff);
}
.profile-card:active { transform: translateY(5px); box-shadow: 0 2px 0 #e3b9c8; }
.pc-hat { width: 100px; height: 100px; }
.pc-name { font-size: 28px; font-weight: 700; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-info { font-size: 19px; opacity: .75; }
.pc-del {
  position: absolute; top: -12px; right: -12px; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: #c0a898; font-size: 18px; box-shadow: 0 3px 0 #e3b9c8;
}
.profile-card.new { border: 5px dashed #f0a8c0; background: rgba(255,255,255,.7); justify-content: center; }
.plus { font-size: 80px; line-height: 1; color: var(--pink); }

/* ---------- New baker ---------- */
.nb-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 640px; padding-top: 80px; }
.nb-hat { position: absolute; left: 50%; top: -80px; margin-left: -75px; width: 150px; height: 150px; }
.name-input {
  width: 100%; font-size: 30px; padding: 14px 22px; border-radius: 20px;
  border: 4px solid #eadbd0; background: var(--cream); color: var(--ink); text-align: center; outline: none;
}
.name-input:focus { border-color: var(--pink); }
.name-input.big { font-size: 40px; margin-top: 14px; }
.nb-label { font-size: 24px; margin: 22px 0 10px; }
.nb-colors { display: flex; justify-content: center; gap: 16px; }
.mode-pick { display: flex; gap: 16px; justify-content: center; }
.mode-btn {
  flex: 1; max-width: 260px; padding: 14px; border-radius: 22px; background: #f6efe8;
  border: 4px solid transparent; display: flex; flex-direction: column; gap: 2px;
}
.mode-btn b { font-size: 28px; }
.mode-btn span { font-size: 17px; font-weight: 500; opacity: .75; }
.mode-btn.on { background: #fff; border-color: var(--green); box-shadow: 0 4px 0 var(--green-d); }
.nb-card .big-btn { margin-top: 26px; }

/* ---------- Hub ---------- */
.hub .sky { position: absolute; inset: 0; background: linear-gradient(#8fd3ff, #d4f0ff 70%); }
.cloud { position: absolute; width: 160px; height: 50px; background: #fff; border-radius: 50px; opacity: .9; animation: drift 40s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; left: 25px; top: -35px; }
.cloud::after { width: 54px; height: 54px; left: 80px; top: -24px; }
.c1 { top: 70px; left: -200px; }
.c2 { top: 150px; left: -200px; animation-delay: -15s; transform: scale(.7); }
.c3 { top: 40px; left: -200px; animation-delay: -28s; }
@keyframes drift { to { left: 1400px; } }
.street { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: #c9b8a6; border-top: 10px solid #e2d4c4; }
.street::after { content: ''; position: absolute; inset: 30px 0 0; background: repeating-linear-gradient(90deg, #b8a694 0 120px, #c4b29f 120px 240px); }
.shopfront { position: absolute; left: 50px; top: 90px; width: 640px; height: 610px; }
.sign {
  position: absolute; left: 50px; right: 50px; top: 0; height: 90px; z-index: 2;
  background: #fff8ef; border: 6px solid #8a5a3a; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 700; color: var(--theme); -webkit-text-stroke: 1.5px #8a5a3a;
  box-shadow: 0 6px 0 rgba(0,0,0,.15); white-space: nowrap; overflow: hidden;
}
.awning { position: absolute; left: 0; right: 0; top: 100px; height: 80px; display: flex; z-index: 2; filter: drop-shadow(0 6px 0 rgba(0,0,0,.15)); }
.awning i { flex: 1; background: var(--theme); border-radius: 0 0 30px 30px; }
.awning i:nth-child(even) { background: #fff; }
.front-body { position: absolute; left: 14px; right: 14px; top: 120px; bottom: 0; background: #f7e4cf; border: 6px solid #8a5a3a; border-bottom: 0; }
.shop-window {
  position: absolute; left: 30px; top: 90px; width: 330px; height: 250px;
  background: linear-gradient(135deg, #e8f7ff, #bfe6ff); border: 10px solid #8a5a3a; border-radius: 12px; overflow: hidden;
}
.shop-window .bunting { position: absolute; left: 0; top: 0; width: 100%; height: 50px; }
.window-items { position: absolute; left: 10px; right: 10px; bottom: 6px; display: flex; justify-content: center; gap: 4px; }
.window-items div { width: 80px; height: 80px; }
.shop-window::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #d9b28a; }
.window-cat { position: absolute; right: 6px; bottom: 14px; width: 110px; height: 62px; z-index: 1; }
.door { position: absolute; right: 40px; top: 90px; width: 160px; height: 400px; background: var(--theme); border: 8px solid #8a5a3a; border-radius: 80px 80px 0 0; }
.door-sign { position: absolute; left: 22px; right: 22px; top: 70px; background: #fff; border-radius: 10px; text-align: center; font-size: 26px; font-weight: 700; color: var(--green-d); padding: 4px; }
.door-knob { position: absolute; right: 18px; top: 220px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); border: 3px solid #c48a0e; }
.hub-flowers { position: absolute; left: 20px; bottom: 0; display: flex; gap: 220px; }
.hub-flowers div { width: 90px; height: 108px; }
.hub-top { position: absolute; left: 24px; right: 24px; top: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.hub-top .sound-btns { position: static; margin-left: auto; margin-right: 16px; }
.hub-panel {
  position: absolute; right: 30px; top: 100px; width: 520px; padding: 24px;
  background: rgba(255,255,255,.92); border-radius: 36px; text-align: center;
  box-shadow: 0 10px 0 rgba(90,58,42,.15);
}
.day-label { font-size: 30px; }
.hub-panel .big-btn.play { width: 100%; margin: 10px 0 16px; font-size: 38px; padding: 22px; }
.mode-pick.small .mode-btn { padding: 8px; }
.mode-pick.small .mode-btn b { font-size: 24px; }
.hub-btns { display: flex; gap: 14px; margin-top: 20px; }
.tile {
  flex: 1; background: #fff8ef; border-radius: 24px; padding: 10px 6px 12px; font-size: 22px; font-weight: 700;
  box-shadow: 0 6px 0 #e3d0bf; display: flex; flex-direction: column; align-items: center;
}
.tile:active { transform: translateY(5px); box-shadow: 0 1px 0 #e3d0bf; }
.tile-art { width: 120px; height: 120px; }
.tile-art .cake-svg { width: 100%; height: 100%; }
.empty-frame { width: 100%; height: 100%; border: 5px dashed #e3d0bf; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 50px; color: #e3d0bf; }

/* ---------- Day ---------- */
.day .wall { position: absolute; left: 0; right: 0; top: 0; height: 440px; }
.wallpaper {
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 330px, rgba(0,0,0,.05) 330px),
    repeating-linear-gradient(90deg, #fff4ea 0 44px, color-mix(in srgb, var(--theme) 22%, #fff4ea) 44px 88px);
}
.day .bunting { position: absolute; left: 0; top: 60px; width: 100%; height: 60px; }
.decor-flowers.day { position: absolute; left: 0; right: 340px; top: 0; }
.decor-flowers.day div { position: absolute; top: 350px; width: 70px; height: 84px; }
.decor-flowers.day div:first-child { left: 2px; }
.decor-flowers.day div:last-child { right: 0; }
.decor-cat.day { position: absolute; right: 20px; top: 362px; width: 120px; height: 68px; z-index: 6; }
.topbar {
  position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 10;
  display: flex; align-items: center; gap: 16px; padding: 0 16px;
  background: var(--theme); box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.topbar .icon-btn { width: 50px; height: 50px; font-size: 18px; }
.top-title { font-size: 28px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.top-hat { width: 44px; height: 44px; }
.top-day { font-size: 20px; background: rgba(255,255,255,.3); padding: 2px 12px; border-radius: 999px; }
.top-progress { flex: 1; display: flex; justify-content: center; }
.clock { position: relative; width: 300px; height: 34px; background: rgba(255,255,255,.5); border-radius: 999px; overflow: hidden; border: 3px solid #fff; }
.clock-fill { position: absolute; inset: 0; width: 100%; background: #fff; transition: width .2s linear; }
.clock-text { position: absolute; inset: 0; text-align: center; line-height: 28px; font-size: 22px; font-weight: 700; color: var(--ink); }
.clock.low .clock-fill { background: #ffd0d0; }
.clock.low { animation: shake 1s infinite; }
.served-pips { display: flex; gap: 6px; }
.served-pips i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.45); border: 3px solid #fff; }
.served-pips i.on { background: var(--gold); animation: bounce .4s; }
.topbar .coins-box { font-size: 26px; padding: 3px 16px 3px 5px; min-width: 110px; }
.topbar .coin-icon { width: 38px; height: 38px; }

.slots { position: absolute; left: 10px; top: 70px; width: 930px; height: 370px; display: flex; }
.slot { position: relative; flex: 1; }
.cust { position: absolute; inset: 0; transition: transform .6s ease-in, opacity .6s; }
.cust.entering { animation: walkIn .7s ease-out; }
.cust.leaving { transform: translateX(-380px); opacity: 0; }
@keyframes walkIn { from { transform: translateX(420px); opacity: 0; } }
.cust-art { position: absolute; left: -10px; bottom: -86px; width: 220px; height: 286px; animation: bob 1.6s ease-in-out infinite; }
.cust[data-mood="sad"] .cust-art { animation: none; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.bubble {
  position: absolute; left: 186px; top: 96px; width: 116px;
  background: #fff; border-radius: 26px; padding: 8px; box-shadow: 0 5px 0 rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  animation: popIn .35s .4s backwards cubic-bezier(.3,1.6,.5,1);
}
.bubble::before { content: ''; position: absolute; left: -16px; top: 46px; border: 12px solid transparent; border-right: 18px solid #fff; border-left: 0; }
.bubble-item { position: relative; width: 84px; height: 84px; }
.bubble-item.done svg { opacity: .35; }
.tick { position: absolute; right: -4px; bottom: -4px; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; animation: popIn .3s cubic-bezier(.3,1.6,.5,1); }
.bubble.thanks { padding: 18px 8px; }
.yum { font-size: 30px; font-weight: 700; color: var(--pink-d); }
@keyframes popIn { from { transform: scale(0); } }
.patience { position: absolute; left: 182px; top: 58px; width: 124px; display: flex; align-items: center; gap: 4px; }
.heart { color: #ef5f5f; font-size: 26px; line-height: 1; }
.pat-bar { flex: 1; height: 18px; background: #fff; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.1); overflow: hidden; }
.pat-fill { height: 100%; width: 100%; border-radius: 999px; }

.menu-board {
  position: absolute; right: 18px; top: 82px; width: 300px; height: 280px;
  background: #3d5a4a; border: 10px solid #9a6a42; border-radius: 14px; color: #fff; padding: 8px 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
.menu-title { text-align: center; font-size: 28px; font-weight: 700; color: #ffe9a8; }
.menu-row { display: flex; align-items: center; gap: 8px; font-size: 18px; height: 54px; }
.menu-art { width: 50px; height: 50px; flex: none; }
.menu-name { flex: 1; line-height: 1.05; }
.menu-price { font-size: 22px; color: #ffe9a8; }
.menu-price::before { content: ''; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); margin-right: 4px; vertical-align: -1px; }

.counter { position: absolute; left: 0; right: 0; top: 420px; height: 96px; z-index: 5; }
.counter-top { position: absolute; inset: 0; background: linear-gradient(#d9a46a 0 20px, #b97f45 20px 24px, #c98f55 24px); box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.counter-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 20px; background: linear-gradient(#f0c48c, #d9a46a); }
.shelf { position: absolute; left: 36px; top: 4px; width: 880px; height: 88px; display: flex; gap: 10px; }
.shelf-slot { flex: 1; position: relative; border-radius: 16px; }
.shelf-slot:not(.full) { background: rgba(255,255,255,.12); border: 3px dashed rgba(255,255,255,.35); margin: 8px 6px; }
.shelf-slot.full { animation: popIn .25s; cursor: pointer; }
.shelf-slot svg { width: 100%; height: 100%; }
.trash { position: absolute; left: 950px; top: 10px; width: 76px; height: 76px; }
.trash .lid { transition: transform .2s; transform-origin: 18px 26px; }
.trash.open .lid { transform: rotate(-35deg); }
.trash.open { filter: drop-shadow(0 0 10px #ff8080); }

.kitchen {
  position: absolute; left: 0; right: 0; top: 516px; bottom: 0;
  background:
    linear-gradient(rgba(0,0,0,.06) 2px, transparent 2px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(0,0,0,.06) 2px, transparent 2px) 0 0 / 48px 48px,
    #f3ede6;
}
.bins { position: absolute; left: 16px; top: 16px; width: 330px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bin {
  position: relative; height: 122px; border-radius: 20px;
  background: linear-gradient(#fff, #fbf2e8); border: 4px solid #e3cdb8;
  box-shadow: 0 5px 0 #d0b59c; display: flex; flex-direction: column; align-items: center; padding-top: 2px;
}
.bin:active { transform: translateY(4px); box-shadow: 0 1px 0 #d0b59c; }
.bin-art { width: 86px; height: 86px; filter: saturate(.3) brightness(1.3); }
.bin-label { font-size: 18px; font-weight: 700; margin-top: -4px; }
.bin.locked { opacity: .55; }
.bin.locked .bin-art { filter: grayscale(1) brightness(1.2); opacity: .5; }
.lock { position: absolute; top: 24px; font-size: 32px; }

.ovens { position: absolute; left: 362px; top: 12px; width: 590px; height: 262px; display: flex; gap: 10px; justify-content: center; }
.oven { position: relative; width: calc((590px - (var(--n) - 1) * 10px) / var(--n)); max-width: 170px; height: 262px; cursor: pointer; }
.oven-panel {
  position: absolute; left: 0; right: 0; top: 0; height: 52px; border-radius: 16px 16px 0 0;
  background: #c9d2dc; border: 4px solid #7c8ba0; border-bottom: 0; padding: 8px 10px;
  display: flex; align-items: center; gap: 8px;
}
.oven-bar { flex: 1; height: 22px; background: #fff; border-radius: 999px; overflow: hidden; border: 3px solid #7c8ba0; }
.oven-fill { height: 100%; width: 0; background: #ffa94d; border-radius: 999px; }
.oven[data-state="ready"] .oven-fill { background: var(--green); }
.oven.hot .oven-fill { background: #ef5f5f; }
.oven[data-state="burnt"] .oven-fill { background: #555; }
.oven-knobs { display: flex; gap: 5px; }
.oven-knobs i { width: 14px; height: 14px; border-radius: 50%; background: #7c8ba0; }
.oven[data-state="baking"] .oven-knobs i:first-child { background: #ff7043; }
.oven-door {
  position: absolute; left: 0; right: 0; top: 52px; bottom: 0; border-radius: 0 0 16px 16px;
  background: #e8ecf0; border: 4px solid #7c8ba0; box-shadow: 0 6px 0 #a8b4c2;
}
.oven-window {
  position: absolute; left: 12px; right: 12px; top: 40px; height: 130px; border-radius: 14px;
  background: #3a3a44; border: 4px solid #7c8ba0; overflow: hidden;
}
.oven[data-state="baking"] .oven-window { background: radial-gradient(#ff9a3c, #a0381a); }
.oven[data-state="ready"] .oven-window { background: radial-gradient(#ffd27a, #c86a2a); }
.oven[data-state="burnt"] .oven-window { background: radial-gradient(#555, #222); }
.oven-item { position: absolute; inset: 6px; }
.oven-item svg { width: 100%; height: 100%; }
.oven-glow { position: absolute; inset: 0; pointer-events: none; }
.oven[data-state="ready"] .oven-glow { box-shadow: inset 0 0 0 5px #9ff0a8; animation: pulse .8s ease-in-out infinite; }
.oven.hot .oven-glow { box-shadow: inset 0 0 0 5px #ff8080; animation: pulse .35s ease-in-out infinite; }
.oven[data-state="burnt"] .oven-item::after { content: ''; position: absolute; left: 30%; top: -20%; width: 40%; height: 60%; background: radial-gradient(rgba(120,120,120,.8), transparent 70%); animation: smoke 1.2s ease-out infinite; }
@keyframes smoke { from { transform: translateY(20px) scale(.5); opacity: 1; } to { transform: translateY(-30px) scale(1.4); opacity: 0; } }
@keyframes pulse { 50% { opacity: .35; } }
.oven-handle { position: absolute; left: 22px; right: 22px; top: 16px; height: 12px; border-radius: 6px; background: #9aa8b8; }
.oven-tag {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  font-size: 22px; font-weight: 700; white-space: nowrap; color: var(--green-d);
}
.oven.hot .oven-tag { color: #d33; }
.oven[data-state="burnt"] .oven-tag { color: #666; }
.oven[data-state="ready"] .oven-item { animation: bounce .6s; }

.stations { position: absolute; left: 966px; right: 14px; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.station {
  position: relative; height: 126px; border-radius: 20px; background: #fff; border: 4px solid #e3cdb8;
  box-shadow: 0 5px 0 #d0b59c; display: flex; align-items: center; gap: 6px; padding: 16px 8px 4px;
}
.station-label { position: absolute; left: 14px; top: 2px; font-size: 15px; opacity: .6; }
.board-spot, .icing-spot { width: 96px; height: 96px; flex: none; border-radius: 50%; }
.board-spot { background: radial-gradient(#e9c08f, #c9965e); border: 4px solid #a8743e; }
.board-spot .raw svg { filter: saturate(.3) brightness(1.3); }
.icing-spot { background: radial-gradient(#fff, #f2e8f6); border: 4px dashed #d9c3e4; }
.topping { width: 84px; height: 84px; border-radius: 18px; background: #fbf2e8; padding: 4px; }
.pot { width: 54px; height: 70px; border-radius: 14px; }
.topping.glow, .pot.glow { animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px #ffd54f, 0 0 20px #ffd54f; background: #fff8d6; } }
.station.locked > *:not(.station-lock):not(.station-label) { opacity: .2; pointer-events: none; }
.station-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #b8a090; }
.station-lock::before { content: '\1F512'; margin-right: 8px; }
.board.waiting::after { content: 'Waiting for an oven'; position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font-size: 14px; color: #d33; }

.hint-hand { position: absolute; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .3s; transform: translate(-50%, 0); }
.hint-hand.show { opacity: 1; }
.hand { font-size: 64px; margin-top: 10px; animation: poke .9s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); text-align: center; }
@keyframes poke { 50% { transform: translateY(-14px); } }
.hint-text {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%); white-space: nowrap;
  background: var(--ink); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 20px;
}
.closing {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 45;
  font-size: 90px; font-weight: 700; color: #fff; -webkit-text-stroke: 4px var(--pink-d); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--pink-d); animation: popIn .5s cubic-bezier(.3,1.6,.5,1); white-space: nowrap;
}

/* ---------- Summary / special order ---------- */
.sum-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 680px; }
.sum-msg { font-size: 32px; color: var(--pink-d); }
.sum-stats { display: flex; justify-content: center; gap: 18px; margin: 18px 0 6px; }
.sum-stats div { background: var(--cream); border-radius: 22px; padding: 12px 20px; min-width: 170px; display: flex; flex-direction: column; }
.sum-stats b { font-size: 44px; }
.sum-stats span { font-size: 18px; font-weight: 500; }
.unlock { display: flex; align-items: center; gap: 16px; justify-content: center; margin: 16px auto 4px; background: #fff6d6; border-radius: 22px; padding: 10px 24px; width: fit-content; font-size: 24px; text-align: left; }
.unlock-art { width: 90px; height: 90px; animation: wobble 2s ease-in-out infinite; }
.sum-card .big-btn { margin-top: 18px; }
.special-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; }
.ring { font-size: 70px; animation: shake .6s infinite; display: inline-block; }
.sp-text { font-size: 28px; font-weight: 500; }
.sp-wants { display: flex; justify-content: center; gap: 18px; margin: 10px 0 20px; }
.sp-wants > div { background: var(--cream); border-radius: 22px; padding: 14px; width: 170px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 22px; }
.sp-icon { width: 80px; height: 80px; }
.oc-swatch { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--c); border: 4px solid #fff; box-shadow: 0 0 0 3px #e3d0bf; }
.oc-swatch.big { width: 80px; height: 80px; }
.special-card .mid-btn { display: flex; margin: 6px auto 0; }

/* ---------- Cake studio ---------- */
.studio { background: linear-gradient(#fff3f7, #ffe3ec); }
.studio-top { position: absolute; left: 0; right: 0; top: 0; height: 110px; display: flex; align-items: center; padding: 0 24px 0 110px; gap: 24px; }
.studio .back-btn { top: 22px; }
.studio-top h1 { font-size: 44px; color: var(--pink-d); white-space: nowrap; }
.studio-sub { font-size: 24px; opacity: .7; }
.order-card { margin-left: auto; background: #fff; border-radius: 22px; padding: 8px 18px; box-shadow: 0 5px 0 #f0c0d0; }
.oc-title { font-size: 20px; }
.oc-rows { display: flex; gap: 14px; margin-top: 4px; }
.oc-row { display: flex; align-items: center; gap: 6px; font-size: 20px; padding: 2px 10px 2px 4px; border-radius: 999px; background: #f6efe8; position: relative; }
.oc-row.ok { background: #d8f5dd; }
.oc-row.ok::after { content: '\2713'; position: absolute; right: -8px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: var(--green); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.oc-icon { width: 40px; height: 40px; }
.studio-left { position: absolute; left: 24px; top: 120px; bottom: 24px; width: 470px; background: #fff; border-radius: 30px; box-shadow: 0 8px 0 #f0c0d0; padding: 16px; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 6px; }
.tab { flex: 1; padding: 12px 0; border-radius: 16px; background: #f6efe8; font-size: 19px; font-weight: 700; }
.tab.on { background: var(--pink); color: #fff; }
.tab-body { flex: 1; overflow-y: auto; padding: 12px 4px; }
.opt-title { font-size: 22px; margin: 6px 0 10px; }
.opt-row { display: flex; gap: 12px; margin-bottom: 14px; }
.opt { flex: 1; background: #f6efe8; border-radius: 20px; padding: 10px; border: 4px solid transparent; display: flex; flex-direction: column; align-items: center; font-size: 22px; }
.opt svg { width: 80px; height: 64px; }
.opt.on { border-color: var(--pink); background: #fff0f5; }
.opt.wide { width: 100%; margin-bottom: 12px; padding: 16px; font-size: 26px; }
.swatches { display: flex; flex-wrap: wrap; gap: 18px; padding: 8px; }
.palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pal { aspect-ratio: 1; border-radius: 18px; background: #f6efe8; padding: 8px; border: 4px solid transparent; touch-action: none; }
.pal.on { border-color: var(--pink); background: #fff0f5; }
.studio-tools { display: flex; gap: 12px; justify-content: center; padding-top: 10px; }
.studio-cake { position: absolute; left: 510px; top: 110px; right: 20px; bottom: 100px; display: flex; align-items: center; justify-content: center; }
.cake-holder { width: 590px; height: 590px; touch-action: none; }
.cake-holder svg { width: 100%; height: 100%; overflow: visible; }
.cake-holder .placed { cursor: grab; }
.tool-tip { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 8px 20px; border-radius: 999px; font-size: 22px; opacity: 0; transition: opacity .2s; }
.tool-tip.show { opacity: 1; }
.studio .finish { position: absolute; right: 30px; bottom: 18px; }
.drag-ghost { position: fixed; width: 90px; height: 90px; transform: translate(-50%, -50%); pointer-events: none; z-index: 100; }
.cake-done { display: flex; align-items: center; gap: 20px; width: 900px; }
.done-cake { width: 420px; height: 420px; flex: none; }
.done-side { flex: 1; }
.done-side h2 { font-size: 36px; }
.done-side p { font-size: 26px; }
.done-checks { display: flex; flex-direction: column; gap: 6px; font-size: 22px; margin: 8px 0; }
.done-checks div { background: #f6efe8; border-radius: 999px; padding: 6px; opacity: .6; }
.done-checks div.ok { background: #d8f5dd; opacity: 1; }
.done-checks div.ok::before { content: '\2713  '; color: var(--green-d); }
.reward { font-size: 40px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Shop ---------- */
.page-top { position: absolute; left: 0; right: 0; top: 0; height: 104px; display: flex; align-items: center; justify-content: center; }
.page-top h1 { font-size: 54px; color: var(--pink-d); }
.page-top .coins-box, .page-top .count { position: absolute; right: 28px; top: 22px; }
.page-top .count { font-size: 26px; background: #fff; padding: 10px 20px; border-radius: 999px; }
.shop-grid { position: absolute; left: 30px; right: 30px; top: 110px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.shop-card { background: #fff; border-radius: 24px; padding: 12px; text-align: center; box-shadow: 0 6px 0 #f0c0d0; display: flex; flex-direction: column; align-items: center; height: 262px; }
.shop-icon { width: 96px; height: 96px; }
.shop-name { font-size: 22px; font-weight: 700; margin-top: 4px; }
.shop-desc { font-size: 15px; font-weight: 500; opacity: .75; flex: 1; line-height: 1.15; margin-top: 2px; }
.buy { background: var(--gold); border-radius: 999px; padding: 8px 18px; font-size: 22px; font-weight: 700; box-shadow: 0 4px 0 #c48a0e; min-width: 110px; }
.buy:active { transform: translateY(3px); box-shadow: 0 1px 0 #c48a0e; }
.buy.poor { background: #eee3d8; box-shadow: 0 4px 0 #d6c3b2; opacity: .8; }
.buy.done { background: var(--green); color: #fff; box-shadow: 0 4px 0 var(--green-d); }
.shop-card.locked { opacity: .55; }
.shop-card.owned { background: #f2fbf3; }
.theme-row { position: absolute; left: 30px; right: 30px; bottom: 26px; height: 96px; background: #fff; border-radius: 24px; display: flex; align-items: center; gap: 16px; padding: 0 20px; box-shadow: 0 6px 0 #f0c0d0; }
.theme-title { font-size: 24px; margin-right: 8px; }
.theme-btn { position: relative; width: 120px; height: 70px; border-radius: 16px; overflow: hidden; border: 4px solid transparent; }
.theme-btn.on { border-color: var(--ink); }
.theme-stripes { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--c) 0 20px, #fff 20px 40px); }
.theme-price { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); background: rgba(255,255,255,.95); border-radius: 999px; padding: 0 10px; font-size: 18px; white-space: nowrap; }

/* ---------- Gallery ---------- */
.cake-grid { position: absolute; left: 30px; right: 30px; top: 110px; bottom: 20px; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-content: start; padding: 4px 4px 20px; }
.cake-thumb { position: relative; aspect-ratio: 1; background: #fff; border-radius: 26px; box-shadow: 0 6px 0 #f0c0d0; padding: 10px; }
.cake-thumb svg { width: 100%; height: 100%; }
.cake-thumb .for { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 16px; background: #fff0f5; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.empty-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; gap: 20px; }
.cake-view { width: 640px; }
.view-cake { width: 520px; height: 520px; margin: 0 auto; }
.view-cake svg { width: 100%; height: 100%; }
.view-btns { display: flex; justify-content: center; align-items: center; gap: 10px; }