:root {
  color-scheme: light;
  --navy: #002d61;
  --gold: #e6a11b;
  --gold-dark: #87571e;
  --button-orange: #ff5300;
  --button-orange-hover: #ff671d;
  --button-edge: #c43f00;
  --page-max: 430px;
  font-family: "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", Arial, sans-serif;
}

/* 做嘢前，先去2603睇臨時臨急通宵last min追加 不要在css內不停叠加項目到架構重復  */


*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Any element with both [hidden] and a class that sets its own `display`
   (e.g. .btn's display: inline-flex) would otherwise stay visible — author
   CSS beats the UA stylesheet's [hidden] rule regardless of selector
   specificity. Found via the message screen's CTA button staying visible
   despite the hidden attribute being correctly set. */
[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #58a9d3;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0;
  color: var(--navy);
  background: #58a9d3;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

img {
  max-width: 100%;
}

.campaign-page {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background-color: #86bedb;
  background-image: url("assets/campaign-background.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.brand-header,
.campaign-main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
}

/* Header / logos: based on AW08a.ai artboard positions.
   Keep these visible for every game state. */
.brand-header {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 76px;
  padding: max(16px, env(safe-area-inset-top)) 20px 0;
}

.brand-home {
  width: clamp(70px, 20.4vw, 88px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand-logo {
  display: block !important;
  height: auto;
  object-fit: contain;
  visibility: visible !important;
  opacity: 1 !important;
}

.brand-logo--hsr {
  width: 100%;
}

.brand-logo--mtr {
  width: clamp(79px, 22.9vw, 99px);
}

.header-lang-toggle {
  position: absolute;
  top: max(18px, calc(env(safe-area-inset-top) + 2px));
  left: 50%;
  min-width: 42px;
  padding: 3px 8px;
  border-width: 1px;
  background: rgb(255 255 255 / 82%);
  box-shadow: 0 2px 7px rgb(0 45 97 / 12%);
  font-size: .68rem;
  line-height: 1.15;
  transform: translateX(-50%);
}

/* Temporary localhost/dev/UAT QA overlay. It is fixed and therefore cannot
   reflow the campaign artwork. Production hosts are excluded in index.html. */
.design-preview-toolbar {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 9000;
  width: auto;
  border: 1px solid rgb(0 45 97 / 35%);
  border-radius: 12px;
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 8px 24px rgb(0 45 97 / 24%);
  color: var(--navy);
  font: 700 .78rem/1.2 Arial, sans-serif;
  backdrop-filter: blur(8px);
}

.design-preview-toolbar details[open] {
  width: min(230px, calc(100vw - 20px));
}

.design-preview-toolbar summary {
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}

.design-preview-toolbar__controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 0 10px 10px;
}

.design-preview-toolbar select {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgb(0 45 97 / 45%);
  border-radius: 7px;
  background: #fff;
  color: var(--navy);
  font: inherit;
}

.lang-toggle {
  min-width: 38px;
  padding: 5px 8px;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.campaign-main {
  position: relative;
  z-index: 1;
  padding: 0 18px calc(18px + env(safe-area-inset-bottom));
}

.screen {
  display: none;
  width: 100%;
}

.screen.is-active {
  display: flex;
}

.screen--home,
.screen--center,
.screen--quiz,
.screen--prize-details,
.screen--history,
.screen--terms {
  flex-direction: column;
  align-items: center;
}

/* ---------- Shared card/button styles ---------- */
.intro-card,
.message-card,
.quiz-card {
  position: relative;
  border: 2px solid var(--gold-dark);
  background: rgb(255 255 255 / 30%);
  box-shadow: 0 5px 0 #7f551f;
}

.intro-card::after,
.message-card::after,
.quiz-card::after {
  position: absolute;
  z-index: 0;
  inset: 5px;
  border: 1.5px solid var(--gold);
  content: "";
  pointer-events: none;
}

.intro-card,
.message-card {
  border-radius: 17px;
}

.intro-card::after,
.message-card::after {
  border-radius: 12px;
}

.btn {
  --press-x: 50%;
  --press-y: 50%;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 188px;
  min-height: 54px;
  padding: 10px 24px;
  overflow: hidden;
  isolation: isolate;

  border: 0;
  border-bottom: 5px solid var(--button-edge);
  border-radius: 5px;

  color: #fff;
  background: var(--button-orange);
  font-size: clamp(1.65rem, 7.4vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;

  transition:
    transform 120ms cubic-bezier(.2,.8,.25,1),
    background-color 120ms ease,
    box-shadow 160ms ease,
    filter 160ms ease;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}

@media (hover: hover) {
  .btn:not(:disabled):hover {
    color: #fff;
    background: var(--button-orange-hover);
    transform: translateY(2px);
    filter: saturate(1.05) brightness(1.035);
  }
}

.btn:not(:disabled):active {
  color: #fff;
  background: var(--button-orange-hover);
  transform: translateY(3px) scale(.985);
  filter: saturate(1.08) brightness(1.06);
}

.btn--shadow {
  box-shadow:
    0 3px 5px rgb(0 0 0 / 30%),
    0 0 0 rgb(255 190 70 / 0%);
}

@media (hover: hover) {
  .btn--shadow:not(:disabled):hover {
    box-shadow:
      0 4px 9px rgb(0 0 0 / 24%),
      0 0 18px rgb(255 187 66 / 24%);
  }
}

.answer-option:has(input:focus-visible) {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 211, 92, .95);
  outline-offset: 4px;
}

[data-start-game]:focus-visible {
  animation: start-game-gold-glow 1.05s ease-in-out infinite alternate;
}

@keyframes start-game-gold-glow {
  from {
    outline-color: rgba(255, 218, 104, .58);
    box-shadow:
      0 3px 5px rgb(0 0 0 / 26%),
      0 0 7px rgba(255, 221, 119, .28),
      0 0 14px rgba(235, 166, 43, .18);
    filter: brightness(1);
  }
  to {
    outline-color: rgba(255, 231, 147, 1);
    box-shadow:
      0 4px 8px rgb(0 0 0 / 24%),
      0 0 12px rgba(255, 231, 147, .82),
      0 0 28px rgba(226, 159, 30, .52),
      0 0 42px rgba(255, 211, 75, .22);
    filter: brightness(1.06);
  }
}


/* ---------- Button press highlight / ripple ---------- */
.btn::after {
  position: absolute;
  z-index: 3;
  left: var(--press-x);
  top: var(--press-y);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  background:
    radial-gradient(
      circle,
      rgb(255 255 255 / 82%) 0 7%,
      rgb(255 238 173 / 58%) 8% 26%,
      rgb(255 196 84 / 26%) 27% 48%,
      rgb(255 196 84 / 0%) 70%
    );
}

.btn.is-pressing::after {
  animation: button-ripple 430ms cubic-bezier(.16,.82,.28,1) both;
}

.btn.is-pressing {
  box-shadow:
    0 2px 4px rgb(0 0 0 / 24%),
    0 0 14px rgb(255 205 92 / 55%),
    0 0 28px rgb(255 165 48 / 28%);
}

@keyframes button-ripple {
  0% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(.18);
  }
  58% {
    opacity: .5;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-pressing::after {
    animation: none;
  }
}

/* ---------- Home ---------- */
.screen--home {
  min-height: 690px;
}

.campaign-key-visual-wrap {
  position: relative;
  width: 77%;
  max-width: 100%;
  margin: 3px auto 9px;
  overflow: hidden;
}
.campaign-key-visual {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
}

/* English key visual: 10% larger */
html[lang="en"] .campaign-key-visual-wrap {
  width: 84.7%;
  max-width: 300px;
}

/* ---------- Campaign key visual entrance ---------- */

/* Keep the hero still/hidden behind the initial login modal. */
.screen--home .campaign-key-visual {
  opacity: 0;
  transform: translateY(18px) scale(.94);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.screen--home.is-hero-entering .campaign-key-visual {
  animation: campaign-hero-reveal 820ms cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes campaign-hero-reveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(.94);
    filter: brightness(.96);
  }

  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.018);
    filter: brightness(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }
}

/* One-time warm gold shine sweep. */
.campaign-key-visual-shine {
  position: absolute;
  z-index: 2;
  top: -25%;
  left: -42%;
  width: 28%;
  height: 150%;
  opacity: 0;
  pointer-events: none;
  transform: skewX(-18deg);
  background: linear-gradient(
    90deg,
    rgba(255,230,130,0),
    rgba(255,244,190,.25),
    rgba(255,255,230,.82),
    rgba(255,221,105,.32),
    rgba(255,230,130,0)
  );
  filter: blur(2px);
}

.screen--home.is-hero-entering .campaign-key-visual-shine {
  animation: campaign-hero-shine 720ms 520ms ease-out forwards;
}

@keyframes campaign-hero-shine {
  0% {
    left: -42%;
    opacity: 0;
  }

  18% {
    opacity: .8;
  }

  72% {
    opacity: .58;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen--home .campaign-key-visual {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .screen--home.is-hero-entering .campaign-key-visual,
  .screen--home.is-hero-entering .campaign-key-visual-shine {
    animation: none !important;
  }
}


.intro-card {
  width: 88%;
  padding: 22px 24px 24px;
}

.intro-card p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--navy);
  font-size: clamp(.98rem, 4.25vw, 1.12rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .01em;
}

.utility-links {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: 88%;
  margin: 10px 0 0;
}

.utility-links a,
.secondary-link {
  color: var(--navy);
  font-size: clamp(.72rem, 3.4vw, .9rem);
  line-height: 1.25;
  text-underline-offset: 2px;
}

.status-utility-links {
  margin-top: 8px;
}

.status-utility-links + .campaign-status-mascot,
.status-utility-links + .state-mascot--already {
  margin-top: 8px;
}

.home-art {
  position: relative;
  width: 215px;
  height: 119px;
  margin: -1px auto 1px;
}

.home-mascot {
  position: absolute;
  right: 20px;
  bottom: 8px;
  width: 193px;
  height: auto;
}

.home-gift {
  position: absolute;
  z-index: 2;
  left: -51px;
  top: 2px;
  width: 176px;
  transform: rotate(-5deg);
}

.screen--home > .btn {
  min-width: 188px;
  min-height: 55px;
  font-size: clamp(1.65rem, 7.5vw, 2rem);
}

.terms-note,
.licence-note {
  color: #111;
  line-height: 1.25;
  text-align: center;
}

.terms-note {
  width: 100%;
  margin: 20px 0 0;
  font-size: clamp(.52rem, 2.2vw, .66rem);
}

.site-terms-note {
  width: min(calc(100% - 36px), var(--page-max));
  margin: 0 auto;
  padding: 0px 0 calc(14px + env(safe-area-inset-bottom));
}

.site-terms-note__terms,
.site-terms-note__licence {
  width: 100%;
  overflow-wrap: anywhere;
}

.site-terms-note__terms {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgb(0 45 97 / 16%);
}

.site-terms-note__link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-terms-note__licence {
  display: block;
}

/* ---------- Prize details ---------- */
.screen--prize-details {
  min-height: 760px;
  padding: 20px 12px 48px;
}

.prize-list-card {
  width: 100%;
  padding: 25px 14px 30px;
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 28px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 12px 30px rgb(0 45 97 / 14%);
}

.prize-list-card h2 {
  margin: 0 0 20px;
  color: var(--navy);
  font-size: clamp(1.75rem, 8vw, 2.35rem);
  line-height: 1.1;
  text-align: center;
}

.prize-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.prize-grid-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 132px;
  padding: 32px 10px 14px;
  border: 1px solid rgb(0 45 97 / 12%);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0%, #f3f9fc 100%);
  box-shadow: 0 5px 13px rgb(0 45 97 / 8%);
  text-align: center;
}

.prize-grid-item--featured {
  border-color: rgb(230 161 27 / 32%);
  background: linear-gradient(145deg, #fff9df 0%, #ffe8a0 100%);
}

.prize-grid-item__number {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--gold-dark);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.prize-grid-item h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(.88rem, 3.9vw, 1.03rem);
  line-height: 1.32;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.prize-grid-item p {
  margin: 7px 0 0;
  color: #4d5560;
  font-size: clamp(.68rem, 3vw, .8rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.prize-grid-item .prize-grid-item__quantity {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--navy);
  font-size: .7rem;
  font-weight: 700;
}

.prize-grid-item__quantity strong {
  color: #c34800;
  font-size: .86rem;
  letter-spacing: .01em;
}

.prize-list-note {
  margin: 18px 4px 0;
  color: #343a42;
  font-size: .7rem;
  line-height: 1.45;
  text-align: center;
}

.prize-details-back {
  min-width: 188px;
  margin-top: 24px;
}

/* ---------- Generic center/message pages ---------- */
.screen--center {
  position: relative;
  min-height: 690px;
  text-align: center;
}

.message-card {
  width: 92%;
}

.message-card h2,
.message-card p {
  position: relative;
  z-index: 1;
}

.message-card h2 {
  margin: 0 0 26px;
  color: #050505;
  font-size: clamp(2rem, 9vw, 2.7rem);
  line-height: 1.12;
}

.message-card p {
  margin: 0;
  color: #050505;
  font-size: clamp(1.2rem, 5.4vw, 1.55rem);
  line-height: 1.5;
}

.message-card--large {
  min-height: 390px;
  display: grid;
  align-content: center;
  margin-top: 18px;
  padding: 60px 24px;
}

/* ---------- Campaign status pages ---------- */
.screen--campaign-status {
  min-height: 690px;
  padding-top: 18px;
}

.message-card--campaign-status {
  display: grid;
  align-content: center;
  width: 92%;
  min-height: 340px;
  padding: 54px 30px 105px;
}

.message-card--campaign-status h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.38rem, 5vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
}

html[lang="en"] [data-screen-panel="already-played"] .message-card h2,
html[lang="en"] [data-screen-panel="already-played"] .message-card p {
  color: var(--navy);
  font-size: clamp(1.38rem, 5.2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.35;
}

html[lang="en"] [data-screen-panel="already-played"] .message-card h2 {
  margin-bottom: 18px;
}

.campaign-status-mascot,
.state-mascot--already {
  position: relative;
  z-index: 2;
  display: block;
  width: 250px;
  height: auto;
  margin: -52px auto 0;
  pointer-events: none;
}

.screen--campaign-status[data-status="busy"] .message-card--campaign-status {
  padding-bottom: 92px;
}

.screen--campaign-status[data-status="busy"] .campaign-status-mascot {
  width: 220px;
  margin-top: 8px;
}

.campaign-status-cta {
  min-width: 220px;
  margin-top: -2px;
  font-size: clamp(1.45rem, 6.5vw, 1.85rem);
}

/* ---------- Quiz ---------- */
.screen--quiz {
  padding-top: 2px;
}

.quiz-card {
  width: 100%;
  padding: 24px 17px 18px;
  border-radius: 16px;
}

.quiz-card::after {
  border-radius: 11px;
}

.quiz-heading,
.video-poster,
.quiz-form {
  position: relative;
  z-index: 1;
}

.quiz-heading {
  margin-bottom: 14px;
  text-align: center;
}

.quiz-heading h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 9.5vw, 2.6rem);
  line-height: 1.02;
}

.quiz-heading p {
  margin: 5px 0 0;
  color: var(--navy);
  font-size: clamp(1.05rem, 4.7vw, 1.25rem);
  font-weight: 700;
}


/* ---------- Quiz title entrance ---------- */
.quiz-heading {
  position: relative;
  isolation: isolate;
}

.quiz-heading::before {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 31%;
  width: 190px;
  height: 78px;
  border-radius: 50%;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
  background:
    radial-gradient(
      ellipse,
      rgb(255 235 154 / 54%) 0%,
      rgb(240 188 63 / 26%) 38%,
      rgb(240 188 63 / 0%) 72%
    );
  filter: blur(8px);
  pointer-events: none;
}

.screen--quiz.is-quiz-entering .quiz-heading h2 {
  animation: quiz-title-reveal 680ms cubic-bezier(.16,1,.3,1) both;
}

.screen--quiz.is-quiz-entering .quiz-heading p {
  animation: quiz-subtitle-reveal 520ms 180ms cubic-bezier(.2,.85,.25,1) both;
}

.screen--quiz.is-quiz-entering .quiz-heading::before {
  animation: quiz-title-glow 860ms 40ms ease-out both;
}

@keyframes quiz-title-reveal {
  0% {
    opacity: 0;
    transform: translateY(-12px) scale(.88);
    letter-spacing: .04em;
    text-shadow:
      0 0 0 rgb(255 218 104 / 0%),
      0 0 0 rgb(236 172 41 / 0%);
  }
  48% {
    opacity: 1;
    transform: translateY(2px) scale(1.045);
    letter-spacing: .01em;
    text-shadow:
      0 0 8px rgb(255 230 145 / 72%),
      0 0 18px rgb(236 172 41 / 35%);
  }
  76% {
    transform: translateY(-1px) scale(.99);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: normal;
    text-shadow: none;
  }
}

@keyframes quiz-subtitle-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes quiz-title-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.55);
  }
  38% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen--quiz.is-quiz-entering .quiz-heading h2,
  .screen--quiz.is-quiz-entering .quiz-heading p,
  .screen--quiz.is-quiz-entering .quiz-heading::before {
    animation: none !important;
  }
}

.video-player {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.quiz-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.video-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #fff6e8;
  color: var(--navy);
  font-size: .9rem;
  text-align: left;
}

.video-feedback[hidden] {
  display: none;
}

.video-feedback p {
  margin: 0;
}

.video-retry {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 4px;
  background: var(--button-orange);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.quiz-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  min-height: 0;
  margin-top: 17px;
}

.quiz-form fieldset {
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.quiz-form legend {
  width: 100%;
  margin-bottom: 13px;
  padding: 14px 17px;
  border: 3px solid #8a8a8a;
  border-radius: 18px;
  color: #3f3f3f;
  background: rgb(255 255 255 / 42%);
  font-size: clamp(1.05rem, 4.8vw, 1.24rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 12px;
}

.answer-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 8px;
  border: 2px solid #8a8a8a;
  border-radius: 16px;
  color: #4a4a4a;
  background: rgb(255 255 255 / 35%);
  font-size: clamp(.9rem, 4vw, 1.08rem);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.answer-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.answer-option span {
  width: 100%;
  text-align: center;
}

.answer-option:has(input:checked) {
  border-color: #f0bf42;
  color: #fff;
  background:
    linear-gradient(180deg, #14395f 0%, #082845 100%);
  box-shadow:
    0 0 0 2px rgb(255 218 113 / 22%),
    0 4px 10px rgb(5 27 48 / 28%),
    0 0 16px rgb(238 185 56 / 20%);
  font-weight: 800;
}

/* Android 10 WebView has no :has() support. script.js mirrors :checked to
   this class so the selected answer keeps the same accepted appearance. */
html.is-android .answer-option.is-selected {
  border-color: #f0bf42;
  color: #fff;
  background: linear-gradient(180deg, #14395f 0%, #082845 100%);
  box-shadow:
    0 3px 0 #7f551f,
    0 5px 10px rgb(0 45 97 / 22%),
    0 0 16px rgb(238 185 56 / 20%);
  font-weight: 800;
}

@media (hover: hover) {
  .answer-option:not(:has(input:checked)):hover {
    border-color: #526b82;
    color: #213f5d;
    background: rgb(255 255 255 / 62%);
    transform: translateY(-1px);
  }
}


.quiz-form .btn {
  align-self: start;
  min-width: 176px;
  margin-top: 20px;
}

/* ---------- Wrong ---------- */
.screen--wrong {
  padding-top: 18px;
}

.message-card--wrong {
  width: 90%;
  min-height: 320px;
  display: grid;
  align-content: center;
  padding: 44px 22px;
}

.message-card--wrong h2 {
  margin-bottom: 34px;
  font-size: clamp(2rem, 9.5vw, 2.7rem);
}

.message-card--wrong p {
  font-size: clamp(1.25rem, 5.7vw, 1.6rem);
}

.state-mascot--retry {
  width: 215px;
  height: auto;
  margin: 24px auto 8px;
}

.screen--wrong > .btn {
  min-width: 190px;
}

/* ---------- Correct ---------- */
.screen--celebrate {
  padding-top: 18px;
}

.message-card--correct {
  width: 90%;
  min-height: 305px;
  display: grid;
  align-content: center;
  padding: 44px 22px;
}

.message-card--correct h2 {
  margin-bottom: 42px;
  /* font-size: clamp(2rem, 9vw, 2.6rem); */
  font-size: clamp(0.7rem, 8vw, 2.6rem);
}

.message-card--correct p {
  font-size: clamp(1.22rem, 5.2vw, 1.5rem);
}

.celebrate-art {
  position: relative;
  width: 205px;
  height: 145px;
  margin: 14px auto -2px;
}

.celebrate-mascot {
  position: absolute;
  right: 30px;
  bottom: 7px;
  width: 203px;
}

.celebrate-gift {
  position: absolute;
  z-index: 2;
  left: -73px;
  top: 25px;
  width: 166px;
  transform: rotate(-8deg);
}

.screen--celebrate > .btn {
  min-width: 190px;
}

.licence-note {
  width: 100%;
  margin: 26px -10px 0;
  font-size: clamp(.5rem, 2.15vw, .64rem);
  white-space: nowrap;
}

/* ---------- Draw ---------- */
.screen--draw {
  min-height: 690px;
  justify-content: flex-start;
  padding-top: 0;
  overflow: visible;
}

.draw-stage {
  position: relative;
  width: 100vw;
  min-height: 690px;
  margin-left: calc(50% - 50vw);
  overflow: visible;
}

/* Full-screen flash layer */
.draw-stage::after {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  content: "";
  opacity: 0;
  background:
    radial-gradient(circle at 50% 46%,
      rgba(255,255,255,.98) 0 10%,
      rgba(255,246,190,.82) 19%,
      rgba(255,222,104,.32) 34%,
      rgba(255,255,255,0) 66%);
  mix-blend-mode: screen;
}

.draw-runner {
  position: absolute;
  left: 50%;
  bottom: 31%;
  width: min(94vw, 430px);
  max-width: none;
  aspect-ratio: 430 / 290;
  opacity: 0;
  transform-origin: 54% 76%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  z-index: 2;
}

.draw-runner__mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78%;
  height: auto;
  will-change: transform;
  backface-visibility: hidden;
}

.draw-gift-wrap {
  position: absolute;
  left: 25%;
  top: 42%;
  width: 36%;
  aspect-ratio: 1 / 1;
  transform-origin: 58% 68%;
  will-change: transform;
  z-index: 3;
}

.draw-gift {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  will-change: opacity, transform, filter;
}

.draw-gift--closed {
  left: 0;
  top: 17%;
  width: 100%;
  opacity: 1;
  transform: rotate(-4deg) scale(1);
}

.draw-gift--open {
  left: -10%;
  top: -8%;
  width: 121%;
  opacity: 0;
  transform: translateY(7px) scale(.80);
  filter: brightness(1);
}

.draw-glow {
  position: absolute;
  left: 25%;
  top: 38%;
  width: 40%;
  max-width: 215px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.draw-glow--back {
  z-index: 1;
  background:
    radial-gradient(
      circle,
      rgba(255,255,244,1) 0 6%,
      rgba(255,244,179,.92) 13%,
      rgba(255,216,94,.60) 29%,
      rgba(255,187,42,.20) 52%,
      rgba(255,187,42,0) 75%
    );
  filter: blur(1.5px);
}

.draw-glow--front {
  z-index: 4;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0 3%,
      rgba(255,249,212,.88) 9%,
      rgba(255,222,108,.32) 26%,
      rgba(255,222,108,0) 58%
    );
  mix-blend-mode: screen;
}

.draw-flash {
  position: absolute;
  left: 48%;
  top: 47%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) scale(.2);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,1) 0 5%,
      rgba(255,249,205,.98) 12%,
      rgba(255,220,102,.64) 31%,
      rgba(255,220,102,0) 69%
    );
}

/* One continuous move, with no intermediate stops or scale bounces:
   0–2.70s runner travels from lower-right to center while steadily enlarging
   ~2.65s arrival flows straight into opening; the final glow then holds
*/
.screen--draw.is-animating .draw-runner {
  animation: draw-run-from-right 1500ms linear forwards;
}

.screen--draw.is-animating .draw-runner__mascot,
.screen--draw.is-animating .draw-gift-wrap {
  animation: none;
}

.screen--draw.is-animating .draw-gift--closed {
  animation: draw-closed-hide 120ms 1680ms ease-out forwards;
}

.screen--draw.is-animating .draw-gift--open {
  animation: draw-open-show 760ms 1640ms cubic-bezier(.16,1,.3,1) forwards;
}

.screen--draw.is-animating .draw-glow--back {
  animation: draw-glow-in 820ms 1640ms cubic-bezier(.16,.86,.2,1) forwards;
}

.screen--draw.is-animating .draw-glow--front {
  animation: draw-glow-front 840ms 1370ms cubic-bezier(.16,.86,.2,1) forwards;
}

.screen--draw.is-animating .draw-flash {
  animation: draw-flash-burst 720ms 1310ms cubic-bezier(.16,1,.3,1) forwards;
}

.screen--draw.is-animating .draw-stage::after {
  animation: draw-screen-flash 480ms 1620ms ease-out forwards;
}

@keyframes draw-run-from-right {
  from {
    opacity: 1;
    transform: translateX(-50%) translate3d(108%, 76%, 0) scale(.50);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translate3d(0, 0, 0) scale(1);
  }
}

@keyframes draw-closed-hide {
  0%   { opacity: 1; transform: rotate(-4deg) scale(1); }
  100% { opacity: 0; transform: rotate(-1deg) scale(.93); }
}

@keyframes draw-open-show {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(.82);
    filter: brightness(1);
  }
  55% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.78);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1.10);
  }
}

@keyframes draw-flash-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2);
  }
  18% { opacity: 1; }
  62% { opacity: .55; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(24);
  }
}

@keyframes draw-glow-in {
  0%   { opacity: 0; transform: scale(.40); }
  52%  { opacity: 1; transform: scale(1.18); }
  78%  { opacity: .82; transform: scale(1.07); }
  100% { opacity: .82; transform: scale(1.07); }
}

@keyframes draw-glow-front {
  0%   { opacity: 0; transform: scale(.34); }
  38%  { opacity: .95; transform: scale(1.22); }
  76%  { opacity: .24; transform: scale(1.42); }
  100% { opacity: .24; transform: scale(1.42); }
}

@keyframes draw-screen-flash {
  0%   { opacity: 0; }
  18%  { opacity: .92; }
  46%  { opacity: .48; }
  100% { opacity: 0; }
}

@media (max-width: 360px) {
  .draw-runner {
    left: 50%;
    bottom: 27%;
    width: 96vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen--draw.is-animating .draw-runner,
  .screen--draw.is-animating .draw-runner__mascot,
  .screen--draw.is-animating .draw-gift-wrap,
  .screen--draw.is-animating .draw-gift--closed,
  .screen--draw.is-animating .draw-gift--open,
  .screen--draw.is-animating .draw-glow--back,
  .screen--draw.is-animating .draw-glow--front,
  .screen--draw.is-animating .draw-flash,
  .screen--draw.is-animating .draw-stage::after {
    animation: none !important;
  }

  .draw-runner {
    opacity: 1;
    transform: translateX(-50%);
  }

  .draw-gift--closed { opacity: 0; }
  .draw-gift--open { opacity: 1; transform: none; }
  .draw-glow--back { opacity: .72; }
}

/* ---------- Result ---------- */
.screen--result {
  min-height: 690px;
  padding-top: 18px;
}

.message-card--result {
  width: 90%;
  min-height: 248px;
  padding: 36px 20px 30px;
}

.message-card--result h2 {
  margin-bottom: 18px;
  font-size: clamp(1.9rem, 8vw, 2.35rem);
}

.message-card--result .prize-name {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 15px;
  padding-inline: 12px;
  color: var(--button-orange);
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: break-word;
  text-wrap: balance;
  white-space: pre-line;
  text-shadow:
    0 2px 0 rgb(255 255 255 / 52%),
    0 0 12px rgb(239 178 43 / 18%);
}

.message-card--result .prize-name::before,
.message-card--result .prize-name::after {
  position: absolute;
  top: 50%;
  color: #e9b83f;
  content: "✦";
  opacity: 0;
  font-size: .62em;
  line-height: 1;
  pointer-events: none;
}

.message-card--result .prize-name::before {
  left: -2px;
  transform: translateY(-50%) scale(.35) rotate(-18deg);
}

.message-card--result .prize-name::after {
  right: -2px;
  transform: translateY(-50%) scale(.35) rotate(18deg);
}

.screen--result.is-revealing .message-card--result .prize-name {
  animation:
    result-prize-pop 760ms 210ms cubic-bezier(.16,1,.3,1) both,
    result-prize-glow 820ms 760ms ease-out both;
}

.screen--result.is-revealing .message-card--result .prize-name::before {
  animation: result-prize-spark-left 760ms 470ms cubic-bezier(.16,1,.3,1) both;
}

.screen--result.is-revealing .message-card--result .prize-name::after {
  animation: result-prize-spark-right 760ms 560ms cubic-bezier(.16,1,.3,1) both;
}



@keyframes result-prize-pop {

  0% {

    opacity: 0;

    transform: translateY(6px) scale(.96);

  }

  100% {

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}

  /* 0% {
    opacity: 0;
    transform: translateY(8px) scale(.82);
    letter-spacing: .03em;
  }

  58% {
    opacity: 1;
    transform: translateY(-2px) scale(1.075);
    letter-spacing: .01em;
  }

  78% {
    transform: translateY(0) scale(.985);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: normal;
  }
} */

@keyframes result-prize-glow {
  0% {
    text-shadow:
      0 2px 0 rgb(255 255 255 / 52%),
      0 0 8px rgb(239 178 43 / 16%);
  }

  42% {
    text-shadow:
      0 2px 0 rgb(255 255 255 / 66%),
      0 0 11px rgb(255 221 114 / 70%),
      0 0 24px rgb(231 164 34 / 38%);
  }

  100% {
    text-shadow:
      0 2px 0 rgb(255 255 255 / 52%),
      0 0 12px rgb(239 178 43 / 18%);
  }
}

@keyframes result-prize-spark-left {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(.25) rotate(-30deg);
  }

  44% {
    opacity: 1;
    transform: translateY(-70%) scale(1.25) rotate(6deg);
  }

  100% {
    opacity: .72;
    transform: translateY(-50%) scale(.82) rotate(0deg);
  }
}

@keyframes result-prize-spark-right {
  0% {
    opacity: 0;
    transform: translateY(-50%) scale(.25) rotate(30deg);
  }

  44% {
    opacity: 1;
    transform: translateY(-72%) scale(1.18) rotate(-6deg);
  }

  100% {
    opacity: .72;
    transform: translateY(-50%) scale(.78) rotate(0deg);
  }
}

.message-card--result .prize-detail {
  max-width: 100%;
  margin: 0 0 8px;
  font-size: clamp(.82rem, 3.8vw, 1rem);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-align: center;
  text-wrap: balance;
}

html[lang="en"] .screen--result[data-result="win"] .message-card--result h2 {
  font-size: clamp(1.55rem, 6.4vw, 1.95rem);
}

html[lang="en"] .message-card--result .prize-name {
  font-size: clamp(1.02rem, 4.4vw, 1.42rem);
  line-height: 1.18;
}

.result-art {
  position: relative;
  width: 300px;
  height: 248px;
  margin: -14px auto -18px;
}

.result-art::before {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: -18px;
  width: 105%;
  max-width: 330px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255 255 238 / 96%) 0 5%,
    rgb(255 239 139 / 82%) 17%,
    rgb(255 202 62 / 48%) 38%,
    rgb(255 174 24 / 18%) 58%,
    rgb(255 174 24 / 0%) 76%
  );
  content: "";
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(.86);
}

.screen--result[data-result="win"].is-active .result-art::before {
  animation: result-gift-aura 1.45s ease-in-out infinite alternate;
}

.result-gift {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 22px;
  width: 258px;
  transform: translateX(-50%);
  transform-origin: 50% 75%;
  animation: result-glow 1.2s ease-in-out infinite alternate;
}

.result-note {
  margin: 0 0 12px;
  color: #111;
  font-size: clamp(.98rem, 4.1vw, 1.12rem);
  font-weight: 600;
  line-height: 1.42;
  text-align: center;
}

.screen--result[data-result="lose"] .message-card--result {
  display: grid;
  place-content: center;
}

.screen--result[data-result="lose"] .message-card--result h2 {
  margin: 0;
  text-align: center;
}

.screen--result[data-result="lose"] .result-note {
  display: none;
}

.screen--result > .btn {
  min-width: 205px;
  font-size: clamp(1.45rem, 6.5vw, 1.85rem);
}

.terms-note--result {
  margin-top: 16px;
}

/* ---------- History ---------- */
.screen--history {
  min-height: 690px;
  padding-top: 18px;
}

.history-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 605px;
  padding: 26px 28px 24px;
  border-radius: 22px;
  background: rgb(255 255 255 / 47%);
}

.history-table {
  color: #090909;
  font-size: clamp(.92rem, 4vw, 1.0rem);
}

.history-row {
  display: grid;
  grid-template-columns: .85fr 1.45fr;
  gap: 18px;
  padding: 14px 0;
}

.history-row--heading {
  padding-top: 0;
  font-weight: 800;
}

.history-reference {
  display: block;
  margin-top: 4px;
  font-size: .78em;
  line-height: 1.25;
}

.history-note {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid rgb(0 45 97 / 16%);
  color: #111;
  font-size: clamp(.72rem, 3vw, .86rem);
  line-height: 1.38;
  text-align: left;
}

.history-note p {
  margin: 0 0 16px;
}

.history-back-button {
  margin-top: 22px;
}

.history-back-button[hidden] {
  display: none;
}

/* ---------- Login modal ---------- */
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 55%);
}

.modal__dialog {
  position: relative;
  width: min(91vw, 390px);
  padding: 47px 22px 38px;
  border: 2px solid var(--gold-dark);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 0 #7f551f;
  text-align: center;
}

.modal__dialog::after {
  position: absolute;
  inset: 6px;
  border: 1.5px solid var(--gold);
  border-radius: 12px;
  content: "";
  pointer-events: none;
}

.modal__dialog h2,
.modal__dialog .btn {
  position: relative;
  z-index: 1;
}

.modal__dialog h2 {
  margin: 0 0 32px;
  color: var(--navy);
  font-size: clamp(1.45rem, 6.7vw, 1.9rem);
  font-weight: 600;
  line-height: 1.38;
}

.modal__dialog .btn {
  min-width: 190px;
  min-height: 58px;
  font-size: clamp(1.08rem, 4.9vw, 1.35rem);
  font-weight: 500;
  line-height: 1.22;
}

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

@keyframes mascot-float {
  to { transform: translateY(-9px) rotate(1deg); }
}

@keyframes gift-pop {
  to { transform: translateY(-7px) rotate(-4deg) scale(1.035); }
}

@keyframes result-glow {
  to { filter: drop-shadow(0 0 16px rgb(255 238 122 / 92%)); transform: translateX(-50%) scale(1.025); }
}

@keyframes result-gift-aura {
  from {
    opacity: .62;
    transform: translateX(-50%) scale(.86);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1.06);
  }
}

@media (max-width: 359px) {
  .brand-header {
    min-height: 66px;
    padding-inline: 15px;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .campaign-main {
    padding-inline: 14px;
  }

  .intro-card {
    width: 92%;
    padding: 18px 20px 20px;
  }

  .utility-links {
    width: 92%;
  }

  .home-art {
    transform: scale(.92);
    margin-block: -8px -3px;
  }

  .quiz-card {
    padding-inline: 13px;
  }

  .answer-grid {
    gap: 10px 8px;
  }

  .answer-option {
    font-size: .82rem;
  }

  .screen--wrong,
  .screen--celebrate {
    padding-top: 18px;
  }

  .history-card {
    width: 98%;
    padding-inline: 27px;
  }
}


/* ---------- tablet start  ---------- */


@media (min-width: 768px) {
  :root { --page-max: 725px; }

  .brand-header {
    min-height: 122px;
    padding: max(27px, env(safe-area-inset-top)) 34px 0;
  }

  .brand-home { width: 146px; }
  .brand-logo--mtr { width: 164px; }
  .header-lang-toggle {
    top: max(31px, calc(env(safe-area-inset-top) + 4px));
    min-width: 58px;
    padding: 5px 11px;
    font-size: .92rem;
  }




  .campaign-main { padding-inline: 30px; }

  .screen--home,
  .screen--center,
  .screen--draw,
  .screen--result,
  .screen--history,
  .screen--prize-details { min-height: 1160px; }

  .campaign-key-visual-wrap { max-width: 545px; }
  .intro-card { max-width: 630px; padding: 36px 42px; }
  .intro-card p { font-size: 1.7rem; }
  .utility-links { max-width: 630px; }
  .home-art { width: 360px; height: 200px; }
  .home-mascot { width: 288px; }
  /* .home-gift { width: 1008px; top: 10px; left:-60px; } */
.home-gift {
  width: 1008px;
  top: 10px;
  left: -70px;
  transform: rotate(-5deg) scale(.65);
  transform-origin: center;
}

  .btn { min-width: 315px; min-height: 88px; font-size: 3rem; }

  .quiz-card { max-width: 660px; padding: 40px 28px 28px; }
  .quiz-heading h2 { font-size: 3.6rem; }
  .quiz-heading p { font-size: 1.9rem; }
  .quiz-form legend { font-size: 1.9rem; padding: 22px 28px; }
  .answer-option { min-height: 70px; font-size: 1.65rem; }

  .message-card--wrong,
  .message-card--correct,
  .message-card--result { max-width: 620px; }

  .message-card--campaign-status {
    max-width: 650px;
    min-height: 570px;
    padding: 85px 55px 175px;
  }

  .message-card--campaign-status h2 { font-size: 2.65rem; }
  .campaign-status-mascot,
  .state-mascot--already { width: 415px; margin-top: -175px; }
  .screen--campaign-status[data-status="busy"] .campaign-status-mascot { width: 475px; margin-top: 8px; }
  .campaign-status-cta { margin-top: -5px; }

  .state-mascot--retry { width: 360px; }
  .celebrate-art { width: 345px; height: 240px; }
  .celebrate-mascot { width: 278px; }
  .celebrate-gift { width: 558px;
  top: 20px;
  left: -90px;
  transform: rotate(-5deg) scale(.9);
  transform-origin: center;}
  .draw-art { width: 640px; height: 540px; }
  .draw-mascot { width: 555px; }
  .draw-gift { width: 265px; }
  .result-art { width: 510px; height: 410px; margin-top: -24px; margin-bottom: -28px; }
  .result-gift { width: 425px; bottom: 38px; }
  .history-card { max-width: 650px; min-height: 1000px; padding: 75px 70px 55px; }
  .screen--prize-details { padding-inline: 30px; }
  .prize-list-card { max-width: 650px; margin-inline: auto; padding: 45px 34px 40px; }
  .prize-list-card h2 { margin-bottom: 30px; font-size: 3rem; }
  .prize-grid { gap: 16px; }
  .prize-grid-item { min-height: 190px; padding: 48px 22px 22px; }
  .prize-grid-item__number { top: 15px; left: 16px; font-size: 1rem; }
  .prize-grid-item h3 { font-size: 1.45rem; }
  .prize-grid-item p { font-size: 1.05rem; }
  .prize-grid-item .prize-grid-item__quantity { font-size: .95rem; }
  .prize-grid-item__quantity strong { font-size: 1.16rem; }
  .prize-list-note { margin-top: 26px; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ---------- Smooth gold ribbon confetti ---------- */
.screen--celebrate,
.result-art {
  isolation: isolate;
}

.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 220ms ease-out;
}

.confetti-canvas.is-running {
  opacity: 1;
}

.confetti-canvas--celebrate {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.confetti-canvas--result {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}

.screen--celebrate > *:not(.confetti-canvas) {
  position: relative;
  z-index: 2;
}

.result-art .result-gift {
  z-index: 2;
}

/* "由冇變有" staged reveal when entering the correct-answer screen */
.screen--celebrate .message-card--correct,
.screen--celebrate .celebrate-art,
.screen--celebrate > .btn,
.screen--celebrate .licence-note {
  opacity: 1;
  transform: none;
}

.screen--celebrate.is-revealing .message-card--correct {
  animation: reveal-card 560ms cubic-bezier(.2,.85,.25,1) both;
}

.screen--celebrate.is-revealing .celebrate-art {
  animation: reveal-pop 620ms 150ms cubic-bezier(.16,1,.3,1) both;
}

.screen--celebrate.is-revealing > .btn {
  animation: reveal-rise 480ms 360ms cubic-bezier(.2,.85,.25,1) both;
}

.screen--celebrate.is-revealing .licence-note {
  animation: reveal-fade 420ms 480ms ease-out both;
}

.screen--result.is-revealing .message-card--result {
  animation: reveal-card 520ms cubic-bezier(.2,.85,.25,1) both;
}

.screen--result.is-revealing .result-art {
  animation: reveal-pop 620ms 120ms cubic-bezier(.16,1,.3,1) both;
}

.screen--result.is-revealing .result-note,
.screen--result.is-revealing > .btn,
.screen--result.is-revealing .terms-note {
  animation: reveal-rise 450ms 300ms cubic-bezier(.2,.85,.25,1) both;
}

@keyframes reveal-card {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.965);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reveal-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.78);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) scale(1.035);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .screen--celebrate.is-revealing .message-card--correct,
  .screen--celebrate.is-revealing .celebrate-art,
  .screen--celebrate.is-revealing > .btn,
  .screen--celebrate.is-revealing .licence-note,
  .screen--result.is-revealing .message-card--result,
  .screen--result.is-revealing .result-art,
  .screen--result.is-revealing .result-note,
  .screen--result.is-revealing > .btn,
  .screen--result.is-revealing .terms-note {
    animation: none !important;
  }

  .confetti-canvas {
    display: none;
  }

  .screen--result[data-result="win"].is-active .result-art::before {
    animation: none !important;
    opacity: .82;
    transform: translateX(-50%) scale(1);
  }
}


.screen--result > *:not(.confetti-canvas) {
  position: relative;
  z-index: 2;
}

html,
body {
  overflow-x: hidden;
}

/* ---------- Draw -> Result full-screen flash transition ---------- */
.screen-transition-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,1) 0 12%,
      rgba(255,251,222,.98) 20%,
      rgba(255,226,118,.88) 34%,
      rgba(255,194,54,.42) 53%,
      rgba(255,255,255,.08) 72%,
      rgba(255,255,255,0) 100%
    ),
    rgba(255,255,255,.12);
  mix-blend-mode: screen;
}

.screen-transition-flash.is-active {
  visibility: visible;
  animation: screen-transition-flash 720ms cubic-bezier(.16,.82,.24,1) both;
}

@keyframes screen-transition-flash {
  0% {
    opacity: 0;
    filter: brightness(1);
  }
  18% {
    opacity: .72;
  }
  35% {
    opacity: 1;
    filter: brightness(1.22);
  }
  52% {
    opacity: .98;
  }
  100% {
    opacity: 0;
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-transition-flash.is-active {
    animation-duration: 180ms;
  }
}

/* ---------- Mobile WebView vertical responsiveness ----------
   Preserve the 430px composition, but use the height exposed by the WebView
   instead of assuming every main state has a 690px canvas. */
@media (max-width: 767px) {
  .screen,
  .draw-stage {
    min-height: calc(100vh - 146px - env(safe-area-inset-bottom));
    min-height: calc(100dvh - 146px - env(safe-area-inset-bottom));
  }

  .history-card {
    min-height: min(405px, calc(100dvh - 126px));
  }
}

/* Compact WebViews: decorative artwork and whitespace shrink first. */
@media (max-width: 767px) and (max-height: 700px) {
  .brand-header {
    min-height: 62px;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .brand-home { width: clamp(62px, 18vw, 78px); }
  .brand-logo--mtr { width: clamp(70px, 20vw, 88px); }
  .header-lang-toggle {
    top: max(14px, calc(env(safe-area-inset-top) + 2px));
  }

  .screen--home,
  .screen--center,
  .screen--campaign-status,
  .screen--draw,
  .draw-stage,
  .screen--result,
  .screen--history {
    min-height: calc(100vh - 62px);
    min-height: calc(100dvh - 62px);
  }

  .campaign-key-visual-wrap {
    width: clamp(225px, 68%, 292px);
    margin-block: 0 5px;
  }
  html[lang="en"] .campaign-key-visual-wrap {
    width: clamp(240px, 74%, 316px);
  }
  .intro-card { padding: 14px 20px 16px; }
  .intro-card p {
    font-size: clamp(.9rem, 3.9vw, 1.02rem);
    line-height: 1.42;
  }
  .utility-links { margin-top: 6px; }
  .home-art {
    width: 184px;
    height: 94px;
    margin-block: -3px 0;
  }
  .home-mascot {
    right: 17px;
    bottom: 5px;
    width: 164px;
  }
  .home-gift {
    left: -43px;
    width: 148px;
  }
  .screen--home > .btn { min-height: 52px; }
  .terms-note { margin-top: 9px; }

  .message-card--large {
    min-height: min(390px, 52dvh);
    margin-top: clamp(22px, 7dvh, 48px);
    padding-block: clamp(34px, 8dvh, 50px);
  }
  .screen--campaign-status {
    padding-top: clamp(24px, 7dvh, 48px);
  }
  .message-card--campaign-status {
    min-height: min(340px, 48dvh);
    padding-top: 40px;
    padding-bottom: 88px;
  }
  .campaign-status-mascot,
  .state-mascot--already {
    width: 218px;
    margin-top: -88px;
  }
  .screen--wrong,
  .screen--celebrate {
    /* padding-top: clamp(40px, 9dvh, 64px); */
        padding-top: clamp(40px, 6dvh, 64px);

  }
  .message-card--wrong,
  .message-card--correct {
    min-height: min(305px, 45dvh);
    padding-block: 34px;
  }
  .state-mascot--retry {
    width: 180px;
    margin-block: 12px 4px;
  }
  .celebrate-art {
    width: 184px;
    height: 118px;
    margin-top: 8px;
  }
  .celebrate-mascot { width: 178px; }
  .celebrate-gift {
    left: -60px;
    top: 18px;
    width: 145px;
  }
  .licence-note { margin-top: 12px; }

  .draw-runner {
    bottom: 27%;
    width: min(82vw, 360px);
  }
  .screen--result {
    padding-top: clamp(18px, 5dvh, 34px);
  }
  .message-card--result {
    min-height: min(248px, 39dvh);
    padding-block: 26px 22px;
  }
  .result-art {
    width: 250px;
    height: 190px;
    margin-block: -12px -10px;
  }
  .result-gift {
    bottom: 14px;
    width: 212px;
  }
  .result-note { margin-bottom: 8px; }
  .terms-note--result { margin-top: 9px; }

  .screen--history { padding-top: 18px; }
  .history-card {
    min-height: min(560px, calc(100dvh - 98px));
    padding: 10px 25px;
  }
  .history-row { padding-block: 10px; }
  .history-note { padding-top: 18px; }
}

/* Very compact WebViews: keep controls readable; compress art further. */
@media (max-width: 767px) and (max-height: 600px) {
  .brand-header {
    min-height: 54px;
    padding-top: max(9px, env(safe-area-inset-top));
  }
  .brand-home { width: clamp(56px, 16.5vw, 70px); }
  .brand-logo--mtr { width: clamp(64px, 18.5vw, 80px); }
  .header-lang-toggle {
    top: max(11px, calc(env(safe-area-inset-top) + 1px));
    padding-block: 2px;
  }
  .campaign-main {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .screen--home,
  .screen--center,
  .screen--campaign-status,
  .screen--draw,
  .draw-stage,
  .screen--result,
  .screen--history {
    min-height: calc(100vh - 54px);
    min-height: calc(100dvh - 54px);
  }

  .campaign-key-visual-wrap {
    width: clamp(205px, 61%, 262px);
    margin-bottom: 3px;
  }
  html[lang="en"] .campaign-key-visual-wrap {
    width: clamp(220px, 67%, 286px);
  }
  .intro-card { padding: 10px 17px 12px; }
  .intro-card p {
    font-size: clamp(.82rem, 3.65vw, .94rem);
    line-height: 1.34;
  }
  .utility-links { margin-top: 4px; }
  .home-art {
    width: 154px;
    height: 69px;
    margin-block: -4px 1px;
  }
  .home-mascot {
    right: 13px;
    bottom: 2px;
    width: 136px;
  }
  .home-gift {
    left: -35px;
    width: 121px;
  }
  .screen--home > .btn {
    min-height: 50px;
    padding-block: 8px;
  }
  .terms-note { margin-top: 7px; }

  .message-card--large {
    min-height: min(310px, 50dvh);
    margin-top: clamp(12px, 4dvh, 24px);
    padding-block: 28px;
  }
  .screen--campaign-status { padding-top: 18px; }
  .message-card--campaign-status {
    min-height: min(285px, 46dvh);
    padding: 30px 24px 72px;
  }
  .campaign-status-mascot,
  .state-mascot--already,
  .screen--campaign-status[data-status="busy"] .campaign-status-mascot {
    width: 190px;
    margin-top: 8px;
  }
  .screen--wrong,
  .screen--celebrate { padding-top: 24px; }
  .message-card--wrong,
  .message-card--correct {
    min-height: min(250px, 42dvh);
    padding-block: 26px;
  }
  .message-card--wrong h2,
  .message-card--correct h2 { margin-bottom: 22px; }
  .state-mascot--retry {
    width: 150px;
    margin-top: 8px;
  }
  .celebrate-art {
    width: 160px;
    height: 92px;
    margin-top: 4px;
  }
  .celebrate-mascot { width: 150px; }
  .celebrate-gift {
    left: -49px;
    top: 12px;
    width: 120px;
  }
  .licence-note { margin-top: 8px; }

  .draw-runner {
    bottom: 24%;
    width: min(74vw, 315px);
  }
  .screen--result { padding-top: 12px; }
  .message-card--result {
    min-height: min(215px, 37dvh);
    padding: 20px 18px 18px;
  }
  .message-card--result h2 { margin-bottom: 10px; }
  .message-card--result .prize-name { margin-bottom: 9px; }
  .result-art {
    width: 215px;
    height: 145px;
    margin-block: -9px -7px;
  }
  .result-gift {
    bottom: 8px;
    width: 176px;
  }
  .result-note {
    margin-bottom: 5px;
    line-height: 1.3;
  }
  .screen--result > .btn { min-height: 50px; }
  .terms-note--result { margin-top: 7px; }

  .screen--history { padding-top: 10px; }
  .history-card {
    min-height: min(500px, calc(100dvh - 74px));
    padding: 22px 26px 20px;
  }
  .history-row {
    gap: 12px;
    padding-block: 7px;
  }
  .history-note { padding-top: 12px; }
  .history-note p { margin-bottom: 10px; }
  .history-back-button { margin-top: 14px; }
}

/* Android History should follow its content instead of reserving a full
   viewport-height card. iOS keeps the accepted sizing above unchanged. */
@media (max-width: 767px) {
  html.is-android .screen--history {
    min-height: 0;
  }

  html.is-android .screen--history .history-card {
    min-height: 0;
  }
}







/* table terms width */

.tnc-page {

    font-size: 10px;
}

.tnc-section[lang] {
  display: none;
}

html[lang="zh-HK"] .tnc-section[lang="zh-HK"],
html[lang="en"] .tnc-section[lang="en"] {
  display: block;
}

.tnc-divider {
  display: none;
}

.prize-table {
  width: 100%;
  font-size: 10px;

  border-collapse: collapse;
  border: 1px solid #000;
}

.prize-table th,
.prize-table td {
  border: 1px solid #000;
  padding: 7px 10px;
  vertical-align: middle;
}



@media (max-width: 600px) {
  .tnc-main-list {
    padding-left: .9em;
  }

  .tnc-alpha-list,
  .tnc-section ol ol {
    padding-left: .9em;
  }
}

 /* marketing追加 睇呢到先！ */

 html[lang="en"] .screen--result[data-result="lose"] .message-card--result h2 {
  font-size: clamp(1.5rem, 7vw, 2rem);
}

.brand-home-static {
  cursor: default;
  pointer-events: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.brand-home-static img {
  display: block;
}

.prize-grid-item h3 {
  white-space: pre-line;
}

/* 轉language */

.lang-switch-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;

  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
}

.lang-switch-control {
  position: relative;

  width: 64px;
  height: 30px;
  padding: 0;

  border: 2px solid var(--navy);
  border-radius: 999px;

  background: rgba(255,255,255,.78);

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);

  transition:
    background-color .2s ease,
    border-color .2s ease;
}

.lang-switch-knob {
  position: absolute;

  top: 50%;
  left: 4px;

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: var(--navy);

  transform: translateY(-50%);

  box-shadow:
    0 2px 5px rgba(0,0,0,.22);

  transition:
    left .22s ease,
    transform .22s ease;
}

/* 中文狀態：圓點在左 */
html[lang="zh-HK"] .lang-switch-knob {
  left: 4px;
}

/* English 狀態：圓點在右 */
html[lang="en"] .lang-switch-knob {
  left: 36px;
}

/* 左右文字 */
.lang-switch-label {
  min-width: 34px;
  text-align: center;
  transition: opacity .18s ease;
}

/* 當前語言較深 */
html[lang="zh-HK"] .lang-switch-label--zh,
html[lang="en"] .lang-switch-label--en {
  opacity: .38;
}

/* 非當前語言淡少少 */
html[lang="zh-HK"] .lang-switch-label--en,
html[lang="en"] .lang-switch-label--zh {
  opacity: 1;
}

.lang-switch-control:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}


html[lang="en"] .site-terms-note__link {
  margin-left: 0.25em;
}

/* 急急改responsive細字，咩都要一行喎 */
/* `>` matters: this is meant to keep the DATE cell on one line, but as a
   descendant selector it also matched the prize-name span, which is the
   first child of the reward cell. On a 375px phone that forced
   "Big Line Holiday High Speed Rail Group Tour Gift Voucher" onto one
   unbreakable line and overflowed the table by 170px, truncating the prize
   name for every English tier-1/tier-2 winner. Found 2026-09-23. Splitting
   those tiers by agency lengthened the names and made a latent bug
   visible; the reference number below the name was never affected. */
.history-row > span:first-child {
  font-size: 0.88em;
  white-space: nowrap;
}