/* Maple's Bakehouse (bakehouse.js): a striped awning over the counter, a chalkboard special, the menu and the tables. */
#cafe-screen { --cafe-brown: #6b4128; --cafe-cream: #fff8ec; --cafe-butter: #f6d77a; --cafe-orange: #ef8a3a; }
.cafe-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }

/* The counter: Maple under an orange-and-cream awning. */
.cafe-counter { position: relative; padding-top: 30px; }
.cafe-counter::before {
  content: '';
  position: absolute;
  inset: 0 -4px auto;
  height: 40px;
  z-index: 1;
  border: 3px solid #b8612a;
  border-radius: 14px 14px 6px 6px;
  background: repeating-linear-gradient(90deg, var(--cafe-orange) 0 26px, #fff4e2 26px 52px);
  box-shadow: 0 4px 0 #a5521f;
  -webkit-mask: radial-gradient(14px 10px at 13px 100%, transparent 98%, #000) 0 0 / 26px 100%;
          mask: radial-gradient(14px 10px at 13px 100%, transparent 98%, #000) 0 0 / 26px 100%;
}
.cafe-counter .friend-card { height: 100%; border-color: #d9b48b; background: linear-gradient(var(--cafe-cream) 0 78%, #f3e2c4 78%); box-shadow: 0 5px 0 #caa57a; }
.cafe-counter .friend-stage { height: 196px; background: linear-gradient(#fbe7cf 0 64%, #c98b5a 64% 70%, #a96a42 70%); }
.cafe-counter .friend-stage::after {
  /* A glass display case of cakes in front of Maple. */
  content: '🥐 🧁 🍩 🥧';
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 2;
  padding: 7px 14px 5px;
  transform: translateX(-50%);
  border: 3px solid #8a5634;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(#e6f4f6cc, #cfe7ebcc);
  box-shadow: inset 0 -6px 0 #f3e2c4, 0 3px 0 #6b4128;
  font-size: 19px;
  letter-spacing: 3px;
  white-space: nowrap;
}
.cafe-counter .friend-stage .avatar { bottom: 26px; }

/* Today's special on a chalkboard. */
.chalkboard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 22px 18px;
  border: 10px solid #9a6a42;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 20%, #3f6a52, #2b4d3b 70%);
  box-shadow: inset 0 0 0 2px #7a4f2e, inset 0 0 30px #0000004d, 0 6px 0 #6b4128, 0 14px 24px #3a2a2033;
  color: #f4f1e4;
  text-align: center;
}
.chalkboard .eyebrow { color: #f6d77a; letter-spacing: 3px; }
.chalkboard h3 { margin: 0; color: #fffdf3; font-size: 26px; text-shadow: 0 0 1px #fff; }
.chalkboard p { margin: 0; color: #dfe9df; font-size: 14px; }
.chalk-art { font-size: 54px; line-height: 1.1; filter: drop-shadow(0 3px 0 #1d3a2b); }
.chalk-buff { color: #f6d77a !important; font-weight: 800; }
.chalk-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: auto; padding-top: 10px; }
.chalk-foot .price { color: #fff3cf; font: 900 20px Nunito, system-ui, sans-serif; display: inline-flex; align-items: center; gap: 4px; }
.chalk-foot .price s { color: #b9c9bb; font-size: 15px; }
.chalk-foot .text-button { background: #ffffff1f; color: #fff3cf; }
.chalk-foot .text-button:hover { background: #ffffff33; }
.chalk-note { color: #b9cdbd; font: italic 12px Georgia, serif; }

.cafe-heading { margin: 28px 0 12px; }
.cafe-heading h3 { margin: 2px 0 4px; color: var(--cafe-brown); }
.cafe-heading p { margin: 0; font-size: 14px; }

/* The menu: each bake on its plate. */
.cafe-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cafe-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 8px 12px;
  padding: 14px;
  border: 3px solid #ecd8ba;
  border-radius: 18px;
  background: var(--cafe-cream);
  box-shadow: 0 4px 0 #e6d3b5;
}
.cafe-item-art { display: grid; place-items: center; width: 64px; height: 64px; border: 3px solid #f0dfc4; border-radius: 50%; background: radial-gradient(circle, #fff 0 55%, #f6ecdb 56%); font-size: 34px; }
.cafe-item-copy h4 { margin: 2px 0 2px; color: var(--cafe-brown); font: 900 17px/1.2 Nunito, system-ui, sans-serif; }
.cafe-item-copy p { margin: 0 0 6px; color: #7d6a58; font-size: 13px; line-height: 1.4; }
.cafe-buff, .cafe-healthy { display: inline-block; margin: 0 6px 4px 0; padding: 2px 8px; border-radius: 99px; background: #fff0c9; color: #8a5a1f; font: 800 12px Nunito, system-ui, sans-serif; cursor: help; }
.cafe-healthy { background: #e3f2dc; color: #3f7d4f; cursor: default; }
.cafe-item-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cafe-item-foot .price { display: inline-flex; align-items: center; gap: 4px; color: #876827; font: 900 17px Nunito, system-ui, sans-serif; }
.cafe-item-foot .price s { color: #b8a58a; font-size: 13px; }
.cafe-order { display: flex; gap: 6px; }
.cafe-order .button, .cafe-order .text-button { padding: 8px 12px; border-radius: 11px; font-size: 13px; white-space: nowrap; }
.cafe-item.is-locked { border-style: dashed; background: #fbf5ea; box-shadow: none; }
.cafe-item.is-locked .cafe-item-art { filter: grayscale(1) brightness(.35); opacity: .35; }
.cafe-item.is-locked h4 { color: #a08c76; }

/* The tables: townsfolk who are in right now. */
.cafe-guests { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cafe-guests .friend-stage { background: linear-gradient(#fdebd6 0 66%, #e7c79f 66%); }
.cafe-guests .friend-stage::before { content: '☕'; position: absolute; right: 18px; bottom: 16px; z-index: 2; font-size: 26px; }
.cafe-schedule { margin: 14px 0 0; color: #8a7663; font-size: 12.5px; font-weight: 700; line-height: 1.5; text-align: center; }

@media (max-width: 760px) {
  .cafe-top { grid-template-columns: 1fr; }
  .cafe-menu { grid-template-columns: 1fr; }
}