/* =========================================================
   BBCORP // PRIZE TERMINAL
   Kiosk quiz — designed for 2160 x 3840 portrait (9:16)
   Design tokens lifted from contest.bbcorp.trade
   ========================================================= */

:root{
  --navy-edge:#040810;
  --navy-core:#071522;
  --navy-lift:#0C1E2E;
  --cyan:#00F0FF;
  --orange:#F15F23;
  --ink:#F8FAFC;
  --slate:#94A3B8;
  --slate-dim:#64748B;
  --line:rgba(148,163,184,.14);
  --line-hi:rgba(0,240,255,.22);

  --display:"Outfit","Futura","Avenir Next",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --body:"Manrope","Avenir Next","Segoe UI",system-ui,sans-serif;

  --gut:4rem;             /* page gutter */
  --ease:cubic-bezier(.16,.84,.32,1);
}

/* Root scale: 1rem = 30px on a 2160x3840 panel.
   min() of both axes keeps proportions on any other screen. */
html{
  font-size:clamp(7px, min(1.389vw, 0.781vh), 40px);
  background:var(--navy-edge);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

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

body{
  font-family:var(--body);
  background:var(--navy-edge);
  color:var(--ink);
  min-height:100svh;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,svg{display:block;max-width:100%}
strong{font-weight:700;color:var(--ink)}

/* ---------- background ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(60% 38% at 50% 18%, rgba(0,240,255,.11), transparent 70%),
    radial-gradient(70% 42% at 50% 82%, rgba(241,95,35,.10), transparent 72%),
    radial-gradient(100% 60% at 50% 50%, var(--navy-core), var(--navy-edge) 78%);
  animation:drift 24s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,-1.2%,0) scale(1)}to{transform:translate3d(0,1.2%,0) scale(1.05)}}

.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:8rem 8rem;
  mask-image:radial-gradient(70% 55% at 50% 45%, #000 20%, transparent 85%);
  -webkit-mask-image:radial-gradient(70% 55% at 50% 45%, #000 20%, transparent 85%);
  opacity:.5;
}
.bg-scan{
  position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 5px);
}

/* ---------- fixed chrome ---------- */
.chrome{
  position:fixed;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:2rem;
  padding:0 var(--gut);
  font-family:var(--mono);font-size:.92rem;font-weight:400;
  letter-spacing:.28em;text-transform:uppercase;color:var(--slate-dim);
  white-space:nowrap;
}
.chrome-bot{bottom:2.6rem}
.chrome-l,.chrome-r{display:flex;align-items:center;gap:.9rem}
.chrome .sep{color:rgba(100,116,139,.55);letter-spacing:.1em}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- persistent brand bar ---------- */
.brandbar{
  position:fixed;top:0;left:0;right:0;z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;
  padding:3.4rem var(--gut) 0;
  pointer-events:none;
}
.lockup{display:flex;align-items:center;gap:1.5rem}
/* The official wordmark is a 288x72 raster, so the lockup is sized to stay
   crisp rather than upscaled into mush on a 4K panel. */
.lockup-icon{
  height:4.6rem;width:auto;border-radius:1.05rem;
  box-shadow:0 .5rem 2.2rem rgba(0,0,0,.5), 0 0 2.6rem rgba(41,171,226,.26);
}
.lockup-word{height:2.8rem;width:auto}

.brandbar-cap{
  font-family:var(--mono);font-size:.92rem;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:var(--slate-dim);
  display:flex;align-items:center;gap:.85rem;white-space:nowrap;
}
.brandbar-cap .sep{color:rgba(100,116,139,.5);letter-spacing:.1em}
.dot{
  width:.5rem;height:.5rem;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 .9rem var(--cyan);animation:blink 2.4s ease-in-out infinite;flex:none;
}
.brandbar-rule{
  width:min(100%,46rem);height:1px;margin-top:.6rem;
  background:linear-gradient(90deg,transparent,var(--line-hi) 22%,var(--line-hi) 78%,transparent);
}

/* ---------- stage / screens ---------- */
#stage{position:relative;z-index:2;height:100svh;width:100%}

.screen{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:15rem var(--gut) 9rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate3d(0,2.2rem,0);
  transition:opacity .42s var(--ease), transform .42s var(--ease), visibility 0s .42s;
}
.screen.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
  transition:opacity .52s var(--ease) .06s, transform .52s var(--ease) .06s, visibility 0s;
}
.screen.is-leaving{transform:translate3d(0,-1.6rem,0)}

.pad{
  width:100%;max-width:62rem;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:2.4rem;
}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:1.05rem;font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;color:var(--cyan);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow .sep{color:rgba(0,240,255,.4)}
.eyebrow-ok{color:#4ADE80}
.eyebrow-ok .pip{background:#4ADE80;box-shadow:0 0 1rem #4ADE80}
.eyebrow-ok .sep{color:rgba(74,222,128,.4)}
.pip{
  width:.52rem;height:.52rem;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 1rem var(--cyan);flex:none;animation:blink 2.4s ease-in-out infinite;
}

.kicker{
  font-family:var(--mono);font-size:1.5rem;letter-spacing:.5em;
  text-transform:uppercase;color:var(--slate);margin-top:1rem;
}

.mega{
  font-family:var(--display);font-weight:900;
  font-size:8.5rem;line-height:.84;letter-spacing:-.035em;
  text-transform:uppercase;
}
/* The money is the hook from across the hall: a highlight sweeps through the
   metal gradient while the whole figure breathes and its glow swells. */
.amount{
  display:block;white-space:nowrap;
  font-size:15rem;line-height:.86;
  background:linear-gradient(100deg,
    #9FC2D1 0%, #DCEEF5 12%, #FFFFFF 20%, #DCEEF5 28%,
    #7FA7B8 42%, #CFE9F2 58%, #FFFFFF 70%, #BBD9E6 82%, #7FA7B8 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:background-position, transform;
  animation:sheen 5s linear infinite, swell 3.4s ease-in-out infinite;
}
@keyframes sheen{
  from{background-position:170% 0}
  to{background-position:-70% 0}
}
@keyframes swell{
  0%,100%{transform:scale(1);  filter:drop-shadow(0 .5rem 2.6rem rgba(0,240,255,.18))}
  50%    {transform:scale(1.04);filter:drop-shadow(0 .9rem 5.2rem rgba(0,240,255,.46))}
}
.period{color:var(--orange);-webkit-text-fill-color:var(--orange)}

.big{
  font-family:var(--display);font-weight:900;
  font-size:7.4rem;line-height:.88;letter-spacing:-.032em;
  text-transform:uppercase;
}
.big-form{font-size:6rem}

/* ---------- question block ---------- */
/* The questions were legible but flat. The bracket frame, the lift behind the
   text and the cyan key word give each one a focal point you read at a glance
   from standing distance. */
.qbox{
  position:relative;width:100%;
  padding:5rem 4.4rem;margin-top:.6rem;
  background:
    radial-gradient(76% 120% at 50% 50%, rgba(0,240,255,.085), transparent 72%),
    linear-gradient(180deg, rgba(12,30,46,.5), rgba(7,21,34,.2));
  border-radius:1.6rem;
}
.qbox .big{
  font-size:8.2rem;
  text-shadow:0 0 7rem rgba(0,240,255,.4), 0 .4rem 3rem rgba(0,0,0,.6);
}
.qbox .accent{
  background:linear-gradient(180deg,#FFFFFF 6%,var(--cyan) 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 3.2rem rgba(0,240,255,.75));
}
.corner{
  position:absolute;width:3.4rem;height:3.4rem;
  fill:none;stroke:var(--cyan);stroke-width:1.6;
  filter:drop-shadow(0 0 1rem rgba(0,240,255,.6));
  opacity:.9;
}
.corner path{vector-effect:non-scaling-stroke}
.corner.tl{top:0;left:0}
.corner.tr{top:0;right:0;transform:scaleX(-1)}
.corner.bl{bottom:0;left:0;transform:scaleY(-1)}
.corner.br{bottom:0;right:0;transform:scale(-1)}

.lede{
  font-size:2.35rem;line-height:1.45;font-weight:400;color:var(--slate);
  max-width:46rem;text-wrap:balance;
}
.lede strong{color:var(--cyan);font-weight:700}

.microline{
  font-family:var(--mono);font-size:.98rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--slate-dim);
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;justify-content:center;
}
.microline .sep{color:rgba(100,116,139,.5)}

/* ---------- attract ---------- */
#s-attract .pad{gap:2rem;max-width:68rem}
#s-attract .mega{margin-top:.4rem}

.attract-cta{
  display:flex;flex-direction:column;align-items:center;gap:2.6rem;
  margin-top:3.2rem;
}
.touch-ring{
  position:relative;width:13rem;height:13rem;
  display:grid;place-items:center;
}
.touch-ring-i{
  position:absolute;inset:0;border-radius:50%;
  border:.14rem solid var(--cyan);
  animation:ripple 3s var(--ease) infinite;
}
.touch-ring-i.d2{animation-delay:1.5s}
@keyframes ripple{
  0%{transform:scale(.52);opacity:0}
  14%{opacity:.85}
  100%{transform:scale(1.22);opacity:0}
}
.touch-hand{
  width:6.6rem;height:6.6rem;
  animation:tap 3s var(--ease) infinite;
}
.touch-hand svg{
  width:100%;height:100%;fill:none;
  stroke:var(--ink);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 1.4rem rgba(0,240,255,.5));
}
@keyframes tap{0%,70%,100%{transform:translateY(0) scale(1)}80%{transform:translateY(.7rem) scale(.93)}}

.touch-label{
  font-family:var(--mono);font-size:1.8rem;font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;color:var(--ink);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.caret{color:var(--orange);animation:blink 1.1s steps(1) infinite}

/* ---------- steps ---------- */
.steps{
  list-style:none;width:100%;
  display:flex;flex-direction:column;gap:1.6rem;margin-top:1rem;
}
.steps li{
  display:grid;grid-template-columns:auto 1fr;grid-auto-rows:min-content;
  column-gap:2.4rem;row-gap:.5rem;text-align:left;
  padding:2.6rem 3rem;
  background:linear-gradient(180deg, rgba(12,30,46,.78), rgba(7,21,34,.62));
  border:1px solid var(--line);border-left:.26rem solid var(--cyan);
  border-radius:1.4rem;
}
.step-n{
  grid-row:1 / span 2;align-self:center;
  font-family:var(--mono);font-size:1.05rem;letter-spacing:.26em;
  color:var(--cyan);writing-mode:vertical-rl;transform:rotate(180deg);
  opacity:.85;
}
.steps strong{font-family:var(--display);font-weight:800;font-size:2.6rem;letter-spacing:-.01em}
.steps em{font-style:normal;font-size:1.85rem;color:var(--slate);line-height:1.4}

/* ---------- choices ---------- */
.choices{
  width:100%;display:flex;flex-direction:column;gap:1.8rem;margin-top:1.4rem;
}
.choice{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2.6rem;
  width:100%;text-align:left;
  padding:3rem 3.2rem;
  background:linear-gradient(180deg, rgba(12,30,46,.8), rgba(7,21,34,.6));
  border:1px solid var(--line);border-radius:1.6rem;
  transition:transform .22s var(--ease), border-color .22s, background .22s, box-shadow .22s;
}
.choice-n{
  font-family:var(--mono);font-size:2.1rem;font-weight:700;
  width:4.6rem;height:4.6rem;flex:none;
  display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-hi);color:var(--cyan);
  transition:background .22s, color .22s, border-color .22s, box-shadow .22s;
}
.choice-b{display:flex;flex-direction:column;gap:.55rem}
.choice-t{font-family:var(--display);font-weight:800;font-size:2.75rem;letter-spacing:-.012em;line-height:1.14}
.choice-s{font-size:1.75rem;color:var(--slate);line-height:1.35}

.choice:active{transform:scale(.985)}
.choice.is-picked{
  border-color:var(--cyan);
  background:linear-gradient(180deg, rgba(0,240,255,.14), rgba(0,240,255,.05));
  box-shadow:0 0 0 .12rem rgba(0,240,255,.45), 0 1.4rem 4rem rgba(0,240,255,.2);
}
.choice.is-picked .choice-n{background:var(--cyan);color:var(--navy-edge);border-color:var(--cyan);box-shadow:0 0 2rem rgba(0,240,255,.6)}
.choices.is-locked .choice:not(.is-picked){opacity:.3;transform:scale(.99)}

/* ---------- buttons ---------- */
.btn{
  position:relative;
  font-family:var(--mono);font-weight:700;font-size:1.85rem;
  letter-spacing:.26em;text-transform:uppercase;
  padding:2.3rem 4.6rem;border-radius:999px;
  transition:transform .2s var(--ease), box-shadow .24s, opacity .2s, background .2s;
  margin-top:1.6rem;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:var(--orange);color:#fff;
  box-shadow:0 1.2rem 4rem rgba(241,95,35,.42), inset 0 .1rem 0 rgba(255,255,255,.22);
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 1.2rem 4rem rgba(241,95,35,.42), inset 0 .1rem 0 rgba(255,255,255,.22)}
  50%{box-shadow:0 1.6rem 5.6rem rgba(241,95,35,.62), inset 0 .1rem 0 rgba(255,255,255,.22)}
}
.btn-primary[disabled]{opacity:.55;animation:none;pointer-events:none}
.btn-ghost{
  border:1px solid var(--line-hi);color:var(--cyan);
  background:rgba(0,240,255,.05);
}
.btn-back{
  font-family:var(--mono);font-size:1.25rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--slate-dim);
  padding:1.6rem 2.4rem;margin-top:.8rem;
}
.btn-back:active{color:var(--ink)}

/* ---------- form ---------- */
.pad-form{gap:1.9rem}
#lead-form{width:100%;display:flex;flex-direction:column;gap:2rem;margin-top:.6rem}

.field{display:flex;flex-direction:column;gap:.9rem;text-align:left;width:100%}
.field-l{
  font-family:var(--mono);font-size:1.05rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--slate);
}
.field input{
  width:100%;
  font-family:var(--body);font-size:2.5rem;font-weight:600;color:var(--ink);
  background:rgba(7,21,34,.85);
  border:1px solid var(--line);border-radius:1.1rem;
  padding:2.1rem 2.2rem;
  -webkit-user-select:text;user-select:text;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder{color:rgba(100,116,139,.65);font-weight:400}
.field input:focus{
  outline:none;border-color:var(--cyan);background:rgba(12,30,46,.9);
  box-shadow:0 0 0 .1rem rgba(0,240,255,.4), 0 0 3rem rgba(0,240,255,.14);
}
.field.is-bad input{border-color:var(--orange);box-shadow:0 0 0 .1rem rgba(241,95,35,.42)}
.field-e{
  font-family:var(--mono);font-size:1.15rem;letter-spacing:.14em;
  color:var(--orange);min-height:1.5rem;
}

.consent{
  font-size:1.4rem;line-height:1.5;color:var(--slate-dim);
  text-align:left;max-width:56rem;
}
.form-err{
  font-family:var(--mono);font-size:1.4rem;letter-spacing:.1em;
  color:var(--orange);text-align:center;min-height:1.8rem;
}

/* keyboard open: shrink the chrome so the fields stay reachable */
body.kb-open .chrome,
body.kb-open .brandbar,
body.kb-open .bg-grid{opacity:0}
body.kb-open .screen{padding-top:3rem;padding-bottom:3rem;align-items:flex-start}
body.kb-open #s-form .big-form,
body.kb-open #s-form .eyebrow,
body.kb-open #s-form .consent,
body.kb-open #s-form .btn-back{display:none}
body.kb-open .pad-form{gap:1.2rem}

/* ---------- done ---------- */
/* The done screen carries the most content; it is tightened so it clears the
   brand bar instead of butting up against it. */
#s-done .pad{gap:1.5rem;max-width:66rem}
#s-done .big{font-size:6.6rem}
#s-done .lede{font-size:2.15rem}
.tick{
  width:8rem;height:8rem;border-radius:50%;
  display:grid;place-items:center;
  border:.16rem solid rgba(74,222,128,.5);
  background:rgba(74,222,128,.09);
  box-shadow:0 0 5rem rgba(74,222,128,.28);
  animation:pop .6s var(--ease) both;
}
.tick svg{width:4.6rem;height:4.6rem;fill:none;stroke:#4ADE80;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.tick svg path{stroke-dasharray:44;stroke-dashoffset:44;animation:draw .5s var(--ease) .28s forwards}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

.qr-head{
  font-family:var(--display);font-weight:800;font-size:2.9rem;
  text-transform:uppercase;letter-spacing:-.01em;margin-top:1.6rem;
}
.qr-sub{font-size:1.65rem;color:var(--slate-dim);margin-top:-.8rem}

.qr-row{display:grid;grid-template-columns:1fr 1fr;gap:2rem;width:100%;margin-top:.8rem}
.qr-card{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding:2.4rem 1.9rem;
  background:linear-gradient(180deg, rgba(12,30,46,.8), rgba(7,21,34,.6));
  border:1px solid var(--line);border-radius:1.6rem;
}
.qr-img{
  width:100%;aspect-ratio:1;max-width:19rem;
  background:#fff;border-radius:1rem;padding:.9rem;
  box-shadow:0 1rem 3.4rem rgba(0,0,0,.55);
}
.qr-img img{width:100%;height:100%}
.qr-t{
  font-family:var(--mono);font-size:1.35rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-top:.4rem;
}
.qr-d{font-size:1.55rem;line-height:1.4;color:var(--slate);text-wrap:balance}
.qr-u{
  font-family:var(--mono);font-size:1.05rem;letter-spacing:.2em;
  color:var(--slate-dim);text-transform:uppercase;
  margin-top:auto;padding-top:.4rem;   /* pin the URL to the card foot */
}

#reset-note{margin-top:.6rem;opacity:.75}

/* ---------- offline queue pill ---------- */
.queue-pill{
  position:fixed;z-index:9;right:var(--gut);bottom:7.4rem;
  font-family:var(--mono);font-size:1rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);background:rgba(241,95,35,.1);
  border:1px solid rgba(241,95,35,.35);border-radius:999px;
  padding:.9rem 1.8rem;display:flex;align-items:center;gap:.7rem;
}
.queue-pill[hidden]{display:none}
.queue-pill .sep{opacity:.5}

/* ---------- landscape / short screens ---------- */
@media (max-aspect-ratio:1/1) and (min-aspect-ratio:9/21){
  /* portrait panels: defaults above are tuned for this */
}
@media (min-aspect-ratio:1/1){
  .pad{max-width:88rem}
  .mega{font-size:6.4rem}
  .amount{font-size:11rem}
  .big{font-size:5.6rem}
  .big-form{font-size:4.4rem}
  .qbox{padding:3rem 3.4rem}
  .qbox .big{font-size:6.2rem}
  .screen{padding:12rem var(--gut) 7rem}
  .brandbar{padding-top:2.2rem;gap:.8rem}
  .lockup-icon{height:3.4rem}
  .lockup-word{height:2.1rem}
  .steps li{padding:1.8rem 2.4rem}
  .choice{padding:2.1rem 2.6rem}
  .qr-img{max-width:15rem}
}

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