/**
 * 活动 H5 · 大转盘（与顾客约单 App 视觉独立）
 */
:root {
  --h5-bg1: #8b0a1e;
  --h5-bg2: #d42a3a;
  --h5-gold: #ffd56a;
  --h5-gold-deep: #e8a317;
  --h5-cream: #fff6e8;
  --h5-panel: rgba(255, 248, 235, 0.96);
  --h5-text: #3b1d0f;
  --h5-muted: #9a6b4a;
  --h5-pink: #ff4d6d;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--h5-text);
  background: radial-gradient(ellipse at 50% 0%, #ff5a6a 0%, var(--h5-bg2) 35%, var(--h5-bg1) 100%);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }

.h5-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 40px;
  position: relative;
  overflow-x: hidden;
}

.h5-hero {
  text-align: center;
  padding: 28px 20px 8px;
  color: #fff;
  position: relative;
}
.h5-hero::before {
  content: '';
  position: absolute;
  inset: -40px -20% auto;
  height: 180px;
  background:
    radial-gradient(circle at 20% 60%, rgba(255,213,106,.35), transparent 40%),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,.2), transparent 35%);
  pointer-events: none;
}
.h5-hero h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 3px 0 rgba(120, 10, 20, .35), 0 8px 24px rgba(0,0,0,.25);
  position: relative;
}
.h5-hero p {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: .92;
  position: relative;
}
.h5-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  position: relative;
  flex-wrap: wrap;
}
.h5-chip {
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,213,106,.45);
  color: var(--h5-gold);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
}
.h5-chip strong { color: #fff; font-size: 16px; }

/* 转盘 */
.h5-wheel-wrap {
  position: relative;
  width: min(86vw, 340px);
  margin: 18px auto 8px;
  aspect-ratio: 1;
}
.h5-wheel-outer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #ffd56a, #fff1c2, #ffd56a, #e8a317, #ffd56a);
  padding: 10px;
  box-shadow:
    0 0 0 4px rgba(255, 213, 106, .35),
    0 16px 40px rgba(0,0,0,.35);
}
.h5-wheel-disk {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.h5-wheel-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.h5-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 28px solid #ffd56a;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
}
.h5-pointer::after {
  content: '';
  position: absolute;
  top: -34px;
  left: -8px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ffd56a;
}
.h5-go {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 78px; height: 78px;
  border-radius: 50%;
  border: 4px solid #fff;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #ff9f1a 55%, #e07000);
  color: #7a2e00;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.5);
  cursor: pointer;
  letter-spacing: 0.04em;
}
.h5-go:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.h5-go:active:not(:disabled) { transform: translate(-50%, -50%) scale(.96); }

.h5-hint {
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  margin: 4px 16px 18px;
}

/* 面板 */
.h5-panel {
  margin: 0 14px 14px;
  background: var(--h5-panel);
  border-radius: 18px;
  padding: 14px 14px 16px;
  box-shadow: 0 10px 28px rgba(80, 0, 20, .22);
  border: 1px solid rgba(255, 213, 106, .35);
}
.h5-panel h2 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #8b0a1e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.h5-panel h2 em {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--h5-muted);
  background: #ffe8c8;
  padding: 3px 10px;
  border-radius: 999px;
}

.h5-ex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.h5-ex-card {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid #f0d9b8;
}
.h5-ex-card .n { font-weight: 750; font-size: 13px; line-height: 1.35; min-height: 2.6em; }
.h5-ex-card .m { font-size: 11px; color: var(--h5-muted); margin: 4px 0 8px; }
.h5-ex-card .f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.h5-ex-card .cost {
  color: var(--h5-pink);
  font-weight: 800;
  font-size: 14px;
}
.h5-btn {
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5a6a, #c41e3a);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}
.h5-btn:disabled { opacity: .45; cursor: not-allowed; }
.h5-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
}

.h5-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.h5-rank-table th {
  text-align: left;
  color: var(--h5-muted);
  font-weight: 600;
  padding: 6px 4px;
  border-bottom: 1px solid #f0d9b8;
}
.h5-rank-table td {
  padding: 10px 4px;
  border-bottom: 1px solid #f7e8d4;
}
.h5-rank-table tr:last-child td { border-bottom: none; }
.h5-rank-me { background: #fff3d6; }
.h5-medal {
  display: inline-flex;
  width: 24px; height: 24px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.h5-medal-1 { background: linear-gradient(135deg, #ffd56a, #e8a317); color: #7a2e00; }
.h5-medal-2 { background: #b8c0cc; }
.h5-medal-3 { background: #c9894e; }

.h5-empty { text-align: center; color: var(--h5-muted); padding: 16px; font-size: 13px; }
.h5-alert {
  margin: 10px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
}
.h5-alert-error { background: #ffe0e0; color: #a01020; }
.h5-alert-ok { background: #e6ffe8; color: #0a6b2e; }
.h5-login {
  text-align: center;
  margin: 0 14px 14px;
  padding: 14px;
  background: rgba(0,0,0,.18);
  border-radius: 14px;
  color: #fff;
}
.h5-login a {
  display: inline-block;
  margin: 8px 6px 0;
  background: var(--h5-gold);
  color: #7a2e00;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 999px;
}

.h5-mine {
  margin: 0 14px;
  background: rgba(0,0,0,.15);
  border-radius: 14px;
  color: #fff;
  padding: 0;
  overflow: hidden;
}
.h5-mine summary {
  list-style: none;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
}
.h5-mine summary::-webkit-details-marker { display: none; }
.h5-mine .inner {
  background: var(--h5-panel);
  color: var(--h5-text);
  padding: 12px;
}

.h5-win-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.h5-win-table th,
.h5-win-table td {
  padding: 8px 4px;
  border-bottom: 1px solid #f0d9b8;
  text-align: left;
  vertical-align: middle;
}
.h5-win-table th { color: var(--h5-muted); font-weight: 600; }
.h5-sub {
  font-size: 13px;
  margin: 14px 0 8px;
  font-weight: 750;
}
.h5-rank-note {
  margin: -4px 0 10px;
  font-size: 11px;
  color: var(--h5-muted);
}
.h5-st {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.h5-st-pending { background: #fff0c8; color: #9a5b00; }
.h5-st-ok { background: #e2f8e8; color: #0a6b2e; }
.h5-st-muted { background: #eee; color: #777; }
.h5-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #ffe4d6;
  color: #a04020;
  font-weight: 700;
}
.h5-mine table { width: 100%; font-size: 12px; border-collapse: collapse; }
.h5-mine th, .h5-mine td { padding: 6px 4px; border-bottom: 1px solid #f0d9b8; text-align: left; }

/* 中奖弹层 */
.h5-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(40, 0, 10, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.h5-modal.show { opacity: 1; pointer-events: auto; }
.h5-modal-box {
  width: min(320px, 92vw);
  background: linear-gradient(180deg, #fff8e8, #fff);
  border-radius: 20px;
  padding: 24px 20px 18px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border: 2px solid var(--h5-gold);
  transform: scale(.9);
  transition: transform .25s;
}
.h5-modal.show .h5-modal-box { transform: scale(1); }
.h5-modal-box h3 {
  margin: 0 0 8px;
  font-size: 22px;
  color: #c41e3a;
}
.h5-modal-box p { margin: 0 0 16px; color: var(--h5-muted); font-size: 14px; }
.h5-modal-box .prize {
  font-size: 18px;
  font-weight: 800;
  color: var(--h5-text);
  margin-bottom: 16px;
}
.h5-pick-list {
  margin: 8px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.h5-pick-card {
  display: block;
  background: var(--h5-panel);
  border-radius: 16px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 213, 106, .4);
  box-shadow: 0 10px 28px rgba(80, 0, 20, .2);
}
.h5-pick-title {
  font-size: 18px;
  font-weight: 800;
  color: #8b0a1e;
}
.h5-pick-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--h5-muted);
  line-height: 1.4;
}
.h5-pick-go {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--h5-pink);
}
.h5-nav-back {
  position: absolute;
  left: 12px; top: 14px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid rgba(255,255,255,.25);
}