/* R60 — Preview the next convenience as a world-integrated workshop blueprint.
   This is anticipation, not installed machinery and not another explanation card. */

.facility-blueprint { display: none; }

@media (min-width: 680px) and (orientation: landscape) {
  .facility-blueprint {
    position: absolute;
    z-index: 5;
    right: 18%;
    bottom: 31%;
    left: 22%;
    display: none;
    height: 76px;
    pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(116, 73, 98, .12));
  }

  .facility-blueprint::before,
  .facility-blueprint::after {
    position: absolute;
    color: rgba(130, 96, 177, .72);
    content: "✦";
    font-size: 13px;
    text-shadow: 0 0 8px rgba(255, 255, 255, .9);
    animation: r60-blueprint-spark 1.8s ease-in-out infinite;
  }

  .facility-blueprint::before { top: 2px; left: 20%; }
  .facility-blueprint::after { right: 8%; bottom: 4px; animation-delay: -.7s; }

  .app-shell[data-phase="idle"][data-next-facility="conveyor"][data-conveyor-level="0"] .facility-blueprint,
  .app-shell[data-phase="idle"][data-next-facility="press"] .facility-blueprint,
  .app-shell[data-phase="idle"][data-next-facility="sellBot"] .facility-blueprint {
    display: block;
    animation: r60-blueprint-arrive .7s cubic-bezier(.2,.75,.2,1) both;
  }

  .facility-blueprint-belt,
  .facility-blueprint-press,
  .facility-blueprint-bot {
    position: absolute;
    display: none;
    border: 2px dashed rgba(79, 170, 161, .7);
    background-color: rgba(242, 255, 247, .34);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28), 0 0 14px rgba(77, 187, 169, .13);
  }

  .app-shell[data-next-facility="conveyor"][data-conveyor-level="0"] .facility-blueprint-belt {
    right: 0;
    bottom: 7px;
    left: 0;
    display: block;
    height: 31px;
    border-radius: 18px;
    background-image: radial-gradient(circle, rgba(100, 83, 145, .68) 0 5px, rgba(255, 255, 255, .74) 6px 8px, transparent 9px);
    background-position: 5px 6px;
    background-size: 42px 21px;
  }

  .app-shell[data-next-facility="conveyor"][data-conveyor-level="0"] .facility-blueprint-belt::after {
    position: absolute;
    top: -19px;
    left: 8px;
    color: rgba(102, 73, 151, .7);
    content: "→  →  →";
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 14px;
  }

  .app-shell[data-next-facility="press"] .facility-blueprint-press {
    right: 0;
    bottom: 0;
    display: block;
    width: 72px;
    height: 70px;
    border-radius: 28px 28px 16px 16px;
  }

  .app-shell[data-next-facility="press"] .facility-blueprint-press::before {
    position: absolute;
    top: 14px;
    right: 14px;
    left: 14px;
    height: 12px;
    border: 2px dashed rgba(255, 125, 91, .72);
    border-radius: 8px;
    content: "";
  }

  .app-shell[data-next-facility="press"] .facility-blueprint-press::after {
    position: absolute;
    right: 11px;
    bottom: 11px;
    left: 11px;
    height: 14px;
    border: 2px dashed rgba(102, 73, 151, .68);
    border-radius: 50%;
    content: "";
  }

  .app-shell[data-next-facility="sellBot"] .facility-blueprint-bot {
    right: 0;
    bottom: 4px;
    display: block;
    width: 60px;
    height: 48px;
    border-radius: 22px 22px 15px 15px;
  }

  .app-shell[data-next-facility="sellBot"] .facility-blueprint-bot::before {
    position: absolute;
    top: 14px;
    left: 16px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 125, 91, .75);
    box-shadow: 20px 0 rgba(255, 125, 91, .75);
    content: "";
  }

  @keyframes r60-blueprint-arrive {
    from { opacity: 0; transform: translateY(7px) scale(.97); }
    to { opacity: .76; transform: translateY(0) scale(1); }
  }

  @keyframes r60-blueprint-spark {
    0%, 100% { opacity: .3; transform: scale(.8) rotate(-8deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .facility-blueprint,
  .facility-blueprint::before,
  .facility-blueprint::after {
    animation: none !important;
  }
}

/* Any host taller than the phone stage letterboxes the game instead of
   stretching the workshop. Test controls occupy their own row. */
@media (min-width: 680px) and (min-height: 391px) {
  body {
    display: grid;
    padding: 0;
    place-items: center;
  }

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

  body.test-mode {
    grid-template-columns: minmax(0, 844px);
    grid-template-rows: 46px auto;
    align-content: center;
    justify-content: center;
    gap: 8px;
  }

  body.test-mode .test-mode-panel {
    position: relative;
    inset: auto;
    display: flex;
    align-items: center;
    width: min(100vw, 844px);
    max-width: 844px;
    min-height: 46px;
    margin: 0;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 13px;
  }

  body.test-mode .test-mode-heading > div > span,
  body.test-mode .test-mode-demo-row > span {
    display: none;
  }

  body.test-mode .test-mode-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
  }

  body.test-mode .test-mode-demo-row {
    display: contents;
  }
}

/* R68: reserve a clean lower band for the post-sale receipt. */
@media (min-width: 680px) {
  .app-shell[data-phase="idle"][data-has-last-outcome="true"] .left-rail {
    bottom: 40px;
  }
}

/* R68: keep the post-sale receipt readable over the illustrated workbench. */
@media (min-width: 680px) {
  .app-shell[data-phase="idle"] .last-break {
    border-radius: 10px;
    box-shadow: 0 5px 14px rgba(107, 71, 99, 0.14);
    color: #6d5869;
  }

  .app-shell[data-phase="idle"] .last-break > .eyebrow {
    color: #806b7c;
    font-size: 0.48rem;
    letter-spacing: 0.03em;
  }

  .app-shell[data-phase="idle"] .last-break > span:last-child {
    font-size: 0.63rem;
    font-weight: 850;
  }

  .app-shell[data-phase="idle"] .last-break[data-result="gain"] {
    border-color: rgba(213, 154, 49, 0.46);
    background: rgba(255, 246, 220, 0.96);
  }

  .app-shell[data-phase="idle"] .last-break[data-result="gain"] > span:last-child {
    color: #8d5d13;
  }

  .app-shell[data-phase="idle"] .last-break[data-result="loss"] {
    border-color: rgba(221, 92, 118, 0.46);
    background: rgba(255, 239, 242, 0.97);
  }

  .app-shell[data-phase="idle"] .last-break[data-result="loss"] > span:last-child {
    color: #a33d57;
  }
}