/* Two-slide, no-scroll meals and table-setting activity. */
.meals-screen {
  position: fixed;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(70px, calc(env(safe-area-inset-top) + 60px)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  color: #493766;
  background: radial-gradient(circle at 13% 14%, rgba(255,255,255,.82), transparent 29%), radial-gradient(circle at 88% 88%, rgba(255,255,255,.68), transparent 31%), linear-gradient(140deg, #fff2b5, #ffe0eb 53%, #c9f2ed);
}
.meals-topbar {
  position: absolute;
  z-index: 5;
  inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) auto max(10px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.meals-exit, .meals-slide-count { pointer-events: auto; }
.meals-exit {
  min-height: 44px;
  padding: 3px clamp(10px, 1.8vw, 18px);
  border-width: 3px;
  border-radius: 16px;
  font-size: clamp(14px, 2vh, 20px);
  box-shadow: 0 5px 0 var(--s), 0 8px 13px rgba(0,0,0,.14);
}
.meals-slide-count {
  min-width: 50px;
  padding: 5px 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #564174;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 9px rgba(40,35,90,.12);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}
.meals-slider-viewport { flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden; touch-action: pan-y; outline: none; }
.meals-slider-viewport:focus-visible { outline: 4px solid #7052a3; outline-offset: -5px; border-radius: 20px; }
.meals-slider-viewport.is-dragging { cursor: grabbing; touch-action: none; }
.meals-slider-track {
  width: 200%;
  height: 100%;
  min-height: 0;
  display: flex;
  transition: transform .48s cubic-bezier(.2,.82,.19,1);
  will-change: transform;
}
.meals-slider-viewport.is-dragging .meals-slider-track { transition: none; }
.meals-slide {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, .65vh, 8px);
  overflow: hidden;
  padding: 0 clamp(2px, .7vw, 9px);
}
.meals-heading { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.meals-title {
  max-width: 96vw;
  margin: 0;
  color: #563681;
  font-size: clamp(24px, 4.2vh, 43px);
  font-weight: 800;
  line-height: .98;
  text-align: center;
  text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(43,34,80,.14);
}
.meals-subtitle {
  margin: 0;
  color: #694a8e;
  font-size: clamp(15px, 2.35vh, 24px);
  font-weight: 800;
  line-height: 1.05;
}
.meals-command, .meals-progress, .table-progress, .table-feedback {
  flex: 0 0 auto;
  max-width: min(96vw, 920px);
  box-sizing: border-box;
  margin: 0;
  padding: 3px clamp(10px, 1.7vw, 17px);
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 999px;
  color: #514173;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 9px rgba(40,45,90,.1);
  font-size: clamp(13px, 1.9vh, 19px);
  font-weight: 800;
  line-height: 1.08;
  text-align: center;
}
.meals-command { color: #44305f; font-size: clamp(14px, 2.05vh, 21px); }
.meals-progress, .table-progress { color: #654a85; font-size: clamp(12px, 1.7vh, 17px); }
.karaoke-token { border-radius: .25em; transition: color .12s, background .12s, box-shadow .12s; }
.karaoke-token.is-karaoke-active { color: #523800; background: #ffe58c; box-shadow: 0 2px 0 #e5bd4f; }
.meal-round-layout {
  flex: 1 1 0;
  min-height: 0;
  width: min(780px, 98%);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
}
.meal-clock-card {
  justify-self: center;
  min-width: 0;
  height: min(100%, 35vh);
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  padding: clamp(4px, 1vh, 10px);
  border: 4px solid #fff;
  border-radius: 25px;
  background: linear-gradient(145deg, rgba(255,255,255,.91), rgba(255,251,233,.92));
  box-shadow: 0 7px 0 rgba(101,81,143,.12), 0 12px 22px rgba(45,37,77,.13);
}
.meal-clock-caption { flex: 0 0 auto; color: #77618f; font-size: clamp(9px, 1.25vh, 13px); font-weight: 900; letter-spacing: .08em; }
.meal-clock-face { display: block; flex: 1 1 0; min-height: 0; width: 100%; max-width: 230px; overflow: visible; filter: drop-shadow(0 2px 2px rgba(55,40,84,.12)); }
.meal-clock-hour-hand, .meal-clock-minute-hand { fill: none; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 100px; }
.meal-clock-hour-hand { stroke: #ef6581; stroke-width: 9; }
.meal-clock-minute-hand { stroke: #348fd2; stroke-width: 6; }
.meal-digital-time { flex: 0 0 auto; color: #49336a; font-size: clamp(20px, 3.6vh, 36px); font-weight: 900; line-height: 1; letter-spacing: .05em; }
.meal-drop-slot {
  position: relative;
  justify-self: stretch;
  min-width: 0;
  height: min(100%, 29vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .7vh, 8px);
  box-sizing: border-box;
  padding: 8px;
  border: 4px dashed #ad8ec9;
  border-radius: 26px;
  color: #5c4480;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.48), 0 6px 15px rgba(57,42,88,.1);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .16s, border-color .16s, background .16s;
}
.meal-drop-slot:hover { transform: translateY(-2px); border-color: #8861b3; background: rgba(255,255,255,.9); }
.meal-slot-icon { font-size: clamp(34px, 7vh, 70px); line-height: 1; }
.meal-slot-label { font-size: clamp(20px, 3.2vh, 31px); font-weight: 900; line-height: 1.02; }
.meal-slot-hint { font-size: clamp(11px, 1.55vh, 15px); font-weight: 700; line-height: 1.1; }
.meal-slot-thumb { position: absolute; top: 4px; right: 5px; font-size: clamp(27px, 4.4vh, 43px); filter: drop-shadow(0 2px 2px rgba(70,50,70,.12)); animation: meal-thumb-pop .45s cubic-bezier(.2,.8,.25,1) both; }
.meal-drop-slot.is-correct { border-style: solid; border-color: #53bd91; background: rgba(229,255,238,.92); }
.meal-drop-slot.is-wrong { border-color: #ed6a7b; background: #fff0f1; animation: meal-shake .22s ease-in-out 2; }
@keyframes meal-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes meal-thumb-pop { from { opacity: 0; transform: scale(.4) rotate(-16deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.meal-choice-bank {
  flex: 0 0 auto;
  width: min(760px, 99%);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 1vw, 11px);
}
.meal-choice {
  position: relative;
  min-width: 0;
  min-height: clamp(56px, 9.1vh, 86px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(2px, .6vw, 7px);
  box-sizing: border-box;
  padding: clamp(4px, .8vh, 8px) clamp(4px, .8vw, 9px);
  border: 3px solid #fff;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--meal-color, #f18b7b), white 13%), var(--meal-color, #f18b7b));
  box-shadow: 0 5px 0 var(--meal-shade, #be5e62), 0 8px 14px rgba(40,35,80,.13);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform .14s, filter .14s, opacity .14s;
}
.meal-choice:nth-child(1) { --meal-color: #ff8f72; --meal-shade: #c95753; }
.meal-choice:nth-child(2) { --meal-color: #f0b936; --meal-shade: #ba841a; }
.meal-choice:nth-child(3) { --meal-color: #52bfa0; --meal-shade: #27846f; }
.meal-choice:nth-child(4) { --meal-color: #8d70d6; --meal-shade: #6047a7; }
.meal-choice:hover:not(.is-sorted) { transform: translateY(-3px); filter: saturate(1.08); }
.meal-choice:focus-visible, .meal-note:focus-visible, .table-object:focus-visible, .table-target:focus-visible, .meals-slide-actions .btn:focus-visible, .meals-exit:focus-visible { outline: 4px solid #3a3a7a; outline-offset: 3px; }
.meal-choice.is-selected { outline: 4px solid #ffd166; outline-offset: 1px; transform: translateY(-3px); }
.meal-choice.is-sorted { opacity: .34; filter: grayscale(.55); pointer-events: none; }
.meal-choice.is-dragging, .table-object.is-dragging {
  position: fixed !important;
  z-index: 100010 !important;
  left: 0 !important;
  top: 0 !important;
  width: min(190px, 44vw);
  transform: translate3d(var(--drag-x), var(--drag-y), 0) translate(-50%, -50%) scale(1.08);
  box-shadow: 0 12px 24px rgba(35,24,58,.3);
  cursor: grabbing;
  transition: none;
  pointer-events: none;
}
.meal-choice-icon { font-size: clamp(23px, 4.2vh, 40px); line-height: 1; }
.meal-choice-name { min-width: 0; font-size: clamp(13px, 1.85vw, 22px); font-weight: 900; line-height: 1; text-align: center; }
.meal-note {
  flex: 0 0 auto;
  width: clamp(31px, 4.3vh, 42px);
  height: clamp(31px, 4.3vh, 42px);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #574671;
  background: linear-gradient(145deg, #fffbe5, #ffe69b);
  box-shadow: 0 2px 4px rgba(44,35,72,.16);
  font: 800 clamp(17px, 2.5vh, 24px)/1 'Baloo 2', sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .14s, filter .14s;
}
.meal-note:hover { transform: scale(1.1); filter: brightness(1.04); }
.meal-choice.is-singing .meal-note, .meal-course-card.is-singing .meal-note { animation: meal-note-sing .42s ease-in-out infinite alternate; }
@keyframes meal-note-sing { to { transform: translateY(-3px) rotate(10deg) scale(1.08); } }
.meal-course-row { flex: 0 0 auto; width: min(820px, 99%); display: flex; flex-direction: column; gap: 3px; }
.meal-course-heading { color: #6c5a82; font-size: clamp(10px, 1.3vh, 13px); font-weight: 900; text-align: center; }
.meal-course-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .85vw, 9px); }
.meal-course-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(2px, .55vw, 6px);
  box-sizing: border-box;
  padding: 3px clamp(3px, .6vw, 7px);
  border: 2px solid rgba(255,255,255,.95);
  border-radius: 14px;
  background: rgba(255,255,255,.79);
  box-shadow: 0 3px 8px rgba(55,40,84,.08);
}
.meal-course-icon { font-size: clamp(20px, 3vh, 30px); line-height: 1; }
.meal-course-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0; }
.meal-course-name { color: #564174; font-size: clamp(10px, 1.4vw, 15px); font-weight: 900; line-height: 1; text-align: center; }
.meal-course-copy small { color: #89799a; font-size: clamp(8px, 1.05vw, 11px); font-weight: 700; line-height: 1; }
.meal-course-note { width: clamp(25px, 3.4vh, 33px); height: clamp(25px, 3.4vh, 33px); font-size: clamp(14px, 2.1vh, 19px); }
.meals-slide-actions { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: clamp(38px, 5.8vh, 52px); }
.meals-slide-actions .btn { min-height: clamp(38px, 5.8vh, 52px); padding: 3px clamp(14px, 2.4vw, 24px); border-width: 3px; border-radius: 17px; font-size: clamp(15px, 2.1vh, 21px); box-shadow: 0 5px 0 var(--s), 0 8px 12px rgba(0,0,0,.13); }
.meal-repeat[hidden], .table-reset[hidden] { display: none !important; }

/* Table etiquette puzzle: objects begin scattered and move to exact, labeled drop zones. */
.table-slide { gap: clamp(3px, .55vh, 7px); }
.table-field {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-height: 0;
  width: min(1120px, 100%);
  align-self: center;
  overflow: hidden;
  box-sizing: border-box;
  border: clamp(4px, .65vw, 7px) solid #fff;
  border-radius: clamp(19px, 2.7vw, 31px);
  background: linear-gradient(145deg, #fbf7eb, #ecf6dd 70%, #d8f2e7);
  box-shadow: 0 9px 0 rgba(72,94,139,.12), 0 16px 28px rgba(65,51,99,.16);
}
.table-cloth { position: absolute; inset: 5% 6%; border: 2px solid rgba(255,255,255,.76); border-radius: 26px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 2px, transparent 2px 18px), rgba(255,255,255,.15); pointer-events: none; }
.table-plate {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 54%;
  width: min(48vw, 45vh, 365px);
  max-width: 52%;
  max-height: 82%;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 8px rgba(67,65,77,.2));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.table-targets, .table-objects, .table-sparks { position: absolute; inset: 0; }
.table-targets { z-index: 3; pointer-events: none; }
.table-target {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px dashed rgba(117,91,149,.56);
  border-radius: 15px;
  color: #705b87;
  background: rgba(255,255,255,.42);
  font: 900 clamp(8px, 1.15vh, 12px)/1 'Baloo 2', sans-serif;
  letter-spacing: .04em;
  opacity: .85;
  pointer-events: auto;
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s, transform .15s;
}
.table-target span { pointer-events: none; }
.table-target-left { left: 20%; top: 53%; width: 17%; height: 18%; }
.table-target-right { left: 62%; top: 50%; width: 14%; height: 17%; }
.table-target-right-next { left: 74%; top: 56%; width: 14%; height: 17%; }
.table-target-upper-glass { left: 56%; top: 7%; width: 17%; height: 20%; }
.table-target-upper-cup { left: 73%; top: 7%; width: 18%; height: 20%; }
.table-target-napkin-left { left: 2%; top: 70%; width: 20%; height: 20%; }
.table-target-plate { left: 50%; top: 54%; width: min(48vw, 45vh, 365px); max-width: 52%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.table-target.is-current-target { z-index: 1; border: 3px dashed #e1a12d; color: #614716; background: rgba(255,236,151,.56); opacity: 1; animation: table-target-pulse 1.2s ease-in-out infinite alternate; }
.table-field.is-table-dragging .table-target { opacity: .92; }
.table-field.is-table-dragging .table-target.is-current-target { background: rgba(255,222,105,.7); border-style: solid; }
@keyframes table-target-pulse { to { box-shadow: 0 0 0 5px rgba(255,209,102,.22); } }
.table-objects { z-index: 4; pointer-events: none; }
.table-object {
  position: absolute;
  width: clamp(62px, 9vw, 92px);
  min-height: clamp(50px, 8vh, 76px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  box-sizing: border-box;
  padding: 3px;
  border: 3px solid #fff;
  border-radius: 17px;
  color: #4d3d68;
  background: linear-gradient(145deg, #fff, #fff2d6);
  box-shadow: 0 5px 0 rgba(129,95,147,.26), 0 8px 14px rgba(43,35,71,.18);
  font-family: inherit;
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition: left .36s cubic-bezier(.2,.8,.25,1), top .36s cubic-bezier(.2,.8,.25,1), transform .14s, box-shadow .14s;
}
.table-object:hover:not(.is-placed) { transform: translate(-50%, -53%) scale(1.05); }
.table-object.is-selected { outline: 4px solid #ffd166; outline-offset: 2px; }
.table-object.is-placed { z-index: 5; cursor: default; box-shadow: 0 3px 0 rgba(129,95,147,.22), 0 5px 10px rgba(43,35,71,.13); }
.table-object.is-placed:hover { transform: translate(-50%, -50%); }
.table-object[aria-disabled="true"] { pointer-events: none; }
.table-object-art { display: grid; place-items: center; font-size: clamp(24px, 4.5vh, 42px); line-height: 1; }
.table-knife-art { display: block; width: clamp(45px, 6.2vw, 67px); height: auto; overflow: visible; }
.table-object-label { color: #594873; font-size: clamp(10px, 1.45vh, 15px); font-weight: 900; line-height: 1; }
.table-sparks { z-index: 6; overflow: hidden; pointer-events: none; }
.table-spark { position: absolute; left: 50%; top: 52%; color: var(--spark-color); font-size: clamp(16px, 2.5vh, 28px); line-height: 1; text-shadow: 0 0 10px currentColor; animation: table-spark-burst 1.1s cubic-bezier(.12,.72,.28,1) var(--spark-delay) both; }
@keyframes table-spark-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.08); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.45) rotate(240deg); } }
.table-award[hidden] { display: none !important; }
.table-award { position: absolute; inset: 12% 8%; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #553776; text-align: center; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(255,255,255,.92)); }
.table-award-thumb { font-size: clamp(54px, 10vh, 104px); line-height: .95; animation: meal-thumb-pop .48s cubic-bezier(.2,.8,.25,1) both; }
.table-award-copy { max-width: 90%; padding: 4px 12px; border: 2px solid #fff; border-radius: 999px; color: #593c75; background: rgba(255,255,255,.92); box-shadow: 0 4px 10px rgba(55,40,84,.13); font-size: clamp(13px, 2vh, 20px); font-weight: 900; line-height: 1.1; }
.table-feedback { min-height: 1.3em; font-size: clamp(12px, 1.7vh, 17px); }
.table-field.is-table-success { animation: table-success-flash .56s ease-out; }
.table-field.is-table-wrong .table-object:not(.is-placed) { animation: meal-shake .22s ease-in-out 2; }
@keyframes table-success-flash { 35% { box-shadow: 0 0 0 7px rgba(255,209,102,.6), 0 14px 30px rgba(40,35,90,.2); } }
.table-actions { min-height: clamp(35px, 5vh, 45px); }
.table-actions .btn { min-height: clamp(35px, 5vh, 45px); font-size: clamp(14px, 1.9vh, 19px); }

@media (max-width: 560px) {
  .meals-screen { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .meals-topbar { inset-inline: max(7px, env(safe-area-inset-left)); }
  .meals-exit { min-height: 39px; padding-inline: 9px; border-radius: 14px; font-size: 14px; }
  .meals-slide-count { padding: 4px 9px; font-size: 14px; }
  .meals-slide { gap: 3px; }
  .meals-title { font-size: clamp(22px, 6vw, 32px); }
  .meals-subtitle { font-size: clamp(14px, 3.8vw, 19px); }
  .meals-command { font-size: clamp(12px, 3.35vw, 16px); padding: 3px 8px; }
  .meals-progress, .table-progress { font-size: 12px; padding: 3px 8px; }
  .meal-round-layout { width: 100%; grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); gap: 6px; }
  .meal-clock-card { height: min(100%, 28vh); padding: 3px; border-width: 3px; border-radius: 17px; }
  .meal-clock-caption { font-size: 8px; }
  .meal-clock-face { width: 100%; }
  .meal-digital-time { font-size: clamp(18px, 5.2vw, 25px); }
  .meal-drop-slot { height: min(100%, 25vh); gap: 4px; padding: 5px; border-width: 3px; border-radius: 18px; }
  .meal-slot-icon { font-size: clamp(32px, 10vw, 47px); }
  .meal-slot-label { font-size: clamp(18px, 5.3vw, 25px); }
  .meal-slot-hint { font-size: clamp(10px, 2.8vw, 13px); }
  .meal-choice-bank { gap: 4px; }
  .meal-choice { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 1px 3px; min-height: clamp(52px, 8vh, 68px); padding: 3px; border-radius: 13px; }
  .meal-choice-icon { grid-column: 1 / -1; grid-row: 1; font-size: clamp(20px, 6vw, 30px); }
  .meal-choice-name { grid-column: 1; grid-row: 2; font-size: clamp(11px, 3.3vw, 15px); }
  .meal-note { grid-column: 2; grid-row: 2; width: 28px; height: 28px; font-size: 16px; }
  .meal-course-row { gap: 2px; }
  .meal-course-heading { font-size: 9px; }
  .meal-course-list { gap: 3px; }
  .meal-course-card { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 1px; padding: 2px; border-radius: 10px; }
  .meal-course-icon { grid-column: 1 / -1; grid-row: 1; font-size: 20px; }
  .meal-course-copy { grid-column: 1; grid-row: 2; }
  .meal-course-name { font-size: clamp(8px, 2.5vw, 11px); }
  .meal-course-copy small { display: none; }
  .meal-course-note { grid-column: 2; grid-row: 2; width: 24px; height: 24px; font-size: 13px; }
  .meals-slide-actions { min-height: 36px; gap: 5px; }
  .meals-slide-actions .btn { min-height: 35px; padding-inline: 10px; border-radius: 13px; font-size: clamp(13px, 3.6vw, 17px); }
  .table-field { width: 100%; border-width: 3px; border-radius: 17px; }
  .table-plate, .table-target-plate { width: min(50vw, 35vh, 240px); max-width: 55%; }
  .table-target-left { left: 19%; width: 19%; }
  .table-target-right { left: 59%; width: 17%; }
  .table-target-right-next { left: 74%; width: 21%; }
  .table-target-upper-glass { left: 55%; width: 19%; }
  .table-target-upper-cup { left: 73%; width: 23%; }
  .table-target-napkin-left { left: 1%; width: 23%; }
  .table-target { border-radius: 10px; font-size: clamp(7px, 2vw, 10px); }
  .table-object { width: clamp(53px, 16vw, 68px); min-height: clamp(43px, 6.4vh, 58px); border-width: 2px; border-radius: 13px; }
  .table-object-art { font-size: clamp(22px, 7vw, 30px); }
  .table-knife-art { width: clamp(42px, 12vw, 53px); }
  .table-object-label { font-size: clamp(9px, 2.6vw, 12px); }
  .table-feedback { font-size: clamp(11px, 3vw, 14px); padding-inline: 7px; }
}
@media (max-height: 600px) {
  .meals-screen { padding-top: max(57px, calc(env(safe-area-inset-top) + 47px)); padding-bottom: 4px; }
  .meals-topbar { inset-block-start: max(7px, env(safe-area-inset-top)); }
  .meals-exit { min-height: 35px; padding-block: 1px; font-size: clamp(12px, 2.5vh, 16px); }
  .meals-slide { gap: 2px; }
  .meals-title { font-size: clamp(21px, 5vh, 31px); }
  .meals-subtitle { font-size: clamp(13px, 3.2vh, 18px); }
  .meals-command { padding-block: 2px; font-size: clamp(12px, 2.8vh, 16px); }
  .meal-round-layout { flex: 1 1 0; }
  .meal-clock-card { height: min(100%, 31vh); }
  .meal-drop-slot { height: min(100%, 28vh); }
  .meal-choice { min-height: clamp(42px, 8vh, 60px); }
  .meal-course-card { padding-block: 1px; }
  .meal-course-icon { font-size: clamp(17px, 3.5vh, 23px); }
  .meal-course-note { width: 24px; height: 24px; font-size: 13px; }
  .meal-course-heading { font-size: 9px; }
  .meals-slide-actions, .meals-slide-actions .btn { min-height: 32px; }
  .meals-slide-actions .btn { padding-block: 1px; font-size: clamp(12px, 2.8vh, 16px); }
  .table-field { min-height: 0; }
  .table-plate, .table-target-plate { width: min(43vw, 42vh, 300px); max-width: 55%; }
  .table-object { min-height: 43px; }
  .table-feedback { padding-block: 2px; font-size: clamp(11px, 2.6vh, 14px); }
  .table-actions, .table-actions .btn { min-height: 30px; }
}
@media (max-width: 560px) and (max-height: 480px) {
  .meal-round-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
  .meal-clock-card { height: min(100%, 35vh); }
  .meal-choice { grid-template-columns: minmax(0, 1fr) auto; }
  .meal-choice-icon { font-size: clamp(18px, 6vh, 26px); }
  .meal-course-icon { font-size: 17px; }
  .table-object { width: 58px; min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .meals-slider-track, .meal-drop-slot, .meal-choice, .meal-note, .table-object, .table-target { transition: none; }
  .meal-choice.is-singing .meal-note, .meal-course-card.is-singing .meal-note, .table-target.is-current-target,
  .meal-drop-slot.is-wrong, .table-field.is-table-wrong .table-object, .table-field.is-table-success,
  .table-spark, .table-award-thumb, .meal-slot-thumb { animation: none; }
}

/* Oversized shared clock face, richer dish narration targets, and generous table-setting controls. */
.meal-clock-card { overflow: visible; }
.meal-clock-mount { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.meal-clock-mount .meal-analog-clock {
  --clock-size: min(100%, 28vh, 31vw, 235px);
  flex: 0 0 auto;
  width: var(--clock-size);
  max-width: 100%;
  max-height: 100%;
}
.meal-course-card { min-height: 54px; padding: 5px clamp(4px, .7vw, 9px); }
.meal-course-name { font-size: clamp(10px, 1.35vw, 15px); line-height: 1.08; overflow-wrap: anywhere; }
.meal-course-note { width: clamp(34px, 4vh, 40px); height: clamp(34px, 4vh, 40px); font-size: clamp(18px, 2.5vh, 23px); }
.table-field { --plate-diameter: min(82vh, 74vw, 560px); }
.table-plate, .table-target-plate {
  width: var(--plate-diameter);
  height: var(--plate-diameter);
  max-width: none;
  max-height: none;
  aspect-ratio: 1;
}
.table-plate { top: 52%; }
.table-target-plate { left: 50%; top: 52%; transform: translate(-50%, -50%); }
.table-target { min-width: 58px; min-height: 58px; border-width: 3px; border-radius: 20px; font-size: clamp(12px, 1.55vh, 17px); }
.table-target-left { left: 5%; top: 38%; width: 22%; height: 27%; }
.table-target-right { left: 73%; top: 37%; width: 22%; height: 25%; }
.table-target-right-next { left: 79%; top: 59%; width: 19%; height: 27%; }
.table-target-upper-glass { left: 58%; top: 3%; width: 19%; height: 24%; }
.table-target-upper-cup { left: 78%; top: 3%; width: 19%; height: 24%; }
.table-target-napkin-left { left: 5%; top: 70%; width: 20%; height: 24%; }
.table-object {
  width: clamp(104px, 12vw, 150px);
  min-height: clamp(92px, 13vh, 132px);
  gap: 4px;
  padding: 6px;
  border-width: 4px;
  border-radius: 22px;
}
.table-object-art { font-size: clamp(48px, 7vh, 72px); line-height: 1; }
.table-utensil-art { display: block; object-fit: contain; }
.table-utensil-art.fork-art { width: clamp(42px, 5.4vw, 68px); height: clamp(55px, 7vh, 76px); }
.table-utensil-art.knife-art { width: clamp(72px, 8.5vw, 108px); height: auto; }
.table-object-label { font-size: clamp(14px, 1.75vh, 18px); }
.table-feedback { padding: 5px 15px; font-size: clamp(14px, 1.95vh, 20px); }

@media (max-width: 560px) {
  .meal-clock-mount .meal-analog-clock { --clock-size: min(100%, 25vh, 34vw, 170px); }
  .meal-course-card { min-height: 52px; padding: 3px 2px; }
  .meal-course-name { font-size: clamp(9px, 2.5vw, 12px); }
  .meal-course-note { width: 32px; height: 32px; font-size: 17px; }
  .table-field { --plate-diameter: min(94cqh, 74cqw, 400px); }
  .table-target { min-width: 48px; min-height: 48px; border-radius: 13px; font-size: clamp(9px, 2.6vw, 12px); }
  .table-target-left { left: 4%; top: 38%; width: 22%; height: 26%; }
  .table-target-right { left: 72%; top: 37%; width: 23%; height: 25%; }
  .table-target-right-next { left: 78%; top: 59%; width: 20%; height: 28%; }
  .table-target-upper-glass { left: 57%; width: 20%; }
  .table-target-upper-cup { left: 77%; width: 21%; }
  .table-target-napkin-left { left: 4%; top: 70%; width: 21%; height: 24%; }
  .table-object { width: clamp(86px, 24vw, 112px); min-height: clamp(80px, 12vh, 104px); padding: 4px; border-width: 3px; border-radius: 16px; }
  .table-object-art { font-size: clamp(38px, 10vw, 52px); }
  .table-utensil-art.fork-art { width: clamp(35px, 10vw, 48px); height: clamp(46px, 12vw, 60px); }
  .table-utensil-art.knife-art { width: clamp(60px, 18vw, 82px); }
  .table-object-label { font-size: clamp(12px, 3.2vw, 14px); }
  .table-feedback { font-size: clamp(12px, 3.2vw, 15px); }
}
@media (max-height: 600px) {
  .meal-clock-mount .meal-analog-clock { --clock-size: min(100%, 25vh, 220px); }
  .table-field { --plate-diameter: min(94cqh, 74cqw, 520px); }
  .table-object { min-height: clamp(82px, 15vh, 116px); }
  .table-target { min-height: 46px; }
  .table-feedback { padding-block: 3px; font-size: clamp(12px, 2.6vh, 16px); }
}
@media (max-width: 560px) and (max-height: 480px) {
  .table-field { --plate-diameter: min(92cqh, 70cqw, 300px); }
  .table-object { width: 82px; min-height: 72px; }
  .table-object-art { font-size: 38px; }
  .table-object-label { font-size: 11px; }
}

/* Meal-specific healthy menus use two generous cards, or three balanced lunch cards. */
.meal-course-list {
  grid-template-columns: repeat(var(--meal-course-count, 2), minmax(0, 1fr));
}
.meal-course-list[data-count="2"] .meal-course-card { min-height: clamp(72px, 9vh, 92px); }
.meal-course-card { gap: clamp(5px, .8vw, 10px); padding: 7px clamp(6px, 1vw, 12px); }
.meal-course-icon { font-size: clamp(28px, 4vh, 40px); }
.meal-course-name { font-size: clamp(12px, 1.55vw, 18px); line-height: 1.15; }

@media (max-width: 560px) {
  .meal-course-list[data-count="2"] .meal-course-card { min-height: clamp(62px, 8vh, 78px); }
  .meal-course-card { padding: 4px 3px; }
  .meal-course-name { font-size: clamp(9px, 2.7vw, 13px); }
}

/* Make the meal clock prominent and keep its separate HTML hands above the dial. */
.meal-round-layout { width: min(1000px, 99%); }
.meal-clock-card { height: min(100%, 47vh); }
.meal-clock-mount .meal-analog-clock {
  --clock-size: min(100%, 42vh, 46.5vw, 352px);
  position: relative;
  isolation: isolate;
  width: var(--clock-size);
  height: var(--clock-size);
  max-width: 100%;
  max-height: 100%;
}
.meal-clock-mount .time-clock-face { position: relative; z-index: 0; display: block; width: 100%; height: 100%; }
.meal-clock-mount .time-clock-hand-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.meal-clock-mount .clock-hand {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  overflow: visible;
  transform: rotate(var(--clock-angle, 0deg));
  transform-origin: 0 0;
  pointer-events: none;
}
.meal-clock-mount .clock-hour-hand { z-index: 2; --hand-length: calc(var(--clock-size) * .27); --hand-thickness: clamp(8px, calc(var(--clock-size) * .057), 31px); }
.meal-clock-mount .clock-minute-hand { z-index: 1; --hand-length: calc(var(--clock-size) * .38); --hand-thickness: clamp(7px, calc(var(--clock-size) * .041), 23px); }
.meal-clock-mount .clock-hand-hit-area {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(34px, calc(var(--clock-size) * .13), 72px);
  height: var(--hand-length);
  transform: translate(-50%, -100%);
}
.meal-clock-mount .clock-hand-shaft {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--hand-thickness);
  height: 100%;
  border-radius: 999px;
  background: #ef3348;
  box-shadow: 0 3px 6px rgba(45,30,70,.28);
  transform: translateX(-50%);
}
.meal-clock-mount .clock-minute-hand .clock-hand-shaft { background: #087ff5; }
.meal-slot-speech-target {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.meal-course-heading { color: #55416f; font-size: clamp(16px, 2.2vh, 22px); font-weight: 900; line-height: 1.1; }

@media (max-width: 560px) {
  .meal-clock-card { height: min(100%, 42vh); }
  .meal-clock-mount .meal-analog-clock { --clock-size: min(100%, 37.5vh, 51vw, 255px); }
  .meal-course-heading { font-size: clamp(15px, 4.1vw, 19px); }
}
@media (max-height: 600px) {
  .meal-clock-card { height: min(100%, 42vh); }
  .meal-clock-mount .meal-analog-clock { --clock-size: min(100%, 37.5vh, 330px); }
  .meal-course-heading { font-size: clamp(15px, 2.7vh, 18px); }
}

/* Screen 1: a roomy shared three-hand clock beside a centered, compact drop target. */
.meal-round-layout {
  width: min(1160px, 99%);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(12px, 2.2vw, 28px);
  --meal-success-type-size: clamp(21px, 3.2vh, 32px);
}
.meal-clock-card { height: min(100%, 48vh); }
.meal-clock-mount .meal-analog-clock {
  --clock-size: min(100%, 46vh, 49vw, 420px);
}
.meal-task-panel {
  width: 100%;
  min-width: 0;
  height: min(100%, 38vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vh, 18px);
}
.meal-task-panel .meals-command {
  width: 100%;
  max-width: 100%;
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1.5vw, 18px);
  font-size: clamp(15px, 2.35vh, 23px);
  line-height: 1.14;
}
.meal-drop-slot {
  flex: 0 1 auto;
  width: min(100%, 440px);
  max-width: 440px;
  height: min(100%, 30vh);
  min-height: 0;
}
.meal-slot-icon { font-size: clamp(56px, 9vh, 90px); }
.meal-slot-label { font-size: clamp(23px, 3.5vh, 35px); }
.meal-slot-hint { font-size: clamp(19px, 2.9vh, 29px); line-height: 1.08; }
.meal-choice { min-height: clamp(66px, 10vh, 94px); }
.meal-choice-icon { font-size: clamp(36px, 6.3vh, 60px); }
.meal-digital-time { font-size: var(--meal-success-type-size); }
.meal-drop-slot.is-correct .meal-slot-label,
.meal-drop-slot.is-correct .meal-slot-hint {
  font-size: var(--meal-success-type-size);
  line-height: 1.08;
}

@media (max-width: 560px) {
  .meal-round-layout {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 6px;
    --meal-success-type-size: clamp(18px, 4.3vw, 24px);
  }
  .meal-clock-card { height: min(100%, 42vh); }
  .meal-clock-mount .meal-analog-clock { --clock-size: min(100%, 41vh, 57vw, 280px); }
  .meal-task-panel { height: min(100%, 31vh); gap: clamp(4px, 1vh, 8px); }
  .meal-task-panel .meals-command { padding: 4px 6px; font-size: clamp(12px, 3.35vw, 16px); }
  .meal-drop-slot { width: min(100%, 360px); height: min(100%, 25vh); padding: 5px; }
  .meal-slot-icon { font-size: clamp(42px, 11vw, 62px); }
  .meal-slot-label { font-size: clamp(18px, 5.2vw, 25px); }
  .meal-slot-hint { font-size: clamp(16px, 4.45vw, 22px); }
  .meal-choice { min-height: clamp(60px, 9vh, 76px); }
  .meal-choice-icon { font-size: clamp(34px, 9vw, 46px); }
}
@media (max-height: 600px) {
  .meal-clock-card { height: min(100%, 42vh); }
  .meal-clock-mount .meal-analog-clock { --clock-size: min(100%, 39vh, 360px); }
  .meal-task-panel { height: min(100%, 36vh); gap: clamp(5px, 1.2vh, 10px); }
}

/* Screen 2: a tidy left-hand cutlery pantry and matching, vertical drop cards. */
.table-slide {
  gap: clamp(3px, .55vh, 7px);
}
.table-slide > .meals-heading { max-width: 96%; }
.table-slide > .meals-heading .meals-subtitle { max-width: 94vw; text-align: center; }
.table-workspace {
  --table-card-width: 76px;
  --table-card-height: 62px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: min(1360px, 100%);
  align-self: center;
  display: grid;
  grid-template-columns: calc(var(--table-card-width) + 20px) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(5px, 1vw, 13px);
}
.table-inventory {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px;
  border: 3px solid rgba(255,255,255,.95);
  border-radius: 19px;
  background: linear-gradient(155deg, rgba(255,255,255,.88), rgba(242,235,255,.82));
  box-shadow: 0 6px 14px rgba(60,45,95,.13);
}
.table-inventory-heading {
  flex: 0 0 auto;
  color: #624a80;
  font-size: clamp(10px, 1.35vh, 14px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .12em;
  text-align: center;
}
.table-inventory .table-objects {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(6, var(--table-card-height));
  align-content: space-evenly;
  justify-items: center;
  gap: 4px;
  overflow: visible;
  pointer-events: none;
}
.table-field {
  --plate-diameter: min(76vh, 68vw, 540px);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  overflow: hidden;
  container-type: size;
}
.table-plate { top: 50%; }
.table-plate-monogram {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--plate-visual-center-y, 47.5%);
  color: transparent;
  background: linear-gradient(145deg, #f7f9fc 6%, #aab3c0 43%, #778291 52%, #dce2e9 74%, #929caa);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px rgba(111,122,137,.24);
  font: 600 clamp(54px, 10vh, 116px)/.9 Georgia, 'Times New Roman', serif;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 1px rgba(101,111,126,.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.table-targets { z-index: 3; }
.table-target {
  width: var(--table-card-width);
  height: var(--table-card-height);
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box;
  border-width: 3px;
  border-radius: clamp(11px, 1.5vw, 19px);
  font-size: clamp(8px, 1.25vh, 13px);
}
.table-target-left { left: 18%; top: 39%; }
.table-target-right { left: calc(82% - var(--table-card-width)); top: 39%; }
.table-target-right-next { left: calc(82% - var(--table-card-width)); top: 62%; }
.table-target-upper-glass { left: 54%; top: 5%; }
.table-target-upper-cup { left: 74%; top: 5%; }
.table-target-napkin-left { left: 3%; top: auto; bottom: 3%; }
.table-target-plate {
  left: 50%;
  top: var(--plate-visual-center-y, 47.5%);
  border-radius: clamp(11px, 1.5vw, 19px);
  transform: translate(-50%, -50%);
  color: transparent;
  background: rgba(255,255,255,.08);
}
.table-target-plate span { display: none; }
.table-target-plate.is-current-target { background: rgba(255,236,151,.18); }
.table-field.is-table-dragging .table-target-plate.is-current-target { background: rgba(255,222,105,.24); }
.table-placed-objects {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}
.table-inventory .table-object,
.table-placed-objects .table-object {
  width: var(--table-card-width);
  height: var(--table-card-height);
  min-height: 0;
  box-sizing: border-box;
  gap: 1px;
  padding: 2px;
  border: 3px solid #fff;
  border-radius: clamp(11px, 1.5vw, 19px);
}
.table-inventory .table-object {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}
.table-inventory .table-object:hover:not(.is-placed) { transform: translateY(-2px) scale(1.035); }
.table-placed-objects .table-object {
  position: absolute;
  transform: translate(-50%, -50%);
}
.table-object-art {
  flex: 0 1 54%;
  width: 100%;
  height: 54%;
  min-height: 0;
  font-size: clamp(16px, 3.8vh, 36px);
  line-height: 1;
}
.table-utensil-art {
  display: block;
  width: auto;
  height: 100%;
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
}
.table-object-label {
  max-width: 100%;
  font-size: clamp(8px, 1.35vh, 14px);
  line-height: 1;
}
.table-feedback { max-width: min(96vw, 1000px); }

@media (max-width: 560px) {
  .table-workspace { grid-template-columns: calc(var(--table-card-width) + 14px) minmax(0, 1fr); gap: 5px; }
  .table-inventory { gap: 3px; padding: 5px; border-width: 2px; border-radius: 14px; }
  .table-inventory-heading { font-size: 9px; }
  .table-inventory .table-objects { gap: 3px; }
  .table-target { border-width: 2px; border-radius: 11px; font-size: clamp(7px, 2.1vw, 10px); }
  .table-inventory .table-object, .table-placed-objects .table-object { border-width: 2px; border-radius: 12px; }
  .table-object-art { font-size: clamp(15px, 5vh, 28px); }
  .table-object-label { font-size: clamp(8px, 2.2vw, 11px); }
  .table-plate-monogram { font-size: clamp(45px, 13vw, 76px); }
}
@media (max-height: 600px) {
  .table-slide > .meals-heading .meals-subtitle { font-size: clamp(12px, 2.8vh, 17px); }
  .table-workspace { --table-card-height: clamp(30px, calc(14dvh - 42px), 70px); }
  .table-inventory { gap: 3px; padding: 5px; }
  .table-inventory-heading { font-size: 9px; }
  .table-inventory .table-objects { gap: 3px; }
  .table-object-art { font-size: clamp(14px, 3.8vh, 27px); }
  .table-object-label { font-size: clamp(8px, 1.4vh, 11px); }
}
@media (max-width: 560px) and (max-height: 480px) {
  .table-workspace { --table-card-height: clamp(22px, calc(10dvh - 24px), 42px); }
  .table-inventory { gap: 2px; padding: 4px; }
  .table-inventory .table-objects { gap: 2px; }
  .table-object-art { font-size: clamp(12px, 3.2vh, 18px); }
  .table-object-label { font-size: 8px; }
}

/* Screen 1: bring the clock and answer together and give replayable narration a clear affordance. */
.meal-day-slide .meal-round-layout {
  width: min(880px, 99%);
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
  gap: clamp(3px, .55vw, 8px);
}
.meal-day-slide .meal-task-panel { gap: clamp(6px, 1.25vh, 13px); }
.meal-day-slide .meals-command {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(255, 209, 102, .3);
}
.meal-day-slide .meals-command:focus-visible {
  outline: 4px solid #7052a3;
  outline-offset: 3px;
}
.meal-clock-mount .time-clock-hand-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.meal-clock-mount .meal-analog-clock > .time-clock-hand-layer { display: none; }
@media (max-width: 560px) {
  .meal-day-slide .meal-round-layout { gap: 3px; }
}

/* Screen 2: a balanced vertical place setting, with a clean personalized plate. */
.table-workspace {
  --table-setting-gap: 8px;
  grid-template-columns: calc(var(--table-card-width) + 20px) minmax(0, 1fr);
  gap: clamp(4px, .65vw, 9px);
}
.table-inventory {
  gap: 3px;
  padding: 5px;
}
.table-inventory .table-objects {
  grid-template-columns: repeat(var(--table-inventory-columns, 1), minmax(0, 1fr));
  grid-template-rows: repeat(var(--table-inventory-rows, 6), var(--table-card-height));
  align-content: center;
  justify-items: center;
  gap: 3px;
}
.table-field {
  --plate-diameter: min(76vh, 68vw, 540px);
  --plate-radius: 0px;
  --plate-monogram-size: clamp(58px, 10vh, 250px);
  --table-zone-center-y: 50%;
  container-type: size;
}
.table-plate { top: 50%; }
.table-plate-monogram {
  z-index: 2;
  top: var(--plate-visual-center-y, 50%);
  color: #738096;
  background: none;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  -webkit-text-stroke: 0;
  font: 900 var(--plate-monogram-size)/.9 Arial, Helvetica, sans-serif;
  text-shadow: none;
}
.table-targets { z-index: 3; }
.table-target {
  width: var(--table-card-width);
  height: var(--table-card-height);
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 2px;
  border-width: 2px;
  border-radius: clamp(9px, 1.1vw, 15px);
  font-size: clamp(7px, .85vw, 11px);
  line-height: .98;
  letter-spacing: .015em;
  text-align: center;
  overflow-wrap: anywhere;
}
.table-target-left {
  left: var(--table-zone-fork-x);
  top: var(--table-zone-center-y);
  transform: translateY(-50%);
}
.table-target-right {
  left: var(--table-zone-knife-x);
  top: var(--table-zone-center-y);
  transform: translateY(-50%);
}
.table-target-right-next {
  left: var(--table-zone-spoon-x);
  top: var(--table-zone-center-y);
  transform: translateY(-50%);
}
.table-target-upper-glass {
  left: var(--table-zone-glass-x);
  top: var(--table-zone-upper-y);
  transform: none;
}
.table-target-upper-cup {
  left: var(--table-zone-cup-x);
  top: var(--table-zone-upper-y);
  transform: none;
}
.table-target-napkin-left {
  left: 7px;
  top: auto;
  bottom: 7px;
  transform: none;
}
.table-target-plate {
  left: 50%;
  top: var(--plate-visual-center-y, 50%);
  width: var(--plate-diameter);
  height: var(--plate-diameter);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}
.table-target-plate span { display: none; }
.table-target-plate.is-current-target {
  border: 0;
  background: radial-gradient(circle, rgba(255, 225, 133, .16), rgba(255, 225, 133, .04) 70%, transparent 72%);
  box-shadow: inset 0 0 0 5px rgba(255, 209, 102, .22);
  animation: none;
}
.table-field.is-table-dragging .table-target-plate.is-current-target {
  background: radial-gradient(circle, rgba(255, 218, 100, .22), rgba(255, 218, 100, .06) 72%, transparent 74%);
}
.table-inventory .table-object,
.table-placed-objects .table-object {
  width: var(--table-card-width);
  height: var(--table-card-height);
  min-height: 0;
  gap: 1px;
  padding: 2px;
  border-radius: clamp(9px, 1.1vw, 15px);
}
.table-object-art {
  flex: 1 1 0;
  width: 100%;
  height: 58%;
  max-height: 58%;
  font-size: clamp(20px, 3.3vh, 36px);
}
.table-utensil-art {
  width: auto;
  height: 100%;
  max-width: 70%;
  max-height: 100%;
  object-fit: contain;
}
.table-object-label {
  max-width: 100%;
  font-size: clamp(7px, .9vw, 12px);
  line-height: .98;
  text-align: center;
  overflow-wrap: anywhere;
}
.table-placed-objects .table-object-knife .knife-art {
  transform: rotate(-90deg);
}
.table-placed-objects .table-object-napkin.is-placed {
  width: var(--plate-diameter);
  height: var(--plate-diameter);
  min-height: 0;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.table-placed-objects .table-object-napkin.is-placed .table-object-art {
  position: relative;
  flex: none;
  width: 76%;
  height: 76%;
  max-height: none;
  overflow: visible;
  font-size: 0;
}
.table-placed-objects .table-object-napkin.is-placed .table-object-art::before {
  position: absolute;
  inset: 8%;
  border: clamp(2px, .45vw, 5px) solid rgba(255, 255, 255, .95);
  border-radius: 9%;
  background: linear-gradient(145deg, #fffdf8 0%, #f7e8ee 48%, #e8d3e1 100%);
  box-shadow: 0 8px 16px rgba(55, 43, 75, .2), inset 0 0 0 2px rgba(173, 144, 165, .22);
  content: '';
  transform: rotate(45deg);
}
.table-placed-objects .table-object-napkin.is-placed .table-object-art::after {
  position: absolute;
  top: 15%;
  right: 15%;
  width: 31%;
  height: 31%;
  background: linear-gradient(135deg, #fff 0%, #ead9e5 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  content: '';
  filter: drop-shadow(-1px 2px 1px rgba(95, 75, 105, .18));
}
.table-placed-objects .table-object-napkin.is-placed .table-object-label { display: none; }
.table-feedback { max-width: min(96vw, 1000px); }

@media (max-width: 560px) {
  .table-workspace { grid-template-columns: calc(var(--table-card-width) + 14px) minmax(0, 1fr); gap: 4px; }
  .table-inventory { gap: 2px; padding: 4px; border-width: 2px; }
  .table-inventory .table-objects { gap: 2px; }
  .table-target { border-width: 2px; border-radius: 9px; font-size: clamp(7px, 2vw, 9px); }
  .table-inventory .table-object, .table-placed-objects .table-object { border-width: 2px; border-radius: 9px; }
  .table-object-art { font-size: clamp(19px, 5vh, 28px); }
  .table-object-label { font-size: clamp(7px, 2vw, 9px); }
  .table-plate-monogram { font-size: var(--plate-monogram-size); }
}
@media (max-width: 560px) and (max-height: 480px) {
  .table-workspace { --table-card-height: clamp(30px, 8vh, 44px); }
}
@media (min-width: 561px) and (max-height: 600px) {
  .table-workspace {
    grid-template-columns: calc(var(--table-card-width) + var(--table-card-width) + 30px) minmax(0, 1fr);
  }
  .table-inventory .table-objects { gap: 3px; }
}

/* Screen 2: shift the compact utensil tray toward a softly festive birthday cloth. */
.table-workspace {
  width: min(1120px, 100%);
  gap: clamp(2px, .25vw, 4px);
}
.table-field {
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,.78), transparent 42%),
    linear-gradient(140deg, #fff8e9 0%, #ffefd9 54%, #fff4e6 100%);
}
.table-cloth {
  inset: 4.5% 5.5%;
  border: 3px solid rgba(255,255,255,.9);
  background-color: #fff3df;
  background-image:
    radial-gradient(circle, rgba(239,105,137,.78) 0 2.5px, transparent 3px),
    radial-gradient(circle, rgba(246,185,67,.8) 0 2.2px, transparent 2.8px),
    radial-gradient(circle, rgba(95,190,166,.72) 0 2.2px, transparent 2.8px),
    radial-gradient(circle, rgba(119,157,220,.68) 0 2px, transparent 2.6px),
    repeating-linear-gradient(122deg, transparent 0 78px, rgba(238,116,145,.16) 79px 82px, transparent 83px 124px),
    repeating-linear-gradient(58deg, transparent 0 104px, rgba(93,177,203,.14) 105px 108px, transparent 109px 156px),
    linear-gradient(145deg, #fff9ec, #fff0dc 58%, #fff5e7);
  background-position: 5px 7px, 22px 19px, 11px 29px, 34px 4px, 0 0, 22px 10px, 0 0;
  background-size: 48px 46px, 62px 58px, 70px 62px, 82px 74px, auto, auto, auto;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.28), inset 0 0 0 9px rgba(232,174,128,.12);
}
.table-field .table-target:not(.table-target-plate) {
  border-color: rgba(111,83,132,.56);
  color: #49345f;
  background: rgba(255,255,255,.91);
  text-shadow: 0 1px 0 rgba(255,255,255,.95);
  opacity: .98;
}
.table-field .table-target:not(.table-target-plate).is-current-target {
  border-color: #bd7e20;
  color: #50380f;
  background: rgba(255,236,151,.96);
}
.table-field.is-table-dragging .table-target:not(.table-target-plate).is-current-target {
  background: rgba(255,222,105,.98);
}

/* Keep the birthday personalization crisp and center-set directly on the porcelain. */
.table-plate-monogram {
  left: 50%;
  top: var(--plate-visual-center-y, 50%);
  width: max-content;
  max-width: 92%;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #3f4b5d;
  background: none;
  box-shadow: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: .96;
  letter-spacing: .015em;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
  transform: translate(-50%, -50%);
}
.table-placed-objects .table-object-napkin.is-placed .table-utensil-art.napkin-art {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(70, 50, 72, .2));
}
.table-placed-objects .table-object-napkin.is-placed .table-object-art::before,
.table-placed-objects .table-object-napkin.is-placed .table-object-art::after {
  display: none;
  content: none;
}

/* Screen 2: keep all five selectable objects on the cloth's left edge. */
.table-workspace {
  display: flex;
  grid-template-columns: none;
  gap: 0;
}
.table-field {
  flex: 1 1 auto;
  width: 100%;
}
.table-inventory {
  position: absolute;
  z-index: 4;
  inset: 5.5% auto 5.5% auto;
  width: var(--table-card-width);
  height: auto;
  display: block;
  gap: 0;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.table-inventory .table-objects {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  height: 100%;
  flex: none;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--table-inventory-rows, 5), var(--table-card-height));
  align-content: space-evenly;
  justify-items: center;
  gap: 3px;
  overflow: visible;
  pointer-events: none;
}
.table-plate-monogram {
  font-family: "Comic Sans MS", "Chalkboard SE", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
  text-decoration: none;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.table-plate-mark-character:nth-child(1) { color: #ed4f78; }
.table-plate-mark-character:nth-child(2) { color: #169fc0; }
.table-plate-mark-character:nth-child(3) { color: #e29b18; }
.table-plate-mark-character:nth-child(4) { color: #6b57c8; }

@media (max-width: 560px) {
  .table-workspace { display: flex; grid-template-columns: none; }
  .table-field { width: 100%; }
  .table-inventory .table-objects { gap: 2px; }
}

/* Final Screen 2 layout: precise plate centering, a vertical right-side setting, and asset-only success states. */
.table-plate-monogram {
  top: var(--plate-visual-center-y, 48%);
}
.table-target-right {
  left: var(--table-zone-knife-x);
  top: var(--table-zone-knife-y);
  transform: none;
}
.table-target-plate {
  width: calc(var(--plate-diameter) * .888);
  height: calc(var(--plate-diameter) * .888);
}
.table-target-right-next {
  left: var(--table-zone-spoon-x);
  top: var(--table-zone-spoon-y);
  transform: none;
}
.table-field .table-target-upper-glass {
  height: var(--table-zone-glass-height, var(--table-card-height));
}
.table-target.is-completed,
.table-target.is-completed.is-current-target {
  opacity: 0 !important;
  border-color: transparent !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
  pointer-events: none !important;
  transition: none !important;
}
.table-placed-objects .table-object.is-placed:not(.table-object-napkin) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.table-placed-objects .table-object.is-placed .table-object-label {
  display: none;
}
.table-inventory .table-object-art,
.table-placed-objects .table-object-art {
  height: 87%;
  max-height: 87%;
  font-size: clamp(30px, 4.95vh, 54px);
}
.table-inventory .table-utensil-art,
.table-placed-objects .table-utensil-art {
  max-width: 100%;
}

@media (max-width: 560px) {
  .table-inventory .table-object-art,
  .table-placed-objects .table-object-art {
    font-size: clamp(28px, 7.5vh, 42px);
  }
}
@media (max-height: 600px) {
  .table-inventory .table-object-art,
  .table-placed-objects .table-object-art {
    font-size: clamp(21px, 5.7vh, 41px);
  }
}
@media (max-width: 560px) and (max-height: 480px) {
  .table-inventory .table-object-art,
  .table-placed-objects .table-object-art {
    font-size: clamp(18px, 4.8vh, 27px);
  }
}