/* ── 試飲包滿額拉霸（tasting-draw.js）— 深綠×金 精品語彙 ────────── */
.hh-draw-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(217, 189, 120, 0.45);
  border-radius: 14px;
  background: linear-gradient(135deg, #24402f, #14241c);
  color: #f7f3df;
  cursor: pointer;
  text-align: left;
}
.hh-draw-entry-icon { font-size: 22px; }
.hh-draw-entry strong { display: block; font: 600 15px/1.3 var(--font-ui); letter-spacing: 0.04em; }
.hh-draw-entry small { color: rgba(248, 237, 210, 0.75); font-size: 12px; }

.hh-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060; /* 高於 checkout-success(10050) */
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 18, 13, 0.72);
  -webkit-backdrop-filter: var(--hh-scrim-blur);
  backdrop-filter: var(--hh-scrim-blur);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hh-draw-overlay.is-open { opacity: 1; }

.hh-draw-panel {
  width: min(100%, 380px);
  min-width: 0;        /* grid item 預設 min-width:auto，會被 reel 長標題撐爆 → 鎖 0 防溢出歪位 */
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  border-radius: 24px;
  padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 85% -5%, rgba(197, 160, 89, 0.18), transparent 50%),
    linear-gradient(150deg, #24402f 0%, #16271e 60%, #0d1411 100%);
  border: 1px solid rgba(217, 189, 120, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  color: #f7f3df;
  text-align: center;
}
/* 訂單已成立標籤（拉霸先於成功畫面出現時，先讓客人安心，2026-07-07） */
.hh-draw-order { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 12px; padding: 5px 12px;
  border-radius: 999px; background: rgba(140, 186, 132, 0.16); border: 1px solid rgba(140, 186, 132, 0.4);
  font: 600 12px/1 var(--font-ui); color: #cfe6c6; letter-spacing: 0.02em; }
.hh-draw-order span { font-weight: 700; color: #fff; opacity: 0.9; }
.hh-draw-eyebrow { font: 600 10px/1 var(--font-ui); letter-spacing: 0.34em; color: rgba(217, 189, 120, 0.8); margin: 0 0 8px; }
.hh-draw-title { font: 700 22px/1.2 var(--font-primary, serif); margin: 0 0 6px; }
.hh-draw-sub { font-size: 13px; color: rgba(248, 237, 210, 0.7); margin: 0 0 18px; }

.hh-draw-machine { position: relative; margin: 0 auto 16px; width: min(100%, 280px); min-width: 0; max-width: 100%; }
.hh-draw-window {
  height: 64px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(8, 14, 10, 0.85);
  border: 1px solid rgba(217, 189, 120, 0.5);
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.6);
}
.hh-draw-reel { list-style: none; margin: 0; padding: 0; width: 100%; will-change: transform; }
.hh-draw-reel li {
  height: 64px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font: 600 17px/1.2 var(--font-primary, serif);
  letter-spacing: 0.08em;
  color: #f0cf7f;
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hh-draw-reel li.is-win { animation: hh-draw-win 0.7s ease both; }
@keyframes hh-draw-win {
  0% { text-shadow: none; }
  45% { text-shadow: 0 0 18px rgba(240, 207, 127, 0.9); transform: scale(1.08); }
  100% { text-shadow: 0 0 6px rgba(240, 207, 127, 0.45); transform: scale(1); }
}
/* 視窗上下淡出，營造轉輪縱深 */
.hh-draw-frame {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 20, 17, 0.9), transparent 30%, transparent 70%, rgba(13, 20, 17, 0.9));
}

.hh-draw-prizes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 30px; margin-bottom: 14px; }
.hh-draw-chip {
  font-size: 12px; letter-spacing: 0.06em; color: #e8c978;
  border: 1px solid rgba(217, 189, 120, 0.4); border-radius: 999px; padding: 6px 12px;
  background: rgba(217, 189, 120, 0.08);
}

.hh-draw-lever {
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0cf7f, #c5a059);
  color: #1a2e25;
  font: 700 16px/1 var(--font-ui);
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(197, 160, 89, 0.35);
}
.hh-draw-lever:disabled { opacity: 0.65; cursor: default; box-shadow: none; }
.hh-draw-lever:not(:disabled):active { transform: scale(0.97); }

.hh-draw-close {
  margin-top: 12px;
  background: none; border: 0;
  color: rgba(248, 237, 210, 0.65);
  font-size: 13px; letter-spacing: 0.12em; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hh-draw-reel { transition: none !important; }
}