/* V54: readable decisions, explicit taste matching, and one focused teaching cue. */

:root {
  --v54-ink: #211521;
  --v54-cream: #fff0c8;
  --v54-gold: #e5bd69;
  --v54-green: #79d4ae;
  --v54-green-deep: #245947;
  --v54-red: #f0a0a0;
  --v54-red-deep: #7d3340;
  --v54-blue: #173d4b;
}

/* Customer requests read as one compact decision: dish, level, taste, patience. */
.shop .order-rail-ticket {
  position: relative;
  overflow: visible;
  grid-template-rows: minmax(20px, 1fr) 17px 7px;
  row-gap: 1px;
}

.shop .order-rail-ticket .order-dish {
  grid-row: 1 / 4;
}

.shop .order-rail-ticket .taste-tags {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow: hidden;
}

.taste-tags:empty,
.serve-verdict:empty,
.selected-verdict:empty,
.stage-reward:empty,
.discovery-record:empty {
  display: none !important;
}

.taste-tags[hidden],
.serve-verdict[hidden],
.selected-verdict[hidden],
.stage-reward[hidden],
.discovery-record[hidden] {
  display: none !important;
}

.taste-tags .taste-like,
.taste-tags .taste-taboo {
  min-width: 0;
  max-width: 50%;
  padding: 2px 5px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 800 9px/1.05 var(--ui);
  letter-spacing: .01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taste-tags .taste-like {
  background: rgb(36 89 71 / 90%);
  color: #d9ffe8;
}

.taste-tags .taste-taboo {
  background: rgb(125 51 64 / 90%);
  color: #ffe0d5;
}

.shop .order-rail-ticket .patience {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
}

/* Match feedback belongs to the order, never to a detached toast alone. */
.serve-verdict {
  box-sizing: border-box;
  min-height: 22px;
  padding: 4px 9px 3px;
  border: 1px solid #c99d53;
  border-radius: 999px;
  background: rgb(30 22 31 / 94%);
  box-shadow: 0 4px 9px rgb(6 4 9 / 45%);
  color: var(--v54-cream);
  font: 900 10px/1.1 var(--ui);
  text-align: center;
  text-shadow: 0 1px 2px #07040a;
  white-space: nowrap;
}

.order-rail-ticket > .serve-verdict {
  position: absolute;
  z-index: 3;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.serve-verdict.is-ready,
.serve-verdict.ready,
.serve-verdict.match,
.serve-verdict.exact,
.serve-verdict.favorite,
.serve-verdict[data-state="ready"],
.serve-verdict[data-state="match"],
.serve-verdict[data-state="exact"],
.serve-verdict[data-state="favorite"] {
  border-color: #86d7b3;
  background: rgb(27 80 63 / 96%);
  color: #e5fff0;
}

.serve-verdict.is-perfect,
.serve-verdict.perfect,
.serve-verdict[data-state="perfect"] {
  border-color: #ffe38f;
  background: rgb(102 58 39 / 97%);
  color: #fff4bc;
  box-shadow: 0 0 11px rgb(255 216 117 / 48%);
}

.serve-verdict.is-mismatch,
.serve-verdict.mismatch,
.serve-verdict.blocked,
.serve-verdict.taboo,
.serve-verdict[data-state="mismatch"],
.serve-verdict[data-state="blocked"],
.serve-verdict[data-state="taboo"] {
  border-color: #b76871;
  background: rgb(78 36 47 / 94%);
  color: #ffd8d3;
}

.selected-verdict {
  box-sizing: border-box;
  min-width: 82px;
  max-width: 112px;
  min-height: 28px;
  padding: 6px 8px;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 1px solid #a97440;
  border-radius: 8px;
  background: linear-gradient(180deg, #214d57, #15343e);
  color: #fff0c6;
  font: 900 10px/1.2 var(--ui);
  text-align: center;
  text-shadow: 0 1px 2px #08050c;
}

.selected-tray:not(.empty) .selected-verdict {
  filter: drop-shadow(0 2px 4px rgb(10 5 11 / 35%));
}

.selected-verdict.perfect {
  border-color: #f2cc70;
  background: linear-gradient(180deg, #76512f, #4f3025);
  color: #fff1b5;
}

.selected-verdict.taboo {
  border-color: #bd6c74;
  background: linear-gradient(180deg, #713341, #49232e);
  color: #ffe1d8;
}

.selected-verdict.blocked {
  border-color: #9f6570;
  background: linear-gradient(180deg, #5b303b, #382029);
  color: #ffe1d8;
}

.selected-tray.empty .selected-verdict {
  display: none;
}

/* The selected dish returns as a small physical strip attached to the tray. */
.merge-panel .selected-tray {
  position: absolute;
  z-index: 14;
  right: auto;
  bottom: 12px;
  left: 50%;
  box-sizing: border-box;
  width: min(330px, 42%);
  height: 50px;
  min-height: 44px;
  padding: 5px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  border: 1px solid #a87842;
  border-radius: 11px;
  background: linear-gradient(180deg, rgb(245 219 166 / 98%), rgb(207 169 105 / 98%));
  box-shadow: 0 5px 12px rgb(10 6 10 / 45%), inset 0 0 0 2px rgb(103 61 40 / 48%);
  color: #321d25;
}

.merge-panel .selected-tray.empty {
  display: none;
}

.merge-panel .selected-tray .selected-dish {
  width: 40px;
  height: 40px;
}

.merge-panel .selected-tray .selected-copy strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-panel .selected-tray .selected-copy span {
  margin-top: 2px;
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merge-panel .selected-tray .selected-hint {
  display: none;
}

/* The short-term reward is a tab attached to the current act plaque. */
.shift-brief {
  overflow: visible;
}

.stage-reward {
  position: absolute;
  z-index: 0;
  top: calc(100% - 1px);
  left: 50%;
  min-width: 132px;
  max-width: calc(100% - 58px);
  min-height: 20px;
  padding: 5px 12px 3px;
  transform: translateX(-50%);
  overflow: hidden;
  border: 1px solid #8e693d;
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgb(24 36 42 / 96%);
  color: #f2d796;
  font: 800 9px/1.1 var(--ui);
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #05070a;
  white-space: nowrap;
  pointer-events: none;
}

/* V50 styles every copy span; the reward is a separate physical tab. */
.game-shell.phase-playing .hud-subline .shift-brief .stage-reward,
.game-shell.phase-training .hud-subline .shift-brief .stage-reward {
  display: block;
  color: #f2d796;
  font-size: 9px;
  line-height: 1.1;
}

.shift-brief.complete .stage-reward {
  background: rgb(31 83 66 / 96%);
  color: #ddffed;
}

.game-shell.phase-playing .hud-subline .shift-brief.complete .stage-reward,
.game-shell.phase-training .hud-subline .shift-brief.complete .stage-reward {
  color: #ddffed;
}

/* Discovery progress is part of the title-screen furniture, not floating copy. */
.discovery-record {
  box-sizing: border-box;
  width: fit-content;
  min-width: 126px;
  min-height: 28px;
  margin-inline: auto;
  padding: 7px 15px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(214 176 99 / 78%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(19 55 66 / 92%), rgb(12 31 41 / 94%));
  box-shadow: inset 0 0 0 1px rgb(255 235 176 / 10%), 0 4px 10px rgb(0 0 0 / 38%);
  color: #ffe8ad;
  font: 800 11px/1.15 var(--ui);
  letter-spacing: .035em;
  text-shadow: 0 1px 3px #02050a;
}

.result-discovery {
  width: fit-content;
  margin: 7px auto 10px;
  padding: 6px 13px;
  border: 1px solid #b88a4b;
  border-radius: 999px;
  background: linear-gradient(180deg, #214d57, #15343e);
  color: #ffe8ad;
  font: 800 11px/1.15 var(--ui);
  text-align: center;
}

.training-skip[hidden] {
  display: none !important;
}

/* One instruction at a time; the coach remains physical and touch-safe. */
.training-coach {
  box-sizing: border-box;
  min-height: 68px;
  border-color: #d6ad68;
  background:
    linear-gradient(180deg, rgb(248 226 180 / 98%), rgb(209 169 104 / 98%));
  box-shadow:
    0 9px 22px rgb(0 0 0 / 52%),
    inset 0 0 0 3px #6a412c,
    inset 0 0 18px rgb(255 241 194 / 34%);
}

.training-copy strong {
  color: #6e3040;
}

.training-copy span {
  color: #3b2826;
}

.training-skip,
.purchase-dock .buy-btn,
.purchase-dock .cargo-refresh,
.purchase-dock .recycle,
.mutation-dock .mutation-btn {
  min-height: 44px;
}

.training-skip:focus-visible,
.purchase-dock button:focus-visible,
.mutation-dock button:focus-visible,
.customer:not(.preview):focus-visible {
  outline: 3px solid #fff09a;
  outline-offset: 2px;
}

/* Standard desktop: orders gain one taste row without crowding the portraits. */
@media (min-width: 721px) and (min-height: 500px) {
  .shop .order-rail-slot,
  .shop .order-rail-ticket {
    height: 72px;
    aspect-ratio: auto;
  }

  .shop .order-rail-ticket {
    padding: 8px 13px 8px 11px;
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .shop .order-rail-ticket .order-dish {
    width: 42px;
    height: 42px;
  }

  .shop .order-rail-ticket .order-line {
    font-size: 12px;
  }

  .shop .order-rail-ticket .order-level {
    font-size: 10px;
  }

  .training-coach {
    width: min(600px, calc(100% - 32px));
  }
}

/* Medium desktop/tablet: preserve the V53 4:3 canvas and separate each order. */
@media (min-width: 721px) and (min-height: 500px) and (max-aspect-ratio: 3 / 2) {
  .shop .order-rail-slot.left { left: 29%; }
  .shop .order-rail-slot.right { left: 71%; }

  .shop .order-rail-slot,
  .shop .order-rail-ticket {
    width: min(202px, 24vw);
    height: 68px;
  }

  .shop .order-rail-ticket {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .shop .order-rail-ticket .order-dish {
    width: 40px;
    height: 40px;
  }

  .shop .order-rail-ticket .order-line { font-size: 12px; }
  .shop .order-rail-ticket .order-level { font-size: 10px; }

  .selected-verdict {
    min-width: 76px;
    max-width: 96px;
    padding-inline: 6px;
  }

  .merge-panel .selected-tray {
    bottom: 8px;
    width: min(310px, 40%);
  }
}

/* Phone portrait: keep both customer decisions readable in the narrow stage. */
@media (max-width: 720px) and (orientation: portrait) {
  .shop .order-rail-slot,
  .shop .order-rail-ticket {
    width: 146px;
    height: 58px;
    aspect-ratio: auto;
  }

  .shop .order-rail-slot.left { left: 27%; }
  .shop .order-rail-slot.right { left: 69%; }

  .shop .order-rail-ticket {
    padding: 5px 8px 6px;
    grid-template-columns: 31px minmax(0, 1fr);
    grid-template-rows: minmax(17px, 1fr) 13px 5px;
  }

  .shop .order-rail-ticket .order-dish {
    width: 30px;
    height: 30px;
  }

  .shop .order-rail-ticket .order-line,
  .shop .order-rail-ticket .order-level {
    font-size: 9px;
  }

  .taste-tags {
    gap: 2px;
  }

  .taste-tags .taste-like,
  .taste-tags .taste-taboo {
    padding: 1px 3px;
    font-size: 8px;
  }

  .order-rail-ticket > .serve-verdict {
    top: -12px;
  }

  .serve-verdict {
    min-height: 19px;
    padding: 3px 6px 2px;
    font-size: 8px;
  }

  .stage-reward {
    min-width: 116px;
    min-height: 18px;
    padding: 4px 8px 3px;
    font-size: 8px;
  }

  .game-shell.phase-playing .hud-subline .shift-brief .stage-reward,
  .game-shell.phase-training .hud-subline .shift-brief .stage-reward {
    font-size: 8px;
  }

  .discovery-record {
    min-height: 26px;
    padding: 6px 12px 5px;
    font-size: 10px;
  }

  .training-coach {
    top: max(8px, env(safe-area-inset-top));
    width: calc(100% - 16px);
    min-height: 60px;
    grid-template-columns: 36px minmax(0, 1fr) 58px;
    gap: 7px;
    padding: 7px 8px;
    border-radius: 12px;
  }

  .training-count {
    width: 36px;
    height: 36px;
    font-size: 11px;
  }

  .training-copy strong { font-size: 14px; }
  .training-copy span { margin-top: 1px; font-size: 10px; line-height: 1.25; }

  .training-skip {
    grid-column: auto;
    width: 58px;
    min-width: 58px;
    padding-inline: 4px;
    font-size: 10px;
  }

  .selected-verdict {
    min-width: 68px;
    max-width: 84px;
    min-height: 24px;
    padding: 4px 5px;
    font-size: 8px;
  }

  .merge-panel .selected-tray {
    top: -5px;
    bottom: auto;
    width: min(286px, calc(100% - 22px));
    height: 46px;
    padding: 4px 8px;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 5px;
  }

  .merge-panel .selected-tray .selected-dish {
    width: 34px;
    height: 34px;
  }
}

/* Short landscape: retain the taste signal, but compress decoration instead of controls. */
@media (max-height: 430px) and (orientation: landscape) {
  .shop .order-rail-slot,
  .shop .order-rail-ticket {
    width: 132px;
    height: 48px;
    aspect-ratio: auto;
  }

  .shop .order-rail-ticket {
    padding: 4px 7px 5px;
    grid-template-columns: 29px minmax(0, 1fr);
    grid-template-rows: minmax(15px, 1fr) 11px 4px;
  }

  .shop .order-rail-ticket .order-dish {
    width: 28px;
    height: 28px;
  }

  .shop .order-rail-ticket .order-line,
  .shop .order-rail-ticket .order-level {
    font-size: 8px;
  }

  .taste-tags {
    gap: 1px;
  }

  .taste-tags .taste-like,
  .taste-tags .taste-taboo {
    padding: 1px 2px;
    font-size: 7px;
  }

  .order-rail-ticket > .serve-verdict {
    top: -11px;
  }

  .serve-verdict {
    min-height: 18px;
    padding: 3px 6px 2px;
    font-size: 8px;
  }

  .stage-reward {
    top: calc(100% - 4px);
    min-width: 110px;
    min-height: 17px;
    padding: 4px 7px 2px;
    font-size: 7px;
  }

  .game-shell.phase-playing .hud-subline .shift-brief .stage-reward,
  .game-shell.phase-training .hud-subline .shift-brief .stage-reward {
    font-size: 7px;
  }

  .discovery-record {
    min-width: 108px;
    min-height: 24px;
    padding: 5px 10px 4px;
    font-size: 9px;
  }

  .training-coach {
    top: 4px;
    width: min(560px, calc(100% - 16px));
    min-height: 52px;
    grid-template-columns: 38px minmax(0, 1fr) 68px;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 11px;
  }

  .training-count {
    width: 38px;
    height: 38px;
    font-size: 11px;
  }

  .training-copy strong { font-size: 13px; }
  .training-copy span {
    margin-top: 1px;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .training-skip {
    min-width: 68px;
    min-height: 44px;
    padding-inline: 5px;
    font-size: 10px;
  }

  .purchase-dock .buy-btn,
  .purchase-dock .cargo-refresh,
  .purchase-dock .recycle,
  .mutation-dock .mutation-btn {
    height: 44px;
    min-height: 44px;
  }

  .selected-verdict {
    min-width: 64px;
    max-width: 80px;
    min-height: 24px;
    padding: 4px;
    font-size: 8px;
  }

  .merge-panel .selected-tray {
    top: 0;
    bottom: auto;
    width: min(248px, 34%);
    height: 44px;
    padding: 3px 7px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 4px;
  }

  .merge-panel .selected-tray .selected-dish {
    width: 32px;
    height: 32px;
  }

  .merge-panel .selected-tray .selected-copy strong { font-size: 10px; }
  .merge-panel .selected-tray .selected-copy span { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .serve-verdict,
  .selected-verdict,
  .stage-reward,
  .discovery-record {
    transition: none !important;
    animation: none !important;
  }
}