[hidden] {
  display:none!important}

:root {
  font-family:ui-rounded,"Arial Rounded MT Bold", "Trebuchet MS",sans-serif;
  color:#354b40;
  background:#f5efe2;
  font-synthesis:none}

* {
  box-sizing:border-box}
body {
  margin:0}
button {
  font:inherit;
  color:inherit}
button:focus-visible {
  outline:4px solid #246e86;
  outline-offset:5px}
.game-shell {
  max-width:1220px;
  margin:auto;
  padding:24px 28px}
.topbar {
  margin-bottom:24px}
.brand {
  display:flex;
  align-items:center;
  gap:14px}
.sun {
  color:#d78e24;
  font-size:58px}
.eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 5px}
h1 {
  font-size:clamp(24px,3vw,38px);
  letter-spacing:-1.5px;
  margin:0}
h2 {
  margin:0;
  font-size:26px}
.score-card {
  background:#e5ead8;
  border:1px solid #cbd6ba;
  border-radius:18px;
  display:grid;
  grid-template-columns:auto auto;
  column-gap:12px;
  padding:12px 22px;
  align-items:center}
.score-card>span:first-child {
  color:#bb7a17;
  grid-row:span 2;
  font-size:36px}
.score-card strong {
  font-size:30px;
  line-height:1.1;
  font-variant-numeric:tabular-nums}
.score-card>span:last-child {
  font-size:12px}
.restaurant {
  position:relative;
  overflow:hidden;
  border:2px solid #d8ccaf;
  border-radius:24px 24px 0 0;
  background:#f7e5c7}
.awning {
  height:42px;
  background:repeating-linear-gradient(90deg,#ce6f55 0 48px,#fff2d9 48px 96px);
  border-bottom:6px solid #c5815b;
  border-radius:0 0 12px 12px}
.shop-heading {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 30px;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px}
.open-sign {
  background:#476e59;
  color:#fff8e6;
  padding:9px 14px;
  border-radius:7px;
  transform:rotate(3deg)}
.welcome {
  text-align:center;
  position:relative}
.welcome h2 {
  font-size:29px}
.welcome p {
  font-size:14px;
  margin:8px 0 20px}
.wall-art {
  position:absolute;
  inset:107px 40px auto;
  display:flex;
  justify-content:space-between;
  pointer-events:none}
.wall-art span {
  display:grid;
  place-items:center;
  width:95px;
  height:105px;
  background:#fffae8;
  border:8px solid #d5a773;
  box-shadow:0 3px 0 #d1bb95;
  color:#dba23d;
  font-size:60px;
  transform:rotate(-5deg)}
.wall-art span:last-child {
  color:#6e8f64;
  transform:rotate(5deg)}
.customers {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  max-width:810px;
  margin:auto;
  padding:0 24px}
.customer {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:none;
  border:0;
  padding:4px 10px 0;
  cursor:pointer;
  border-radius:24px;
  min-width:0;
  touch-action:manipulation}
.bubble {
  position:relative;
  background:#fffdf5;
  border:3px solid #ddd0b5;
  border-radius:27px;
  padding:9px 18px;
  width:154px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  box-shadow:0 5px 0 #c8a98625;
  transition:background .15s,border-color .15s}
.bubble:after {
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#fffdf5;
  border:2px solid #ddd0b5;
  bottom:-22px;
  left:28px}
.bubble:before {
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fffdf5;
  bottom:-35px;
  left:44px}
.bubble small {
  font-size:11px;
  color:#647565}
.bubble strong {
  font-size:15px}
.food-art {
  width:72px;
  height:64px;
  overflow:visible;
  pointer-events:none}
.person {
  width:170px;
  max-width:100%;
  height:164px;
  margin-top:22px;
  overflow:visible;
  pointer-events:none}
.customer.target .bubble {
  border-color:#59895c;
  background:#edf6dc;
  box-shadow:0 0 0 5px #7b9e6c35}
.customer.served .bubble {
  background:#e8f2d7;
  border-color:#8da975}
.thanks {
  height:64px;
  display:grid;
  place-items:center;
  color:#709456;
  font-size:43px}
.counter-edge {
  height:22px;
  background:#d5a16d;
  border-top:5px solid #e9bc87;
  box-shadow:inset 0 -5px #b98150;
  position:relative;
  z-index:2}
.kitchen {
  background:#fffaf0;
  border:2px solid #d8ccaf;
  border-top:0;
  border-radius:0 0 24px 24px;
  padding:22px 30px 15px}
.kitchen-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:19px}
.instruction {
  font-size:14px;
  color:#6e725f}
.foods {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px}
.food {
  border:2px solid #dfd9c9;
  border-bottom-width:5px;
  border-radius:18px;
  background:#f3f0e5;
  padding:9px 4px 11px;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:5px;
  font-weight:bold;
  cursor:grab;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none}
.food .plate {
  display:grid;
  place-items:center;
  border-radius:50%;
  width:95px;
  max-width:100%;
  height:69px;
  background:#fffdf7;
  box-shadow:0 3px 0 #dcd7c8}
.food:hover {
  background:#edeeda}
.food[aria-pressed=true] {
  border-color:#577c5e;
  background:#e2ecd4}
.food:active {
  cursor:grabbing}
.drag-ghost {
  position:fixed;
  z-index:20;
  pointer-events:none;
  width:90px;
  height:85px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff7e6ed;
  box-shadow:0 10px 25px #503d3830;
  transform:translate(-50%,-50%)}
#status {
  text-align:center;
  min-height:20px;
  font-size:15px;
  margin:20px 0 0;
  color:#53664b}
footer {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:#787968;
  margin-top:17px}
.customer.arriving .person {
  animation:arrive .5s ease-out}
@keyframes arrive {
  from {
  opacity:0;
  transform:translateY(20px)}
to {
  opacity:1;
  transform:translateY(0)}
}
@media(max-width:700px) {
  .game-shell {
  padding:14px 12px}
.brand {
  gap:8px}
.sun {
  font-size:38px}
.eyebrow {
  font-size:9px;
  letter-spacing:1px}
.score-card {
  display:flex;
  justify-content:center;
  padding:7px 12px}
.score-card strong {
  font-size:25px}
.score-card>span:first-child {
  font-size:25px}
.topbar {
  margin-bottom:15px}
.wall-art {
  display:none}
.shop-heading {
  padding:14px;
  font-size:8px;
  letter-spacing:1px}
.welcome h2 {
  font-size:23px}
.welcome p {
  font-size:12px}
.customers {
  gap:3px;
  padding:0 5px}
.customer {
  padding:4px 3px 0}
.bubble {
  padding:7px 4px;
  border-radius:19px}
.bubble strong {
  font-size:12px}
.person {
  height:130px}
.kitchen {
  padding:17px 12px}
.kitchen-heading {
  align-items:start}
.kitchen-heading h2 {
  font-size:22px}
.instruction {
  font-size:11px;
  max-width:130px;
  text-align:right}
.foods {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px}
.food {
  padding:6px 3px;
  font-size:13px}
footer {
  font-size:10px}
#status {
  font-size:13px}
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
  animation:none!important;
  transition:none!important}
}