/* Layout: one phone-width column. Cream ground, black type and outlines, one green. Everything is a rounded card with a 2px black edge; the green bill is the only tilted object. */
:root{
  color-scheme: light;
  --bg:#F4F0E4;       /* cream ground */
  --card:#FCFAF2;     /* card fill */
  --tint:#E6E0CF;     /* picture wells, tracks */
  --ink:#0B0B0B;
  --mute:#4A483F;
  --green:#2BC06F;    /* fills only; black text sits on it */
  --green-d:#12894A;  /* progress fill */
  --soft:#CFCBBF;     /* small text on black */
  --font:"Bricolage Grotesque","Helvetica Neue",Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:500;line-height:1.4;-webkit-font-smoothing:antialiased}
.app{max-width:440px;margin-inline:auto;padding-inline:20px;padding-block:22px 64px}
.screen{display:flex;flex-direction:column;gap:18px}
.screen.enter{animation:rise .28s ease-out both}
@keyframes rise{from{opacity:.5;transform:translateY(8px)}to{opacity:1;transform:none}}
p{margin:0}
h1,h2,h3{margin:0;font-weight:800;text-wrap:balance}
h1{font-size:clamp(40px,12vw,52px);line-height:.96;letter-spacing:-.04em}
h2{font-size:28px;line-height:1;letter-spacing:-.03em}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;font-weight:700}
.mark{font-size:15px;font-weight:800;letter-spacing:-.01em}
.lede{font-size:17px;line-height:1.35}
.fine{font-size:12.5px;line-height:1.4;color:var(--mute)}
.fine summary{cursor:pointer;font-weight:700;padding:4px 0}
.fine summary + p{margin-top:6px}
:focus-visible{outline:3px solid var(--green-d);outline-offset:2px}

/* buttons */
.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;min-height:56px;cursor:pointer;
  font:800 17px/1.1 var(--font);color:var(--bg);background:var(--ink);border:2px solid var(--ink);border-radius:28px;padding:8px 18px;
  transition:transform .1s ease}
.btn small{font-size:12px;font-weight:500;color:var(--soft)}
.btn:active{transform:scale(.98)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.alt small{color:var(--mute)}
.btn.green{background:var(--green);color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:default}
.link{font:700 15px var(--font);color:var(--ink);background:none;border:0;padding:0;min-height:44px;cursor:pointer;text-align:left;
  text-decoration:underline;text-underline-offset:3px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1 1 150px}
.stack{display:flex;flex-direction:column;gap:10px}

/* inputs and notes */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:800}
.field input{font:700 17px var(--font);color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:16px;
  height:54px;padding:0 16px;width:100%;min-width:0}
.field input::placeholder{color:var(--mute);font-weight:500}
.note{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px}
.note .formno{font-size:13px;color:var(--mute)}

/* running number */
.hud{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);margin-inline:-20px;padding:10px 20px 12px;display:grid;gap:12px}
.numbar{background:var(--ink);color:var(--bg);border-radius:22px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.numlabel{font-size:12px;color:var(--soft)}
.total{font-size:clamp(30px,9.4vw,38px);font-weight:800;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.delta{font-size:14px;font-weight:800;white-space:nowrap;border-radius:14px;padding:7px 11px}
.delta:empty{display:none}
.delta.up{background:var(--green);color:var(--ink)}
.delta.down,.delta.flat{background:var(--bg);color:var(--ink)}
.delta.pop{animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.12)}100%{transform:none}}
.bar{height:8px;background:var(--tint);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green-d);border-radius:4px;transition:width .3s ease}
.part{font-size:13px;font-weight:700;color:var(--mute)}
.q-text{font-size:clamp(32px,9.6vw,40px);line-height:1;letter-spacing:-.035em}

/* answers */
.opts{display:flex;flex-direction:column;gap:10px}
.opt{width:100%;text-align:left;cursor:pointer;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:20px;
  padding:16px 18px;font:800 17px/1.2 var(--font);letter-spacing:-.01em;transition:transform .1s ease,opacity .2s,background .15s}
.opt:active,.tile:active{transform:scale(.98)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;flex-direction:column;padding:0;min-width:0;overflow:hidden;cursor:pointer;text-align:left;background:var(--card);color:var(--ink);
  border:2px solid var(--ink);border-radius:22px;font:800 16px/1.15 var(--font);letter-spacing:-.01em;transition:transform .1s ease,opacity .2s,background .15s}
.tile .cap{padding:11px 13px 13px}
.tile .art{border-bottom:2px solid var(--ink)}
.sel{background:var(--green)}
.dim{opacity:.4}
.art{position:relative;aspect-ratio:3/2;width:100%;max-width:100%;overflow:hidden;background:var(--tint)}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pic{border:2px solid var(--ink);border-radius:22px}

/* slider */
.fill{display:flex;flex-direction:column;gap:16px}
.writein{font-size:clamp(40px,13vw,56px);font-weight:800;line-height:1.05;letter-spacing:-.04em;text-align:center;white-space:nowrap;overflow:hidden;
  background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:22px 10px}
.ends{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--mute)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;background:var(--ink);border-radius:4px}
input[type=range]::-moz-range-track{height:8px;background:var(--ink);border-radius:4px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;margin-top:-14px;border-radius:50%;background:var(--green);border:2px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:var(--green);border:2px solid var(--ink)}

/* counting */
#s-print{gap:22px}
.scramble{font-size:clamp(44px,14vw,60px);font-weight:800;line-height:1;letter-spacing:-.05em;padding-top:60px}
.typed{font-size:15px;font-weight:700;min-height:22px}

/* the bill: drawn at 350x156 and scaled to its box */
.tilt{transform:rotate(-3deg);margin:10px 6px 12px 0}
.billbox{position:relative;width:100%}
.billbox.drop{animation:drop .4s cubic-bezier(.2,1.3,.4,1) both}
@keyframes drop{from{opacity:0;transform:translateY(-18px) scale(1.06)}to{opacity:1;transform:none}}
.bill{position:absolute;left:0;top:0;width:350px;height:156px;transform-origin:0 0;background:var(--green);border:2px solid var(--ink);border-radius:14px;
  box-shadow:6px 6px 0 var(--ink);overflow:hidden;color:var(--ink)}
.b-in{position:absolute;inset:8px;border:2px solid var(--ink);border-radius:8px}
.b-c1,.b-c2{position:absolute;font-size:15px;font-weight:800;letter-spacing:-.02em}
.b-c1{left:22px;top:20px} .b-c2{right:22px;bottom:18px}
.b-face{position:absolute;left:24px;top:48px;width:62px;height:62px;border-radius:50%;border:2px solid var(--ink);background:var(--bg);overflow:hidden}
.b-face svg,.b-face .art{display:block;width:100%;height:100%;aspect-ratio:auto}
.b-amt{position:absolute;left:100px;top:50px;height:40px;display:flex;align-items:center;font-size:40px;font-weight:800;line-height:1;letter-spacing:-.05em;white-space:nowrap}
.b-sub{position:absolute;left:102px;top:94px;font-size:12px;font-weight:700}
.b-name{position:absolute;left:22px;bottom:18px;max-width:200px;font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-ser{position:absolute;right:22px;top:20px;font-size:12px;font-weight:700}

/* result */
.hero{display:flex;flex-direction:column;gap:2px}
.who{font-size:15px;font-weight:700}
.bignum{font-size:66px;font-weight:800;line-height:.95;letter-spacing:-.05em;white-space:nowrap;overflow:hidden}
.verdict{display:flex;flex-direction:column;gap:4px}
.verdict h2{font-size:30px}
.verdict p{font-size:16px;line-height:1.35}
.panel{display:flex;flex-direction:column;gap:12px;padding-top:22px}
.rows{display:flex;flex-direction:column;gap:8px}
.rowc{background:var(--card);border:2px solid var(--ink);border-radius:20px;padding:12px 14px;display:flex;flex-direction:column;gap:1px}
.rowc b{font-size:13px;font-weight:800}
.rowc span{font-size:15px;line-height:1.3}
.scene{background:var(--card);border:2px solid var(--ink);border-radius:22px;overflow:hidden}
.scene svg{display:block;width:100%;height:auto}
.scene .art{aspect-ratio:16/9}
.bio{display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.45}
.bio .catch{font-size:14px;color:var(--mute)}
.coupon{background:var(--ink);color:var(--bg);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px;margin-top:6px}
.coupon h3{font-size:24px;line-height:1;letter-spacing:-.03em;display:flex;justify-content:space-between;align-items:center;gap:10px}
.coupon h3 span{font-size:15px;letter-spacing:0;background:var(--green);color:var(--ink);border-radius:14px;padding:6px 10px}
.coupon ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15px}
.coupon .fine{color:var(--soft)}
.coupon .field input{border-color:var(--bg)}
.coupon .btn.green{border-color:var(--green)}
.odds{display:grid;gap:9px}
.odd{display:grid;grid-template-columns:112px 1fr 44px;align-items:center;gap:10px;font-size:13.5px;font-weight:700}
.odd .track{height:16px;background:var(--card);border:2px solid var(--ink);border-radius:8px;overflow:hidden}
.odd .fillbar{display:block;height:100%;width:0;background:var(--green);transition:width .9s cubic-bezier(.2,.8,.2,1) .15s}
.odd .pct{text-align:right;font-weight:800}
.movers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.movers li{display:flex;justify-content:space-between;gap:12px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:10px 12px 10px 14px;font-size:15px;line-height:1.25}
.movers li span{min-width:0}
.movers li em{display:block;font-style:normal;font-size:13px;color:var(--mute)}
.movers b{font-size:14px;font-weight:800;white-space:nowrap;border-radius:12px;padding:6px 9px}
.movers .up b{background:var(--green);color:var(--ink)}
.movers .down b{background:var(--ink);color:var(--bg)}
.board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:rank}
.board li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:10px 14px;counter-increment:rank}
.board li::before{content:counter(rank);font-size:14px;font-weight:800}
.board li.me{background:var(--green)}
.board .nm{min-width:0;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .nm small{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board .amt{font-size:20px;font-weight:800;letter-spacing:-.03em}
.tag{align-self:flex-start;font-size:13px;font-weight:800;line-height:1.2;background:var(--green);border:2px solid var(--ink);border-radius:14px;padding:5px 11px}
.cardout{align-self:center;width:62%;max-width:260px;border:2px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--card)}
.cardout img{display:block;width:100%;height:auto;-webkit-touch-callout:default}
.copyout{font-size:14px;font-weight:700;background:var(--card);border:2px dashed var(--ink);border-radius:16px;padding:12px 14px;user-select:all;overflow-wrap:anywhere}

@media (prefers-reduced-motion: reduce){
  .screen.enter,.delta.pop,.billbox.drop{animation:none}
  .odd .fillbar,.bar i{transition:none}
}

/* the full file (paid unlock): same cards as the rest of the result, under a green "Unlocked" tag */
.full{display:flex;flex-direction:column;gap:12px;margin-top:6px;border-top:2px solid var(--ink);padding-top:18px}
.fullhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.fullhead h3{font-size:24px;line-height:1;letter-spacing:-.03em}
.fullhead span{font-size:13px;font-weight:800;background:var(--green);border:2px solid var(--ink);border-radius:14px;padding:5px 11px}
.full h4{margin:10px 0 0;font-size:19px;font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.ages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ages li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:10px 14px}
.ages li.me{background:var(--green)}
.ages .nm{min-width:0;font-weight:800}
.ages .nm small{display:block;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ages .amt{font-size:20px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.full .rowc b{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px}
.full .rowc b i{font-style:normal;font-size:14px;white-space:nowrap;background:var(--ink);color:var(--bg);border-radius:12px;padding:6px 9px}
.full .rowc .fine{font-size:13px}
.ff-all summary{cursor:pointer;font-size:15px;font-weight:800;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.ff-all[open] summary{margin-bottom:4px}
.movers .flat b{background:var(--tint);color:var(--ink)}