/* Ballpark styles. One look with a day and a night version; the night version follows the visitor's dark-mode setting.
   To change colors, edit the tokens in the two blocks below. */
:root{
  --bg:#F3F0E8; --surface:#FFFFFF; --surface2:#F6F3EC; --ink:#13201A; --muted:#5A685F; --line:#E1DCCF;
  --primary:#0E7A49; --primary2:#0A6039; --on-primary:#FFFFFF; --accent:#F4B52E; --on-accent:#1B1503;
  --good:#12995A; --mid:#D29406; --warn:#E26F14; --bad:#D4372D;
  --glow:rgba(14,122,73,.16); --shadow:rgba(28,45,35,.22); --backdrop:rgba(19,32,26,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B120E; --surface:#141E18; --surface2:#1B2820; --ink:#EDF3EE; --muted:#9AAA9F; --line:#28382E;
    --primary:#34D17E; --primary2:#22B468; --on-primary:#06150C; --accent:#FFC84A; --on-accent:#1B1503;
    --good:#3DD683; --mid:#FFCB45; --warn:#FF9440; --bad:#FF6A60;
    --glow:rgba(52,209,126,.13); --shadow:rgba(0,0,0,.6); --backdrop:rgba(0,0,0,.62); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B120E; --surface:#141E18; --surface2:#1B2820; --ink:#EDF3EE; --muted:#9AAA9F; --line:#28382E;
  --primary:#34D17E; --primary2:#22B468; --on-primary:#06150C; --accent:#FFC84A; --on-accent:#1B1503;
  --good:#3DD683; --mid:#FFCB45; --warn:#FF9440; --bad:#FF6A60;
  --glow:rgba(52,209,126,.13); --shadow:rgba(0,0,0,.6); --backdrop:rgba(0,0,0,.62); color-scheme:dark;
}

/* ---- base ---- */
:root{
  --f-display:"Bricolage Grotesque","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  --r-lg:28px; --r-md:18px; --r-sm:12px;
  --card-shadow:0 1px 2px color-mix(in srgb,var(--shadow) 30%,transparent), 0 24px 48px -28px var(--shadow);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; background:radial-gradient(900px 420px at 50% -140px,var(--glow),transparent 72%) no-repeat, var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:540px; margin:0 auto; padding-block:18px 56px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); display:grid; gap:16px}
h1,h2,h3{margin:0; font-family:var(--f-display); font-weight:800; line-height:1.05; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent}
a{color:inherit; text-underline-offset:3px}
:focus-visible{outline:3px solid var(--primary); outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.emo{font-family:var(--f-emoji); line-height:1; font-style:normal}
.t90{--t:var(--good)} .t70{--t:var(--mid)} .t40{--t:var(--warn)} .t0{--t:var(--bad)}

/* ---- top bar ---- */
.top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.logo{display:flex; align-items:center; gap:9px}
.logo h1{font-size:28px}
.mark{display:block; flex:none}
.mark-plate{fill:var(--primary)} .mark-glyph{stroke:var(--on-primary)}
.icons{display:flex; gap:8px}
.ibtn{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:grid; place-items:center; padding:0; transition:transform .12s, background .12s, border-color .12s}
.ibtn:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line)); background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.ibtn:active{transform:scale(.94)}
.ibtn svg{width:19px; height:19px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sub{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.01em}
.sub .sep{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6}
.sub .when{margin-left:auto; padding:3px 10px; border-radius:999px; background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.banner{font-size:14px; padding:10px 14px; border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 16%,var(--surface))}

/* ---- progress: one chip per item, then the running total ---- */
.steps{display:grid; grid-template-columns:repeat(5,1fr) 1.35fr; gap:8px}
.step{height:46px; display:grid; place-items:center; border-radius:14px; background:color-mix(in srgb,var(--surface) 60%,transparent); border:1px solid var(--line); color:var(--muted); font:700 17px var(--f-display); font-variant-numeric:tabular-nums; transition:background .2s, border-color .2s}
.step.now{background:var(--surface); border:2px solid var(--primary); color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)}
.step.done{background:color-mix(in srgb,var(--t) 15%,var(--surface)); border-color:color-mix(in srgb,var(--t) 45%,var(--surface)); color:color-mix(in srgb,var(--t) 72%,var(--ink))}
.step.tot{background:var(--ink); border-color:var(--ink); color:var(--bg); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1px; font-size:18px; line-height:1}
.step.tot small{font:600 9px/1 var(--f-body); letter-spacing:.08em; text-transform:uppercase; opacity:.7}

/* ---- cards ---- */
.card,.panel,.sheet{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow)}
.card{padding:26px 22px 22px; display:grid; gap:14px; justify-items:center; text-align:center}
.card > *{max-width:100%; min-width:0}
@keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.card,.panel{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.band{display:inline-flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; background:color-mix(in srgb,var(--primary) 11%,transparent); color:var(--primary); font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase}
.emoji{width:clamp(112px,32vw,140px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 32% 26%,var(--surface) 0,color-mix(in srgb,var(--accent) 20%,var(--surface2)) 70%); box-shadow:inset 0 -8px 18px color-mix(in srgb,var(--accent) 16%,transparent), 0 14px 26px -16px var(--shadow)}
.emoji .emo{font-size:clamp(60px,17vw,76px); filter:drop-shadow(0 6px 6px color-mix(in srgb,var(--shadow) 60%,transparent))}
.emoji.sm{width:84px} .emoji.sm .emo{font-size:44px}
@keyframes bob{50%{transform:translateY(-5px)}}
.emoji:not(.sm) .emo{animation:bob 3.6s ease-in-out infinite}
.iname{font-size:clamp(28px,7.6vw,36px)}
.idetail{color:var(--muted); max-width:36ch}

/* ---- guess input ---- */
.guess{display:grid; gap:12px; width:100%; min-width:0; justify-self:stretch; margin-top:4px}
.pricebox{display:flex; align-items:center; border-radius:20px; border:2px solid var(--line); background:var(--surface2); padding:4px 18px; transition:border-color .15s, box-shadow .15s; cursor:text}
.pricebox span{font:700 34px var(--f-display); color:var(--primary)}
.pricebox input{flex:1; width:0; min-width:0; border:0; background:transparent; color:var(--ink); font:800 40px var(--f-display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; padding:8px 8px; outline:none}
.pricebox input::placeholder{color:color-mix(in srgb,var(--muted) 40%,transparent)}
.pricebox:focus-within{border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%,transparent)}
.nudges{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.nudge{padding:9px 0; border-radius:999px; border:1px solid var(--line); background:var(--surface); cursor:pointer; font:700 15px var(--f-display); transition:transform .12s, background .12s, border-color .12s}
.nudge:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line)); background:color-mix(in srgb,var(--primary) 7%,var(--surface))}
.nudge:active{transform:scale(.95)}
.slider{-webkit-appearance:none; appearance:none; width:100%; height:10px; margin:10px 0 4px; border-radius:999px; background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 22%,var(--surface2)),var(--primary)); cursor:pointer}
.slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%; background:var(--surface); border:3px solid var(--primary); box-shadow:0 4px 10px -2px var(--shadow)}
.slider::-moz-range-thumb{width:24px; height:24px; border-radius:50%; background:var(--surface); border:3px solid var(--primary); box-shadow:0 4px 10px -2px var(--shadow)}
.slider::-moz-range-track{background:transparent}
.scale{position:relative; height:18px; margin-inline:14px; font-size:12px; font-weight:600; color:var(--muted)}
.scale span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.scale span:first-child{transform:none; margin-left:-14px}
.cta{width:100%; padding:16px; border:0; border-radius:var(--r-md); background:linear-gradient(180deg,var(--primary),var(--primary2)); color:var(--on-primary); font:800 18px var(--f-display); letter-spacing:.01em; cursor:pointer; box-shadow:0 12px 22px -12px var(--primary), inset 0 1px 0 rgba(255,255,255,.22); transition:transform .12s, box-shadow .12s, filter .12s}
.cta:hover{filter:brightness(1.06); transform:translateY(-1px)}
.cta:active{transform:translateY(1px) scale(.99)}
.cta:disabled{background:var(--surface2); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); cursor:not-allowed; transform:none; filter:none}
.cta.alt{background:var(--ink); color:var(--bg); box-shadow:0 12px 22px -14px var(--ink)}
.helper{font-size:13px; color:var(--muted)}

/* ---- reveal ---- */
.reallabel{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:-10px}
.realprice{font:800 clamp(46px,14vw,70px) var(--f-display); letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.yours{font-size:15px; color:var(--muted)} .yours b{color:var(--ink)}
/* How far off: a log scale running from 10× too low to 10× too high, real price in the middle. */
.meter{width:100%; display:grid; gap:6px; margin-top:22px}
.track{position:relative; height:12px; border-radius:999px; background:linear-gradient(90deg,var(--bad),var(--warn) 22%,var(--mid) 36%,var(--good) 47%,var(--good) 53%,var(--mid) 64%,var(--warn) 78%,var(--bad))}
.track .mid{position:absolute; left:50%; top:-4px; bottom:-4px; width:2px; margin-left:-1px; border-radius:2px; background:var(--ink)}
.pin{position:absolute; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--surface); border:4px solid var(--ink); box-shadow:0 3px 8px -2px var(--shadow); transition:left .8s cubic-bezier(.2,.8,.2,1)}
.pin span{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); padding:1px 7px; border-radius:6px; background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; white-space:nowrap}
.mscale{display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:var(--muted)}
.verdict{display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap}
.pts{font:800 34px var(--f-display); letter-spacing:-.02em; color:color-mix(in srgb,var(--t) 80%,var(--ink))}
.pill{font-size:13px; font-weight:700; padding:4px 12px; border-radius:999px; background:color-mix(in srgb,var(--t) 16%,var(--surface)); color:color-mix(in srgb,var(--t) 70%,var(--ink)); border:1px solid color-mix(in srgb,var(--t) 40%,var(--surface))}
@keyframes pop{0%{transform:scale(.6); opacity:0} 60%{transform:scale(1.08); opacity:1} 100%{transform:none}}
.verdict.anim{animation:pop .45s .55s cubic-bezier(.2,.8,.2,1) both}
.basis{font-size:12px; color:var(--muted)}

/* ---- results ---- */
.hero{gap:10px; padding-top:24px}
.ring{position:relative; width:164px; height:164px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:11}
.ring .rbg{stroke:var(--surface2)}
.ring .rfg{stroke:var(--primary); stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.ring div{position:absolute; inset:0; display:grid; place-content:center; justify-items:center}
.ring b{font:800 50px var(--f-display); letter-spacing:-.03em; line-height:1}
.ring span{font-size:13px; font-weight:600; color:var(--muted)}
.rank{font-size:28px; color:var(--primary)}
.herosub{font-size:13px; font-weight:600; color:var(--muted)}
.grid{font-family:var(--f-emoji); font-size:24px; letter-spacing:5px; margin-right:-5px}
.receipt{padding:6px 20px; display:grid; text-align:left; justify-items:stretch; gap:0}
.rrow{display:grid; grid-template-columns:36px 1fr auto; gap:12px; align-items:center; padding:13px 0; border-bottom:1px dashed var(--line)}
.rrow:last-child{border-bottom:0}
.rrow .e{font-size:28px; text-align:center}
.rrow .n{font-weight:700; line-height:1.25}
.rrow .m{color:var(--muted); font-size:13px}
.rrow .p{font:800 15px var(--f-display); padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--t) 15%,var(--surface)); color:color-mix(in srgb,var(--t) 72%,var(--ink))}
.actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:10px}
.btn{padding:13px 10px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); font:700 15px var(--f-display); cursor:pointer; transition:transform .12s, background .12s, border-color .12s}
.btn:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.btn:active{transform:scale(.97)}
.btn.primary{border-color:transparent; background:linear-gradient(180deg,var(--primary),var(--primary2)); color:var(--on-primary); box-shadow:0 12px 22px -14px var(--primary)}
.panel{padding:20px; display:grid; gap:12px}
.panel h3{font-size:22px}
.ctable{display:grid}
.crow{display:grid; grid-template-columns:28px 1fr auto 76px; gap:10px; align-items:center; font-size:14px; padding:8px 0; border-top:1px solid var(--line)}
.crow.note{border-top:0; padding-bottom:4px}
.crow .emo{font-size:20px}
.crow .mono{font-weight:700; font-variant-numeric:tabular-nums; text-align:right}
.crow .muted{color:var(--muted); font-weight:600}
.crow.note span:nth-child(n+3){text-align:right}
.hist{width:100%; height:auto; display:block}
.hbar{fill:color-mix(in srgb,var(--muted) 28%,var(--surface))} .hbar.me{fill:var(--primary)}
.axis{font:600 11px var(--f-body); fill:var(--muted)}
.note{font-size:12px; color:var(--muted)}
.countdown{text-align:center; font-size:13px; font-weight:600; color:var(--muted)}
.countdown b{font:800 30px var(--f-display); letter-spacing:-.01em; color:var(--ink); display:block}

/* ---- modal ---- */
@keyframes fade{from{opacity:0}}
@keyframes sheetup{from{opacity:0; transform:translateY(24px)}}
.modal{position:fixed; inset:0; background:var(--backdrop); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; place-items:end center; z-index:20; padding:12px; padding-left:max(12px, env(safe-area-inset-left,0px)); padding-right:max(12px, env(safe-area-inset-right,0px)); padding-bottom:max(12px, env(safe-area-inset-bottom,0px)); animation:fade .2s both}
@media (min-width:600px){ .modal{place-items:center} }
.sheet{color:var(--ink); width:100%; max-width:500px; max-height:86vh; overflow:auto; padding:22px; display:grid; gap:14px; animation:sheetup .3s cubic-bezier(.2,.8,.2,1) both}
.sheet header{display:flex; justify-content:space-between; align-items:center}
.sheet h2{font-size:26px}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center}
.statgrid div{padding:12px 4px; border-radius:var(--r-sm); background:var(--surface2)}
.statgrid b{display:block; font:800 28px var(--f-display); letter-spacing:-.02em}
.statgrid span{font-size:12px; font-weight:600; color:var(--muted)}
.dist{display:grid; gap:6px}
.drow{display:grid; grid-template-columns:72px 1fr; gap:10px; align-items:center; font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.drow i{display:block; height:24px; border-radius:8px; background:color-mix(in srgb,var(--muted) 24%,var(--surface)); color:var(--ink); min-width:26px; font-style:normal; font-weight:700; text-align:right; padding-right:8px; line-height:24px}
.drow.me i{background:var(--primary); color:var(--on-primary)}
.days{display:grid; gap:8px}
.day{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:12px 14px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); cursor:pointer; text-align:left; transition:border-color .12s, background .12s}
.day:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line)); background:color-mix(in srgb,var(--primary) 6%,var(--surface))}
.day .mono{font-size:13px; font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums}
.day.today{border-color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,var(--surface))}
.how{display:grid; gap:12px}
.scoretable{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; padding:14px 16px; border-radius:var(--r-sm); background:var(--surface2)}
.scoretable b{font-family:var(--f-display); font-variant-numeric:tabular-nums}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .2s ease-in-out 2}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }

/* ---- site footer and text pages ---- */
.sitefoot{border-top:1px solid var(--line); margin-top:16px}
.sitefoot .wrap{padding-block:28px 40px; gap:14px}
.seo h2{font-size:22px}
.seo p{color:var(--muted); font-size:15px; margin-top:8px}
.footlinks{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px}
.footlinks a{color:var(--ink); font-weight:600}
.fine{font-size:12px; color:var(--muted)}
.doc{gap:14px; padding-block:24px 48px}
.doc h1{font-size:clamp(36px,9vw,48px); margin-top:8px}
.doc h2{font-size:26px; margin-top:14px}
.doc h3{font-size:19px; margin-top:4px}
.doc p,.doc li{max-width:65ch}
.doc ul{margin:0; padding-left:20px; display:grid; gap:6px}
.doc code{font:600 14px ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--surface2); border:1px solid var(--line); border-radius:6px; padding:1px 6px}
.doclogo{display:inline-flex; align-items:center; gap:9px; font:800 26px var(--f-display); letter-spacing:-.02em; text-decoration:none; color:var(--ink); justify-self:start}
.doctable{border-collapse:separate; border-spacing:0; width:100%; max-width:420px; font-variant-numeric:tabular-nums; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); overflow:hidden}
.doctable th,.doctable td{text-align:left; padding:9px 14px; border-bottom:1px solid var(--line)}
.doctable tr:last-child td{border-bottom:0}
.doctable th{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); background:var(--surface2)}
.cta-link{display:inline-block; background:linear-gradient(180deg,var(--primary),var(--primary2)); color:var(--on-primary)!important; text-decoration:none; font:800 17px var(--f-display); padding:13px 22px; border-radius:var(--r-md); box-shadow:0 12px 22px -12px var(--primary); margin-top:6px}
.draftnote{font-size:14px; padding:10px 14px; border-radius:var(--r-sm); border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line)); background:color-mix(in srgb,var(--accent) 16%,var(--surface))}

/* ---- reserved ad space (only rendered when ADS_ENABLED is on) ---- */
.adslot{min-height:120px; border:1px dashed var(--line); border-radius:var(--r-md); display:grid; place-items:center; position:relative}
.adlabel{position:absolute; top:6px; left:12px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}