/* R70 — repair the automation handoff: keep the physical line above the
   bottom capsule dock, restore capsule names, and give the modal a real
   exclusive layer. The game remains an 844:390 Landscape stage. */

@media (min-width: 680px) {
  /* The machine line and the bottom selection dock now occupy separate bands.
     This prevents an upgrade button from sitting over a waiting capsule. */
  .facility-line-motion {
    inset: auto 25% 40% 24%;
    z-index: 8;
    height: 76px;
    overflow: visible;
    border: 3px solid #6d5870;
    border-radius: 28px 18px 16px 16px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.84) 0 9px, transparent 9px),
      linear-gradient(90deg, #8de2c7 0 18%, #67c9b7 18% 57%, #f6aa8c 57% 77%, #a698e7 77% 100%);
    box-shadow:
      0 13px 0 rgba(102,70,91,.12),
      0 16px 20px rgba(91,57,80,.2),
      inset 0 3px rgba(255,255,255,.78),
      inset 0 -7px rgba(42,91,108,.22);
    opacity: 0;
  }

  .facility-line-motion::before {
    top: 18px;
    right: 13px;
    left: 13px;
    height: 32px;
    border: 2px solid rgba(42,105,116,.46);
    background:
      radial-gradient(circle, rgba(255,249,213,.96) 0 5px, rgba(66,143,145,.82) 6px 8px, transparent 9px) 8px 5px / 38px 22px repeat-x,
      linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.08));
    box-shadow: inset 0 3px rgba(255,255,255,.6), 0 4px rgba(36,91,106,.12);
    opacity: 1;
  }

  .facility-line-motion::after {
    right: 8%;
    bottom: -13px;
    left: 13%;
    height: 12px;
    background: rgba(79,49,70,.22);
    filter: blur(6px);
  }

  .facility-slot-rail {
    right: 16px;
    bottom: 16px;
    left: 16px;
    z-index: 3;
    height: 22px;
    gap: 8px;
  }

  .facility-slot-light {
    border: 2px solid rgba(255,247,206,.9);
    background: rgba(45,96,113,.76);
    box-shadow: 0 0 0 2px rgba(38,81,101,.16), inset 0 2px rgba(255,255,255,.5);
  }

  .facility-slot-light.is-filled {
    background: linear-gradient(145deg, #ffe08f, #ff8f76);
    box-shadow: 0 0 0 2px rgba(255,251,207,.4), 0 0 13px rgba(255,145,116,.76), inset 0 2px rgba(255,255,255,.7);
  }

  .facility-motion-capsule {
    bottom: 25px;
    left: 7%;
    z-index: 4;
    width: 46px;
    max-width: none;
    opacity: .98;
    filter: drop-shadow(0 8px 6px rgba(52,38,68,.28));
  }

  .facility-press-motion {
    inset: auto 29% 39% auto;
    z-index: 10;
    width: 126px;
    height: 126px;
    overflow: visible;
    border: 3px solid #6d5870;
    border-radius: 30px 30px 17px 17px;
    background:
      radial-gradient(circle at 24% 17%, rgba(255,255,255,.82), transparent 14%),
      linear-gradient(145deg, #ffe0ad 0 12%, #f6a082 13% 56%, #d87883 78%, #aa80cb 100%);
    box-shadow:
      0 14px 0 rgba(104,68,88,.12),
      0 18px 20px rgba(73,43,67,.25),
      inset 0 4px rgba(255,255,255,.76),
      inset -9px -8px rgba(121,48,87,.16);
    opacity: 0;
  }

  .facility-press-motion::before {
    top: 20px;
    right: 13px;
    left: 13px;
    height: 57px;
    border: 3px solid #6d5870;
    border-radius: 17px 17px 11px 11px;
    background:
      radial-gradient(circle at 50% 35%, rgba(255,238,157,.92), transparent 12%),
      linear-gradient(180deg, #69ddc7, #36aaa7 58%, #347d99);
    box-shadow: inset 0 5px rgba(255,255,255,.58), inset 0 -7px rgba(15,66,86,.3), 0 5px rgba(101,51,82,.14);
  }

  .facility-press-motion::after {
    right: -11px;
    bottom: -9px;
    left: -11px;
    height: 19px;
    border: 3px solid rgba(83,62,87,.46);
    border-radius: 0 0 19px 19px;
    background: linear-gradient(180deg, #ffe0a0, #efa178);
    box-shadow: 0 7px 9px rgba(65,43,65,.2), inset 0 3px rgba(255,255,255,.62);
  }

  .facility-press-lamp {
    top: -13px;
    width: 32px;
    height: 16px;
  }

  .facility-press-badge {
    top: 4px;
    width: 28px;
    height: 28px;
    border-width: 3px;
    font-size: .86rem;
  }

  .facility-press-handle {
    top: 43px;
    right: -18px;
    height: 54px;
  }

  .facility-press-platen {
    right: 25px;
    bottom: 51px;
    z-index: 3;
    width: 72px;
    height: 20px;
    border-color: #6d5870;
    background: linear-gradient(180deg, #fff8df, #d7c9bc 44%, #a89391 52%, #ffecc0);
    opacity: 1;
  }

  .facility-press-flash {
    right: 31px;
    bottom: 40px;
    width: 54px;
  }

  .facility-press-crack {
    right: 55px;
    bottom: 44px;
    height: 17px;
  }

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

  .press-output-tray {
    right: 15%;
    bottom: 41%;
    z-index: 12;
    width: 96px;
    height: 58px;
    border: 3px solid #6d5870;
    border-radius: 15px 15px 20px 20px;
    background: linear-gradient(180deg, rgba(255,247,211,.98), rgba(247,178,133,.98));
    box-shadow: 0 10px 13px rgba(74,46,68,.22), inset 0 3px rgba(255,255,255,.84);
  }

  .press-output-tray::before {
    position: absolute;
    top: 50%;
    left: -25px;
    width: 27px;
    height: 15px;
    border: 3px solid #6d5870;
    border-right: 0;
    border-radius: 11px 0 0 11px;
    background: linear-gradient(180deg, #ffe0a0, #ef9a7b);
    box-shadow: inset 0 2px rgba(255,255,255,.6);
    content: "";
    transform: translateY(-50%);
  }

  .press-output-label {
    color: #684b65;
    font-size: .46rem;
  }

  /* Restore direct capsule identity on the belt. The selected capsule gets a
     full label; queued capsules retain a compact, high-contrast name chip. */
  .app-shell[data-conveyor-level="1"] .field-stones,
  .app-shell[data-conveyor-level="2"] .field-stones {
    z-index: 18;
    pointer-events: none;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button,
  .app-shell[data-conveyor-level="2"] .field-stone-button {
    z-index: 18;
    width: 48px;
    min-width: 48px;
    min-height: 66px;
    padding: 2px;
    border: 2px solid rgba(109,88,112,.3);
    border-radius: 15px;
    background: rgba(255,253,244,.72);
    box-shadow: 0 7px 10px rgba(86,49,72,.15), inset 0 2px rgba(255,255,255,.84);
    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: 43%;
  }

  .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: 40px;
    height: 40px;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"] .field-stone-name,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] .field-stone-name {
    position: absolute;
    top: -18px;
    left: 50%;
    z-index: 5;
    display: block;
    width: 48px;
    max-width: 48px;
    padding: 3px 4px;
    overflow: hidden;
    border: 1px solid rgba(109,88,112,.24);
    border-radius: 999px;
    background: rgba(255,253,244,.96);
    color: #49354f;
    font-size: .42rem;
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(-50%);
  }

    .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"].is-next .field-stone-name,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"].is-next .field-stone-name,
  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="processing"] .field-stone-name,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="processing"] .field-stone-name {
    width: max-content;
    max-width: 126px;
    padding-inline: 6px;
    border-color: rgba(255,171,112,.64);
    background: #fff6d8;
    color: #4b2f49;
    font-size: .58rem;
    line-height: 1.05;
  }

  .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-hint {
    display: none;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"].is-next .field-stone-hint,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"].is-next .field-stone-hint {
    position: absolute;
    top: 43px;
    left: 50%;
    display: block;
    width: max-content;
    max-width: 92px;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(255,253,244,.92);
    color: #715269;
    font-size: .38rem;
    font-weight: 900;
    transform: translateX(-50%);
  }

  .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, 20%);
    bottom: var(--output-bottom, 42%);
    z-index: 19;
    width: 38px;
    min-width: 38px;
    min-height: 44px;
    padding: 1px;
    border-color: rgba(255,166,108,.62);
    border-radius: 13px;
    background: rgba(255,248,220,.94);
  }

  .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: 34px;
    height: 34px;
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="output"] .field-stone-name,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="output"] .field-stone-name {
    position: absolute;
    top: -17px;
    left: 50%;
    display: block;
    width: max-content;
    max-width: 78px;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(255,253,244,.96);
    color: #49354f;
    font-size: .44rem;
    font-weight: 950;
    transform: translateX(-50%);
  }

  .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: 37px;
    left: 50%;
    display: block;
    width: max-content;
    padding: 2px 4px;
    border-radius: 999px;
    background: rgba(255,253,244,.92);
    color: #715269;
    font-size: .38rem;
    font-weight: 900;
    transform: translateX(-50%);
  }

  /* A modal owns the complete stage while open, so no machine or hidden card
     can steal the pointer. The close button remains above the veil. */
  .star-finale-backdrop {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: block;
    border-radius: 0;
    background: rgba(62,40,65,.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    backdrop-filter: blur(2px);
  }

  .star-finale-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .star-finale-panel[aria-hidden="true"] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .star-finale-panel[aria-hidden="false"] {
    visibility: visible;
  }

  .star-finale-close {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    cursor: pointer;
  }
}

@media (min-width: 680px) and (max-height: 380px) {
  .facility-line-motion {
    right: 25%;
    bottom: 39%;
    left: 24%;
    height: 66px;
  }

  .facility-slot-rail {
    right: 12px;
    bottom: 12px;
    left: 12px;
    gap: 6px;
  }

  .facility-motion-capsule {
    bottom: 20px;
    width: 40px;
  }

  .facility-press-motion {
    right: 29%;
    bottom: 38%;
    width: 112px;
    height: 112px;
  }

  .facility-press-motion::before {
    top: 17px;
    height: 51px;
  }

  .facility-press-platen {
    right: 22px;
    bottom: 46px;
    width: 64px;
    height: 18px;
  }

  .facility-press-flash {
    right: 27px;
    bottom: 36px;
    width: 48px;
  }

  .facility-press-crack {
    right: 48px;
    bottom: 39px;
  }

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

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

  .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: 41%;
  }

  .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: var(--output-bottom, 40%);
  }

  .app-shell[data-conveyor-level="1"] .field-stone-button[data-location="belt"] .field-stone-name,
  .app-shell[data-conveyor-level="2"] .field-stone-button[data-location="belt"] .field-stone-name {
    top: -16px;
    font-size: .4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .star-finale-backdrop { transition-duration: 1ms; }
}