/* R57 makes the unupgraded labor visible: ceiling drop -> receiving bowl ->
   hand carry -> repeated hand press. Purchased facilities remove those motions. */
@media (min-width: 680px) {
  .supply-drop-layer {
    position: absolute;
    z-index: 16;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .supply-drop-capsule {
    position: absolute;
    top: -24%;
    left: 13.5%;
    width: 64px;
    height: 64px;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 9px 8px rgba(91, 57, 80, .25));
    transform: rotate(-12deg) scale(.72);
  }

  .supply-drop-ring {
    position: absolute;
    top: 52%;
    left: 16.9%;
    width: 54px;
    height: 16px;
    border: 3px solid rgba(255, 218, 104, .82);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45);
  }

  .app-shell.supply-drop .supply-drop-capsule {
    animation: r57-drop-to-bowl 720ms cubic-bezier(.18,.7,.2,1) both;
  }

  .app-shell.supply-drop .supply-drop-ring {
    animation: r57-bowl-ring 720ms ease-out both;
  }

  .app-shell.supply-drop .field-stone-button:last-child .field-stone-art {
    animation: r57-waiting-arrival 760ms ease-out both;
  }

  .manual-mallet {
    position: absolute;
    z-index: 17;
    right: 19%;
    bottom: 19%;
    display: none;
    width: 176px;
    height: 117px;
    object-fit: contain;
    pointer-events: none;
    transform: rotate(-8deg);
    transform-origin: 82% 78%;
    filter: drop-shadow(0 8px 8px rgba(91, 57, 80, .22));
  }

  .app-shell[data-phase="cracking"][data-press-level="0"] .manual-mallet {
    display: block;
  }

  .app-shell[data-phase="idle"][data-processing-loaded="true"][data-press-level="0"] .manual-mallet {
    right: 23%;
    bottom: 20%;
    display: block;
    width: 150px;
    height: 100px;
    opacity: .84;
    transform: rotate(10deg);
  }

  .app-shell.manual-hit .manual-mallet {
    animation: r57-manual-mallet-hit 420ms cubic-bezier(.22,.68,.2,1) both;
  }

  .app-shell[data-conveyor-level="0"] .field-stones {
    z-index: 18;
    top: 49%;
    right: auto;
    bottom: auto;
    left: 16%;
    display: grid;
    align-items: end;
    justify-content: center;
    width: 92px;
    height: 88px;
    transform: translateX(-50%);
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-count="2"] {
    grid-template-columns: repeat(2, 61px);
    width: 122px;
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-count="3"] {
    grid-template-columns: repeat(3, 50px);
    width: 150px;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 82px;
    padding: 0 3px 4px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button.is-next {
    z-index: 2;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button::after {
    right: 18px;
    bottom: 17px;
    left: 18px;
    height: 9px;
    background: rgba(56, 44, 56, .2);
    filter: blur(4px);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-art {
    width: 64px;
    height: 64px;
    transform: none;
    filter: drop-shadow(0 7px 7px rgba(91, 57, 80, .2));
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-count="2"] .field-stone-art {
    width: 54px;
    height: 54px;
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-count="3"] .field-stone-art {
    width: 46px;
    height: 46px;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-name { display: none; }
  .app-shell[data-conveyor-level="0"] .field-stone-hint {
    position: absolute;
    top: 66px;
    left: 50%;
    display: block;
    width: max-content;
    max-width: 120px;
    padding: 3px 7px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,250,238,.9);
    color: #5c4356;
    font-size: .48rem;
    font-weight: 850;
    transform: translateX(-50%);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button.is-queued .field-stone-hint {
    display: none;
  }

  .app-shell[data-conveyor-level="1"] .field-stones {
    left: 18%;
    width: 42%;
  }

  /* R63A: the manual queue has real locations. Capsules sit inside the bowl,
     then persist on the hammer station after a hand-carry state change. */
  .manual-processing-target {
    position: absolute;
    z-index: 15;
    top: 55%;
    left: 54%;
    display: grid;
    width: 108px;
    height: 76px;
    place-items: end center;
    padding-bottom: 3px;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .manual-processing-target::before {
    position: absolute;
    top: 41%;
    right: 90%;
    width: 255px;
    border-top: 2px dashed rgba(255, 255, 255, .55);
    content: "";
    transform: rotate(-4deg);
    transform-origin: right center;
  }

  .manual-processing-target::after {
    position: absolute;
    top: 31%;
    right: 88%;
    width: 10px;
    height: 10px;
    border-top: 3px solid rgba(255, 255, 255, .75);
    border-right: 3px solid rgba(255, 255, 255, .75);
    content: "";
    transform: rotate(45deg);
  }

  .manual-processing-ring {
    position: absolute;
    inset: 4px 5px 15px;
    border: 3px dashed rgba(255, 255, 255, .76);
    border-radius: 50%;
    background: rgba(255, 248, 225, .2);
    box-shadow: 0 0 0 7px rgba(255, 212, 103, .12), inset 0 0 18px rgba(255,255,255,.3);
    animation: r63-processing-target 1.8s ease-in-out infinite;
  }

  .manual-processing-target small {
    position: relative;
    z-index: 1;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 999px;
    background: rgba(255,250,238,.92);
    color: #5c4356;
    font-size: .5rem;
    font-weight: 900;
    letter-spacing: .04em;
  }

  .manual-processing-target.is-loaded::before,
  .manual-processing-target.is-loaded::after {
    opacity: .25;
  }

  .manual-processing-target.is-loaded .manual-processing-ring {
    border-style: solid;
    border-color: rgba(255, 205, 88, .9);
    animation: none;
  }

  .app-shell[data-conveyor-level="0"] .field-stones {
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: none;
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-count] {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .app-shell[data-conveyor-level="0"] .field-stones::after {
    position: absolute;
    top: 54.4%;
    left: 8.3%;
    z-index: 4;
    width: 15.4%;
    height: 4%;
    border-top: 5px solid rgba(255, 239, 202, .96);
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(46, 174, 159, .9), rgba(25, 137, 130, .88));
    box-shadow: inset 0 3px 4px rgba(255,255,255,.12), 0 3px 4px rgba(70,49,56,.1);
    content: "";
    pointer-events: none;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button {
    position: absolute;
    display: grid;
    width: 58px;
    min-width: 58px;
    min-height: 58px;
    padding: 0;
    pointer-events: auto;
    transform: translate(-50%, -50%);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"] {
    top: 53.5%;
    left: 16%;
    z-index: 3;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"][data-receiving-slot="0"] {
    top: 53.5%;
    left: 11.5%;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"][data-receiving-slot="1"] {
    top: 49.2%;
    left: 16%;
    z-index: 2;
    transform: translate(-50%, -50%) scale(.88);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"][data-receiving-slot="2"] {
    top: 53.5%;
    left: 20.5%;
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-receiving-count="1"] .field-stone-button[data-receiving-slot="0"] {
    top: 51.5%;
    left: 16%;
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-receiving-count="2"] .field-stone-button[data-receiving-slot="0"] {
    top: 52.5%;
    left: 13.3%;
  }

  .app-shell[data-conveyor-level="0"] .field-stones[data-receiving-count="2"] .field-stone-button[data-receiving-slot="1"] {
    top: 52.5%;
    left: 18.7%;
    z-index: 3;
    transform: translate(-50%, -50%);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="processing"] {
    top: 55%;
    left: 54%;
    z-index: 5;
    width: 82px;
    min-width: 82px;
    min-height: 82px;
    transform: translate(-50%, -50%);
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="processing"] .field-stone-art {
    width: 72px;
    height: 72px;
    filter: drop-shadow(0 10px 9px rgba(91, 57, 80, .28));
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="processing"] .field-stone-hint {
    top: 72px;
  }

  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="receiving"]:disabled {
    cursor: default;
    filter: saturate(.72);
    opacity: .74;
  }

  .app-shell.manual-carry .field-stone-button[data-location="processing"] {
    animation: r63-real-hand-carry 720ms cubic-bezier(.18,.7,.2,1) both;
  }

  .app-shell.manual-carry .geode-button {
    animation: r57-hand-carry 740ms cubic-bezier(.18,.7,.2,1) both;
  }

  .facility-panel:not([data-kind="new-game-plus"]) .facility-effect {
    display: block;
    color: #6e5267;
    font-size: .5rem;
    font-weight: 750;
    line-height: 1.24;
  }

  @keyframes r57-drop-to-bowl {
    0% { top: -24%; opacity: 0; transform: rotate(-18deg) scale(.72); }
    12% { opacity: 1; }
    68% { top: 46%; opacity: 1; transform: rotate(10deg) scale(.92); }
    82% { top: 41%; opacity: 1; transform: rotate(-5deg) scale(.98); }
    100% { top: 49%; opacity: 0; transform: rotate(2deg) scale(.88); }
  }

  @keyframes r57-bowl-ring {
    0%, 64% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
    78% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
  }

  @keyframes r57-waiting-arrival {
    0%, 70% { opacity: 0; transform: translateY(-12px) scale(.72); }
    86% { opacity: 1; transform: translateY(3px) scale(1.04); }
    100% { opacity: 1; transform: none; }
  }

  @keyframes r57-hand-carry {
    0% { opacity: .5; transform: translate(-270px, 34px) scale(.74) rotate(-9deg); }
    58% { opacity: 1; transform: translate(10px, -4px) scale(1.04) rotate(2deg); }
    100% { opacity: 1; transform: none; }
  }

  @keyframes r63-real-hand-carry {
    0% { opacity: .62; transform: translate(-385%, -42%) scale(.68) rotate(-10deg); }
    62% { opacity: 1; transform: translate(-40%, -56%) scale(1.05) rotate(3deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
  }

  @keyframes r63-processing-target {
    0%, 100% { opacity: .62; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.04); }
  }

  @keyframes r57-manual-mallet-hit {
    0% { opacity: .92; transform: rotate(-18deg) translate(20px, -22px); }
    44% { opacity: 1; transform: rotate(-57deg) translate(-22px, 9px) scale(1.03); }
    62% { transform: rotate(-51deg) translate(-18px, 6px) scale(.98); }
    100% { opacity: .94; transform: rotate(-8deg); }
  }
}

@media (min-width: 680px) and (max-height: 380px) {
  .supply-drop-capsule { width: 58px; height: 58px; }
  .manual-mallet { right: 18%; bottom: 18%; width: 158px; height: 105px; }
  .app-shell[data-conveyor-level="0"] .field-stones { top: 48%; }
  .app-shell[data-conveyor-level="0"] .field-stones { inset: 0; height: 100%; }
  .manual-processing-target,
  .app-shell[data-conveyor-level="0"] .field-stone-button[data-location="processing"] { top: 54%; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.supply-drop .supply-drop-capsule,
  .app-shell.supply-drop .supply-drop-ring,
  .app-shell.supply-drop .field-stone-button:last-child .field-stone-art,
  .app-shell.manual-carry .geode-button,
  .app-shell.manual-carry .field-stone-button[data-location="processing"],
  .manual-processing-ring,
  .app-shell.manual-hit .manual-mallet {
    animation-duration: 1ms !important;
  }
}