/* Styles for the number stats page (index.html) */
:root {
--bg: #ffffff; --text: #1a1a1a; --muted: #666; --line: #ddd; --panel: #f6f6f6;
--accent: #1f6feb; --on-accent: #ffffff; --pick: #fff3c4; --error: #b42318;
--hot: #b3261e; --hot-bg: #f7c6c3; --warm-bg: #fde9e7;
--cold: #1849a9; --cold-bg: #c3d6f7; --cool-bg: #e8effc;
/* "Last drawn" bands 1–3: light blue, dark blue, dark red, shown as rings (tiles, saved balls, key
swatches) over the frequency fill; their draw ranges come from the LD slider (GAP_BAND_STOPS).
Same as RING_COLORS in saved.js. */
--ring-1: #9dbcf3; --ring-2: #1e3a8a; --ring-3: #8b0000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #16181c; --text: #e8e8e8; --muted: #9a9a9a; --line: #333; --panel: #1f2228;
--accent: #6ea8fe; --on-accent: #0b1220; --pick: #4a3f12; --error: #ff8a80;
--hot: #ff9b93; --hot-bg: #5a1d1a; --warm-bg: #35201f;
--cold: #9cc0ff; --cold-bg: #1c3462; --cool-bg: #1d2738;
--ring-1: #7f9fd8; --ring-2: #2346c4; /* not near-white (picked tiles have a white border) */
--ring-3: #b91c1c; /* dark red would vanish on the dark background */
}
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 16px; background: var(--bg); color: var(--text); }
h1 { margin: 0 0 4px; font-size: 1.5rem; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
.muted { color: var(--muted); }
.note { font-size: 0.9rem; color: var(--muted); margin: 4px 0 0; }
.warning { font-size: 0.9rem; color: var(--error); margin: 4px 0 16px; }
/* Page layout: one centered column */
main { max-width: 760px; margin: 0 auto; }
h1 { text-align: center; }
/* Latest draw, centered under the title */
.latest { text-align: center; margin: 12px 0 0; }
.latest h2 { font-size: 1rem; margin: 0 0 6px; }
.latest .muted { font-weight: 400; }
.latest > .balls { display: inline-flex; justify-content: center; gap: 8px; padding: 8px 12px;
border: 1px solid #d32f2f; border-radius: 10px; } /* thin red box around the numbers */
.latest .ball { width: 46px; height: 46px; font-size: 1.25rem;
background: #eeeeee; color: #000000; border: 1px solid #d0d0d0; } /* same in dark mode */
/* "View more past draws": 5 older draws at a time, opened from a link under the latest draw */
button.link { border: 0; background: none; padding: 0; color: var(--accent); text-decoration: underline; font-size: 0.9rem; }
.past-draws { max-width: 420px; margin: 0 auto; padding: 8px 12px; background: var(--panel); border-radius: 8px; }
.past-draws ul { list-style: none; margin: 0; padding: 0; }
.past-draws li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0;
border-bottom: 1px solid var(--line); }
.past-draws .when { font-size: 0.85rem; color: var(--muted); }
.past-draws .ball { width: 30px; height: 30px; font-size: 0.9rem; }
.past-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 8px; }
#past-prev { justify-self: start; grid-column: 1; }
.past-nav .collapse { grid-column: 2; }
#past-next { justify-self: end; grid-column: 3; }
section { margin-bottom: 24px; }
.panel { background: var(--panel); border-radius: 8px; padding: 12px; }
/* Controls */
select, input, button { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
background: var(--bg); color: var(--text); }
button { cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.buttons { display: flex; gap: 8px; }
.buttons button { white-space: nowrap; }
/* Settings: four boxes in a grid. Disclaimer and settings span the width; the key takes ~63% and the
ad ~37% beside it, a little wider than a third (stacked on phones). */
.filters { display: grid; grid-template-columns: 1.7fr 1fr; gap: 8px; margin: 12px 0; }
.filters .box { margin: 0; padding: 12px; background: var(--panel); border-radius: 8px; min-width: 0; }
.filters .disclaimer, .filters .settings { grid-column: 1 / -1; }
@media (max-width: 640px) { .filters { grid-template-columns: 1fr; } }
/* Title boxes: a centered title with a short line under it ("Analysis Tools" = box 1, "Pick Your Numbers") */
.title-box { margin: 0 0 8px; padding: 8px 12px; background: var(--panel); border-radius: 8px; text-align: center; }
.title-box h2 { margin: 0 0 2px; }
.title-box p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); }
/* Box 2: Timeframe left, Show in My Numbers centered, keytip right; labels above controls; grey line along the bottom */
.settings { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px;
border-bottom: 2px solid var(--line); }
.filters .timeframe-pick { font-size: 1rem; font-weight: 700; color: var(--text); }
.timeframe-pick select { font-size: 1.05rem; font-weight: 600; }
#custom-dates { display: flex; gap: 12px; }
.mode-pick { margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.mode-label { font-size: 1rem; font-weight: 700; color: var(--text); }
.mode-toggle { display: flex; }
.mode-toggle button { font-size: 0.95rem; padding: 8px 12px; border-radius: 0; } /* same height as the dropdown */
.mode-toggle button:first-of-type { border-radius: 6px 0 0 6px; }
.mode-toggle button:last-of-type { border-radius: 0 6px 6px 0; border-left: 0; }
.mode-toggle button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
/* Box 3: the key (a sample tile with labels, then the colors) above the warm/cool slider */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8rem; color: var(--muted); }
.legend .tile { cursor: default; min-height: 0; padding: 4px 8px; background: var(--bg); }
.legend .tile .num { font-size: 1.1rem; color: var(--text); }
.legend dl { margin: 0; display: grid; grid-template-columns: auto auto; justify-content: start; gap: 1px 6px; }
.legend dt { font-weight: 600; color: var(--text); }
.legend dd { margin: 0; }
.key-terms dd { white-space: nowrap; } /* "= Draws since last seen" stays on one line */
.heat-legend dt, .gap-bands dt { display: flex; align-items: center; gap: 5px; } /* swatch + label */
/* The key's text never wraps, and "(expected ≈ …)" always sits on its own line under Normal, so box 3
keeps one height for every timeframe */
.heat-legend dd { white-space: nowrap; }
.heat-legend .expected { display: block; }
.heat-legend dt:has(+ #legend-normal) { align-self: start; } /* Normal's label lines up with its first line */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); background: var(--bg); }
/* "Last drawn" key: one ring swatch per LD band, then its odds */
.legend .gap-bands { align-content: start; }
.gap-legend p { margin: 4px 0 0; }
/* Box 3: frequency key | LD key side by side, the warm / cool slider below across both. Nothing in it
changes with the Show in My Numbers switches (user's choice). */
/* A fixed width for the frequency key, wide enough for its longest text ("(expected ≈ 105.4)" with
All time), so the LD key beside it doesn't slide when the timeframe changes its numbers */
.filters .key { display: grid; grid-template-columns: 15em 1fr; align-items: start; column-gap: 24px; }
.key > .sensitivity { grid-column: 1 / -1; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
/* keytip (sample tile + LD / FREQ meanings), at the right of box 2 (Show in My Numbers sits centered) */
.keytip { flex-wrap: nowrap; align-self: center; margin-left: auto; }
/* Box 4: ad space, as tall as the key box beside it */
.filters .ad-slot { display: flex; align-items: center; justify-content: center; min-height: 100px; overflow: hidden; }
.ad-placeholder { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
/* LD band rings (data-band 0 = LD 0–9 has none), inside the edge and on top of the red / blue frequency
fill, so both show: a cold, long-absent number = blue fill, dark blue ring. Grid tiles in Last drawn
mode, saved balls (band when picked) and the key's swatches. */
.tile[data-band="1"], .ball[data-band="1"], .swatch[data-band="1"] { box-shadow: inset 0 0 0 var(--ring-width, 3px) var(--ring-1); }
.tile[data-band="2"], .ball[data-band="2"], .swatch[data-band="2"] { box-shadow: inset 0 0 0 var(--ring-width, 3px) var(--ring-2); }
.tile[data-band="3"], .ball[data-band="3"], .swatch[data-band="3"] { box-shadow: inset 0 0 0 var(--ring-width, 3px) var(--ring-3); }
.tile { --ring-width: 4px; }
body[data-show-ld="true"] .picker .tile .ago { font-weight: 700; } /* LD is what's colored (grid only, not the key's sample tile); its color comes from the band rules above */
/* Warm / cool sensitivity slider */
.sensitivity { display: grid; gap: 2px; font-size: 0.85rem; color: var(--muted); }
.filters .sensitivity label { flex-direction: row; gap: 4px; color: var(--text); font-weight: 600; font-size: 0.85rem; }
.sensitivity input[type="range"] { width: 100%; max-width: 420px; padding: 0; border: 0; background: none; accent-color: var(--text); }
/* Under the slider: its ends at the sides, the note in the middle */
.sensitivity .scale { display: flex; justify-content: space-between; gap: 8px; max-width: 420px; font-size: 0.75rem; }
/* Number picker: an enclosed grid of 1–46, each a checkbox styled as a tile */
.picker-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.picker-head h2 { margin: 0; }
.picker { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; padding: 10px;
border: 2px solid var(--line); border-radius: 8px; background: var(--bg); }
.picker input { position: absolute; opacity: 0; width: 0; height: 0; } /* hidden; the tile shows the state */
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-height: 74px; padding: 6px 2px; border: 1px solid var(--line); border-radius: 8px;
cursor: pointer; user-select: none; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile .num { font-size: 1.5rem; font-weight: 700; }
.tile .ago, .tile .times { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.picker .tile:hover { border-color: var(--accent); }
/* Picked: thick dark border and a ✓, so the hot/cold shading still shows through */
.picker input:checked + .tile { border: 3px solid var(--text); padding: 4px 0; }
.picker input:checked + .tile::after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 18px; height: 18px;
border-radius: 50%; background: var(--text); color: var(--bg); font-size: 0.7rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; }
.picker input:focus-visible + .tile { outline: 2px solid var(--accent); outline-offset: 2px; }
.picker input:disabled + .tile { cursor: not-allowed; } /* not faded: the tile counts stay readable */
.picker input:disabled + .tile:hover { border-color: var(--line); }
@media (max-width: 480px) {
.picker { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px; }
.tile { min-height: 66px; }
.tile .num { font-size: 1.3rem; }
.tile .ago, .tile .times { font-size: 0.6rem; letter-spacing: -0.02em; }
}
/* Saved numbers log */
.saved { list-style: none; margin: 0; padding: 0; }
.saved li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0;
border-bottom: 1px solid var(--line); }
.saved li:last-child { border-bottom: 0; }
.balls { display: flex; gap: 6px; }
.ball { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 700; }
/* Balls saved with a color level look like their tile did: plain, or shaded red / blue */
/* (:where keeps this as weak as .ball[data-level], so the red / blue level rules below still win) */
:where(.saved, .set-top) .ball[data-level] { background: var(--bg); color: var(--text); border: 1px solid var(--line); }
.saved-tip { margin: -4px 0 8px; } /* under the Saved numbers heading */
.saved .when { font-size: 0.85rem; margin-right: auto; }
/* "1." to "10." row number on the left, with a line down its right side */
.saved .position { align-self: stretch; display: flex; align-items: center; justify-content: flex-end;
min-width: 2.2em; padding-right: 8px; border-right: 2px solid var(--line);
font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
button.icon { display: inline-flex; vertical-align: middle; padding: 4px; line-height: 0; }
/* Download and share icons beside the "Saved numbers" heading, with the share menu dropping below them */
.head-icons { position: relative; display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.share-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; display: flex; flex-direction: column;
min-width: 140px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); font-size: 0.9rem; font-weight: 400; }
.share-menu a, .share-menu button { padding: 6px 8px; border: 0; border-radius: 4px; background: none; color: var(--text);
text-align: left; text-decoration: none; font-size: inherit; }
.share-menu a:hover, .share-menu button:hover { background: var(--panel); }
.saved button { font-size: 0.85rem; padding: 4px 8px; }
.undo-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 6px 10px;
border: 1px solid var(--accent); border-radius: 6px; background: var(--bg); font-size: 0.9rem; }
.undo-bar button { font-size: 0.85rem; padding: 3px 10px; }
.history { margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--line); }
.history h3 { font-size: 1rem; margin: 0 0 4px; }
.history .ball { opacity: 0.55; } /* removed sets are faded but keep their colors */
button.danger { margin-top: 8px; font-size: 0.85rem; color: var(--error); border-color: var(--error); }
/* FREQ compared with chance: red shades = more often (hot, warm), blue shades = less often (cool, cold).
Used by the grid tiles, the legend swatches and the saved balls. */
.tile[data-level="hot"], .swatch[data-level="hot"], .ball[data-level="hot"] { background: var(--hot-bg); }
.tile[data-level="warm"], .swatch[data-level="warm"], .ball[data-level="warm"] { background: var(--warm-bg); }
.tile[data-level="cool"], .swatch[data-level="cool"], .ball[data-level="cool"] { background: var(--cool-bg); }
.tile[data-level="cold"], .swatch[data-level="cold"], .ball[data-level="cold"] { background: var(--cold-bg); }
.tile[data-level="hot"] .num, .tile[data-level="warm"] .num,
.ball[data-level="hot"], .ball[data-level="warm"] { color: var(--hot); }
.tile[data-level="cool"] .num, .tile[data-level="cold"] .num,
.ball[data-level="cool"], .ball[data-level="cold"] { color: var(--cold); }
/* Frequency table */
/* Heading: title and timeframe tag on the left, the linked timeframe dropdown pushed right so it
sits over the "Last drawn" column */
.table-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.table-head .timeframe { margin-left: 2px; padding: 2px 8px; font-size: 0.8rem; font-weight: 400; white-space: nowrap;
border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.table-head select { margin-left: auto; margin-right: 12px; padding: 1px 4px; font-size: 0.75rem; font-weight: 400; }
@media (max-width: 480px) { .table-head select { margin-right: 0; } }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
#stats th { cursor: pointer; user-select: none; }
#stats th:hover { color: var(--accent); }
tr.pick td { background: var(--pick); font-weight: 600; }
@media (max-width: 480px) {
th, td { padding: 5px 4px; }
th { white-space: normal; vertical-align: bottom; } /* let headings wrap so tables fit */
}
/* Links between the pages, under the title */
.site-nav { display: flex; justify-content: center; gap: 16px; margin: 0 0 8px; font-size: 0.9rem; }
.site-nav a { color: var(--accent); text-decoration: none; padding: 2px 4px; border-bottom: 2px solid transparent; }
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
/* Ball Set Stats page (ballsets.html): one card per set, top 10 as balls with their counts */
.set-summary { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
@media (max-width: 640px) { .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.set-card { margin: 0; }
.set-card h2 { font-size: 1rem; margin: 0 0 8px; }
.set-card h2 .muted { display: block; font-size: 0.75rem; font-weight: 400; }
.set-top { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; }
.set-top li { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.set-top .times { font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.set-card .note { margin-top: 6px; font-size: 0.75rem; }
.overlap { width: auto; border-collapse: collapse; margin-top: 6px; font-size: 0.9rem; }
.overlap th, .overlap td { padding: 4px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.year-pick { max-width: 420px; margin: 0 auto 12px; }
.year-pick input[type="range"] { max-width: none; }
.year-pick .scale { max-width: none; }