/* --------------------------------------------------------------------------
   style.css — regions, panels and widgets.
   The shell (viewport, stage, letterbox) lives inline in index.html.

   Layout contract, in stage design units (390 x 844):
     HUD   top     56px    day + clock, money, day progress bar
     PLAY  middle  704px   the room, the hint, the Menu panel
     NAV   bottom  84px    two tabs, thumb height
   -------------------------------------------------------------------------- */

:root {
  --hud-h: 56px;
  --nav-h: 84px;

  --ink:        #f3e3cd;
  --ink-dim:    #c3ac92;
  --ink-faint:  #8d7660;
  --bg-deep:    #1a110b;
  --bg-room:    #3a2a1e;
  --bg-panel:   #2a1c13;
  --bg-raised:  #402d20;
  --line:       #543a28;
  --accent:     #d2703a;   /* terracotta */
  --accent-2:   #7d9455;   /* nopal */
  --gold:       #e8b24c;
}

/* ------------------------------------------------------------------ HUD --- */

/* Cool desaturated pills floating on the room's own dark top edge. One
   number per pill, white type with a soft shadow. */
.hud {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px 5px;
  background: linear-gradient(#241811, #2b1d13);
  border-bottom: 2px solid #1a110b;
  z-index: 3;
}
.hud-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hud-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(#454d4d, #343b3b);
  border: 1px solid #2b3130;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  color: #f2efe6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  white-space: nowrap;
}
.hud-day    { font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.hud-clock  { font-size: 13px; color: #c6ccc9; font-variant-numeric: tabular-nums; }
.hud-money  { font-size: 17px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.hud-daybar {
  height: 6px;
  border-radius: 3px;
  background: #14100c;
  overflow: hidden;
}
.hud-daybar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transition: width .12s linear;
}

/* ----------------------------------------------------------------- PLAY --- */

.play {
  position: relative;
  overflow: hidden;
  background: var(--bg-room);
  z-index: 1;
}
.layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* When the stage runs shorter than 844 design px, the ROOM scales uniformly
   to the play region it has — canvas, tap zones and bubbles together, so
   paint and DOM never disagree — while the UI layer keeps full-size type. */
.layer-back, .layer-props, .layer-actors {
  transform: translateY(var(--play-shift, 0px)) scale(var(--play-scale, 1));
  transform-origin: top center;
}
/* The UI layer itself is inert; only the Menu panel takes events, so taps over
   the bare room fall through to the stock zones beneath. */
.layer-ui { pointer-events: none; }
.layer-ui .panel:not(.panel-transparent) { pointer-events: auto; }

.plates, .actors {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The painted stock IS the button: an invisible thumb-sized target centred
   on the plate. When somebody is waiting for that dish, a ring pulses. */
.stock-tap {
  position: absolute;
  width: 92px;
  height: 76px;
  transform: translate(-50%, -55%);
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  pointer-events: auto;
  touch-action: manipulation;
}
.stock-tap.is-pressed { filter: brightness(1.2); }
.stock-ring {
  position: absolute;
  inset: 6px 8px;
  border-radius: 50%;
  border: 3px solid rgba(255, 214, 120, 0);
  box-shadow: 0 0 0 0 rgba(255, 190, 80, 0);
  pointer-events: none;
}
.stock-tap.is-wanted .stock-ring {
  border-color: rgba(255, 214, 120, .95);
  animation: want-pulse 1.1s ease-out infinite;
}
@keyframes want-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 190, 80, .7); opacity: 1; }
  100% { box-shadow: 0 0 0 16px rgba(255, 190, 80, 0); opacity: .85; }
}

/* The order bubble: a round white thought over the diner's head holding a
   painted picture of the dish they want — no words. */
.order-bubble {
  position: absolute;
  width: 78px;
  height: 72px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  animation: bubble-bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 3px 0 rgba(32, 20, 10, .3));
}
@keyframes bubble-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -5px; }
}
.order-pic {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 46% 46%;
  background: #f6efdd center 55% / 82% no-repeat;
  border: 3px solid #6b5334;
}
.order-tail {
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: #f6efdd;
  border-right: 3px solid #6b5334;
  border-bottom: 3px solid #6b5334;
}

/* The hint bar — one line at the top of the room saying what to do next. */
.hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(246, 239, 221, .96);
  border: 2px solid #6b5334;
  color: #2b1c12;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 3px 0 rgba(32, 20, 10, .3);
  pointer-events: none;
  animation: hint-in .2s ease-out;
}
.hint[hidden] { display: none; }
@keyframes hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* The cooking chip — the first pot's progress, so the player never has to
   open the Menu to know food is coming. */
.cook-chip {
  position: absolute;
  left: 10px;
  bottom: 12px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  padding: 6px 12px 7px 6px;
  border-radius: 12px;
  background: rgba(31, 20, 13, .92);
  border: 1px solid #6b5334;
  color: #e8d9b8;
  pointer-events: none;
  min-width: 150px;
  max-width: 220px;
}
.cook-chip[hidden] { display: none; }
.cook-chip-thumb {
  grid-row: 1 / span 2;
  width: 34px; height: 28px;
  border-radius: 6px;
  background: #e3d8c2 center / contain no-repeat;
  border: 1px solid #9c7d55;
}
.cook-chip-text {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cook-chip-bar { height: 6px; border-radius: 3px; background: #14100c; overflow: hidden; }
.cook-chip-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }

/* A short transient message, low and centred, out of the food's way. */
.toast {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(31, 20, 13, .92);
  border: 1px solid #6b5334;
  color: #e8d9b8;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.toast[hidden] { display: none; }
.toast:not([hidden]) { animation: toast-in .16s ease-out; }
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* --------------------------------------------------------------- PANELS --- */

.panel {
  position: absolute;
  inset: 0;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, rgba(42,28,19,.96), rgba(31,20,13,.98));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.panel[hidden] { display: none; }
.panel:not([hidden]):not(.panel-transparent) { animation: panel-in .14s ease-out; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.panel-transparent { background: none; pointer-events: none; padding: 0; }

.panel-head { margin-bottom: 10px; }
.panel-title { font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.panel-sub { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }

/* --- the Menu: head, scrolling grid + pots, pinned counter strip */
.panel-menu-frame {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 0 0;
}
.panel-menu-frame .panel-head { padding: 0 14px; }
.menu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 14px 12px;
}

.dish-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.dish-card {
  appearance: none;
  display: flex; flex-direction: column;
  border: 2px solid #8b6947;
  border-radius: 14px;
  background: #6a4c34;
  color: var(--ink);
  padding: 6px 6px 9px;
  font: inherit;
  text-align: center;
  transition: transform .06s ease, filter .06s ease, opacity .1s ease;
  touch-action: manipulation;
}
.dish-card.is-pressed { transform: translateY(2px) scale(.97); filter: brightness(1.15); }
.dish-card.is-blocked { opacity: .5; }
.dish-card.is-blocked .dish-cost { color: #f0b4a0; }
/* A pale card for the food, like the reference's menu tile: a bright dish
   on a dark tile loses the contrast the whole trick depends on. The trimmed
   dish bitmap is ~1.9 : 1, so the well is wide. */
.dish-thumb {
  height: 86px;
  border-radius: 9px;
  background: #e3d8c2 center / contain no-repeat;
  border: 1px solid #9c7d55;
  margin-bottom: 6px;
}
.dish-name {
  font-size: 13px; font-weight: 800; line-height: 1.2;
  min-height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.dish-cost { font-size: 12px; color: var(--gold); margin-top: 3px; font-weight: 700; }

/* --- pots in progress */
.pot-row { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pot {
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: #221610;
}
.pot-name { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.pot-bar { height: 8px; border-radius: 4px; background: #14100c; overflow: hidden; }
.pot-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.pot-empty { font-size: 12px; color: var(--ink-faint); text-align: center; padding: 10px; }

/* --- the counter, pinned across the bottom of the Menu */
.sideboard {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 10px;
  border-top: 2px solid var(--line);
  background: linear-gradient(180deg, #2c1d12, #241811);
}
.sideboard-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  flex: 0 0 auto;
}
.sideboard-items {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sideboard-item {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 42px;
  border-radius: 8px;
  border: 2px solid var(--line);
  background-color: #e3d8c2;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.sideboard-badge {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: #2a1c13;
  border: 1.5px solid #e8dcc8;
  color: #f2e6d0;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
}
.sideboard-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; padding: 8px 0; }

/* ------------------------------------------------------------------ NAV --- */

/* Two painted objects standing on small cool pedestal tabs, on warm wood. */
.nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  background: linear-gradient(#6d5b47, #4e4034);
  border-top: 2px solid #43362a;
  z-index: 3;
}
.nav-btn {
  appearance: none;
  border: 0;
  background: none;
  color: #f2efe6;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 2px 7px;
  touch-action: manipulation;
  transition: transform .06s ease, filter .08s ease;
  overflow: visible;
}
.nav-icon {
  width: 56px;
  height: 52px;
  margin-top: -18px;
  background: center / contain no-repeat;
  filter: drop-shadow(0 2px 1px rgba(20, 12, 6, .35));
  transition: filter .08s ease, transform .08s ease;
}
.nav-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  padding: 3px 16px 4px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(#3d4747, #2e3737);
  border: 1px solid #262e2e;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.nav-btn.is-pressed { transform: translateY(2px); }
.nav-btn.is-active .nav-icon {
  filter: drop-shadow(0 2px 2px rgba(20, 12, 6, .45)) saturate(1.08) brightness(1.08);
  transform: translateY(-2px) scale(1.06);
}
.nav-btn.is-active .nav-label {
  color: var(--gold);
  background: linear-gradient(#454d4d, #343b3b);
}

/* --- the serve in flight */
.serve-flight {
  position: absolute;
  z-index: 3;
  width: 52px;
  height: 42px;
  margin: -21px 0 0 -26px;
  pointer-events: none;
  background: center / contain no-repeat;
  filter: drop-shadow(0 4px 2px rgba(20, 12, 6, .38));
}
.serve-flight[hidden] { display: none; }

/* -------------------------------------------------------------- OVERLAY --- */

.overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-items: center;
  background: rgba(10,6,4,.6);
  padding: 16px;
}
.overlay[hidden] { display: none; }

.dayend {
  align-self: center;
  margin: auto;
  width: 100%;
  padding: 22px 20px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: #241811;
  text-align: center;
  animation: card-in .16s ease-out;
}
@keyframes card-in {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.dayend-title { font-size: 22px; margin-bottom: 14px; }
.dayend-row { font-size: 15px; color: var(--ink); margin: 5px 0; font-weight: 700; }
.dayend-row.dayend-sub { font-size: 13px; color: var(--ink-dim); font-weight: 500; }

.btn {
  appearance: none;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 22px;
  margin-top: 18px;
  touch-action: manipulation;
}
.btn-primary { background: var(--accent); border-color: #8f4520; color: #241811; }
.btn.is-pressed { transform: translateY(2px); filter: brightness(1.1); }

@media (prefers-reduced-motion: reduce) {
  .order-bubble, .stock-tap.is-wanted .stock-ring, .hint,
  .panel:not([hidden]):not(.panel-transparent), .toast:not([hidden]), .dayend { animation: none; }
}