/* Philippine Lotto Stats — design tokens, light + dark via Bootstrap's data-bs-theme */
:root {
  --lt-accent: #5b4bdb;
  --lt-accent-2: #14b8a6;
  --lt-ball-bg: #fff;
  --lt-ball-fg: #1f2540;
  --lt-ball-ring: #5b4bdb;
  --lt-card-border: rgba(31, 37, 64, .09);
  --lt-chart-1: #5b4bdb;
  --lt-chart-2: #14b8a6;
  --lt-chart-3: #f59e0b;
  --lt-chart-4: #ef4444;
  --lt-chart-grid: rgba(31, 37, 64, .1);
  --bs-primary: var(--lt-accent);
  --bs-primary-rgb: 91, 75, 219;
  --bs-link-color: var(--lt-accent);
  --bs-link-hover-color: #4638b8;
}
[data-bs-theme="dark"] {
  --lt-accent: #8b7dff;
  --lt-ball-bg: #1b2036;
  --lt-ball-fg: #eef0ff;
  --lt-ball-ring: #8b7dff;
  --lt-card-border: rgba(255, 255, 255, .09);
  --lt-chart-1: #8b7dff;
  --lt-chart-2: #2dd4bf;
  --lt-chart-3: #fbbf24;
  --lt-chart-4: #f87171;
  --lt-chart-grid: rgba(255, 255, 255, .1);
  --bs-body-bg: #0e1220;
  --bs-body-bg-rgb: 14, 18, 32;
  --bs-tertiary-bg: #151a2e;
  --bs-tertiary-bg-rgb: 21, 26, 46;
  --bs-link-color: #a99fff;
  --bs-link-hover-color: #c3bbff;
}

body { background: var(--bs-body-bg); font-feature-settings: "tnum"; }
html { scroll-behavior: smooth; }

/* Navbar */
.app-nav { background: var(--bs-body-bg); border-bottom: 1px solid var(--lt-card-border); backdrop-filter: blur(8px); }
.navbar-brand { letter-spacing: -.02em; }
.brand-logo { width: 2.25rem; height: 2.25rem; display: block; filter: drop-shadow(0 2px 4px rgba(91, 75, 219, .35)); transition: transform .2s ease; }
.navbar-brand:hover .brand-logo { transform: rotate(-6deg) scale(1.06); }
.brand-text { font-size: 1.25rem; line-height: 1; }
.brand-lotto { font-weight: 800; }
.brand-stats {
  font-weight: 800;
  background: linear-gradient(90deg, var(--lt-accent), var(--lt-accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.app-nav .nav-link { border-radius: .5rem; padding: .45rem .75rem; }
.app-nav .nav-link.active { background: rgba(var(--bs-primary-rgb), .12); color: var(--lt-accent); font-weight: 600; }
[data-theme-choice].active { background: var(--lt-accent); border-color: var(--lt-accent); color: #fff; }

.page-title { font-weight: 700; letter-spacing: -.01em; }

/* Cards */
.card { border: 1px solid var(--lt-card-border); border-radius: .9rem; }
.card-header { background: transparent; font-weight: 600; border-bottom: 1px solid var(--lt-card-border); }
.game-card { transition: transform .15s ease, box-shadow .15s ease; }
.game-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08); }
.game-card img.game-logo { width: 56px; height: 56px; object-fit: contain; }

/* Lotto balls — ported from the original project's .circle (blue ball with gloss sprite) */
.ball {
  height: 57px; width: 57px; line-height: 54px;
  background-color: #64B0F2; color: floralwhite;
  border-radius: 75px; display: inline-block; text-align: center;
  margin: 0 2px; font-weight: bold; font-size: 26px; letter-spacing: 1px;
  box-shadow: inset #000 0 0 18px; text-shadow: #333 0 2px 2px;
  border: 0; padding: 0; cursor: default; font-variant-numeric: tabular-nums;
}
.ball::after {
  content: ''; background: url("/img/spritesheet.png") -254px -514px no-repeat;
  position: relative; display: block; width: 88px; height: 22px; top: -15px; left: -15px;
  pointer-events: none;
}
/* compact balls (tables, lists): same colours, CSS gloss instead of the sprite */
.ball-sm { height: 38px; width: 38px; line-height: 36px; font-size: 17px; margin: 1px; letter-spacing: 0; box-shadow: inset #000 0 0 10px; }
.ball-sm::after { display: none; }
.ball-sm { background-image: radial-gradient(circle at 32% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%); }
button.ball, a.ball { cursor: pointer; text-decoration: none; }
button.ball:hover, a.ball:hover { filter: brightness(1.12); color: #fff; }

/* Latest-result card (matches the original layout) */
.draw-card .game-name { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.draw-card .draw-date { font-size: 1.5rem; color: dimgray; }
.draw-card .draw-jackpot { font-size: 1.25rem; color: red; }
.draw-card .no-winner { color: #bbb; font-size: 1.25rem; }
.draw-card .with-winner { color: forestgreen; font-weight: bold; font-size: 1.35rem; }
.draw-card img.game-logo { width: 170px; max-width: 28vw; height: auto; max-height: 120px; object-fit: contain; }
[data-bs-theme="dark"] .draw-card .draw-date { color: #9aa3b5; }
@media (max-width: 575.98px) {
  .draw-card .game-name { font-size: 1.35rem; }
  .draw-card .draw-date { font-size: 1.1rem; }
  .draw-card .ball { height: 46px; width: 46px; line-height: 43px; font-size: 21px; }
  .draw-card .ball::after { display: none; }
  .draw-card .ball { background-image: radial-gradient(circle at 32% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%); }
}

/* Skeleton loaders */
.skeleton {
  border-radius: .5rem; background: linear-gradient(90deg, var(--bs-tertiary-bg) 25%, rgba(127, 127, 127, .18) 37%, var(--bs-tertiary-bg) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.skeleton-line { height: 1.1rem; margin: .6rem 0; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } .game-card { transition: none; } }

/* Data tables: stack into cards below md */
.table-data th { white-space: nowrap; cursor: default; }
.table-data th[data-sort] { cursor: pointer; user-select: none; }
.table-data th[data-sort]:hover { color: var(--lt-accent); }
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border: 1px solid var(--lt-card-border); border-radius: .75rem; margin-bottom: .75rem; padding: .35rem .75rem; background: var(--bs-body-bg); }
  .table-stack td { border: 0; padding: .3rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .table-stack .cell-val { flex: 1 1 auto; min-width: 0; text-align: right; }
  .table-stack td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); text-align: left; flex: 0 0 38%; }
}

/* Ads */
.ad-slot { margin: .75rem auto; width: 100%; overflow: hidden; text-align: center; }
.ad-placeholder {
  display: grid; place-items: center; border: 2px dashed var(--lt-card-border); border-radius: .75rem;
  color: var(--bs-secondary-color); font-size: .8rem; background: var(--bs-tertiary-bg);
}

.chart-box { position: relative; min-height: 260px; }
.empty-state { opacity: .85; }

/* Search result rows — original classes and values from the WebForms main.css */
.draw_date { font-size: 1.5rem; color: dimgray; padding-top: 10px; }
.draw_numbers { font-size: 1.85rem; }
.draw_jackpot { font-size: 1.25rem; color: red; }
.draw_winner { font-size: 1.25rem; color: forestgreen; text-align: right; }
.with_winner { color: forestgreen; font-weight: bold; font-size: 1.35rem; }
.no_winner { color: #bbb; }
.draw_sortednumbers { font-size: 1.15rem; color: darkorange; margin: 0; padding: 0; }
.draw_deltanumbers { font-size: 1.15rem; color: darkblue; text-align: right; margin: 0; padding: 0; }
.game_logo { width: 170px; height: 120px; max-width: 100%; object-fit: contain; }
[data-bs-theme="dark"] .draw_date { color: #9aa3b5; }
[data-bs-theme="dark"] .draw_deltanumbers { color: #8fa8ff; }
@media (max-width: 767.98px) {
  .draw_date { font-size: 1.25rem; padding-top: 0; }
  .search-row .game_logo { width: 110px; height: 78px; }
  .search-row .ball { height: 46px; width: 46px; line-height: 43px; font-size: 21px; }
  .search-row .ball::after { display: none; }
  .search-row .ball { background-image: radial-gradient(circle at 32% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%); }
}

/* Compact distribution panels on /Stats (Group | Draws | progress bar) */
.ball-xs {
  height: 28px; width: 28px; line-height: 26px; font-size: 13px; margin: 1px; letter-spacing: 0;
  box-shadow: inset #000 0 0 8px; text-shadow: #333 0 1px 1px; cursor: default;
  background-image: radial-gradient(circle at 32% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%);
}
.ball-xs::after { display: none; }
.compact-dist th, .compact-dist td { padding-top: .3rem; padding-bottom: .3rem; }
.compact-dist .progress { background-color: var(--bs-tertiary-bg); }
.compact-dist .progress-bar { background-color: var(--lt-accent); }

/* Generator: tap-to-pick number grid */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr)); gap: .35rem; }
.pick-ball {
  height: 2.5rem; border-radius: 50%; border: 2px solid #64B0F2; background: transparent; padding: 0; cursor: pointer;
  color: var(--bs-body-color); font-weight: 600; font-variant-numeric: tabular-nums;
}
.pick-ball:hover { background: rgba(100, 176, 242, .2); }
.pick-ball:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 2px; }
.pick-ball[aria-pressed="true"] { background: #64B0F2; color: #fff; box-shadow: inset #000 0 0 8px; text-shadow: #333 0 1px 1px; }

/* Checker: ticket rows + match highlighting */
.ticket-row .row-no { width: 1.5rem; text-align: center; padding-top: .35rem; }
.ticket-row .ticket-input { flex: 1 1 8rem; min-width: 0; width: auto; }
/* a number that did not match the draw: plain, not highlighted */
.ball-plain, .ball-plain.ball-sm { background: transparent; background-image: none; box-shadow: none; text-shadow: none; color: var(--bs-body-color); border: 2px solid var(--bs-border-color); }
.ball-plain::after { display: none; }