/* Font thương hiệu: đặt file vào assets/fonts/ với đúng tên dưới đây; thiếu file thì dùng Barlow. */
@font-face { font-family: 'Brand'; src: url('../assets/fonts/brand-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Brand'; src: url('../assets/fonts/brand-bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Brand'; src: url('../assets/fonts/brand-black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  /* 1 đơn vị thiết kế (khung 1440 × 2560) = var(--u) px; app.js cập nhật theo màn hình. */
  --u: 0.27px;
  --navy: #0b3f7a;
  --blue-dark: #0a4f96;
  --blue-light: #26b8ea;
  --blue-btn: #1f6fd1;
  --edge: #6fd6ff;
  --white: #fff;
  --red: #e2231a;
  --error: #ff6b6b;
  --font: 'Brand', 'Barlow Semi Condensed', system-ui, sans-serif;
  --font-script: 'Dancing Script', cursive;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--navy); }
body {
  font-family: var(--font);
  color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
img[data-asset]:not([src]) { display: none; }

/* ---------- Nền & khung ---------- */
.bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 72%, rgba(120, 200, 255, .55), transparent 60%),
    linear-gradient(180deg, #0d3c75 0%, #1c5ea8 45%, #7fb6e6 62%, #2c79c6 70%, #174f93 100%);
}
.has-bg .bg { background: var(--img-bg) center / cover no-repeat, var(--navy); }

.stage { position: absolute; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility 0s .6s;
}
.screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- Chữ tiêu đề (bản thay thế khi chưa có PNG) ---------- */
.title { position: absolute; left: calc(var(--u) * 70); right: calc(var(--u) * 70); text-align: center; }
.title img { display: block; margin: 0 auto; max-width: 100%; }
.title-text { font-weight: 800; line-height: .95; letter-spacing: .01em; text-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(0, 20, 60, .35); }
.t-xl { font-size: calc(var(--u) * 190); }
.t-lg { font-size: calc(var(--u) * 150); }
.t-md { font-size: calc(var(--u) * 100); }
.t-script { font-family: var(--font-script); font-size: calc(var(--u) * 104); white-space: nowrap; margin-top: calc(var(--u) * 10); }
.outline { color: transparent; -webkit-text-stroke: calc(var(--u) * 5) #fff; text-shadow: none; }

.title-intro { top: calc(var(--u) * 230); }
.title-intro img { max-height: calc(var(--u) * 480); }
.title-wheel { top: calc(var(--u) * 200); }
.title-wheel img { max-height: calc(var(--u) * 340); }
.title-result { top: calc(var(--u) * 190); }
.title-result img { max-height: calc(var(--u) * 200); }

/* ---------- Form ---------- */
.form { position: absolute; left: calc(var(--u) * 160); width: calc(var(--u) * 1120); top: calc(var(--u) * 758); }
.field {
  display: flex; align-items: center; gap: calc(var(--u) * 16);
  height: calc(var(--u) * 150);
  margin-bottom: calc(var(--u) * 54);
  padding: 0 calc(var(--u) * 60);
  background: rgba(16, 58, 110, .88);
  border: calc(var(--u) * 3) solid var(--edge);
  border-radius: calc(var(--u) * 24);
  box-shadow: 0 0 calc(var(--u) * 24) rgba(111, 214, 255, .35), inset 0 0 calc(var(--u) * 20) rgba(0, 0, 0, .25);
  transition: box-shadow .2s, border-color .2s;
}
.field:focus-within { border-color: #fff; box-shadow: 0 0 calc(var(--u) * 40) rgba(111, 214, 255, .8); }
.field.is-error { border-color: var(--error); box-shadow: 0 0 calc(var(--u) * 30) rgba(255, 107, 107, .6); animation: shake .4s; }
.field-label { font-weight: 700; font-size: calc(var(--u) * 60); white-space: nowrap; }
.field input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: 0; outline: 0;
  color: #fff; font-family: var(--font); font-weight: 700;
  font-size: max(16px, calc(var(--u) * 60)); /* ≥16px để iOS không tự zoom */
  -webkit-user-select: text; user-select: text;
}
.form-error {
  min-height: calc(var(--u) * 60); margin: calc(var(--u) * -30) 0 calc(var(--u) * 10);
  text-align: center; color: #ffd2d2; font-weight: 700; font-size: calc(var(--u) * 46);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* ---------- Nút ---------- */
.btn {
  display: block; position: relative; border: 0; cursor: pointer; padding: 0;
  font-weight: 800; letter-spacing: .02em;
  border-radius: calc(var(--u) * 26);
  background: linear-gradient(180deg, #3a93f0 0%, #1d68c9 55%, #1557ad 100%);
  box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(255, 255, 255, .45), 0 calc(var(--u) * 10) 0 #0d3f86, 0 calc(var(--u) * 18) calc(var(--u) * 30) rgba(0, 20, 60, .45);
  border: calc(var(--u) * 3) solid #7cc6ff;
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.btn:active:not(:disabled) { transform: translateY(calc(var(--u) * 8)); box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(255, 255, 255, .3), 0 calc(var(--u) * 2) 0 #0d3f86; }
.btn:disabled { filter: grayscale(1) brightness(.8); cursor: default; }
.btn.skinned { background: var(--skin) center / contain no-repeat; border: 0; box-shadow: none; border-radius: 0; }
.btn.skinned > span { visibility: hidden; }
.btn.skinned:active:not(:disabled) { background-image: var(--skin-pressed, var(--skin)); box-shadow: none; }
.btn.skinned.has-disabled:disabled { background-image: var(--skin-disabled); filter: none; }

.btn-start { margin: 0 auto; width: calc(var(--u) * 675); height: calc(var(--u) * 165); font-size: calc(var(--u) * 72); }
.btn-start.is-loading > span { opacity: .5; }
.btn-start:not(:disabled):not(.skinned) { animation: pulse 2.2s ease-in-out infinite; }

.btn-back { position: absolute; left: calc(var(--u) * 663); top: calc(var(--u) * 1728); width: calc(var(--u) * 630); height: calc(var(--u) * 155); }
.btn-back svg { width: calc(var(--u) * 180); height: auto; vertical-align: middle; }

/* ---------- Vùng bấm ẩn ---------- */
.secret-zone {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: calc(var(--u) * 220); height: calc(var(--u) * 220);
  background: transparent; border: 0; padding: 0; outline: 0;
}

/* ---------- Hết quà ---------- */
.soldout {
  position: absolute; z-index: 4;
  left: calc(var(--u) * 120); width: calc(var(--u) * 1200); top: calc(var(--u) * 730);
  animation: pop-in .5s cubic-bezier(.2, 1.4, .4, 1);
}
.soldout-card {
  text-align: center;
  padding: calc(var(--u) * 70) calc(var(--u) * 60);
  background: rgba(12, 45, 92, .96);
  border: calc(var(--u) * 4) solid #ffb4b4;
  border-radius: calc(var(--u) * 30);
  box-shadow: 0 0 calc(var(--u) * 60) rgba(255, 90, 90, .5);
}
.soldout-icon { width: calc(var(--u) * 170); height: calc(var(--u) * 170); color: #ffb4b4; }
.soldout h2 { margin: calc(var(--u) * 20) 0 calc(var(--u) * 16); font-size: calc(var(--u) * 100); font-weight: 800; }
.soldout p { margin: 0; font-size: calc(var(--u) * 52); opacity: .9; }
.is-soldout .form { opacity: .25; pointer-events: none; }

/* ---------- Sản phẩm ---------- */
.product { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); pointer-events: none; }
.product-intro { height: calc(var(--u) * 1380); }
.product-small { height: calc(var(--u) * 830); }

/* ---------- Vòng quay ---------- */
.wheel { position: absolute; left: calc(var(--u) * 120); top: calc(var(--u) * 600); width: calc(var(--u) * 1200); height: calc(var(--u) * 1200); }
.wheel-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-layer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wheel-shadow { position: absolute; left: -4.17%; top: -4.17%; width: 108.33%; height: 108.33%; }
.wheel-shadow-fb { border-radius: 50%; background: radial-gradient(circle, rgba(0, 20, 60, .5) 62%, rgba(111, 214, 255, .25) 68%, transparent 72%); }
.wheel-rotor { position: absolute; inset: 0; will-change: transform; }
.wheel-highlight { position: absolute; inset: 0; opacity: 0; }
.wheel-highlight.is-on { animation: blink .3s steps(1) 4; }
.wheel-rim { pointer-events: none; }
.wheel-lights { pointer-events: none; opacity: 0; }
.wheel.is-spinning .wheel-lights { animation: blink .24s steps(1) infinite; }
.wheel .bulb { fill: #fff; }
.wheel .bulb.alt { fill: #bfeaff; }
.wheel.is-spinning .bulb { animation: bulb .24s steps(1) infinite; }
.wheel.is-spinning .bulb.alt { animation-delay: .12s; }
.wheel.is-idle .bulb { animation: bulb 1.2s steps(1) infinite; }
.wheel.is-idle .bulb.alt { animation-delay: .6s; }

.btn-spin {
  position: absolute; left: 33.33%; top: 33.33%; width: 33.33%; height: 33.33%;
  border: 0; padding: 0; background: transparent; cursor: pointer;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 16) rgba(0, 20, 60, .45));
  transition: transform .1s;
}
.btn-spin.skinned { background: var(--skin) center / contain no-repeat; }
.btn-spin.skinned .btn-spin-fb { display: none; }
.btn-spin.skinned:active:not(:disabled), .btn-spin.skinned:disabled { background-image: var(--skin-pressed, var(--skin)); }
.btn-spin-fb { width: 100%; height: 100%; overflow: visible; }
.btn-spin-fb text { font-family: var(--font); font-weight: 800; font-size: 72px; fill: var(--blue-dark); }
.btn-spin:active:not(:disabled) { transform: scale(.93); }
.btn-spin:not(:disabled) { animation: breathe 1.4s ease-in-out infinite; }
.btn-spin.tick { transform: rotate(-7deg); }

/* ---------- Kết quả ---------- */
.logo { position: absolute; left: 0; right: 0; top: calc(var(--u) * 455); text-align: center; }
.logo img { height: calc(var(--u) * 235); }
.logo-text b { display: block; font-size: calc(var(--u) * 150); font-weight: 800; line-height: .9; letter-spacing: -.01em; }
.logo-text span { font-size: calc(var(--u) * 60); letter-spacing: .08em; font-weight: 500; }

.prize-card {
  position: absolute; left: calc(var(--u) * 145); top: calc(var(--u) * 712); width: calc(var(--u) * 1150); height: calc(var(--u) * 975);
  background: rgba(22, 64, 114, .92);
  border: calc(var(--u) * 3) solid var(--edge);
  border-radius: calc(var(--u) * 26);
  box-shadow: 0 0 calc(var(--u) * 40) rgba(111, 214, 255, .45);
  overflow: hidden;
}
.prize-stage { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 860); }
.rays, .glow {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--u) * 1600); height: calc(var(--u) * 1600);
  margin: calc(var(--u) * -800) 0 0 calc(var(--u) * -800);
  pointer-events: none; opacity: 0;
}
.rays-fb {
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .28) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%);
  mask: radial-gradient(circle, #000 8%, transparent 62%);
}
.glow { width: calc(var(--u) * 1200); height: calc(var(--u) * 1200); margin: calc(var(--u) * -600) 0 0 calc(var(--u) * -600); }
.glow-fb { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(160, 230, 255, .6) 25%, transparent 60%); }
.prize-imgs { position: absolute; inset: calc(var(--u) * 20) calc(var(--u) * 165) 0; }
.prize-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.prize-fb {
  position: absolute; inset: 12%; display: none;
  align-items: center; justify-content: center; text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5fd0ff, #1f6fd1 60%, #0d3f86);
  box-shadow: inset 0 0 calc(var(--u) * 40) rgba(255, 255, 255, .5), 0 calc(var(--u) * 20) calc(var(--u) * 50) rgba(0, 0, 0, .35);
  font-weight: 800; font-size: calc(var(--u) * 90); line-height: 1; padding: 10%;
}
.prize-name {
  position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 40);
  text-align: center; color: #5cc8f5; font-weight: 800; font-size: calc(var(--u) * 84); letter-spacing: .02em;
  opacity: 0;
}
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute; width: calc(var(--u) * 90); height: calc(var(--u) * 90);
  margin: calc(var(--u) * -45) 0 0 calc(var(--u) * -45);
  background: var(--img-sparkle, none) center / contain no-repeat;
  animation: twinkle 1.6s ease-in-out infinite;
  opacity: 0;
}
.sparkle:not(.img)::before {
  content: ''; position: absolute; inset: 0;
  background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 6px #bfefff);
}

/* Chuỗi hiệu ứng khi hiện quà */
.screen-result.is-revealed .title-result { animation: drop-in .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.screen-result.is-revealed .logo { animation: drop-in .7s .12s cubic-bezier(.2, 1.5, .4, 1) both; }
.screen-result.is-revealed .prize-card { animation: card-in .6s .1s cubic-bezier(.2, 1.3, .4, 1) both; }
.screen-result.is-revealed .glow { animation: glow-burst 1.3s .45s ease-out both; }
.screen-result.is-revealed .rays { animation: rays-in .8s .5s ease-out forwards, spin 18s .5s linear infinite; }
.screen-result.is-revealed .prize-img[src].is-won,
.screen-result.is-revealed .prize-fb.is-won { display: flex; animation: prize-in 1s .5s cubic-bezier(.2, 1.6, .35, 1) both, bob 3s 1.6s ease-in-out infinite; }
.screen-result.is-revealed .prize-name { animation: name-in .6s 1.1s cubic-bezier(.2, 1.5, .4, 1) both; }
.screen-result.is-revealed .btn-back { animation: fade-up .5s 1.8s both; }

/* ---------- Flash, fx, toast, modal ---------- */
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 20; }
.flash.is-on { animation: flash .5s ease-out; }
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.toast {
  position: fixed; left: 50%; bottom: 8%; z-index: 40;
  transform: translate(-50%, 20px); opacity: 0;
  max-width: 86vw; padding: 12px 20px; border-radius: 12px;
  background: rgba(8, 30, 64, .95); border: 1px solid var(--edge);
  font-weight: 700; font-size: 16px; text-align: center;
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 10, 30, .7); }
.modal-card {
  width: min(420px, 100%); padding: 20px; border-radius: 16px;
  background: #0f2f5c; border: 1px solid var(--edge); color: #fff;
  font-family: system-ui, sans-serif; animation: pop-in .3s ease-out;
  -webkit-user-select: text; user-select: text;
}
.modal-card h2 { margin: 0 0 12px; font-size: 18px; }
.stats-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, .15); text-align: right; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }
.stats-table tfoot td { font-weight: 700; border-bottom: 0; }
.stats-table .zero { color: #ff9b9b; }
.stats-note { font-size: 13px; opacity: .8; margin: 10px 0 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.modal-actions button { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--edge); background: transparent; font-weight: 600; font-size: 15px; }
.modal-actions .primary { background: var(--blue-btn); border-color: var(--blue-btn); }

/* ---------- Keyframes ---------- */
.anim-drop { animation: drop-in .8s cubic-bezier(.2, 1.4, .4, 1) both; }
.anim-float { animation: float 4s ease-in-out infinite; }

@keyframes drop-in { from { opacity: 0; transform: translateY(-30%) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: scale(.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes prize-in {
  0% { opacity: 0; transform: scale(0) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.18) rotate(6deg); }
  80% { transform: scale(.94) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes name-in { from { opacity: 0; transform: scale(2.2); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
@keyframes glow-burst { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes rays-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3%); } }
@keyframes float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -1.2%); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes bulb { 0% { fill: #fff9c4; filter: drop-shadow(0 0 6px #fff59d); } 50% { fill: #5d8fc4; filter: none; } }
@keyframes flash { from { opacity: .75; } to { opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-2%); } 40%, 80% { transform: translateX(2%); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

@media (prefers-reduced-motion: reduce) {
  .anim-float, .btn-start, .btn-spin { animation: none !important; }
}