/* R69: localize the logistics line, make hand-carry physical, and keep the
   studio backdrop stable while machines are installed. */

.music-toggle {
  display: inline-flex;
  min-width: 42px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 235, 208, .24);
  border-radius: 999px;
  background: rgba(21, 25, 54, .58);
  color: rgba(255, 246, 229, .86);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.music-toggle span:first-child {
  color: #ffd168;
  font-size: .72rem;
  line-height: 1;
}

.music-toggle[data-enabled="false"] {
  border-color: rgba(255, 255, 255, .15);
  background: rgba(21, 25, 54, .34);
  color: rgba(255, 246, 229, .54);
}

.music-toggle:focus-visible,
.music-toggle:hover {
  border-color: rgba(255, 209, 104, .75);
  background: rgba(67, 49, 78, .76);
}

/* The installed machine itself is the preview now. Remove the old dashed
   blueprint layer so an upgrade never leaves a ghost machine in the scene. */
@media (min-width: 680px) {
  .app-shell .facility-blueprint {
    display: none !important;
    opacity: 0 !important;
  }
}

@media (min-width: 680px) {
  /* The upgrade card communicates the change with two short, numeric lines. */
  .scene-progress .workshop-effect,
  .scene-progress .workshop-risk-effect {
    display: block !important;
    overflow: hidden;
    min-height: 12px;
    color: #5e4a78;
    font-size: .52rem;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .scene-progress .workshop-effect {
    color: #bd6a49;
  }

  .scene-progress .workshop-risk-effect {
    color: #2c9a86;
  }

  .scene-progress[data-state="max"] .workshop-risk-effect {
    display: none !important;
  }

  /* A receiving capsule is a draggable object, not a disguised button. */
  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"] {
    touch-action: none;
    cursor: grab;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"]:active {
    cursor: grabbing;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"][data-draggable="false"] {
    cursor: default;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button.is-dragging {
    z-index: 40 !important;
    opacity: .96;
    transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))) scale(1.1) rotate(-4deg) !important;
    filter: drop-shadow(0 14px 12px rgba(73, 42, 75, .32));
    transition: none;
  }

  .manual-processing-target.is-drop-ready {
    opacity: .92;
  }

  .manual-processing-target.is-drag-active {
    z-index: 35;
    pointer-events: auto;
  }

  .manual-processing-target.is-drag-active .manual-processing-ring {
    border-color: rgba(255, 216, 104, .88);
    background: rgba(255, 246, 201, .22);
    box-shadow: 0 0 0 9px rgba(255, 212, 103, .18), 0 0 24px rgba(255, 197, 81, .38), inset 0 0 18px rgba(255,255,255,.36);
  }

  .manual-processing-target.is-drop-target .manual-processing-ring {
    border-color: #fff3b2;
    background: rgba(255, 222, 119, .44);
    box-shadow: 0 0 0 11px rgba(255, 212, 103, .24), 0 0 30px rgba(255, 197, 81, .6), inset 0 0 20px rgba(255,255,255,.5);
    transform: scale(1.08);
  }

  /* The line is one toy-workshop object: feed mouth -> rollers -> press. */
  .facility-line-motion {
    inset: auto 30% 11% 17%;
    z-index: 7;
    height: 92px;
    overflow: visible;
    border: 3px solid rgba(88, 68, 90, .42);
    border-radius: 24px 20px 14px 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 242, 205, .12) 18%, rgba(66, 174, 164, .9) 20%, rgba(35, 126, 132, .95) 83%, rgba(23, 91, 105, .96)),
      linear-gradient(90deg, #72dec3, #f28d83 58%, #9b8ae7);
    box-shadow: 0 12px 14px rgba(72, 45, 64, .24), inset 0 3px rgba(255,255,255,.7), inset 0 -7px rgba(20, 69, 88, .28);
    opacity: 0;
    transition: opacity 260ms ease, right 260ms ease;
  }

  .facility-line-motion::before,
  .facility-line-motion::after {
    position: absolute;
    right: 9px;
    left: 9px;
    border-radius: 99px;
    content: "";
  }

  .facility-line-motion::before {
    top: 21px;
    height: 6px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.92) 0 14px, rgba(255,255,255,.18) 14px 22px);
    box-shadow: 0 20px 0 rgba(34, 105, 118, .72), 0 40px 0 rgba(34, 105, 118, .5);
    opacity: .75;
  }

  .facility-line-motion::after {
    bottom: -11px;
    left: 14%;
    height: 12px;
    background: rgba(79, 49, 70, .25);
    filter: blur(6px);
  }

  .app-shell[data-conveyor-level="1"] .facility-line-motion,
  .app-shell[data-conveyor-level="2"] .facility-line-motion {
    opacity: 1;
  }

  .app-shell[data-press-level="0"] .facility-line-motion {
    right: 15%;
  }

  .facility-slot-rail {
    right: 12px;
    bottom: 16px;
    left: 12px;
    z-index: 2;
    display: grid;
    width: auto;
    height: 23px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px;
    opacity: 1;
  }

  .facility-slot-light {
    min-width: 0;
    border: 2px solid rgba(255, 247, 206, .8);
    background: rgba(38, 91, 109, .72);
    box-shadow: 0 0 0 2px rgba(38, 81, 101, .18), inset 0 2px rgba(255,255,255,.5);
  }

  .facility-slot-light.is-filled {
    background: #ff9174;
    box-shadow: 0 0 0 2px rgba(255, 251, 207, .38), 0 0 13px rgba(255, 145, 116, .82), inset 0 2px rgba(255,255,255,.7);
  }

  .facility-motion-capsule {
    bottom: 28px;
    left: 8%;
    z-index: 3;
    width: 46px;
    max-width: none;
    opacity: .94;
    filter: drop-shadow(0 8px 6px rgba(52, 38, 68, .3));
    transform: rotate(-5deg) scale(.9);
  }

  .app-shell[data-conveyor-level="1"] .facility-slot-light:nth-child(n + 6) {
    display: none;
  }

  /* A local press chamber replaces the previous flat ellipse overlay. */
  .facility-press-motion {
    inset: auto 13% 9% auto;
    z-index: 9;
    width: 150px;
    height: 174px;
    overflow: visible;
    border: 3px solid rgba(92, 67, 87, .52);
    border-radius: 36px 36px 24px 24px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255,255,255,.8), transparent 15%),
      linear-gradient(155deg, #ffb296 0%, #f27f76 45%, #c95e79 100%);
    box-shadow: 0 16px 18px rgba(73, 43, 67, .3), inset 0 4px rgba(255,255,255,.72), inset -12px -8px rgba(121, 48, 87, .2);
    opacity: 0;
    transition: opacity 260ms ease;
  }

  .facility-press-motion::before {
    position: absolute;
    top: 22px;
    right: 14px;
    left: 14px;
    height: 78px;
    border: 3px solid rgba(65, 61, 91, .72);
    border-radius: 19px 19px 12px 12px;
    background:
      radial-gradient(circle at 50% 35%, rgba(255, 238, 157, .85), transparent 12%),
      linear-gradient(180deg, #56d7c2, #2d9ca0 56%, #236d83);
    box-shadow: inset 0 5px rgba(255,255,255,.58), inset 0 -7px rgba(15, 66, 86, .34), 0 6px 0 rgba(101, 51, 82, .15);
    content: "";
  }

  .facility-press-motion::after {
    position: absolute;
    right: -12px;
    bottom: -10px;
    left: -12px;
    height: 22px;
    border: 3px solid rgba(83, 62, 87, .42);
    border-radius: 0 0 22px 22px;
    background: linear-gradient(180deg, #ffd48b, #ef936d);
    box-shadow: 0 7px 9px rgba(65, 43, 65, .22), inset 0 3px rgba(255,255,255,.62);
    content: "";
  }

  .facility-press-lamp,
  .facility-press-badge,
  .facility-press-handle {
    position: absolute;
    display: block;
    pointer-events: none;
  }

  .facility-press-lamp {
    top: -14px;
    left: 50%;
    z-index: 6;
    width: 36px;
    height: 18px;
    border: 3px solid rgba(83, 61, 86, .58);
    border-radius: 50% 50% 42% 42%;
    background: linear-gradient(180deg, #fff7bd, #ffb96d 68%, #e57676);
    box-shadow: 0 4px 6px rgba(67, 44, 71, .24), inset 0 3px rgba(255,255,255,.78), 0 0 12px rgba(255, 220, 118, .44);
    transform: translateX(-50%);
  }

  .facility-press-lamp::after {
    position: absolute;
    right: 10px;
    bottom: -11px;
    left: 10px;
    height: 10px;
    border-radius: 0 0 8px 8px;
    background: #e7c883;
    box-shadow: inset 0 2px rgba(255,255,255,.7);
    content: "";
  }

  .facility-press-badge {
    top: 5px;
    left: 50%;
    z-index: 5;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 3px solid rgba(255, 245, 190, .86);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff8cb, #f5bf64 52%, #e67b6e 100%);
    box-shadow: 0 3px 5px rgba(91, 48, 70, .28), inset 0 2px rgba(255,255,255,.7);
    color: #fff8d2;
    font-size: 1rem;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(125, 62, 77, .46);
    transform: translateX(-50%);
  }

  .facility-press-handle {
    top: 53px;
    right: -19px;
    z-index: 6;
    width: 22px;
    height: 61px;
    border: 3px solid rgba(83, 61, 86, .58);
    border-radius: 12px;
    background: linear-gradient(90deg, #f9d978, #d99d49 58%, #b57445);
    box-shadow: 3px 5px 7px rgba(69, 44, 69, .24), inset 2px 0 rgba(255,255,255,.68);
    transform: rotate(-12deg);
    transform-origin: 50% 8px;
  }

  .facility-press-handle::before {
    position: absolute;
    top: -12px;
    left: -8px;
    width: 35px;
    height: 18px;
    border: 3px solid rgba(83, 61, 86, .58);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffb18f, #e9777c);
    box-shadow: inset 0 3px rgba(255,255,255,.68);
    content: "";
  }

  .facility-press-handle::after {
    position: absolute;
    right: 4px;
    bottom: 5px;
    left: 4px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 246, 192, .56);
    content: "";
  }

  .app-shell[data-press-level="1"] .facility-press-motion,
  .app-shell[data-press-level="2"] .facility-press-motion {
    opacity: 1;
  }

  .facility-press-platen {
    right: 31px;
    bottom: 65px;
    z-index: 3;
    width: 88px;
    height: 23px;
    border: 3px solid rgba(80, 65, 89, .62);
    background: linear-gradient(180deg, #fff8df, #d7c9bc 44%, #a89391 52%, #ffecc0);
    box-shadow: 0 5px 8px rgba(76, 55, 77, .3), inset 0 2px rgba(255,255,255,.86);
    opacity: 1;
    transform: translateY(0) scaleX(.9);
  }

  .facility-press-flash {
    right: 43px;
    bottom: 53px;
    z-index: 4;
    width: 62px;
    opacity: 0;
  }

  .facility-press-crack {
    right: 73px;
    bottom: 58px;
    z-index: 4;
    height: 20px;
  }

  .facility-press-crack-b {
    right: 54px;
  }

  .app-shell.press-cycle .facility-press-motion {
    animation: r69-press-body 560ms cubic-bezier(.18,.72,.22,1) both;
  }

  .app-shell.press-cycle .facility-motion-capsule {
    animation: r69-capsule-to-press 560ms cubic-bezier(.2,.72,.22,1) both;
  }

  /* Finished capsules collect in a physically separate tray to the right. */
  .press-output-tray {
    position: absolute;
    right: 2.5%;
    bottom: 12%;
    z-index: 12;
    display: grid;
    width: 104px;
    height: 62px;
    align-content: center;
    gap: 5px;
    padding: 7px 8px;
    border: 3px solid rgba(90, 69, 90, .4);
    border-radius: 14px 14px 22px 22px;
    background: linear-gradient(180deg, rgba(255, 244, 204, .96), rgba(246, 181, 126, .94));
    box-shadow: 0 10px 13px rgba(74, 46, 68, .25), inset 0 3px rgba(255,255,255,.82);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.9);
    transition: opacity 220ms ease, transform 220ms ease;
  }

  .press-output-tray.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .app-shell[data-press-level="0"] .press-output-tray {
    display: none;
  }

  .press-output-label {
    color: #79536b;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .45rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-align: center;
  }

  .press-output-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .press-output-slot {
    height: 22px;
    border: 2px solid rgba(116, 83, 89, .34);
    border-radius: 8px 8px 12px 12px;
    background: rgba(121, 92, 102, .24);
    box-shadow: inset 0 3px rgba(255,255,255,.3);
  }

  .press-output-slot.is-filled {
    border-color: rgba(255, 255, 220, .9);
    background: linear-gradient(145deg, #77dec1, #f98f7c 64%, #a290e6);
    box-shadow: 0 0 10px rgba(255, 177, 111, .46), inset 0 3px rgba(255,255,255,.68);
  }

  /* Keep the waiting field on the line, but move finished capsules to the
     right-hand tray rather than stacking them over the bowl. */
  .app-shell[data-conveyor-level="1"] .field-stones,
  .app-shell[data-conveyor-level="2"] .field-stones {
    inset: 0;
    z-index: 16;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button,
  .app-shell[data-conveyor-level="2"] .field-stone-button {
    position: absolute;
    width: 48px;
    min-width: 48px;
    min-height: 54px;
    padding: 2px;
    pointer-events: auto;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"],
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] {
    bottom: 15.5%;
    left: var(--belt-left, 19%);
    transform: translate(-50%, 0);
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"],
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"] {
    right: var(--output-right, 3.8%);
    bottom: var(--output-bottom, 18%);
    transform: translate(50%, 0) scale(.92);
    border: 2px solid rgba(255, 247, 213, .74);
    border-radius: 15px;
    background: rgba(255, 248, 220, .82);
    box-shadow: 0 7px 10px rgba(86, 49, 72, .22), 0 0 0 2px rgba(255, 166, 108, .22);
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"] .field-stone-art,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"] .field-stone-art {
    width: 42px;
    height: 42px;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"] .field-stone-hint,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"] .field-stone-hint {
    position: absolute;
    top: -16px;
    left: 50%;
    display: block;
    width: max-content;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(255, 250, 238, .9);
    color: #715269;
    font-size: .42rem;
    font-weight: 900;
    transform: translateX(-50%);
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"]::after,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"]::after {
    right: 8px;
    bottom: -2px;
    left: 8px;
    height: 6px;
    border-radius: 50%;
    background: rgba(74, 62, 83, .22);
    filter: blur(2px);
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"] .field-stone-name,
  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"] .field-stone-hint,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] .field-stone-name,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] .field-stone-hint {
    display: none;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"] .field-stone-art,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] .field-stone-art {
    width: 42px;
    height: 42px;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"].is-next,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"].is-next {
    filter: drop-shadow(0 0 8px rgba(255, 185, 89, .8));
  }

  .app-shell[data-output-count="0"] .press-output-tray {
    opacity: .62;
  }

  @keyframes r69-press-body {
    0%, 100% { transform: translateY(0); }
    38% { transform: translateY(3px) scaleY(.985); }
    54% { transform: translateY(-2px) scaleY(1.01); }
  }

  @keyframes r69-capsule-to-press {
    0% { opacity: .94; left: 8%; transform: rotate(-5deg) scale(.9); }
    72% { opacity: 1; left: 82%; transform: rotate(8deg) scale(1); }
    100% { opacity: 0; left: 94%; transform: rotate(16deg) scale(.72); }
  }
}

@media (min-width: 680px) and (max-height: 380px) {
  .music-toggle {
    min-height: 27px;
    padding: 3px 6px;
    font-size: .44rem;
  }

  .facility-line-motion {
    right: 29%;
    bottom: 10%;
    height: 80px;
  }

  .facility-press-motion {
    right: 12%;
    bottom: 7%;
    width: 132px;
    height: 148px;
  }

  .facility-press-motion::before {
    top: 18px;
    height: 65px;
  }

  .facility-press-platen {
    right: 27px;
    bottom: 55px;
    width: 77px;
    height: 20px;
  }

  .facility-press-flash {
    right: 37px;
    bottom: 45px;
    width: 54px;
  }

  .facility-press-crack {
    right: 62px;
    bottom: 50px;
  }

  .facility-press-crack-b {
    right: 47px;
  }

  .press-output-tray {
    right: 2%;
    bottom: 9%;
    width: 88px;
    height: 53px;
    padding: 5px;
  }

  .press-output-slot {
    height: 18px;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"],
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] {
    bottom: 13.5%;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"],
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"] {
    bottom: 15%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.press-cycle .facility-press-motion,
  .app-shell.press-cycle .facility-motion-capsule {
    animation-duration: 1ms !important;
  }
}

/* Workshop upgrades should be legible in the world without swapping the
   entire studio for a different room. These are restrained lighting passes:
   the local machine remains the structural change, while the workbench gets
   a warmer, more confident focus at each level. */
@media (min-width: 680px) {
  .arena-backdrop {
    isolation: isolate;
  }

  .arena-backdrop::before {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 25% 44%, rgba(255, 252, 211, .18), transparent 25%),
      linear-gradient(180deg, rgba(255, 248, 218, .08), rgba(94, 215, 188, .03) 58%, rgba(255, 167, 124, .08));
    content: "";
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity 420ms ease, background 420ms ease;
  }

  .app-shell[data-workshop-level="1"] .arena-backdrop::before {
    opacity: .34;
  }

  .app-shell[data-workshop-level="2"] .arena-backdrop::before {
    background:
      radial-gradient(circle at 25% 44%, rgba(255, 255, 224, .28), transparent 26%),
      radial-gradient(circle at 79% 56%, rgba(255, 209, 114, .2), transparent 23%),
      linear-gradient(180deg, rgba(255, 251, 229, .12), rgba(119, 228, 201, .08) 58%, rgba(188, 144, 244, .1));
    opacity: .5;
  }

  .app-shell[data-workshop-level="1"] .scene-backdrop {
    filter: saturate(1.14) brightness(1.05) contrast(1.02);
  }

  .app-shell[data-workshop-level="2"] .scene-backdrop {
    filter: saturate(1.2) brightness(1.08) contrast(1.03);
  }

  /* A press can exist before the hand-crank belt. Finished capsules still
     use the same right-side tray instead of falling back onto the bowl. */
  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="output"] {
    position: absolute;
    right: var(--output-right, 3.8%);
    bottom: var(--output-bottom, 18%);
    width: 48px;
    min-width: 48px;
    min-height: 54px;
    padding: 2px;
    transform: translate(50%, 0) scale(.92);
    border: 2px solid rgba(255, 247, 213, .74);
    border-radius: 15px;
    background: rgba(255, 248, 220, .82);
    box-shadow: 0 7px 10px rgba(86, 49, 72, .22), 0 0 0 2px rgba(255, 166, 108, .22);
    pointer-events: auto;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="output"] .field-stone-art {
    width: 42px;
    height: 42px;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="output"] .field-stone-hint {
    position: absolute;
    top: -16px;
    left: 50%;
    display: block;
    width: max-content;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(255, 250, 238, .9);
    color: #715269;
    font-size: .42rem;
    font-weight: 900;
    transform: translateX(-50%);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="output"]::after {
    right: 8px;
    bottom: -2px;
    left: 8px;
    height: 6px;
    border-radius: 50%;
    background: rgba(74, 62, 83, .22);
    filter: blur(2px);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="output"].is-next {
    filter: drop-shadow(0 0 8px rgba(255, 185, 89, .8));
  }
}

/* The local test toolbar is an overlay at phone height. It must not consume
   gameplay height or stretch the Landscape stage into a desktop rectangle. */
@media (min-width: 680px) and (max-height: 480px) {
  body.test-mode {
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 0;
  }

  body.test-mode .app-shell {
    width: min(100vw, calc(100dvh * 844 / 390));
    height: min(100dvh, calc(100vw * 390 / 844));
    min-height: 0 !important;
    max-height: none;
    aspect-ratio: 844 / 390;
  }

  body.test-mode .test-mode-panel {
    position: fixed;
    top: 4px;
    right: 4px;
    left: 4px;
    width: auto;
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 680px) and (max-height: 380px) {
  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="output"] {
    bottom: 15%;
  }
}

/* A locked next facility is a real progression cue, not an empty disabled
   button. Keep the unlock condition visible only while the facility is locked;
   actionable upgrade cards stay low-noise. */
.facility-panel[data-locked="true"] .facility-reserve {
  display: block;
  color: #c8664f;
  font-size: .46rem;
  font-weight: 850;
  line-height: 1.15;
}