/* Back to School Back to Winning — campaign styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  display: flex;
  justify-content: center;
  background: radial-gradient(120% 100% at 50% 0%, #fdeffb 0%, #f3d8f3 55%, #eccdf0 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(120, 60, 160, .25);
}

.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 ---------- */
#wheel {
  position: absolute;
  left: 16.852%;
  top: 20.781%;
  width: 66.296%;
  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; }

#knob {
  position: absolute;
  left: 50%;
  top: 39.43%;
  width: 12.5%;
  transform: translate(-50%, -59.23%);
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(60, 20, 90, .35));
}

#btnStart { left: 27.31%; top: 60.73%; width: 19.91%; height: 4.15%; }
#btnStop  { left: 52.69%; top: 60.73%; width: 19.91%; height: 4.15%; }

#btnStart.dim, #btnStop.dim {
  background: rgba(246, 223, 245, .55);
  border-radius: 10px;
}

/* ---------- RESULT PAGE ---------- */
#btnDownload { left: 36.02%; top: 46.7%; width: 27.96%; height: 3.7%; }

/* ---------- 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 */
.form-card {
  position: absolute;
  left: 10.2%;
  top: 26.6%;
  width: 79.6%;
  min-height: 31%;
  background: #ffffff;
  border: 0.28cqw solid #7b48c5;
  border-radius: 3cqw;
  box-shadow: 0 1.6cqw 4cqw rgba(90, 50, 140, .22);
  display: flex;
  flex-direction: column;
  gap: 1.6cqw;
  padding: 3.4cqw 4.2cqw 3.8cqw;
}

.grp { display: flex; flex-direction: column; gap: .55cqw; text-align: left; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }

.lbl {
  color: #5f4a9e;
  font-weight: 700;
  font-size: clamp(9px, 2.15cqw, 18px);
}
.lbl i { color: #e3383f; font-style: normal; }

.form-card .fld {
  width: 100%;
  border: 2px solid #b9a3dd;
  border-radius: 10px;
  background-color: #ffffff;
  color: #4a3a80;
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(11px, 2.4cqw, 20px);
  padding: 1.5cqw 2.2cqw;
  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='%235f4a9e' 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: #7a5bbb; box-shadow: 0 0 0 3px rgba(122, 91, 187, .18); }
.form-card .fld::placeholder { color: #b3a5d6; font-weight: 500; }

.file-fld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  padding-top: .9cqw;
  padding-bottom: .9cqw;
}
.file-fld span.tag {
  background: linear-gradient(180deg, #a487d8 0%, #7b58b8 45%, #5f3f9e 100%);
  border: 1.5px solid #cdb9ec;
  box-shadow: 0 2px 5px rgba(95, 63, 158, .4), inset 0 1px 2px rgba(255,255,255,.55);
  color: #fff;
  border-radius: 8px;
  padding: .8cqw 2.6cqw;
  flex: 0 0 auto;
  font-size: .92em;
  font-weight: 700;
}
.file-fld span.name { color: #b3a5d6; overflow: hidden; text-overflow: ellipsis; }
.file-fld.has-file span.name { color: #4a3a80; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 1.6cqw;
  color: #4a3a80;
  font-size: clamp(9px, 2.15cqw, 18px);
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.consent input {
  width: 1.2em; height: 1.2em;
  margin-top: .1em;
  accent-color: #6a4aa8;
  flex: 0 0 auto;
  cursor: pointer;
}
.consent a { color: #8146d8; font-weight: 700; text-decoration: none; }
.consent a:hover { text-decoration: underline; }
.consent + .consent { margin-top: -0.6cqw; }

.btn-cta {
  align-self: center;
  width: 42%;
  border: 0.35cqw solid #cdb9ec;
  border-radius: 12px;
  background: linear-gradient(180deg, #b299e2 0%, #8663c4 40%, #5f3f9e 100%);
  box-shadow: 0 5px 14px rgba(95, 63, 158, .5), inset 0 3px 4px rgba(255,255,255,.55);
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: clamp(14px, 3.6cqw, 30px);
  padding: 1.2cqw 0;
  margin-top: .6cqw;
  cursor: pointer;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(60, 30, 100, .4);
}
.btn-cta:active { transform: translateY(1px); filter: brightness(1.08); }
.btn-cta:disabled { opacity: .6; cursor: wait; }

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

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