/* The Numbers — built to be read at arm's length on a phone.
   Base type is 18px, drawn numbers are much bigger, tap targets are 52px+. */

:root{
  --ink:#12212f;
  --ink-soft:#4a5b6b;
  --line:#d5dde4;
  --bg:#f4f6f8;
  --card:#ffffff;
  --navy:#0d1b2a;
  --red:#c0202c;        /* Ohio Lottery red */
  --red-dark:#8f1720;
  --gold:#e0a516;
  --hot:#b3261e;
  --cold:#1d4f91;
  --ok:#186a3b;
  --radius:12px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:19px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  padding-bottom:48px;
}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}

/* ── header ─────────────────────────────────────────── */
.top{background:var(--navy);color:#fff;padding:20px 0 18px;border-bottom:5px solid var(--red)}
.top h1{margin:0;font-size:34px;letter-spacing:-.5px;line-height:1.1}
.sub{margin:6px 0 0;color:#b8c6d4;font-size:16px}

/* ── latest drawing banner ──────────────────────────── */
.latest{margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px}
.latest-head{font-size:15px;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.6px;font-weight:700;margin-bottom:10px}
.latest-grid{display:grid;gap:14px}
.latest-block{border-top:1px solid var(--line);padding-top:10px}
.latest-block:first-child{border-top:0;padding-top:0}
.latest-when{font-weight:700;font-size:15px;color:var(--red-dark);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.latest-row{display:flex;align-items:center;gap:10px;padding:3px 0}
.latest-game{font-weight:700;font-size:16px;color:var(--ink-soft);min-width:56px}
.latest-row .balls{gap:5px}

/* ── tabs ───────────────────────────────────────────── */
.tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:16px auto 0}
.tab{
  appearance:none;border:1px solid var(--line);background:var(--card);
  color:var(--ink-soft);border-radius:10px;padding:10px 2px;min-height:58px;
  font:700 14px/1.15 inherit;cursor:pointer;text-align:center;
}
.tab small{font-weight:500;font-size:12px;opacity:.85}
.tab.is-on{background:var(--red);border-color:var(--red);color:#fff}
.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── cards ──────────────────────────────────────────── */
main{margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:20px}
.note{color:var(--ink-soft)}
.hint{margin:2px 0 10px;font-size:15px;color:var(--ink-soft)}

.big-label{display:block;font-size:20px;font-weight:700;margin-bottom:4px}
.big-input{
  width:100%;padding:14px 16px;font:700 34px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:8px;text-align:center;border:2px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);
}
.big-input:focus{outline:none;border-color:var(--red)}
.big-select{
  width:100%;padding:13px 14px;font:600 18px/1.2 inherit;border:2px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);min-height:52px;
}
.row2{display:flex;gap:10px}
.row2>*{flex:1}
.row2 .btn{flex:0 0 auto;min-width:104px}

.btn{
  appearance:none;border:0;background:var(--red);color:#fff;font:700 18px/1 inherit;
  padding:15px 20px;border-radius:10px;cursor:pointer;min-height:52px;
}
.btn:hover{background:var(--red-dark)}
.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn-big{width:100%;margin-top:12px;font-size:20px;padding:17px}
.btn-ghost{background:#fff;color:var(--red);border:2px solid var(--line);font-size:16px;
  padding:10px 14px;min-height:44px}
.btn-ghost:hover{background:#fff5f5;border-color:var(--red)}

/* ── segmented control ──────────────────────────────── */
.seg{display:flex;gap:6px;margin:10px 0 14px}
.seg-btn{
  flex:1;appearance:none;border:2px solid var(--line);background:#fff;color:var(--ink-soft);
  font:700 16px/1 inherit;padding:12px 4px;border-radius:9px;cursor:pointer;min-height:48px;
}
.seg-btn.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.seg-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ── the drawn numbers themselves ───────────────────── */
.balls{display:flex;gap:6px;flex-wrap:wrap}
.ball{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;
  font:700 24px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ball.sm{width:34px;height:34px;font-size:19px}
.ball.miss{background:#e8edf1;color:#98a7b4}

/* ── result blocks ──────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.stat{background:#f7f9fb;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat .n{font:700 30px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--navy)}
.stat .k{font-size:14px;color:var(--ink-soft);margin-top:3px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.big-answer{font-size:22px;font-weight:700;margin:6px 0 2px}
.big-answer.good{color:var(--ok)}
.big-answer.warn{color:var(--hot)}

table{width:100%;border-collapse:collapse;margin-top:6px;font-size:17px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line)}
th{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft)}
td.num{font:700 19px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:2px}
.scroll{max-height:420px;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}

.rank{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:0}
.rank-n{font:700 20px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:3px;
  background:var(--navy);color:#fff;padding:9px 11px;border-radius:8px;min-width:78px;text-align:center}
.rank-meta{font-size:16px;color:var(--ink-soft)}
.rank-meta b{color:var(--ink)}
.tag{display:inline-block;font-size:13px;font-weight:700;padding:3px 8px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.5px}
.tag.hot{background:#fdeceb;color:var(--hot)}
.tag.cold{background:#e9f0fa;color:var(--cold)}

.pick-out{text-align:center;padding:22px 16px}
.pick-out .balls{justify-content:center;gap:10px}
.pick-out .ball{width:64px;height:64px;font-size:34px}
.pick-why{margin-top:14px;font-size:17px;color:var(--ink-soft)}

.straight-talk{background:#fffdf4;border-color:#ecdda6}
.straight-talk h3{color:var(--red-dark)}
.straight-talk p{font-size:16px;margin:0 0 10px}
.straight-talk p:last-child{margin-bottom:0}

.mine-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.mine-row:last-child{border-bottom:0}
.mine-row .rank-meta{flex:1}

.empty{color:var(--ink-soft);font-size:17px;padding:6px 0}
.gap-note{font-size:14px;color:var(--ink-soft);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

.foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-size:15px;color:var(--ink-soft)}
.foot a{color:var(--red-dark)}
.foot p{margin:0 0 8px}

@media (max-width:430px){
  .top h1{font-size:29px}
  .tab{font-size:13px;padding:8px 1px}
  .tab small{font-size:11px}
  .big-input{font-size:29px;letter-spacing:6px}
  .ball{width:39px;height:39px;font-size:21px}
  .pick-out .ball{width:54px;height:54px;font-size:29px}
  .row2{flex-wrap:wrap}
  .row2 .btn{width:100%}
}


/* ── the verdict, above everything ──────────────────── */
.verdict{margin-top:16px;border-radius:var(--radius);padding:18px 18px 16px;border:2px solid}
.verdict-hit{background:#eaf6ee;border-color:#a8d5b9}
.verdict-quiet{background:var(--card);border-color:var(--line)}
.verdict-big{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.3px}
.verdict-hit .verdict-big{color:var(--ok)}
.verdict-quiet .verdict-big{color:var(--ink)}
.verdict-num{margin:12px 0 10px}
.verdict-num .ball{width:52px;height:52px;font-size:28px;background:var(--ok)}
.verdict-sub{margin:6px 0 0;font-size:17px;color:var(--ink)}
.verdict-quiet .verdict-sub{color:var(--ink-soft)}
.verdict-fine{margin:12px 0 0;font-size:15px;color:var(--ink-soft)}

/* ── keypad ─────────────────────────────────────────── */
.pad-display{
  min-height:64px;display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--line);border-radius:10px;background:#fbfcfd;
  padding:8px;margin:6px 0 12px;
}
.pad-display .balls{justify-content:center;gap:8px}
.pad-display .ball{width:48px;height:48px;font-size:27px}
.pad-ghost{color:#93a3b1;font-size:16px}

.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{
  appearance:none;border:2px solid var(--line);background:#fff;color:var(--ink);
  border-radius:11px;min-height:62px;cursor:pointer;
  font:700 30px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.key:active{background:var(--navy);color:#fff;border-color:var(--navy)}
.key:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.key-alt{font:700 17px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#f2f5f8;color:var(--ink-soft)}
.key-alt:active{background:var(--ink-soft);color:#fff;border-color:var(--ink-soft)}

.btn.is-flash{background:var(--ok)}
.btn-ghost.is-flash{background:var(--ok);color:#fff;border-color:var(--ok)}

.tip{background:#fffdf4;border:1px solid #ecdda6;border-radius:10px;
  padding:11px 13px;font-size:15px;color:var(--ink)}

@media (max-width:430px){
  .verdict-big{font-size:23px}
  .verdict-num .ball{width:46px;height:46px;font-size:25px}
  .key{min-height:58px;font-size:27px}
  .pad-display .ball{width:43px;height:43px;font-size:24px}
}