/* =====================================================================
   LỄ TRAO GIẢI — sân khấu, phong bì, dàn nhân vật, bục phát biểu
   ===================================================================== */
.yr { font-style: normal; }

/* Chọn xưng hô */
.pick-xung { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.xung-card {
  position: relative; cursor: pointer; text-align: center;
  padding: 12px 8px 10px; border-radius: 14px;
  border: 1px solid rgba(243, 207, 107, .25); background: rgba(0, 0, 0, .3);
  transition: border-color .2s, box-shadow .2s;
}
.xung-card input { position: absolute; opacity: 0; pointer-events: none; }
.xung-card .xc-ico { display: block; font-size: 30px; line-height: 1.1; }
.xung-card b { display: block; font-size: 17px; color: var(--cream); margin-top: 2px; }
.xung-card small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.xung-card:has(input:checked) {
  border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(243, 207, 107, .16), rgba(0, 0, 0, .3));
  box-shadow: 0 0 0 1px rgba(243, 207, 107, .5), 0 0 24px rgba(243, 207, 107, .2);
}
.xung-card:has(input:focus-visible) { outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* Bộ đếm */
.counter {
  display: inline-flex; align-items: center; gap: 8px; margin: -12px 0 20px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .3); font-size: 13.5px; color: var(--muted);
}
.counter b { color: var(--gold-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.counter[hidden] { display: none; }
.rank-no { margin: 10px 0 8px; font-size: 14px; color: var(--muted); }
.rank-no b { color: var(--gold-2); }

/* Đèn pha quét sân khấu */
.searchlights { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.searchlights i {
  position: absolute; bottom: -6%; width: 46vw; max-width: 420px; height: 125vh;
  background: linear-gradient(0deg, rgba(255, 238, 190, .32), rgba(255, 238, 190, .06) 60%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  transform-origin: 50% 100%;
  filter: blur(2px);
  mix-blend-mode: screen;
}
.searchlights i:nth-child(1) { left: -12%; animation: sweepL 5.5s ease-in-out infinite alternate; }
.searchlights i:nth-child(2) { left: 14%; animation: sweepR 6.5s ease-in-out infinite alternate; background: linear-gradient(0deg, rgba(255, 170, 190, .22), transparent 70%); }
.searchlights i:nth-child(3) { right: 14%; animation: sweepL 6s ease-in-out infinite alternate-reverse; background: linear-gradient(0deg, rgba(170, 200, 255, .2), transparent 70%); }
.searchlights i:nth-child(4) { right: -12%; animation: sweepR 5s ease-in-out infinite alternate-reverse; }
@keyframes sweepL { from { transform: rotate(-28deg); } to { transform: rotate(18deg); } }
@keyframes sweepR { from { transform: rotate(26deg); } to { transform: rotate(-16deg); } }

/* Flash máy ảnh */
.flashes { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.flash {
  position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 8%, rgba(255, 255, 255, .85) 12%, rgba(255, 255, 255, 0) 60%);
  animation: flashPop .32s ease-out forwards;
}
.flash::before, .flash::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 160px; height: 2px; margin: -1px 0 0 -80px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
}
.flash::after { transform: rotate(90deg); }
@keyframes flashPop { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.2); } }
.whiteout { position: fixed; inset: 0; background: #fff8e6; opacity: 0; pointer-events: none; z-index: 45; }
.whiteout.go { animation: whiteout 1.1s ease-out; }
@keyframes whiteout { 0% { opacity: 0; } 8% { opacity: .95; } 100% { opacity: 0; } }

/* Màn hình LED + MC */
.ceremony { position: relative; z-index: 2; width: 100%; max-width: 520px; text-align: center; }
#s2.revealed .ceremony { display: none; }
.led {
  display: inline-block; padding: 14px 26px 12px; border-radius: 14px; margin-bottom: 26px;
  background: radial-gradient(circle, rgba(255, 220, 140, .12) 1px, transparent 1.5px) 0 0 / 6px 6px, linear-gradient(180deg, #1a0508, #0b0204);
  border: 2px solid var(--gold-3);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .5), 0 0 40px rgba(243, 207, 107, .35), inset 0 0 30px rgba(243, 207, 107, .15);
  animation: ledGlow 2s ease-in-out infinite;
}
.led span, .led b { display: block; font-family: "Playfair Display", serif; font-weight: 800; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.led span { font-size: clamp(30px, 9vw, 44px); letter-spacing: .06em; line-height: 1.1; }
.led b { font-size: clamp(14px, 4vw, 18px); letter-spacing: .5em; margin-top: 6px; padding-left: .5em; }
@keyframes ledGlow { 50% { box-shadow: 0 0 0 4px rgba(0, 0, 0, .5), 0 0 60px rgba(243, 207, 107, .55), inset 0 0 30px rgba(243, 207, 107, .25); } }
.mc { min-height: 3em; font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; font-size: clamp(18px, 5vw, 22px); color: var(--cream); margin: 0 0 18px; }
.mc::after { content: "▍"; color: var(--gold-2); animation: blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.category {
  display: none; margin: 0 auto 22px; padding: 16px 18px; max-width: 380px; border-radius: 16px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(60, 14, 22, .85), rgba(18, 5, 8, .9));
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}
.category.show { display: block; animation: pop .5s cubic-bezier(.2, 1.3, .4, 1); }
.category small { display: block; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.category strong { display: block; font-family: "Playfair Display", serif; font-size: 24px; margin: 4px 0 10px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nominees { list-style: none; margin: 0; padding: 0; text-align: left; font-size: 14px; color: var(--cream); }
.nominees li { padding: 6px 0; border-top: 1px dashed rgba(243, 207, 107, .18); opacity: 0; animation: rise .4s ease forwards; }
.nominees li::before { content: "☆ "; color: var(--gold-2); }

/* Phong bì */
.envelope { display: none; position: relative; width: 250px; height: 160px; margin: 40px auto 10px; perspective: 900px; }
.envelope.show { display: block; animation: pop .45s cubic-bezier(.2, 1.3, .4, 1); }
.env-back, .env-front, .env-flap { position: absolute; inset: 0; border-radius: 8px; }
.env-back { background: linear-gradient(160deg, #b8861f, #6e4a0c); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.env-card {
  position: absolute; left: 14px; right: 14px; top: 12px; height: 136px; z-index: 2; border-radius: 6px;
  background: linear-gradient(180deg, #fffaf0, #f3e3bd); color: #4a0d16;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: transform .9s cubic-bezier(.3, .8, .2, 1) .45s; box-shadow: 0 -4px 14px rgba(0, 0, 0, .25);
}
.env-card small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8a5b10; }
.env-card b { font-family: "Dancing Script", cursive; font-size: 34px; line-height: 1.1; padding: 0 8px; }
.env-front { z-index: 3; background: linear-gradient(180deg, #e2b13c, #a87418); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.env-flap {
  z-index: 4; height: 92px; background: linear-gradient(180deg, #f3cf6b, #c8962c);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform .6s ease, z-index 0s .3s;
}
.env-seal {
  position: absolute; z-index: 5; left: 50%; top: 70px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8394f, #8f0e24); color: #ffd9de; font-size: 18px; line-height: 40px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .4); transition: opacity .3s, transform .3s;
}
.envelope.open .env-seal { opacity: 0; transform: scale(1.6); }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .env-card { transform: translateY(-120px); }
.envelope.shake { animation: shake .5s ease-in-out infinite; }
@keyframes shake { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }

.skip {
  position: fixed; top: 16px; right: 14px; z-index: 46; border: 1px solid var(--line); background: rgba(20, 6, 9, .6);
  color: var(--muted); border-radius: 999px; padding: 8px 14px; font: 600 13px "Be Vietnam Pro", sans-serif; cursor: pointer;
}
#s2.revealed .skip { display: none; }

/* Khoảnh khắc xướng tên */
.winner-crown { width: 110px; margin: 0 auto -6px; }
#s2.revealed .winner-crown { animation: crownDrop 1.1s cubic-bezier(.3, 1.5, .5, 1) .1s both; }
@keyframes crownDrop { 0% { opacity: 0; transform: translateY(-160px) rotate(-25deg) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.winner-crown svg { display: block; width: 100%; filter: drop-shadow(0 0 18px rgba(243, 207, 107, .6)); }
.winner-sash {
  display: inline-block; margin: 6px 0 4px; padding: 7px 22px; transform: rotate(-3deg);
  background: linear-gradient(180deg, #fff, #f6e4b0 55%, #e2c072);
  color: #7a0d22; font-weight: 800; font-size: clamp(12px, 3.6vw, 15px); letter-spacing: .14em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45); clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}
.winner-sash em { font-style: normal; }
#s2.revealed .winner-sash { animation: unroll .9s cubic-bezier(.3, .8, .2, 1) 1s both; }
@keyframes unroll { from { opacity: 1; clip-path: polygon(0 0, 0 0, 0 50%, 0 100%, 0 100%, 0 50%); } to { opacity: 1; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); } }

/* Thứ tự xuất hiện sau khi xướng tên */
#s2 .reveal > .eyebrow { animation-delay: .3s; }
#s2 .reveal > .honoree { animation: stamp .9s cubic-bezier(.2, 1.4, .3, 1) .45s forwards; }
#s2 .reveal > .rank-no { animation-delay: 1.4s; }
#s2 .reveal > .title-big { animation: stamp .9s cubic-bezier(.2, 1.4, .3, 1) 1.6s forwards, shimmer 3.2s linear infinite; }
#s2 .reveal > .squad-stage { opacity: 1; animation: none; }
#s2 .reveal > .praise { animation-delay: 2.2s; }
#s2 .reveal > .cert-wrap { animation-delay: 2.5s; }
#s2 .reveal > .actions { animation-delay: 2.8s; }

/* Dàn nhân vật */
.squad-stage { position: relative; margin: 6px auto 18px; max-width: 520px; }
.squad-stage::before {
  content: ""; position: absolute; left: 4%; right: 4%; bottom: -4px; height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 220, 150, .35), rgba(255, 220, 150, 0) 70%);
}
.squad { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 56px; }
.member { position: relative; width: 21%; max-width: 116px; margin: 0 -1.5%; }
.member.center { width: 24%; max-width: 132px; z-index: 2; }
.member .body { animation: sway 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); transform-origin: 50% 100%; }
.member .fig { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.member .body.mirror .fig { transform: scaleX(-1); }
@keyframes sway { 50% { transform: rotate(1.6deg) translateY(-2px); } }
.squad.enter .member { animation: walkIn 1s cubic-bezier(.2, .8, .2, 1) var(--d) both; }
@keyframes walkIn { from { opacity: 0; transform: translateX(calc(var(--from) * 70vw)); } to { opacity: 1; transform: none; } }
.squad-stage.small .member { width: 17%; max-width: 84px; }
.squad-stage.small .member.center { width: 19%; max-width: 96px; }
.squad-stage.small .squad { padding-top: 60px; }

.fig .arm-wave { animation: wave .7s ease-in-out infinite alternate; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.fig .clap-l { animation: clapL .32s ease-in-out infinite alternate; }
.fig .clap-r { animation: clapR .32s ease-in-out infinite alternate; }
@keyframes clapL { to { transform: rotate(-9deg); } }
@keyframes clapR { to { transform: rotate(9deg); } }
.fig .toast-arm { animation: toast 1.6s ease-in-out infinite; }
@keyframes toast { 50% { transform: rotate(-10deg); } }
.fig .arm-kiss { animation: kiss 2.4s ease-in-out infinite; }
@keyframes kiss { 0%, 40% { transform: none; } 60% { transform: rotate(-30deg); } 100% { transform: none; } }
.fig .float-heart { animation: heart 2.4s ease-in infinite; }
@keyframes heart { 0%, 50% { opacity: 0; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(12px, -26px); } }
.fig .bob { animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.fig .twinkle { animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .1; } }
.fig .bubble { animation: fizz 1.4s linear infinite; }
@keyframes fizz { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
.squad.bowing .member .body { animation: bow 1.3s ease-in-out 2; }
@keyframes bow { 0%, 100% { transform: none; } 45% { transform: translateY(8px) scaleY(.93) rotate(-2deg); } }

.bubble-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); z-index: 5;
  width: max-content; max-width: 150px; padding: 7px 11px; border-radius: 14px;
  background: #fff; color: #4a0d16; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.bubble-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.member:first-child .bubble-tip { left: 0; transform: translate(0, -4px); }
.member:first-child .bubble-tip::after { left: 24px; }
.member:last-child .bubble-tip { left: auto; right: 0; transform: translate(0, -4px); }
.member:last-child .bubble-tip::after { left: auto; right: 18px; }
.bubble-tip.pop { animation: bubblePop .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bubblePop { from { opacity: 0; scale: .6; } }

/* Bục phát biểu */
.podium {
  text-align: left; margin: 0 auto 22px; padding: 18px 16px; border-radius: 18px; max-width: 520px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(60, 14, 22, .85), rgba(18, 5, 8, .92));
  box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}
.podium h3 { margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 22px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.podium p.hint2 { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.chip {
  text-align: left; border: 1px solid rgba(243, 207, 107, .25); background: rgba(0, 0, 0, .3); color: var(--cream);
  border-radius: 12px; padding: 9px 12px; font: 500 14px "Be Vietnam Pro", sans-serif; cursor: pointer; line-height: 1.4;
}
.chip:hover { border-color: var(--gold-2); }
.chip.on { border-color: var(--gold-2); background: rgba(243, 207, 107, .14); box-shadow: 0 0 0 1px rgba(243, 207, 107, .4); }
.podium textarea {
  width: 100%; min-height: 76px; resize: vertical; padding: 10px 12px; border-radius: 12px; margin-bottom: 4px;
  border: 1px solid rgba(243, 207, 107, .28); background: rgba(0, 0, 0, .35); color: var(--text);
  font: 500 15px "Be Vietnam Pro", sans-serif; outline: none;
}
.podium textarea:focus { border-color: var(--gold-2); box-shadow: 0 0 0 3px rgba(243, 207, 107, .18); }
.podium .count { text-align: right; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.podium.locked { text-align: center; }
.podium.locked .lock { font-size: 34px; }
.podium.done { text-align: center; }

/* Tường phát biểu */
.wall { max-width: 520px; margin: 26px auto 0; text-align: left; }
.wall h3 { text-align: center; margin: 0 0 4px; font-family: "Playfair Display", serif; font-size: 22px; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wall .wall-sub { text-align: center; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.speech {
  position: relative; padding: 14px 14px 12px 16px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(56, 14, 22, .7), rgba(20, 6, 9, .8));
  border: 1px solid rgba(243, 207, 107, .2); border-left: 3px solid var(--gold-3);
}
.speech q { display: block; font-family: "Playfair Display", serif; font-style: italic; font-weight: 600; font-size: 16px; color: var(--cream); line-height: 1.5; quotes: "“" "”"; }
.speech .who { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.speech .who b { color: var(--gold-2); }
.speech .tag { padding: 2px 8px; border-radius: 999px; background: rgba(243, 207, 107, .12); color: var(--gold-1); font-size: 11.5px; }
.wall .empty { text-align: center; color: var(--muted); font-size: 14px; padding: 12px; }

/* =====================================================================
   TỐI ƯU MOBILE & CHUẨN TƯƠNG TÁC
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
.save-qr { width: 100%; margin: 4px 0 6px; padding: 12px; font-size: 15px; }
.squad-stage { overflow-x: clip; }
body { -webkit-tap-highlight-color: transparent; }
button, .xung-card, .tier, .chip, a { touch-action: manipulation; cursor: pointer; }
button:focus-visible, .tier:focus-visible, .chip:focus-visible {
  outline: 2px solid var(--gold-1); outline-offset: 3px;
}

/* Vùng chạm tối thiểu 44px */
.link-btn { min-height: 44px; padding: 10px 12px; }
.copy { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.close { width: 44px; height: 44px; }
.sound-btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  bottom: calc(16px + env(safe-area-inset-bottom)); right: calc(14px + env(safe-area-inset-right));
}
.skip { top: calc(14px + env(safe-area-inset-top)); min-height: 40px; }
.toast { bottom: calc(28px + env(safe-area-inset-bottom)); }
.screen { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
.disclaimer { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* Nhẹ GPU: bỏ blur + blend-mode trên đèn pha (rất tốn trên điện thoại) */
.searchlights i { filter: none; mix-blend-mode: normal; opacity: .8; will-change: transform; }

/* Nhân vật: bóng dưới chân thay cho drop-shadow động */
.member .fig { filter: none; }
.member .body::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -2px; height: 8px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); z-index: -1;
}
.member .body { position: relative; will-change: transform; }
.squad.photo .member { width: 24%; max-width: 140px; margin: 0 -3%; }
.squad.photo .member.center { width: 28%; max-width: 160px; }
.squad-stage.small .squad.photo .member { width: 20%; max-width: 96px; }
.squad-stage.small .squad.photo .member.center { width: 23%; max-width: 110px; }
.squad.photo .fig { aspect-ratio: auto; }

/* Tên người thắng hiện từng chữ */
.honoree .ch { display: inline-block; opacity: 0; transform: translateY(.6em) scale(.6) rotate(-8deg); }
#s2.revealed .honoree .ch { animation: chIn .55s cubic-bezier(.2, 1.5, .4, 1) forwards; animation-delay: calc(.55s + var(--k) * 45ms); }
@keyframes chIn { to { opacity: 1; transform: none; } }
#s2 .reveal > .honoree { animation: none; opacity: 1; }

/* Điện thoại nhỏ */
@media (max-width: 420px) {
  .screen { padding-left: 14px; padding-right: 14px; padding-top: 60px; }
  .entry { padding: 18px 14px 16px; }
  .led { padding: 12px 18px 10px; margin-bottom: 20px; }
  .envelope { transform: scale(.92); }
  .title-big { margin-bottom: 6px; }
  .cert-wrap { width: min(100%, 340px); }
  .bubble-tip { font-size: 12px; max-width: 136px; padding: 6px 9px; }
  .tier .perk { font-size: 12px; }
  .actions .btn-gold, .actions .btn-ghost { flex: 1 1 140px; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card { border-radius: 22px 22px 0 0; max-height: 92svh; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .searchlights, #dust { display: none; }
  .honoree .ch { opacity: 1; transform: none; }
}