/* PRIZERUN — OpenBook design system */
:root{
  --ink:#16202b; --ink-soft:#5b6b7c; --paper:#f6f8fa; --card:#fff;
  --line:#e3e9ef; --buy:#cfe7fb; --buy-strong:#8ec8f2; --buy-ink:#0b5c96;
  --free:#d9f2e6; --free-ink:#0e7a52; --match:#0e9f6e; --lose:#99a7b5; --gold:#b7791f;
  font-size:15px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--paper);color:var(--ink);
  font-family:"Archivo","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--buy-ink)}
.num{font-family:"IBM Plex Mono",Consolas,monospace;font-variant-numeric:tabular-nums}

/* topbar + nav */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:30}
.logo{font-weight:800;letter-spacing:.06em;font-size:.95rem;color:#fff;text-decoration:none;display:inline-flex;align-items:center}
.logo .logo-horse{flex:none;display:block;margin-right:7px}
.logo span{color:var(--buy-strong)}
.bal{margin-left:auto;font-size:.78rem;background:#22303f;border:1px solid #33465a;border-radius:7px;padding:5px 10px;color:#cfe7fb;text-decoration:none}
.bal b{color:#fff}
.nav{display:flex;gap:2px;background:#0f1720;padding:0 8px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:#9fb0c0;text-decoration:none;font-size:.72rem;letter-spacing:.05em;padding:9px 10px;white-space:nowrap;border-bottom:2px solid transparent}
.nav a.on{color:#fff;border-bottom-color:var(--buy-strong)}
.ticker{background:#0f1720;color:#9fb0c0;font-size:.72rem;padding:6px 14px;white-space:nowrap;overflow:hidden;border-top:1px solid #22303f}
.ticker b{color:#8ee6bf}
.ticker .num{color:#cfe7fb}

.wrap{max-width:820px;margin:0 auto;padding:14px 12px 60px}

/* strap */
.strap{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.strap h1{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.strap p{font-size:.82rem;color:var(--ink-soft);margin-top:4px;max-width:56ch}
.guide{display:flex;align-items:stretch;gap:0;margin-top:14px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:10px 8px;overflow:hidden}
.gstep{flex:1;display:flex;gap:9px;align-items:flex-start;min-width:0;padding:2px 6px}
.gn{flex:none;width:24px;height:24px;border-radius:50%;background:var(--buy-ink);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.78rem;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.gt{line-height:1.35;min-width:0}
.gt b{display:block;font-size:.76rem;letter-spacing:-.01em}
.gt span{display:block;font-size:.66rem;color:var(--ink-soft);margin-top:1px}
.gline{width:1px;background:var(--line);margin:2px 2px}
@media(max-width:640px){
  .guide{flex-direction:column;gap:10px;padding:12px}
  .gline{width:auto;height:1px;margin:0 0 0 33px}
}

/* section head */
.sech{display:flex;align-items:baseline;gap:10px;margin:18px 2px 8px}
.sech h2{font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.sech .sub{font-size:.72rem;color:var(--ink-soft)}
.sech .live{margin-left:auto;font-size:.68rem;color:var(--match);letter-spacing:.06em}
.live::before{content:"●";margin-right:5px;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.25}}

/* market table */
.market{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mhead{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--paper);
  border-bottom:1px solid var(--line);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.mhead .h-off{width:42px}
.mhead .h-race{flex:1}
.mhead .h-ch{width:52px;text-align:center}
.mhead .h-c{width:70px;text-align:center}
.mrow{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line)}
.mrow:last-child{border-bottom:none}
.mrow.next{background:#f4faff;box-shadow:inset 3px 0 0 var(--buy-strong)}
.mrow .off{width:42px;flex:none}
.mrow .off .tt{font-weight:600;font-size:.88rem}
.mrow .meta .course{font-size:.6rem;font-weight:600;color:var(--buy-ink);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .meta{flex:1;min-width:0;line-height:1.3}
.mrow .rname{font-size:.76rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .rn{font-size:.65rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrow .rn .eta{color:var(--buy-ink);font-weight:500}
.mrow.next .rn .eta{color:var(--match);font-weight:600}
.mrow.closed .rn .eta{color:var(--gold)}
.mrow .chance{width:52px;flex:none;text-align:center;line-height:1.2}
.mrow .chance .cv{font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:600}
.mrow .chance .cl{font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.cell{width:70px;border:none;border-radius:7px;padding:5px 2px;text-align:center;cursor:pointer;
  background:var(--buy-strong);color:#053a5f;font-family:"Archivo";transition:transform .08s;line-height:1.3}
.cell:active{transform:scale(.96)}
.cell .p{font-size:.58rem;opacity:.8;letter-spacing:.02em}
.cell .w{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.88rem}
.cell:disabled{background:var(--paper);color:var(--lose);cursor:default;border:1px solid var(--line)}

.allbtn.freebtn{background:var(--free);color:var(--free-ink);text-decoration:none;flex-direction:column;gap:1px;line-height:1.3}
.allbtn.freebtn small{opacity:.85}
.free-link{display:block;text-align:center;margin-top:10px;font-size:.74rem;color:var(--free-ink);font-weight:600}

/* tickets & results */
.tks{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tk{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);animation:fadein .3s ease}
.tk:last-child{border-bottom:none}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
.tk .horse{flex:1;min-width:0}
.tk .horse b{font-size:.9rem}
.tk .horse .rc{font-size:.68rem;color:var(--ink-soft);margin-top:1px}
.tk .st{font-size:.7rem;font-weight:600;padding:4px 9px;border-radius:7px;white-space:nowrap}
.tk .st.wait{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
.tk .st.run{background:#fdf3d7;color:var(--gold)}
.tk .st.won{background:var(--free);color:var(--free-ink)}
.tk .st.lost{background:var(--paper);color:var(--lose);border:1px solid var(--line);font-weight:400}
.tk.won-row{background:#f2fbf7}
.empty{padding:18px;text-align:center;color:var(--ink-soft);font-size:.8rem}

/* prose pages */
.prose{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 16px;margin-top:14px}
.prose h1{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.prose h2{font-size:.9rem;font-weight:800;margin:16px 0 4px}
.prose p,.prose li{font-size:.82rem;color:var(--ink-soft);line-height:1.65;margin-top:6px}
.prose ul,.prose ol{padding-left:18px;margin-top:4px}
.prose b{color:var(--ink)}
.prose .addr{margin-top:10px;background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-family:"IBM Plex Mono",monospace;font-size:.75rem;line-height:1.7;color:var(--ink)}
.callout{margin-top:12px;background:#f4faff;border:1px solid var(--buy-strong);border-radius:10px;padding:12px 14px;font-size:.8rem;color:var(--ink)}
.callout.green{background:#f2fbf7;border-color:#9fdcc0}

/* comparison table */
.cmp-wrap{overflow-x:auto;margin-top:10px;border:1px solid var(--line);border-radius:10px}
.cmp{width:100%;border-collapse:collapse;font-size:.72rem;min-width:520px;background:var(--card)}
.cmp th,.cmp td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.4}
.cmp thead th{background:var(--paper);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child td{border-bottom:none}
.cmp td:first-child{font-weight:600;color:var(--ink);width:26%}
.cmp td{color:var(--ink-soft)}
.cmp .mh{background:#f4faff;color:var(--ink)}
.cmp thead th.mh{color:var(--buy-ink)}
.cmp .yes{color:var(--free-ink);font-weight:600}
.cmp .no{color:var(--lose)}

.ttday{font-family:"IBM Plex Mono",monospace;font-size:.52rem;letter-spacing:.08em;color:var(--ink-soft);margin-top:2px;text-align:center}

/* chooser field list */
.chfield{margin-top:10px;font-size:.62rem;color:var(--ink-soft);text-align:center;line-height:1.7;
  max-height:64px;overflow:hidden}

/* why grid */
.why{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wtile{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 13px;line-height:1.45}
.wtile b{display:block;font-size:.8rem;letter-spacing:-.01em;margin-bottom:3px}
.wtile span{font-size:.7rem;color:var(--ink-soft)}
@media(max-width:480px){.why{grid-template-columns:1fr}}

/* forms */
.field{margin-top:12px}
.field label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.field input{width:100%;margin-top:5px;background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:12px;font-size:16px;font-family:"Archivo";color:var(--ink);box-sizing:border-box}
.field input:focus{outline:none;border-color:var(--buy-strong)}
.check{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--ink-soft);margin-top:12px;line-height:1.5}
.check input{margin-top:2px;accent-color:var(--buy-ink)}

/* wallet */
.wallet{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;text-align:center;margin-top:14px}
.wallet .k{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.wallet .v{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:2rem;margin-top:4px}
.chips{display:flex;gap:8px;justify-content:center;margin-top:14px}
.chip{border:1px solid var(--buy-strong);background:var(--buy);color:var(--buy-ink);border-radius:8px;
  padding:9px 16px;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:.85rem;cursor:pointer}
.chip:active{transform:scale(.97)}

/* buttons, legal, modal, toast */
.btn{display:block;width:100%;margin-top:14px;border:none;border-radius:9px;background:var(--ink);color:#fff;
  font-family:"Archivo";font-weight:700;font-size:.85rem;padding:12px;cursor:pointer;text-align:center;text-decoration:none}
.btn.ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.legal{margin-top:18px;font-size:.7rem;color:var(--ink-soft);line-height:1.6;
  border:1px dashed var(--line);border-radius:10px;padding:12px 14px;background:var(--card)}
footer{max-width:820px;margin:0 auto;padding:0 12px 40px;font-size:.68rem;color:var(--ink-soft)}
footer .links{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
footer a{color:var(--ink-soft)}
.mwrap{position:fixed;inset:0;background:rgba(22,32,43,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:18px}
.mwrap.open{display:flex}
.modal{background:var(--card);border-radius:14px;max-width:380px;width:100%;padding:22px 20px;text-align:center;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
.modal .k{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.reveal-horse{font-size:1.5rem;font-weight:800;margin:10px 0 2px;min-height:2.1rem;letter-spacing:-.01em}
.reveal-horse.landed{color:var(--buy-ink)}
.reveal-sub{font-size:.78rem;color:var(--ink-soft)}
.reveal-prize{margin:14px auto 0;display:inline-block;background:var(--buy);color:var(--buy-ink);
  border-radius:9px;padding:8px 16px;font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:1rem}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:#fff;font-size:.8rem;padding:10px 16px;border-radius:9px;z-index:60;
  transition:transform .3s;box-shadow:0 6px 20px rgba(22,32,43,.25)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast b{color:#8ee6bf}

@media(max-width:560px){
  .mrow .chance,.mhead .h-ch{display:none}
  .mrow{gap:7px;padding:7px 8px}
  .cell{width:64px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}