/* Luck by naam — v2.0.0 */
@font-face{
  font-family:"Broone";
  src:url("../assets/fonts/Broone.woff2") format("woff2"),
      url("../assets/fonts/Broone.woff") format("woff"),
      url("../assets/fonts/BrooneRegular.otf") format("opentype");
  font-weight:normal;font-display:swap;
}
:root{--blue:#1b0dd6}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#e9e4fb;
  font-family:"Broone","Fraunces",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;align-items:flex-start;
}

/* fixed 9:16 design stage, scales to viewport, cqw = 1% of its width */
.stage{
  position:relative;
  width:min(100vw,480px);
  aspect-ratio:1081/1921;
  container-type:inline-size;
  overflow:hidden;
  background:#fff;
}

.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s}
.screen.is-active{opacity:1;visibility:visible}

.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

/* intro badge -> photo crossfade */
.bg--fade{opacity:0;animation:reveal .9s ease forwards;animation-delay:1s}
@keyframes reveal{to{opacity:1}}

/* invisible click targets over baked buttons */
.hit{position:absolute;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;color:transparent;-webkit-tap-highlight-color:transparent}
.hit:disabled{cursor:not-allowed}

/* T&C tick */
.tnc input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.tnc .tick{position:absolute;inset:14%;border-radius:50%;background:var(--blue);opacity:0;transition:.15s}
.tnc input:checked ~ .tick{opacity:1}

/* screen 3 name input, sized/placed to the design's placeholder */
.name-field{
  position:absolute;left:29.6%;top:47.6%;width:40.8%;height:10.5%;
  border:0;background:transparent;outline:none;text-align:center;
  color:#fff;font-family:inherit;font-weight:400;font-size:8cqw;line-height:1.05;
}
.name-field::placeholder{color:#fff;opacity:.95}

/* screen 4 dynamic overlays (Broone, matched to baked positions) */
.ov{position:absolute;color:var(--blue);text-align:center;line-height:1}
.ov-name{left:0;right:0;top:18.1%;font-size:9.4cqw;font-weight:400;
  text-transform:uppercase;letter-spacing:.3cqw;padding:0 4%;word-break:break-word}
.ov-disc{left:0;width:63.8%;top:43.4%;text-align:right;color:#fff;
  font-size:29.5cqw;font-weight:400}
.ov-score{left:0;right:0;top:78%;font-size:3.9cqw;font-weight:400}

/* small text links (not in original art, kept subtle) */
.disc-link,.back-link{color:rgba(27,13,214,.55);font-size:2.6cqw;
  display:flex;align-items:center;justify-content:center}
.back-link{justify-content:flex-start}