:root{
  --ink:#14111C; --ink2:#1F1A2B; --ink3:#2A2438;
  --cream:#FFF4E3; --cream2:#E9DCC7; --mute:#A79DB8;
  --disp:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--cream);font-family:var(--disp);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px;border-radius:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{min-height:100dvh;max-width:460px;margin:0 auto;display:flex;flex-direction:column;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));position:relative}
.screen{flex:1;display:flex;flex-direction:column;animation:in .42s var(--ease) both}
.screen.out{animation:out .28s ease-in both}
@keyframes in{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes out{to{opacity:0;transform:translateX(-36px)}}
.screen.fade{animation:fade .5s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.title{font-weight:800;font-size:clamp(40px,12vw,56px);line-height:.9;letter-spacing:-.05em;margin-top:10px}
.title em,.q em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em}
.q{margin-top:10px}
.q .lead{display:block;font-weight:800;font-size:clamp(26px,7.4vw,34px);line-height:1;letter-spacing:-.045em}
.q em{display:block;font-size:clamp(28px,8.4vw,40px);line-height:1.02;margin-top:4px}
.q.long em{font-size:clamp(25px,7.2vw,34px)}

/* faces */
.face{position:relative;border-radius:50%;flex:none;background:var(--c);padding:4px;transition:transform .32s var(--spring),filter .3s,opacity .3s}
.face img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.face.grey{filter:grayscale(1) brightness(.6);opacity:.7}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;min-height:34px}
.back{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:8px 0}
.back[hidden]{display:block;visibility:hidden}
.dots{display:flex;gap:3px;margin:10px 0 16px}
.dots i{flex:1;height:5px;border-radius:3px;background:var(--ink3);transition:background .3s}
.dots i.on{background:var(--cream)}

/* pick your name */
.names{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.nm{display:flex;align-items:center;gap:16px;background:var(--ink2);border-radius:26px;padding:10px 18px 10px 10px;text-align:left;transition:transform .2s var(--spring),background .2s}
.nm:active{transform:scale(.97)}
.nm .face{width:64px;height:64px}
.nm b{font-size:24px;font-weight:800;letter-spacing:-.03em}
.nm small{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.nm[disabled]{opacity:.38;cursor:default}
.privacy{display:flex;gap:12px;align-items:flex-start;margin-top:auto;padding-top:22px;font-size:15px;line-height:1.45;color:var(--cream2)}
.privacy svg{flex:none;margin-top:2px}

/* options */
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin:auto 0 0;padding-top:18px}
.opt{display:flex;flex-direction:column;align-items:center;gap:8px;width:calc((100% - 36px)/3)}
.opt .face{width:min(100%,104px);aspect-ratio:1}
.opt b{font-size:16px;font-weight:800;letter-spacing:-.02em;transition:color .2s}
.opts.chosen .opt:not(.pick) .face{filter:grayscale(1) brightness(.6);opacity:.65}
.opts.chosen .opt:not(.pick) b{color:var(--mute)}
.opt.pick .face{transform:scale(1.1) rotate(-4deg);box-shadow:0 0 0 5px var(--ink),0 0 0 9px var(--c)}
.opt.pop .face{animation:pop .42s var(--spring)}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1.1) rotate(-4deg)}}

.btn{display:flex;align-items:center;justify-content:center;width:100%;height:60px;border-radius:999px;background:var(--cream);color:var(--ink);font-weight:800;font-size:19px;letter-spacing:-.02em;margin-top:22px;transition:transform .2s var(--spring),opacity .2s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.25;cursor:default}
.btn.ghost{background:var(--ink3);color:var(--cream)}
.btn.small{height:48px;font-size:16px;margin-top:12px}

/* waiting */
.ring{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.ring .face{width:94px;height:94px}
.ring .face.lit{animation:lit .6s var(--spring)}
@keyframes lit{0%{transform:scale(.8)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.count{font-weight:800;font-size:128px;line-height:.85;letter-spacing:-.07em;text-align:center;margin-top:auto}
.count em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:64px;color:var(--mute);letter-spacing:0}
.sub{text-align:center;font-size:17px;color:var(--cream2);margin-top:12px;line-height:1.45}

/* reveal */
.bars{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.bar{display:grid;grid-template-columns:44px 1fr 28px;align-items:center;gap:12px}
.bar .face{width:44px;height:44px;padding:3px}
.track{height:40px;border-radius:20px;background:var(--ink3);overflow:hidden}
.fill{height:100%;width:0;border-radius:20px;background:var(--c);transition:width .7s var(--ease)}
.bar b{font-family:var(--mono);font-size:20px;font-weight:600;text-align:right;opacity:0;transition:opacity .3s}
.bar.show b{opacity:1}
.win{display:flex;flex-direction:column;align-items:center;margin-top:auto;padding-top:14px;opacity:0;transform:scale(.6);transition:opacity .4s,transform .6s var(--spring)}
.win.show{opacity:1;transform:none}
.win .faces{display:flex;gap:12px;justify-content:center}
.win .face{width:132px;height:132px;padding:6px;transform:rotate(-4deg)}
.win.tie .face{width:104px;height:104px}
.crown{position:absolute;top:-30px;right:-4px;font-size:46px;transform:rotate(16deg);line-height:1}
.verdict{font-family:var(--serif);font-style:italic;font-size:34px;line-height:1.05;margin-top:14px;text-align:center}
.nav{display:flex;gap:10px;margin-top:20px}
.nav .btn{margin-top:0}
.nav .btn.ghost{flex:0 0 96px}
.reveal-q .q .lead{font-size:clamp(22px,6.4vw,28px)}
.reveal-q .q em{font-size:clamp(24px,7vw,34px)}
.reveal-q .q.long em{font-size:clamp(22px,6.2vw,29px)}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media (min-width:700px){
  .app{padding-top:48px;padding-bottom:48px}
}
a.btn{text-decoration:none}
.admin{display:flex;justify-content:center;gap:22px;margin-top:18px}
.admin button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:8px 0}
.faces-row{display:flex;justify-content:center;margin-top:30px}
.faces-row .face{width:72px;height:72px;margin-left:-14px}
.faces-row .face:first-child{margin-left:0}
.opt.pick b{transform:translateY(8px)}
.opt b{transition:transform .32s var(--spring),color .2s}
@media (max-height:740px){
  .names{gap:8px;margin-top:18px}
  .nm{padding:7px 16px 7px 7px}
  .nm .face{width:52px;height:52px}
  .nm b{font-size:21px}
  .privacy{font-size:14px;padding-top:16px}
  .opt .face{width:min(100%,90px)}
  .btn{height:54px;margin-top:16px}
  .bars{gap:7px;margin-top:16px}
  .bar{grid-template-columns:36px 1fr 26px}
  .bar .face{width:36px;height:36px}
  .track{height:32px}
  .win .face{width:100px;height:100px}
  .win.tie .face{width:84px;height:84px}
  .crown{font-size:36px;top:-24px}
  .verdict{font-size:28px;margin-top:10px}
  .ring .face{width:80px;height:80px}
  .count{font-size:104px}
}