:root {
  color-scheme: light;
  --bg: #FBF6F1;
  --ink: #1C1416;
  --muted: #6B5E60;
  --line: #EFE4DD;
  --field: #DCCFC8;
  --hero: #A8002A;
  --gold: #F5D27A;
  --brand: #C4002B;
  --brand-strong: #B3002A;
  --gift-bg: #FFF3D9;
  --gift-ink: #6E4A00;
  --card-shadow: 0 1px 2px rgba(60, 20, 25, 0.06), 0 14px 34px rgba(60, 20, 25, 0.10);
  --btn-shadow: 0 8px 18px rgba(196, 0, 43, 0.26);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'PingFang TC', 'PingFang SC', 'Noto Sans TC', 'Noto Sans SC', 'Noto Sans Thai', Thonburi, 'Microsoft JhengHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ico { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header ---------- */
.top {
  position: relative; z-index: 5; height: 64px;
  padding: 0 12px 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  background: #FFFFFF; border-bottom: 1px solid var(--line);
}
.logo { display: block; width: 52px; height: 52px; }
.lang { position: relative; }
.lang-btn {
  height: 44px; min-width: 44px; padding: 0 12px 0 11px;
  display: flex; align-items: center; gap: 6px;
  border: 1px solid #E6D9D1; border-radius: 22px; background: #FFFFFF; color: var(--ink);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.ico-globe { width: 18px; height: 18px; stroke-width: 1.8; }
.ico-chev { width: 14px; height: 14px; stroke-width: 2.2; }
.lang-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  width: 236px; padding: 6px;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(60, 20, 25, 0.18);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-menu button {
  height: 46px; padding: 0 12px 0 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 0; border-radius: 11px; background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
}
.lang-menu button:hover { background: #FBF3EF; }
.ln-short { font-size: 12px; font-weight: 700; color: var(--muted); }
.ico-check { width: 18px; height: 18px; stroke-width: 2.4; display: none; }
.lang-menu button[aria-pressed="true"] { background: #FFF0F2; color: var(--brand-strong); font-weight: 700; }
.lang-menu button[aria-pressed="true"] .ln-short { display: none; }
.lang-menu button[aria-pressed="true"] .ico-check { display: block; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero); color: #FFFFFF;
  padding: 28px 20px 64px;
  display: flex; flex-direction: column; gap: 12px;
}
.hero p { margin: 0; }
.slogan {
  display: flex; align-items: center; gap: 10px;
  color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
}
.slogan-rule { width: 22px; height: 2px; flex-shrink: 0; background: var(--gold); }
.hero h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.offer { display: flex; flex-direction: column; gap: 4px; }
.offer-text { font-size: 15px; line-height: 1.35; font-weight: 600; color: #FBE9EC; }
.offer-amount {
  font-size: 68px; line-height: 1; font-weight: 900; letter-spacing: -0.03em;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.hero-sub { font-size: 14.5px; line-height: 1.55; color: #F6DDE2; text-wrap: pretty; }
.hero .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.badge {
  padding: 6px 11px; border: 1px solid #D9A94F; border-radius: 999px;
  color: var(--gold); font-size: 12.5px; font-weight: 700; line-height: 1.35;
}
.hero[data-mode="result"] { padding: 22px 20px 70px; gap: 8px; }
.hero[data-mode="result"] h1 { font-size: 22px; line-height: 1.25; }
.hero[data-mode="result"] .form-only { display: none; }
/* 裝飾皇冠：isolation + z-index:-1 → 在 hero 背景之上、文字之下 */
.hero { isolation: isolate; }
.hero-crown { position: absolute; right: -44px; top: 14px; width: 250px; height: 145px; opacity: 0.2; fill: #FFFFFF; pointer-events: none; z-index: -1; }
.hero-crown--result { right: -30px; top: 8px; width: 190px; height: 110px; display: none; }
.hero[data-mode="result"] .hero-crown { display: none; }
.hero[data-mode="result"] .hero-crown--result { display: block; }

/* ---------- layout ---------- */
.stack { position: relative; margin: -36px 16px 0; display: flex; flex-direction: column; gap: 24px; }
.hero[data-mode="result"] + .stack { margin-top: -50px; }
.card { background: #FFFFFF; border-radius: 20px; box-shadow: var(--card-shadow); }
.divider { height: 1px; background: #F1E7E1; }

/* ---------- form ---------- */
.form { padding: 22px 18px; display: flex; flex-direction: column; gap: 18px; }
.steps-wrap { position: relative; }
.steps-line { position: absolute; top: 13px; left: 17%; right: 17%; height: 0; border-top: 2px dashed #F0CBD2; }
.steps {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
}
.steps li {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-size: 12.5px; line-height: 1.35; font-weight: 600; color: #3A2E30;
}
.step-no {
  width: 28px; height: 28px; border-radius: 14px;
  background: var(--brand); color: #FFFFFF; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px #FFFFFF;
}
.step-no-gold { background: #E8B84A; color: #3D2A00; }

.field-group { display: flex; flex-direction: column; }
.phone-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.select-wrap { position: relative; display: block; }
.field input, .field select {
  width: 100%; height: 50px; padding: 0 14px;
  border: 1.5px solid var(--field); border-radius: 12px;
  background: #FFFDFB; color: var(--ink);
  font-size: 16px; font-weight: 600;
}
.field input { letter-spacing: 0.02em; }
.field select { padding: 0 30px 0 12px; appearance: none; -webkit-appearance: none; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--brand); }
.field input:disabled, .field select:disabled { opacity: 0.7; }
.ico-select {
  position: absolute; right: 10px; top: 17px; width: 16px; height: 16px;
  pointer-events: none; stroke: var(--muted); stroke-width: 2.2;
}
.err {
  margin: 0; display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--brand-strong);
}
.err:not(:empty) { margin-top: 10px; }
.err:not(:empty)::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B3002A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4v0.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ts { min-height: 65px; max-width: 100%; }

/* ---------- buttons ---------- */
.btn {
  min-height: 50px; min-width: 44px; padding: 0 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 14px; text-decoration: none; text-align: center; cursor: pointer;
  font-size: 15px; font-weight: 700;
}
.btn-primary {
  min-height: 54px; border: 0; background: var(--brand); color: #FFFFFF;
  font-size: 16.5px; font-weight: 800; box-shadow: var(--btn-shadow);
}
.btn-ghost { border: 1.5px solid #E6D9D1; background: #FFFFFF; color: var(--ink); }
.ico-arrow { width: 18px; height: 18px; stroke-width: 2.4; }
.ico-retry { width: 18px; height: 18px; stroke-width: 2.2; }
.ico-spin { width: 20px; height: 20px; stroke-width: 2.4; display: none; animation: spin 0.9s linear infinite; }
#submit[aria-busy="true"] { cursor: progress; box-shadow: none; gap: 10px; }
#submit[aria-busy="true"] .ico-spin { display: block; }
#submit[aria-busy="true"] .ico-arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ico-spin { animation: none; } }

/* ---------- result ---------- */
.result { padding: 28px 20px 22px; display: flex; flex-direction: column; }
.result:focus-visible, .result:focus { outline: 3px solid var(--brand); outline-offset: 3px; }
.result-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.disc {
  width: 64px; height: 64px; border-radius: 32px;
  background: #F4EEEA; box-shadow: inset 0 0 0 1.5px #E4D9D3; color: #5B4E50;
  display: flex; align-items: center; justify-content: center;
}
.ico-disc { width: 28px; height: 28px; stroke-width: 1.8; }
.ico-disc .dot { fill: currentColor; stroke: none; }
#result[data-kind^="ok"] .disc, #result[data-kind="verify"] .disc, #result[data-kind="rate"] .disc, #result[data-kind="network"] .disc {
  background: var(--gift-bg); box-shadow: inset 0 0 0 1.5px #EBC878; color: #8A5A00;
}
#result[data-kind^="ok"] .ico-disc { width: 30px; height: 30px; stroke-width: 1.7; }
#result[data-kind^="ok"] .result-head { gap: 14px; }
#resultTitle { margin: 4px 0 0; font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--ink); text-wrap: balance; }
.result-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

.ok-only { display: none; }
#result[data-kind^="ok"] .ok-only { display: flex; }
.amount-block { margin: 0; flex-direction: column; align-items: center; gap: 6px; }
.kicker { font-size: 14px; font-weight: 700; color: var(--muted); }
.amount {
  display: flex; align-items: baseline; gap: 4px;
  color: var(--brand); font-size: 80px; font-weight: 900; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.amount::before { content: "RM"; font-size: 30px; }
.gift {
  margin: 0; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--gift-bg); color: var(--gift-ink); font-size: 15px; font-weight: 800;
}
.ico-gift { width: 18px; height: 18px; stroke-width: 2; display: none; }
#result[data-kind="ok-slot"] .gift-slot, #result[data-kind="ok-live"] .gift-live { display: block; }
.result .divider { margin: 22px 0 18px; }

.rows { margin: 0; flex-direction: column; gap: 14px; }
.rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rows dt { flex-shrink: 0; max-width: 45%; font-size: 14px; font-weight: 600; color: var(--muted); }
.rows dd { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); text-align: right; }
.rows dd.em { color: var(--brand); }

#result[data-kind^="ok"] .segs { display: grid; }
.segs { margin-top: 10px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.seg { height: 6px; border-radius: 3px; }
.seg[data-state="done"] { background: #EADFD8; }
.seg[data-state="left"] { background: #FF0033; }

.ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
#result[data-kind^="ok"] .ctas { margin-top: 26px; }
#result[data-kind="none"] #ctaSupport { min-height: 52px; border: 0; background: var(--ink); color: #FFFFFF; font-size: 16px; font-weight: 800; }
#ctaRetry { min-height: 52px; font-size: 16px; box-shadow: none; }

/* ---------- terms ---------- */
.terms { padding: 0 4px 36px; display: flex; flex-direction: column; gap: 6px; }
.terms h2 { margin: 0; font-size: 13px; font-weight: 700; color: #4A3E40; }
.terms p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---------- narrow ---------- */
/* Turnstile normal 需 300px：360 − 10×2 (stack) − 16×2 (form) = 308px；預設 360 − 32 − 36 = 292px 不夠 */
@media (max-width: 374px) {
  .stack { margin-left: 10px; margin-right: 10px; }
  .form { padding-left: 16px; padding-right: 16px; }
}

/* ---------- desktop ---------- */
@media (min-width: 520px) {
  .top, .hero, .stack { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
  .stack { padding: 0 16px; }
  .top { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}