/* All In. Poster Block look in felt green and chip gold. Scoped under .ai so themes can't bleed in. */
.ai{
  container-type:inline-size;
  --ai-bg:#E9F2EC; --ai-surface:#FFFFFF; --ai-ink:#0F2418; --ai-muted:#4A5C51;
  --ai-green:#11734A; --ai-win:#0E6B42; --ai-gold:#F2B630; --ai-red:#B3261E; --ai-rule:#D3E4D9; --ai-soft:#CFE6D8;
  --ai-display:"Archivo Black","Arial Black",Impact,sans-serif;
  --ai-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box; background:var(--ai-bg); color:var(--ai-ink);
  font-family:var(--ai-body); font-size:16px; line-height:1.45; text-align:left;
}
.ai *,.ai *::before,.ai *::after{box-sizing:inherit}
.ai p{margin:0}
.ai h1,.ai h2,.ai h3{margin:0;color:inherit;text-transform:none;letter-spacing:normal;font-family:var(--ai-display);font-weight:400}
.ai button,.ai input{font-family:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal}
.ai :focus-visible{outline:3px solid var(--ai-gold)!important;outline-offset:2px}
.ai-wrap{max-width:440px;margin:0 auto;padding:22px 20px 32px;display:flex;flex-direction:column;gap:14px;min-height:640px}
.ai-loading{color:var(--ai-muted);font-weight:600;padding:40px 0;text-align:center}
.ai-brand{font-size:13px;font-weight:600}
.ai-box{background:var(--ai-surface);border:3px solid var(--ai-ink)}
.ai-gold{background:var(--ai-gold);color:var(--ai-ink);border:3px solid var(--ai-ink)}
.ai-label{font-size:13px;font-weight:800}
.ai-grow{flex:1 1 auto}
.ai-error{color:var(--ai-red);font-weight:800;text-align:center}
.ai-note{text-align:center;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.ai .ai-h2{font-size:24px;line-height:1.05}
.ai-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero and header */
.ai-hero{background:var(--ai-green);color:#fff;border:3px solid var(--ai-ink);box-shadow:6px 6px 0 var(--ai-ink);padding:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;--c:clamp(118px,38cqi,150px)}
.ai-hero-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:12px;align-self:stretch;text-align:right}
.ai-hero .ai-date{font-size:15px;font-weight:600}

/* The logo: a poker chip with ALL IN at its center */
.ai-chip{width:var(--c);height:var(--c);flex:0 0 auto;border-radius:50%;border:calc(var(--c)*.017 + 2px) solid var(--ai-ink);box-shadow:calc(var(--c)*.027) calc(var(--c)*.027) 0 var(--ai-ink);background:repeating-conic-gradient(#fff 0deg 14deg,var(--ai-green) 14deg 45deg);display:grid;place-items:center}
.ai-chip i{width:75.3%;height:75.3%;border-radius:50%;background:var(--ai-green);border:calc(var(--c)*.017 + 1px) solid var(--ai-ink);display:grid;place-items:center;font-style:normal}
.ai-chip i > span{width:82%;height:82%;border-radius:50%;border:max(2px,calc(var(--c)*.013)) dashed var(--ai-gold);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--ai-display);font-size:calc(var(--c)*.193);line-height:.9;letter-spacing:-.02em;color:#fff}
.ai .ai-chip i > span b{font-weight:400;color:var(--ai-gold);font-size:inherit;line-height:inherit;display:inline}
.ai .ai-chip.mini i > span b{display:none}
.ai-chip.mini{--c:34px;border-width:2px;box-shadow:2px 2px 0 var(--ai-ink)}
.ai-chip.mini i{border-width:2px}
.ai-chip.mini i > span{border-width:1.5px;font-size:0}
.ai-title{display:inline-flex;align-items:center;gap:10px}
.ai-stack{padding:8px 12px;text-align:right;flex:0 0 auto}
.ai-stack small{display:block;font-size:12px;font-weight:800}
.ai-stack strong{font-family:var(--ai-display);font-weight:400;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.ai-hud{display:flex;justify-content:space-between;align-items:stretch;gap:12px}
.ai-hud .t{display:flex;flex-direction:column;justify-content:flex-end;gap:8px}
.ai-hud .t b{font-family:var(--ai-display);font-weight:400;font-size:30px;line-height:1}
.ai-hud .ai-stack{box-shadow:4px 4px 0 var(--ai-ink);padding:6px 14px;min-width:110px}
.ai-hud .ai-stack strong{font-size:30px}

/* Start */
.ai-cats{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ai-tags{display:flex;flex-wrap:wrap;gap:6px}
.ai-tag{border:2px solid var(--ai-ink);padding:4px 9px;font-size:14px;font-weight:600}
.ai-rules{padding:14px 16px;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.4}
.ai-rules div{display:flex;gap:10px}
.ai-rules strong{font-family:var(--ai-display);font-weight:400}

/* Buttons */
.ai .ai-btn{cursor:pointer;border:3px solid var(--ai-ink)!important;border-radius:0!important;box-shadow:4px 4px 0 var(--ai-ink);font-family:var(--ai-display)!important;font-weight:400!important;font-size:16px!important;letter-spacing:.5px;padding:0 18px!important;height:54px;line-height:1!important;background:var(--ai-surface)!important;color:var(--ai-ink)!important;text-decoration:none}
.ai .ai-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ai-ink)}
.ai .ai-btn.gold{background:var(--ai-gold)!important}
.ai .ai-btn.green{background:var(--ai-green)!important;color:#fff!important}
.ai .ai-btn.next{background:var(--ai-gold)!important;color:var(--ai-ink)!important}
.ai .ai-btn.wide{width:100%;height:62px;font-size:22px!important;box-shadow:5px 5px 0 var(--ai-ink)}
.ai .ai-btn:disabled{background:#C9D8CE!important;color:#4A5C51!important;box-shadow:none;cursor:default;transform:none}
.ai-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 24px}
.ai .ai-link{background:none!important;border:none!important;box-shadow:none!important;cursor:pointer;font-weight:800;font-size:15px;text-decoration:underline;padding:8px!important;color:var(--ai-ink)!important}

/* Betting */
.ai-help{font-size:14px;font-weight:600;line-height:1.4}
.ai-bets{padding:2px 14px 4px}
.ai-bet{display:grid;grid-template-columns:minmax(0,1fr) 44px 50px 44px;align-items:center;gap:8px;padding:6px 0;border-bottom:2px solid var(--ai-rule)}
.ai-bet:last-child{border-bottom:none}
.ai-bet .nm{min-width:0;display:flex;flex-direction:column;gap:2px}
.ai-bet .nm b{font-size:15px;font-weight:800;line-height:1.2}
.ai-bar{height:6px;background:var(--ai-bg);border:1.5px solid var(--ai-ink)}
.ai-bar i{display:block;height:100%;width:0;background:var(--ai-green);transition:width .15s}
/* The bet bar doubles as a slider: drag it to set the bet. */
.ai .ai-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:pan-y;--p:0%}
.ai .ai-range:focus{outline:none}
.ai .ai-range:focus-visible{outline:3px solid var(--ai-gold);outline-offset:2px}
.ai .ai-range::-webkit-slider-runnable-track{height:12px;border:2px solid var(--ai-ink);background:linear-gradient(to right,var(--ai-green) var(--p),var(--ai-bg) var(--p))}
.ai .ai-range::-moz-range-track{height:8px;border:2px solid var(--ai-ink);background:var(--ai-bg)}
.ai .ai-range::-moz-range-progress{height:8px;background:var(--ai-green)}
.ai .ai-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:26px;margin-top:-9px;background:var(--ai-gold);border:2.5px solid var(--ai-ink);border-radius:0;box-shadow:2px 2px 0 var(--ai-ink)}
.ai .ai-range::-moz-range-thumb{width:18px;height:22px;background:var(--ai-gold);border:2.5px solid var(--ai-ink);border-radius:0;box-shadow:2px 2px 0 var(--ai-ink)}
.ai-bet .nm label{cursor:default}
.ai .ai-step{width:44px;height:44px;flex:0 0 auto;border:2.5px solid var(--ai-ink)!important;border-radius:0!important;background:var(--ai-surface)!important;color:var(--ai-ink)!important;font-family:var(--ai-display)!important;font-size:20px!important;line-height:1!important;padding:0!important;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ai .ai-step.up{background:var(--ai-gold)!important}
.ai .ai-step:disabled{opacity:.35;cursor:default}
.ai-bet .v{width:50px;text-align:center;font-family:var(--ai-display);font-size:18px;font-variant-numeric:tabular-nums}
.ai-bet .v.zero{color:#7A8C80}
.ai-quick{display:flex;gap:10px;flex-wrap:wrap}
.ai .ai-quick .ai-btn{height:44px;font-size:14px!important;box-shadow:3px 3px 0 var(--ai-ink)}

/* Question */
.ai-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.ai-strip i{height:12px;border:2px solid var(--ai-ink);background:var(--ai-surface)}
.ai-strip i.ok{background:var(--ai-gold)}
.ai-strip i.no{background:#7A8C80}
.ai-strip i.now{background:var(--ai-ink)}
.ai-q{background:var(--ai-green);color:#fff;border:3px solid var(--ai-ink);box-shadow:6px 6px 0 var(--ai-ink);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.ai-q .top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ai-q .cat{background:var(--ai-ink);color:var(--ai-bg);padding:3px 8px;font-size:13px;font-weight:800}
.ai-q .bet{font-size:14px;font-weight:800}
.ai-q .txt{font-family:var(--ai-display);font-size:24px;line-height:1.14}
.ai-timer{height:10px;background:rgba(255,255,255,.25);border:2px solid var(--ai-ink)}
.ai-timer i{display:block;height:100%;background:var(--ai-gold);width:100%}
.ai-timer i.low{background:#FF8A7A}
.ai-answers{display:flex;flex-direction:column;gap:10px}
.ai .ai-ans{width:100%;min-height:56px;text-align:left;padding:10px 16px!important;border:3px solid var(--ai-ink)!important;border-radius:0!important;background:var(--ai-surface)!important;color:var(--ai-ink)!important;font-family:var(--ai-body)!important;font-size:18px!important;font-weight:800!important;line-height:1.25!important;cursor:pointer;box-shadow:none}
.ai .ai-ans:disabled{cursor:default}
.ai .ai-ans.right{background:var(--ai-gold)!important;color:var(--ai-ink)!important}
.ai .ai-ans.wrong{background:#C9D2CC!important;color:#4A5C51!important;text-decoration:line-through}
.ai .ai-ans.dim{opacity:.5}
.ai-dd{background:var(--ai-surface);border:3px dashed var(--ai-ink);padding:12px 14px;display:flex;align-items:center;gap:12px}
.ai-dd.on{background:var(--ai-gold);border-style:solid}
.ai-dd .t{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.ai-dd .t b{font-family:var(--ai-display);font-weight:400;font-size:17px}
.ai-dd .t span{font-size:13px;font-weight:600;line-height:1.35}
.ai .ai-dd .ai-btn{height:48px;font-size:15px!important;box-shadow:3px 3px 0 var(--ai-ink)}
.ai-verdict{margin-top:40px;padding:16px 18px;border:3px solid var(--ai-ink);box-shadow:6px 6px 0 var(--ai-ink);display:flex;flex-direction:column;gap:10px}
.ai-verdict .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ai-verdict .fact{border-top:2px solid currentColor;padding-top:10px;font-size:15px;font-weight:600;line-height:1.45}
.ai-verdict.win{background:var(--ai-surface);color:var(--ai-ink)}
.ai-verdict.lose{background:var(--ai-ink);color:#fff}
.ai-verdict b{font-family:var(--ai-display);font-weight:400;font-size:24px}
.ai-verdict span{font-family:var(--ai-display);font-size:26px;font-variant-numeric:tabular-nums}
.ai-drop{animation:ai-drop .3s ease-out}
@keyframes ai-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Results */
.ai-tiles{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px}
.ai-tiles .main{background:var(--ai-green);color:#fff;border:3px solid var(--ai-ink);box-shadow:6px 6px 0 var(--ai-ink);padding:12px 14px;display:flex;flex-direction:column;justify-content:flex-end}
.ai-tiles .main strong{font-family:var(--ai-display);font-weight:400;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.ai-tiles .side{display:flex;flex-direction:column;gap:10px}
.ai-tiles .side > div{padding:8px 12px}
.ai-tiles .side b{font-family:var(--ai-display);font-weight:400;font-size:22px;display:block}
.ai-tiles .side span{font-size:12px;font-weight:600}
.ai-rows{padding:4px 14px}
.ai-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:2px solid var(--ai-rule)}
.ai-row:last-child{border-bottom:none}
.ai-row .l{flex:1 1 auto;min-width:0}
.ai-row .l b{font-size:15px;font-weight:800}
.ai-row .l small{display:block;font-size:13px;color:var(--ai-muted);font-weight:600;line-height:1.35;margin-top:2px}
.ai-row .r{font-family:var(--ai-display);font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ai-row .r.won{color:var(--ai-win)}
.ai-row .r.lost{color:var(--ai-muted)}
.ai-row .r.even{color:var(--ai-muted)}
.ai-dbl{background:var(--ai-gold);border:2px solid var(--ai-ink);padding:1px 5px;font-size:11px;font-weight:800;margin-left:6px;white-space:nowrap}

/* Initials callout and leaderboard */
.ai-callout{background:var(--ai-gold);border:3px solid var(--ai-ink);box-shadow:6px 6px 0 var(--ai-ink);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ai-callout .big{font-family:var(--ai-display);font-size:24px;line-height:1.1}
.ai-callout p{font-size:15px;font-weight:600}
.ai-initials{display:flex;gap:8px;margin-top:6px;align-items:center;flex-wrap:wrap}
.ai .ai-initials input{width:130px;height:48px;padding:0 10px!important;border:3px solid var(--ai-ink)!important;border-radius:0!important;background:var(--ai-surface)!important;font-family:var(--ai-display)!important;font-size:20px!important;letter-spacing:.15em;text-transform:uppercase;color:var(--ai-ink)!important}
.ai .ai-initials .ai-btn{height:48px}
.ai-miss{color:var(--ai-red);font-weight:800;font-size:14px;min-height:1.2em}
.ai-board{padding:12px 16px 6px}
.ai-board ol{list-style:none;margin:8px 0 0;padding:0}
.ai-board li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:2px solid var(--ai-rule);margin:0}
.ai-board li:last-child{border-bottom:none}
.ai-board li.me{background:#FFF4D6;box-shadow:inset 4px 0 0 var(--ai-gold);padding-left:8px}
.ai-board .rk{font-family:var(--ai-display)}
.ai-board .nm{font-weight:800;letter-spacing:.08em}
.ai-board .p{font-weight:800;font-variant-numeric:tabular-nums}
.ai-board .sub{font-size:13px;color:var(--ai-muted);font-weight:600}
.ai .ai-inline{padding:0!important;font-size:inherit!important}

/* Lists */
.ai-list{padding:0}
.ai .ai-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px 16px!important;border:none!important;border-bottom:2px solid var(--ai-rule)!important;border-radius:0!important;background:none!important;box-shadow:none!important;cursor:pointer;text-align:left;color:var(--ai-ink)!important;font-size:16px!important;font-weight:400!important}
.ai .ai-item:last-child{border-bottom:none!important}
.ai-item b{font-family:var(--ai-display);font-weight:400}
.ai-pill{font-size:13px;font-weight:800;padding:4px 10px;border:2px solid var(--ai-ink);white-space:nowrap}
.ai-pill.won{background:var(--ai-green);color:#fff}
.ai-pill.open{background:var(--ai-gold)}
.ai-pill.mid{background:var(--ai-surface)}
.ai-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ai-stats > div{padding:12px 14px}
.ai-stats b{font-family:var(--ai-display);font-weight:400;font-size:32px;display:block;line-height:1.1}
.ai-stats span{font-size:13px;font-weight:600}

/* Columns: stacked on phones, side by side when there's room */
.ai-cols{display:flex;flex-direction:column;gap:14px;flex:1 1 auto}
.ai-col{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Medium width: use the full space, still one column */
@container (min-width:560px){
  .ai-wrap{max-width:none;padding:30px 32px 40px;gap:18px}
  .ai-hero{padding:24px;--c:clamp(170px,26cqi,220px)}
  .ai-hero .ai-date{font-size:17px}
  .ai-rules{padding:18px 20px;font-size:17px}
  .ai .ai-btn.wide{height:68px;font-size:26px!important}
  .ai-hud .t b{font-size:38px}
  .ai-hud .ai-stack{min-width:150px}
  .ai-hud .ai-stack strong{font-size:40px}
  .ai-bets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .ai-bet:nth-last-child(2):nth-child(odd){border-bottom:none}
  .ai-q .txt{font-size:30px}
  .ai-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai .ai-ans{min-height:68px;font-size:19px!important}
  .ai-tiles .main strong{font-size:64px}
  .ai .ai-h2{font-size:30px}
  .ai-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Wide: two columns */
@container (min-width:860px){
  .ai-wrap{max-width:1200px;padding:36px 40px 44px;gap:22px;min-height:620px}
  .ai-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:stretch}
  .ai-col{gap:18px}
  .ai-cols.start .ai-hero{flex:1 1 auto;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:34px;min-height:420px;--c:clamp(220px,24cqi,290px)}
  .ai-cols.start .ai-hero-side{flex-direction:row;align-items:flex-end;align-self:stretch;text-align:left}
  .ai-cols.start .ai-stack{text-align:right}
  .ai-cols.done{align-items:start}
  .ai-cols.done .side .ai-grow{display:none}
  .ai .ai-h2{font-size:34px}
  .ai-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai .ai-list .ai-item:nth-child(odd){border-right:2px solid var(--ai-rule)!important}
  .ai-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
}


/* ---------- Start screen: puzzle-app style (icon, serif name, pill buttons) ---------- */
.ai:has(.ai-splash){background:#DDE2E7}
.ai .ai-wrap:has(> .ai-splash){max-width:560px!important;min-height:0;padding:52px 20px 44px!important;align-items:center}
.ai-splash{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%}
.ai-icon{display:block;width:84px;height:84px}
.ai .ai-name{margin-top:18px;font-family:"Fraunces",Georgia,"Times New Roman",serif!important;font-weight:800!important;font-size:clamp(40px,11cqi,58px)!important;line-height:1!important;letter-spacing:-.02em!important;color:#121212}
.ai .ai-sub{margin-top:12px;max-width:360px;font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:20px;line-height:1.35;color:#121212}
.ai-pills{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.ai .ai-pill{display:inline-flex;align-items:center;justify-content:center;min-width:190px;height:48px;padding:0 28px;border:1px solid #121212;border-radius:999px;background:transparent;color:#121212;box-shadow:none;cursor:pointer;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-weight:600;font-size:16px;line-height:1;letter-spacing:0;text-transform:none;text-decoration:none}
.ai .ai-pill:hover{background:rgba(0,0,0,.06)}
.ai .ai-pill.solid{background:#121212;color:#FFFFFF}
.ai .ai-pill.solid:hover{background:#333333}
.ai .ai-date-line{margin-top:24px;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.45;color:#121212}
.ai-cats-line{margin-top:18px;width:100%;max-width:440px}
.ai-cats-line .ai-label{font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-weight:700;font-size:13px;margin-bottom:8px}
.ai-cats-line .ai-tags{justify-content:center}
.ai-cats-line .ai-tag{border:1px solid rgba(0,0,0,.35);border-radius:999px;background:rgba(255,255,255,.55);padding:4px 11px;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:13px;font-weight:600}
.ai-how{margin-top:20px;width:100%;max-width:440px;text-align:left}
.ai-how summary{cursor:pointer;text-align:center;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;list-style:none}
.ai-how summary::-webkit-details-marker{display:none}
.ai-howlist{margin-top:12px;padding:14px 18px;background:rgba(255,255,255,.7);border-radius:12px;display:flex;flex-direction:column;gap:8px;font-family:"Libre Franklin","DM Sans",system-ui,sans-serif;font-size:15px;line-height:1.45}
.ai-howlist > div{display:flex;gap:10px}
.ai-howlist strong{flex:0 0 auto;font-weight:700}

/* The logo in game headers and results: small icon + serif name */
.ai .ai-title{display:inline-flex;align-items:center;gap:.3em;font-family:"Fraunces",Georgia,serif;font-weight:800;letter-spacing:-.02em;white-space:nowrap;text-transform:none}
.ai-icon-sm{display:block;width:1em;height:1em;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){.ai *{animation:none!important;transition:none!important}}


/* ==========================================================
   Game screens: puzzle-app style (rounded cards, serif headings, pill buttons)
   ========================================================== */
.ai{
  --ai-bg:#F4F6F8; --ai-surface:#FFFFFF; --ai-ink:#121212; --ai-muted:#55606B;
  --ai-green:#3E4C59; --ai-win:#1E7A4C; --ai-gold:#F4C430; --ai-gold-soft:#FBEBB5; --ai-red:#C23B22; --ai-rule:#E0E5EA; --ai-soft:#DDE2E7;
  --ai-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ai-body:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ai-sans:"Libre Franklin","DM Sans",system-ui,sans-serif;
}
.ai h1,.ai h2,.ai h3,.ai .ai-h2{font-family:var(--ai-display);font-weight:900;letter-spacing:-.02em}
.ai :focus-visible{outline:3px solid var(--ai-green)!important;outline-offset:2px}
.ai-brand{color:var(--ai-muted)}
.ai-label{font-weight:700;color:var(--ai-muted)}
.ai-box{background:var(--ai-surface);border:1px solid var(--ai-rule);border-radius:16px}
.ai-gold{background:var(--ai-gold-soft);color:var(--ai-ink);border:0;border-radius:16px}
.ai-note{font-weight:600;color:var(--ai-muted)}
.ai-error{font-weight:700}

/* Buttons: black pills */
.ai .ai-btn{border:1px solid var(--ai-ink)!important;border-radius:999px!important;box-shadow:none!important;background:var(--ai-ink)!important;color:#FFFFFF!important;font-family:var(--ai-body)!important;font-weight:700!important;font-size:16px!important;letter-spacing:0;height:52px;padding:0 26px!important}
.ai .ai-btn:hover{background:#333333!important}
.ai .ai-btn:active{transform:none;box-shadow:none!important}
.ai .ai-btn.gold,.ai .ai-btn.green,.ai .ai-btn.next{background:var(--ai-ink)!important;color:#FFFFFF!important}
.ai .ai-btn.wide{height:56px;font-size:18px!important;box-shadow:none!important}
.ai .ai-btn:disabled,.ai .ai-btn:disabled:hover{background:#DDE2E7!important;border-color:#DDE2E7!important;color:var(--ai-muted)!important}
.ai .ai-quick .ai-btn{height:42px;padding:0 20px!important;font-size:14px!important;background:transparent!important;color:var(--ai-ink)!important;box-shadow:none!important}
.ai .ai-quick .ai-btn:hover{background:rgba(0,0,0,.06)!important}
.ai .ai-link{font-weight:600;text-underline-offset:3px}

/* Header: logo + chips counter */
.ai-hud{align-items:center}
.ai-hud .t b{font-family:var(--ai-display);font-weight:900}
.ai .ai-hud .ai-stack,.ai .ai-stack{background:var(--ai-ink);color:#FFFFFF;border:0;border-radius:14px;box-shadow:none;padding:8px 16px}
.ai-stack small{font-weight:600;opacity:.8}
.ai-stack strong{font-family:var(--ai-display);font-weight:900}

/* Betting */
.ai-help{font-weight:400;color:var(--ai-muted)}
.ai-bets{padding:4px 16px 6px}
.ai-bet{border-bottom:1px solid var(--ai-rule);padding:8px 0}
.ai-bet .nm b{font-weight:700}
.ai .ai-range::-webkit-slider-runnable-track{height:10px;border:0;border-radius:999px;background:linear-gradient(to right,var(--ai-green) var(--p),var(--ai-rule) var(--p))}
.ai .ai-range::-moz-range-track{height:10px;border:0;border-radius:999px;background:var(--ai-rule)}
.ai .ai-range::-moz-range-progress{height:10px;border-radius:999px;background:var(--ai-green)}
.ai .ai-range::-webkit-slider-thumb{width:24px;height:24px;margin-top:-7px;background:#FFFFFF;border:2px solid var(--ai-ink);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ai .ai-range::-moz-range-thumb{width:20px;height:20px;background:#FFFFFF;border:2px solid var(--ai-ink);border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ai .ai-step{border:1px solid var(--ai-ink)!important;border-radius:50%!important;background:var(--ai-surface)!important;color:var(--ai-ink)!important;font-family:var(--ai-sans)!important;font-weight:700!important;font-size:20px!important}
.ai .ai-step.up{background:var(--ai-ink)!important;color:#FFFFFF!important}
.ai-bet .v{font-family:var(--ai-sans);font-weight:800;font-size:18px}
.ai-bet .v.zero{color:#A9B2BB}

/* Question */
.ai-strip{gap:4px}
.ai-strip i{height:8px;border:0;border-radius:999px;background:var(--ai-rule)}
.ai-strip i.ok{background:var(--ai-green)}
.ai-strip i.no{background:#B4BCC4}
.ai-strip i.now{background:var(--ai-ink)}
.ai-q{background:var(--ai-surface);color:var(--ai-ink);border:1px solid var(--ai-rule);border-radius:18px;box-shadow:0 10px 30px -18px rgba(18,18,18,.35);padding:18px 20px}
.ai-q .cat{background:var(--ai-soft);color:var(--ai-ink);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.ai-q .bet{font-weight:700;color:var(--ai-muted)}
.ai-q .txt{font-family:var(--ai-display);font-weight:800;letter-spacing:-.01em;line-height:1.18}
.ai-timer{height:10px;border:0;border-radius:999px;background:var(--ai-rule);overflow:hidden}
.ai-timer i{background:var(--ai-green);border-radius:999px}
.ai-timer i.low{background:var(--ai-red)}
.ai .ai-ans{border:1px solid var(--ai-ink)!important;border-radius:14px!important;background:var(--ai-surface)!important;font-family:var(--ai-sans)!important;font-weight:700!important;box-shadow:none!important}
.ai .ai-ans:not(:disabled):hover{background:var(--ai-soft)!important}
.ai .ai-ans.right{background:var(--ai-gold)!important;border-color:var(--ai-ink)!important;color:var(--ai-ink)!important}
.ai .ai-ans.wrong{background:#E9EDF1!important;border-color:#CCD3DA!important;color:var(--ai-muted)!important}
.ai .ai-ans.dim{opacity:.45}
.ai-verdict{margin-top:24px;border:0;border-radius:18px;box-shadow:none;padding:18px 20px}
.ai-verdict .fact{border-top:1px solid currentColor;border-top-color:rgba(0,0,0,.15);font-weight:400}
.ai-verdict.win{background:var(--ai-gold-soft);color:var(--ai-ink)}
.ai-verdict.lose{background:var(--ai-ink);color:#FFFFFF}
.ai-verdict.lose .fact{border-top-color:rgba(255,255,255,.25)}
.ai-verdict b{font-family:var(--ai-display);font-weight:900}
.ai-verdict span{font-family:var(--ai-display);font-weight:900}

/* Results */
.ai-tiles .main{background:var(--ai-green);color:#FFFFFF;border:0;border-radius:18px;box-shadow:none}
.ai-tiles .main .ai-label{color:#FFFFFF;opacity:.9}
.ai-tiles .main strong{font-family:var(--ai-display);font-weight:900}
.ai-tiles .side > div{border-radius:14px}
.ai-tiles .side b{font-family:var(--ai-display);font-weight:900}
.ai-tiles .side span{color:var(--ai-muted)}
.ai-rows{padding:4px 18px}
.ai-row{border-bottom:1px solid var(--ai-rule)}
.ai-row .l b{font-weight:700}
.ai-row .l small{font-weight:400}
.ai-row .r{font-family:var(--ai-sans);font-weight:800}
.ai-row .r.won{color:var(--ai-win)}
.ai-dbl{background:var(--ai-gold);border:0;border-radius:999px;padding:2px 8px;font-weight:700}

/* Initials callout and leaderboard */
.ai-callout{background:var(--ai-gold-soft);border:0;border-radius:18px;box-shadow:none}
.ai-callout .big{font-family:var(--ai-display);font-weight:900;letter-spacing:-.02em}
.ai-callout p{font-weight:400}
.ai .ai-initials input{border:1px solid var(--ai-ink)!important;border-radius:999px!important;font-family:var(--ai-body)!important;font-weight:700;font-size:18px!important;padding:0 18px!important}
.ai .ai-initials .ai-btn{height:48px}
.ai-board{padding:16px 18px 8px}
.ai-board li{border-bottom:1px solid var(--ai-rule)}
.ai-board li.me{background:var(--ai-gold-soft);box-shadow:inset 4px 0 0 var(--ai-gold);border-radius:8px}
.ai-board .rk{font-family:var(--ai-display);font-weight:900}
.ai-board .nm{font-weight:700}
.ai-board .sub{font-weight:400}

/* Archive and stats */
.ai .ai-item{border-bottom:1px solid var(--ai-rule)!important}
.ai .ai-item:hover{background:var(--ai-bg)!important}
.ai-item b{font-family:var(--ai-display);font-weight:900}
.ai-apill{font-size:13px;font-weight:700;padding:4px 12px;border:1px solid var(--ai-ink);border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ai-apill.won{background:var(--ai-green);border-color:var(--ai-green);color:#FFFFFF}
.ai-apill.open{background:var(--ai-ink);color:#FFFFFF}
.ai-apill.mid{background:var(--ai-gold)}
.ai-stats > div{border-radius:16px}
.ai-stats b{font-family:var(--ai-display);font-weight:900}
.ai-stats span{color:var(--ai-muted)}

@container (min-width:860px){
  .ai .ai-list .ai-item:nth-child(odd){border-right:1px solid var(--ai-rule)!important}
}
.ai .ai-title,.ai .ai-name{font-weight:900!important}
.ai h1,.ai h2,.ai h3,.ai .ai-h2{margin:0!important;padding:0!important}
.ai .ai-board ol{margin:8px 0 0!important;padding:0!important}
.ai-board li.me{padding-right:8px}

/* Gunmetal palette: a little more room between the logo and the name on the start screen. */
.ai .ai-splash .ai-name{margin-top:24px!important}

/* Points, times and stats: the bold sans from the letter tiles, easier to read than the heavy serif. */
.ai-stack strong,.ai-tiles .main strong,.ai-tiles .side b,.ai-board .rk,.ai-stats b{font-family:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:800!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums lining-nums!important}

/* Archive dates: the bold sans, easier to scan than the heavy serif. */
.ai .ai-item b{font-family:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:700!important;letter-spacing:0!important;font-size:16px!important}
/* Questions and the +/- amount after each answer: the bold sans. */
.ai .ai-q .txt{font-family:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:700!important;letter-spacing:-.005em!important}
.ai .ai-verdict span{font-family:"Libre Franklin","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:800!important;letter-spacing:-.01em!important;font-variant-numeric:tabular-nums}