/* 弁当温めガチャ：レジ横のレンジで，押している間だけ温める（共通の画面は stage.css） */

/* 画面下：ラベルの説明と，押している間だけ温めるボタン */
.heat-controls {
  position: fixed;
  bottom: var(--bottom);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.heat-hint {
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fffdf4d8;
  backdrop-filter: blur(8px);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #3d5a49;
}

.hold-button {
  min-height: 72px;
  border: 0;
  border-radius: 20px;
  background: #e58a2e;
  color: #fffaf0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 0 #b8661c, 0 10px 24px #6b3b1230;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  transition: transform .08s, box-shadow .08s, background .2s;
}

.hold-button.is-heating {
  transform: translateY(5px);
  background: #d9483b;
  box-shadow: 0 1px 0 #9e2f25, 0 4px 14px #6b3b1230;
}

.hold-button:disabled {
  opacity: .5;
  cursor: default;
}

/* 横長の画面：左の列はレンジだけにして，ひとこととボタンは右の列へ */
@media (min-aspect-ratio: 5/4) {
  .heat-controls,
  .boss-comment {
    left: auto;
    right: max(24px, 3vw);
    width: min(400px, max(260px, 32vw));
    margin: 0;
  }

  .heat-controls {
    top: 50%;
    bottom: auto;
    transform: translateY(-20%);
  }

  .boss-comment {
    top: calc(50% - 90px);
    justify-content: flex-start;
    padding: 0;
  }
}

@media (max-height: 520px) and (min-aspect-ratio: 5/4) {
  .hold-button {
    min-height: 56px;
  }
}