/* Phone-sized type and actual touch surfaces; remove low-priority duplication
   instead of shrinking important labels into 8px text. */
@media (min-width: 680px) {
  #app #freeTierName, #app #rockTierName, #app #geodeTierName {
    font-size: 12px; line-height: 1.05; max-height: 2.2em;
    letter-spacing: 0; white-space: pre-line;
  }
  .app-shell .tier-button > strong {
    position: absolute; left: 40px; bottom: 4px; margin: 0;
    font-size: 14px; line-height: 1;
  }
  .app-shell .tier-button.is-selected > small {
    position: absolute; right: 5px; bottom: 4px; margin: 0;
    font-size: 12px; line-height: 1;
  }
  .app-shell .tier-button { justify-content: start; align-content: start; padding-top: 3px; }
  #app #freeTierButton, #app #rockTierButton, #app #geodeTierButton { opacity: 1; background: #fff4e6; color: #4c3a52; }
  #app #freeTierButton.is-selected, #app #rockTierButton.is-selected, #app #geodeTierButton.is-selected { background: #e5fff5; }
  #app #freeTierButton:disabled, #app #rockTierButton:disabled, #app #geodeTierButton:disabled { opacity: 1; background: #f2e8da; color: #65545d; }
  .app-shell .tier-button:disabled .tier-art { opacity: .55; }
  #mainActionButton, #facilityButton, #workshopUpgradeButton, #upgradeButton { font-size: 12px; }
  #app #facilityButton:disabled { color: #5f4d5c; background: #eee5db; opacity: 1; }
  #mainActionLabel, #facilityButtonLabel, #workshopUpgradeLabel { font-size: 12px; }
  #facilityTitle, #actionDockTitle, #resultName { font-size: 14px; }
#resultBank { font-size: 12px; }

/* Power and battery remain readable at the compact phone checkpoint. */
.logistics-readout { font-size: 12px; line-height: 1.25; }
.power-world-button {
  position: absolute; left: 48.5%; top: 49%; transform: translate(-50%, -50%);
  z-index: 24; width: 100px; height: 64px; box-sizing: border-box;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 48px 2px 0; border: 0; border-radius: 10px;
  background: transparent; color: #483d3e; font: 600 12px/1.2 system-ui;
  text-shadow: 0 1px 3px #fff8e5, 0 -1px 3px #fff8e5; cursor: pointer;
}
.empty-result-art { border-radius: 12px; }
.result-art-frame[data-result="loss"] .result-art.empty-result-art {
  filter: drop-shadow(0 4px 5px #713d4020); transform: none;
}
#app[data-phase="result"][data-result="loss"] #openGeode.empty-result-art {
  filter: drop-shadow(0 4px 5px #713d4020); transform: none;
}
/* The empty shell itself now shows the consequence. Do not paint the old
   shattered-stone cross/rubble over a toy capsule or darken its ivory plate. */
#app[data-phase="result"][data-result="loss"] .geode-button:has(.empty-result-art)::before,
#app[data-phase="result"][data-result="loss"] .geode-button:has(.empty-result-art)::after,
.result-art-frame:has(.empty-result-art) .result-art-fracture,
.result-art-frame:has(.empty-result-art) .result-art-rubble { display: none; }
/* The old scale-only payoff overwrote the panel's translateX(-50%) and
   jumped the receipt half a card to the right for large gains/losses. */
#app.payoff-large:not(.jackpot-moment) #resultPanel {
  animation-name: centered-result-emphasis;
}
@keyframes centered-result-emphasis {
  0% { transform: translateX(-50%) scale(.96); }
  44% { transform: translateX(-50%) scale(1.035); }
  100% { transform: translateX(-50%) scale(1); }
}
.power-world-button[hidden] { display: none; }
.power-world-button:focus-visible { outline: 3px solid #146e60; background: #fff8e522; }
  #facilityEffect, #facilityReserve, #workshopEffect, #sceneProgressValue { font-size: 12px; line-height: 1.2; }
  #workshopEffect { white-space: normal; overflow: visible; height: auto; max-height: none; }
  /* Workshop's mechanics remain in rules / published odds. This is an upgrade
     action, not a dense parallel probability card. */
  #workshopRiskEffect { display: none !important; }
  .app-shell .hammer-option {
    display: block; height: 56px; min-height: 56px; padding: 0;
  }
  .app-shell .hammer-option .growth-option-heading { display: none; }
  .app-shell .hammer-option .hammer-art {
    position: absolute; left: 5px; top: 9px; width: 48px; height: 38px;
    z-index: 2; pointer-events: none;
  }
  .app-shell .hammer-option .upgrade-hint {
    position: absolute; left: 58px; bottom: 8px; width: auto; max-width: calc(100% - 94px);
    font-size: 12px; line-height: 1.1; z-index: 2; pointer-events: none;
    white-space: nowrap;
  }
  .app-shell .hammer-option .upgrade-button {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px;
    display: block; padding: 0; border-radius: 16px;
    background: #f6f0ff; box-shadow: none; z-index: 1;
  }
  .app-shell .hammer-option .upgrade-button > span {
    position: absolute; left: 58px; right: 5px; top: 7px;
    font-size: 12px; line-height: 1.15; text-align: left;
  }
  .app-shell .hammer-option .upgrade-button strong {
    position: absolute; bottom: 7px; right: 7px; font-size: 12px;
  }
  .app-shell .hammer-option .upgrade-button:disabled { opacity: 1; }
  .app-shell .hammer-option .upgrade-button:focus-visible { outline: 3px solid #9a73ce; outline-offset: 2px; }
}
@media (min-width: 680px) and (max-height: 380px) {
  .app-shell .growth-rail { left: 190px; width: 408px; }
  .app-shell .hammer-option { left: -184px; width: 176px; top: -8px; }
}