/* Work cards unfold from the selected order, without occupying the scene. */
.order-board { overflow: visible; }
.game-shell:has(.work-picker.is-open) > .order-board { z-index: 134; }
.game-shell:has(.work-picker.is-open) > .toast { z-index: 140; }
.order-picker-toggle {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -32px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 58px;
  min-height: 44px;
  padding: 5px 14px;
  border: 0;
  border-radius: 8px;
  background: #1a2b32 url('./assets/oak-seal-v2/upgrade-slate.webp') center / 100% 100% no-repeat;
  color: #ffe0a5;
  box-shadow: 0 3px 5px #04101980;
  touch-action: manipulation;
}
.order-picker-toggle svg { width: 24px; height: 24px; transition: transform 180ms ease-out; }
.order-picker-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.order-picker-toggle:focus-visible { outline: 2px solid #d6f2db; outline-offset: 2px; }
.order-picker-toggle:active { transform: translate(-50%, 1px); }
.work-picker-shade {
  position: absolute;
  inset: 0;
  z-index: 130;
  background: transparent;
  touch-action: none;
  animation: work-shade-in 160ms ease-out both;
}
.work-picker {
  /* Screen 08 (430 × 932) is the master. The floor preserves readable, touchable choices. */
  --work-unit: clamp(.75px, min(calc(100cqw / 430), calc(100dvh / 932)), 1px);
  position: absolute;
  z-index: 132;
  left: 0;
  right: 0;
  top: calc(var(--work-picker-top, 164px) - 52px + 52 * var(--work-unit));
  min-width: 0;
  padding: 0;
  color: #fff0d9;
  background: none;
  box-shadow: none;
  border-radius: 0;
  touch-action: pan-x;
}
.work-picker[hidden], .work-picker-shade[hidden] { display: none; }
.work-picker .task-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--work-unit));
  height: calc(128 * var(--work-unit));
  padding: calc(4 * var(--work-unit)) calc(50% - max(44px, 98 * var(--work-unit)) / 2) calc(12 * var(--work-unit));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior: contain;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.work-picker .task-carousel::-webkit-scrollbar { display: none; }
.work-picker .task-option {
  position: relative;
  flex: 0 0 max(44px, calc(98 * var(--work-unit)));
  display: grid;
  place-items: center;
  height: max(44px, calc(112 * var(--work-unit)));
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: calc(9 * var(--work-unit)) calc(7 * var(--work-unit)) calc(18 * var(--work-unit));
  scroll-snap-align: center;
  transform: none;
  touch-action: pan-x;
}
.work-picker .task-orb {
  width: calc(72 * var(--work-unit));
  height: calc(72 * var(--work-unit));
}
/* The illustration and its caption share the orb's centre, including selected scale. */
.work-picker .task-orb > .work-art {
  left: 50%;
  top: calc(-17 * var(--work-unit));
  width: calc(74 * var(--work-unit));
  height: calc(74 * var(--work-unit));
  transform: translateX(-50%);
  filter: drop-shadow(0 calc(4 * var(--work-unit)) calc(2 * var(--work-unit)) #142a2aa0);
}
.work-picker .task-option.locked .work-art {
  filter: saturate(.3) brightness(.72) drop-shadow(0 calc(4 * var(--work-unit)) calc(2 * var(--work-unit)) #142a2aa0);
}
.work-picker .task-option .task-label,
.work-picker .task-option.mentor-task .task-label {
  isolation: isolate;
  top: calc(100% - 11 * var(--work-unit));
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(68px, calc(84 * var(--work-unit)));
  min-width: 0;
  max-width: none;
  height: max(24px, calc(28 * var(--work-unit)));
  margin: 0;
  padding: calc(4 * var(--work-unit)) calc(8 * var(--work-unit));
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #ffdc94;
  font-size: max(10px, calc(12 * var(--work-unit)));
  line-height: max(12px, calc(14 * var(--work-unit)));
  text-align: center;
  text-shadow: 0 calc(1 * var(--work-unit)) calc(2 * var(--work-unit)) #172e20;
}
.work-picker .task-label::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: calc(1 * var(--work-unit)) solid transparent;
  border-image-source: url('./assets/oak-seal-v2/upgrade-slate.webp');
  border-image-slice: 45 63 44 63 fill;
  border-image-width: calc(8 * var(--work-unit)) calc(12 * var(--work-unit));
  filter: drop-shadow(0 calc(2 * var(--work-unit)) calc(1 * var(--work-unit)) #04090e8c);
  pointer-events: none;
}
.work-picker .task-option.locked .task-label { color: #d8c8a4; }
/* Mentor work keeps its gemstone identity before and after unlocking. */
.work-picker .task-option.mentor-task .task-label::before {
  border-image-source: url('./assets/mentor-amethyst-v125/label.webp');
}
.work-picker .task-option.mentor-task .task-label { color: #f2ddff; }
.work-picker .task-option.mentor-task.locked .task-orb { filter: none; }
.work-picker .task-option.mentor-task.locked .work-art {
  filter: brightness(.78) drop-shadow(0 calc(4 * var(--work-unit)) calc(2 * var(--work-unit)) #142a2aa0);
}
.work-picker .task-option.mentor-task.locked .task-label { color: #d8c6e6; }
.work-picker .task-lock {
  z-index: 4;
  top: calc(-10 * var(--work-unit));
  right: calc(-13 * var(--work-unit));
  padding: calc(2 * var(--work-unit)) calc(4 * var(--work-unit));
  font-size: max(8px, calc(9 * var(--work-unit)));
}
.work-picker .task-option:focus-visible { outline: 2px solid #d6f2db; outline-offset: -2px; border-radius: 10px; }
.work-picker.is-unfolding .task-option {
  animation: work-card-unfold 440ms cubic-bezier(.16, 1, .3, 1) var(--fan-delay, 0ms) both;
}
.work-picker.is-unfolding .task-option.selected {
  animation-name: work-current-drop;
  animation-duration: 260ms;
}
.work-picker.is-closing { pointer-events: none; }
.work-picker-shade.is-closing { animation: work-shade-out 180ms ease-in both; }
@keyframes work-current-drop {
  from { opacity: 0; transform: translateY(-22px) scale(.86); }
  to { opacity: 1; transform: none; }
}
@keyframes work-card-unfold {
  from { opacity: 0; transform: translateX(var(--fan-start, 0px)) scale(.86); }
  18% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes work-picker-close {
  to { opacity: 0; transform: translateY(-10px) scale(.98); }
}
@keyframes work-shade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes work-shade-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .order-picker-toggle svg { transition: none; }
  .work-picker.is-unfolding .task-option,
  .work-picker.is-unfolding .task-option.selected { animation: work-shade-in 90ms ease-out both; }
  .work-picker.is-closing, .work-picker-shade.is-closing { animation: none; }
}