/* Back to School — Win Phones & Exciting Prizes — campaign styles.
   Palette taken from the 2026 artwork: navy #31348b, frame blue #0079f4,
   white cards on a white key visual. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #eaeef7;
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #ffffff 0%, #eef1f9 55%, #dfe4f2 100%);
}

/* 9:16 design stage — 1080x1920 artwork scaled responsively */
.stage {
  position: relative;
  width: min(100vw, calc(100dvh * 0.5625));
  aspect-ratio: 1080 / 1920;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  box-shadow: 0 0 60px rgba(40, 50, 120, .18);
}

.hidden { display: none !important; }

/* ---------- invisible hit zones over baked-in buttons ---------- */
.hit {
  position: absolute;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: filter .15s;
}
.hit:active { filter: brightness(1.1); }
.hit:disabled { cursor: default; }

/* pressed visual feedback overlay */
.hit.pressed { background: rgba(255, 255, 255, .25); border-radius: 12px; }

/* ---------- SPIN PAGE ----------
   Artwork wheel: centre (539, 654), outer radius 322 on the 1080x1920 stage.
   The centre knob is erased from wheel.png and laid back over it by #knob, so
   its tip keeps pointing up however far the wheel has turned. */
#wheel {
  position: absolute;
  left: 20.093%;
  top: 17.292%;
  width: 59.630%;
  will-change: transform;
  pointer-events: none;
}

@keyframes wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#wheel.spinning { animation: wheel-spin .55s linear infinite; }

/* The knob is the pointer: the wheel stops with the winning segment centred
   at 12 o'clock, right under its tip.
   Knob box measured on the artwork: x 491-588, y 578-698. */
#knob {
  position: absolute;
  left: 45.463%;
  top: 30.104%;
  width: 8.981%;
  pointer-events: none;
  filter: drop-shadow(0 4px 7px rgba(30, 35, 90, .42));
}

#btnStart { left: 28.519%; top: 53.021%; width: 19.167%; height: 2.240%; }
#btnStop  { left: 52.315%; top: 53.021%; width: 19.167%; height: 2.240%; }

#btnStart.dim, #btnStop.dim {
  background: rgba(49, 52, 139, .18);
  border-radius: 10px;
}

/* ---------- RESULT PAGE ---------- */
#btnDownload { left: 38.148%; top: 41.563%; width: 23.796%; height: 2.552%; }

/* The review screens fill their card down to the last line, so Play Again
   sits just under it; the screensaver screen has room inside the card. */
.btn-again {
  position: absolute;
  left: 50%;
  top: 56.875%;
  transform: translateX(-50%);
  width: 30%;
  border: 0.28cqw solid #d7d9e6;
  border-radius: 11px;
  background: linear-gradient(180deg, #c9cbe3 0%, #5a5fae 26%, #31348b 60%);
  box-shadow: 0 5px 14px rgba(30, 35, 100, .35), inset 0 0 0 0.19cqw #31348b;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: clamp(12px, 2.9cqw, 25px);
  padding: 1.1cqw 0;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(20, 25, 80, .45);
}
.btn-again.in-card { top: 47.917%; }
.btn-again:active { transform: translateX(-50%) translateY(1px); filter: brightness(1.1); }

/* ---------- FORM PAGE ---------- */
.stage { container-type: inline-size; }

/* real card that sits over (and fully covers) the baked-in artwork card,
   so it can grow taller than the artwork version.
   Artwork card: x 161-919, y 334-1057, 6px #0079f4 frame, 66px corner radius. */
.form-card {
  position: absolute;
  left: 14.907%;
  top: 17.396%;
  width: 70.278%;
  min-height: 37.708%;
  background: #ffffff;
  border: 0.556cqw solid #0079f4;
  border-radius: 6.1cqw;
  box-shadow: 0 1.4cqw 3.4cqw rgba(30, 40, 110, .18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8cqw;
  padding: 2.1cqw 4.4cqw;
}

.grp { display: flex; flex-direction: column; gap: .45cqw; text-align: left; min-width: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }

.lbl {
  color: #31348b;
  font-weight: 600;
  font-size: clamp(8px, 1.9cqw, 16px);
}
.lbl i { color: #e3383f; font-style: normal; }

.form-card .fld {
  width: 100%;
  border: 2px solid #b9c4e6;
  border-radius: 9px;
  background-color: #ffffff;
  color: #262a6e;
  font-family: inherit;
  font-weight: 500;
  font-size: clamp(10px, 2.05cqw, 18px);
  padding: 1.1cqw 1.9cqw;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.form-card select.fld {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2331348b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2.2cqw center;
  background-size: 2.2cqw auto;
  cursor: pointer;
}
.form-card .fld:focus { border-color: #0079f4; box-shadow: 0 0 0 3px rgba(0, 121, 244, .2); }
.form-card .fld::placeholder { color: #9aa5cc; font-weight: 400; }
.form-card select.fld:invalid { color: #9aa5cc; font-weight: 400; }  /* "Select Emirate" placeholder look */

.file-fld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4cqw;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  padding-top: .7cqw;
  padding-bottom: .7cqw;
}
.file-fld span.tag {
  background: linear-gradient(180deg, #c9cbe3 0%, #5a5fae 28%, #31348b 62%);
  border: 1.5px solid #d7d9e6;
  box-shadow: 0 2px 5px rgba(30, 35, 100, .35), inset 0 0 0 1.5px #31348b;
  color: #fff;
  border-radius: 8px;
  padding: .65cqw 1.8cqw;
  flex: 0 0 auto;
  font-size: .82em;
  font-weight: 600;
}
.file-fld span.name { color: #9aa5cc; overflow: hidden; text-overflow: ellipsis; }
.file-fld.has-file span.name { color: #262a6e; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 1.4cqw;
  color: #31348b;
  font-size: clamp(8px, 1.85cqw, 16px);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.consent input {
  width: 1.2em; height: 1.2em;
  margin-top: .1em;
  accent-color: #31348b;
  flex: 0 0 auto;
  cursor: pointer;
}
.consent a { color: #0079f4; font-weight: 600; text-decoration: none; }
.consent a:hover { text-decoration: underline; }
.consent + .consent { margin-top: -0.6cqw; }

.btn-cta {
  align-self: center;
  width: 42%;
  border: 0.28cqw solid #d7d9e6;
  border-radius: 11px;
  background: linear-gradient(180deg, #c9cbe3 0%, #5a5fae 26%, #31348b 60%);
  box-shadow: 0 5px 14px rgba(30, 35, 100, .35), inset 0 0 0 0.19cqw #31348b;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .1em;
  font-size: clamp(12px, 2.9cqw, 25px);
  padding: 1.05cqw 0;
  margin-top: .7cqw;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(20, 25, 80, .45);
}
.btn-cta:active { transform: translateY(1px); filter: brightness(1.1); }
.btn-cta:disabled { opacity: .6; cursor: wait; }

.form-error {
  color: #d63384;
  font-size: clamp(9px, 2cqw, 16px);
  font-weight: 600;
  text-align: center;
  min-height: 1.3em;
}

/* ---------- terms & conditions modal ---------- */
.tnc-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(25, 30, 80, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.tnc-box {
  position: relative;
  background: #ffffff;
  border: 3px solid #0079f4;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(25, 35, 105, .35);
  width: 560px;
  max-width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 30px 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: 'Poppins', sans-serif;
}
.tnc-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #e8ecfa;
  color: #31348b;
  font-size: 15px;
  cursor: pointer;
}
.tnc-title {
  color: #31348b;
  font-weight: 700;
  font-size: clamp(20px, 5.4vw, 28px);
  text-align: center;
}
.tnc-langs { display: flex; gap: 10px; }
.tnc-lang {
  border: 2px solid #b9c4e6;
  border-radius: 999px;
  background: #ffffff;
  color: #31348b;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 7px 24px;
  cursor: pointer;
}
.tnc-lang.on {
  background: linear-gradient(180deg, #5a5fae, #31348b);
  border-color: #31348b;
  color: #fff;
}
.tnc-list {
  color: #2b2f6b;
  font-weight: 500;
  font-size: clamp(13px, 3.6vw, 15px);
  line-height: 1.5;
  padding-inline-start: 1.4em;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tnc-ok { width: 40%; min-width: 130px; }

/* ---------- loading overlay ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(25, 30, 80, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.spinner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, .3);
  border-top-color: #ffffff;
  animation: spin-loader .8s linear infinite;
}
@keyframes spin-loader {
  to { transform: rotate(360deg); }
}
.loader-text {
  color: #ffffff;
  font-weight: 600;
  font-size: clamp(14px, 4vw, 20px);
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgba(15, 20, 60, .5);
}

/* toast for status / errors on other pages */
.toast {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  background: rgba(35, 40, 110, .94);
  color: #fff;
  font-weight: 600;
  font-size: clamp(11px, 2.3cqw, 20px);
  padding: .6em 1.4em;
  border-radius: 999px;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  white-space: nowrap;
}
.toast.show { opacity: 1; }