.dialog-surface:has(.bakery) {
  width: min(690px, calc(100% - 18px));
}

.bakery {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff5d9;
  border-radius: 19px;
  border: 1px solid #ad895880;
  background: linear-gradient(180deg,#1d251d33,#231c13ed 78%), url("./jobs/bakery/background.webp") center / cover;
}

.bakery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 47px;
  padding: 7px 12px 0;
}

.bakery-header > strong {
  padding: 6px 13px;
  border-radius: 100px;
  background: #191d16db;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  letter-spacing: .04em;
}
.bakery-header > span { padding: 5px 8px; border-radius: 8px; background: #211c13de; font-weight: 750; }

.bakery .bakery-sound {
  width: 35px;
  height: 35px;
  background: #201e18e8;
  color: #fff5d9;
  border-color: #f6cc8280;
}

.bakery-menu, .bakery-play, .bakery-summary {
  display: grid;
  gap: 9px;
  padding: 10px clamp(10px, 3vw, 22px) 16px;
}

.bakery-intro {
  display: grid;
  align-content: end;
  min-height: clamp(138px, 27vw, 213px);
  padding: 12px;
  border-radius: 12px;
  background: linear-gradient(0deg,#21170eda,transparent 76%);
}

.bakery h3 { margin: 0; font-size: clamp(19px, 5vw, 29px); line-height: 1.05; }
.bakery p { margin: 0; }
.bakery-intro p { margin-top: 6px; color: #f5ddb5; }
.jobs-carousel { position: relative; overflow: hidden; }
.jobs-carousel .bakery-intro { padding-inline: clamp(35px,9vw,45px); }
.jobs-arrow {
  position: absolute; top: calc(10px + clamp(69px,13.5vw,106px)); translate: 0 -50%;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 21px;
  background: #211c14eb; color: #fff0ce; border-color: #f6cc82a0;
}
.jobs-arrow:disabled { visibility: hidden; }
.jobs-prev { left: 11px; }
.jobs-next { right: 11px; }
.jobs-dots { display: flex; justify-content: center; padding-bottom: 10px; }
.jobs-dots button {
  display: grid; place-items: center; width: 32px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
}
.jobs-dots button::before { content: ""; width: 9px; height: 9px; border: 1px solid #f3c880; border-radius: 50%; }
.jobs-dots button[aria-pressed=true]::before { background: #f3c880; box-shadow: 0 0 9px #f3c88077; }
.bakery .btn.primary { color: #2d2214; background: #f3c880; border-color: #ffdc9e; font-weight: 800; }
.bakery .btn.primary:disabled { opacity: .48; }
.bakery-break, .bakery-earned { text-align: center; color: #ffe2ad; padding: 5px; }

.bakery-mastery {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #a3bd733f;
  border-radius: 11px;
  background: #202b1eec;
}
.bakery-mastery > div { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.bakery-mastery small { color: #dcf0bb; white-space: nowrap; font-size: 11px; }
.bakery progress { appearance: none; width: 100%; height: 8px; border: 0; border-radius: 99px; background: #453e29; }
.bakery progress::-webkit-progress-bar { background: #453e29; border-radius: 99px; }
.bakery progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg,#87a44b,#cfe98f); transition: width .25s; }
.bakery progress::-moz-progress-bar { border-radius: 99px; background: #b6d777; }

.bakery-recipes, .bakery-drops { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bakery-recipes li, .bakery-drops li {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 6px 8px; border-radius: 8px; background: #262116e8;
}
.bakery-recipes li .bakery-sprite { width: 30px; flex: 0 0 30px; }
.bakery-recipes li span:nth-child(2) { flex: 1; }
.bakery-recipes li small { white-space: nowrap; color: #ffe1a3; }
.bakery-sprite {
  display: block;
  width: 44px;
  aspect-ratio: 1;
  background-image: url("./jobs/bakery/sprites.webp");
  background-size: 400% 300%;
  background-position: var(--sprite-x) var(--sprite-y);
  background-repeat: no-repeat;
  filter: drop-shadow(0 3px 4px #150b0b60);
}

.bakery-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.bakery-totals > div {
  display: grid; gap: 4px; text-align: center;
  padding: 7px 3px; border-radius: 10px; background: #22261ee8;
  border: 1px solid #e4cc9a39;
}
.bakery-totals small { font-size: 11px; color: #f1dec1; }
.bakery-totals strong { color: #ffe1a3; font-variant-numeric: tabular-nums; }
.bakery-order { padding: 9px 11px; border-radius: 10px; background: #2c2217ed; }
.bakery-order > span { color: #d4eab2; font-size: 12px; }
.bakery-order h3 { margin-top: 4px; }
.bakery-order small { display: block; color: #fbd797; margin-top: 5px; }
.bakery-station {
  display: grid; gap: 9px; justify-items: center; text-align: center;
  padding: 9px; border-radius: 13px; background: #302619eb;
  border: 1px solid #c89f5e59;
}
.bakery-station p { font-size: 13px; color: #fbe5c0; }
.bakery-recipe { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bakery-recipe > span {
  display: flex; gap: 5px; align-items: center; padding: 4px 6px;
  border-radius: 7px; background: #4f3a25; font-size: 12px;
}
.bakery-recipe > .complete { background: #42603a; }
.bakery-bowl .bakery-sprite { width: 75px; }
.bakery-ingredients { width: 100%; display: grid; grid-template-columns: repeat(auto-fit,minmax(62px,1fr)); gap: 5px; }
.bakery-ingredients button {
  display: grid; justify-items: center; align-content: center; gap: 2px;
  min-height: 62px; padding: 4px 1px; border-radius: 9px;
  color: #fff4db; border: 1px solid #9b794e; background: #54402a;
  font-size: 11px; line-height: 1.15;
}
.bakery-ingredients button:active { background: #715532; }
.bakery-ingredients .bakery-sprite { width: 34px; }
.bakery-toss { position: absolute; pointer-events: none; z-index: 3; }
.bakery-mix {
  position: relative; display: grid; place-items: center;
  width: clamp(154px, 45vw, 198px); aspect-ratio: 1; touch-action: none;
  user-select: none; cursor: grab; border-radius: 50%;
  background: radial-gradient(#70583b7a 45%,#5f7a4c45 47%,transparent 72%);
}
.bakery-mix .bakery-sprite { width: 68%; pointer-events: none; }
.bakery-orbit {
  position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed #e5e5a6a6;
  color: #f7edb0; text-align: center; font-size: 22px; line-height: 1; pointer-events: none;
}
.bakery-motion-dot {
  position: absolute; display: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fce5a0; box-shadow: 0 0 16px #fdd18d; transform: translate(-50%,-50%); pointer-events: none;
}
.bakery-mix.mixing .bakery-motion-dot { display: block; }
.bakery-mix.mixing .bakery-sprite { animation: bakery-knead .7s ease-in-out infinite alternate; }
.bakery-mix-progress { width: 100%; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.bakery-mix-progress strong { min-width: 42px; }
.bakery-oven .bakery-sprite { width: 111px; }
.bakery-oven.is-hot .bakery-sprite { animation: bakery-oven 1.4s ease-in-out infinite alternate; }
.bakery-oven .btn { width: 100%; }
.bakery-bake-track {
  width: 100%; height: 17px; position: relative; border-radius: 9px;
  border: 1px solid #e3b87d; background: linear-gradient(90deg,#6c4b33,#99724a 50%,#6c4b33);
}
.bakery-bake-zone { position: absolute; inset-block: 0; left: var(--ideal-left); width: var(--ideal-width); background: #a6ce72; }
.bakery-bake-pointer {
  position: absolute; inset-block: -4px; width: 4px; border-radius: 4px; left: 0;
  transform: translateX(-50%); background: #fff3cb; box-shadow: 0 0 8px #fff1bd;
}
.bakery-reveal { display: grid; justify-items: center; gap: 6px; text-align: center; }
.bakery-reveal .bakery-sprite { width: 101px; animation: bakery-rise .48s cubic-bezier(.2,.75,.3,1.3) both; }
.bakery-reveal.quality-perfect { background: radial-gradient(ellipse at 50% 32%,#8c7136,#382c1c 78%); }
.bakery-reveal.quality-perfect .bakery-sprite { filter: drop-shadow(0 0 17px #f4ce76cf); }
.bakery-reveal.quality-burnt .bakery-sprite { filter: brightness(.72) saturate(.75); }
.bakery-reveal > strong { font-size: 22px; color: #ffe2a0; }
.bakery-limit { padding: 22px 10px; }
.bakery-limit span { color: #f0d9b1; }
@keyframes bakery-knead { from { transform: rotate(-5deg) scale(.98); } to { transform: rotate(5deg) scale(1.04); } }
@keyframes bakery-oven { from { filter: drop-shadow(0 0 4px #ed993c70); } to { filter: drop-shadow(0 0 18px #f6a54fbd); } }
@keyframes bakery-rise { from { opacity: 0; transform: translateY(13px) scale(.74); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bakery .bakery-sprite { animation: none !important; }
}