:root{
  --bg:#F3F5F4;--card:#FFFFFF;--card-alt:#F8FAF9;--ink:#121E1A;--muted:#52635D;--line:#D5DFDA;
  --red:#CE1126;--red-dark:#9E0B1C;--on-red:#FFFFFF;
  --gold:#F2A900;--gold-dark:#C68600;--on-gold:#14201C;
  --c0:#CE1126;--c1:#F2A900;--c2:#1B7F4B;--c3:#1D5FBF;--c4:#7A3FB5;--c5:#14201C;--c6:#D95D24;
  --ring:#1D5FBF;--hit:#157F46;--warn:#B86B00;
  --ball-scale:1;
  color-scheme:light;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
[data-theme=dark]{
  --bg:#0B1310;--card:#131F1B;--card-alt:#192823;--ink:#ECF3F0;--muted:#98ADA5;--line:#253730;
  --red:#EF4444;--red-dark:#B81D2E;--on-red:#FFFFFF;
  --gold:#F5B316;--gold-dark:#D49600;--on-gold:#121E1A;
  --c0:#EF4444;--c1:#F5B82E;--c2:#2CAE6E;--c3:#498DEC;--c4:#9F70D8;--c5:#334A42;--c6:#E86F38;
  --ring:#7DB0FF;--hit:#37C978;--warn:#F5B82E;
  color-scheme:dark;
}
body.parlour-mode{
  font-size:17.5px;
  --ball-scale:1.24;
}
*,*::before,*::after{box-sizing:border-box;min-width:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15.5px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(68px + max(8px, env(safe-area-inset-bottom)));
  transition:background-color .2s ease,color .2s ease;
  overflow-x:hidden;
  width:100%;
  max-width:100vw;
  position:relative;
}
img,svg,canvas,video{max-width:100%;height:auto}
p,span,h1,h2,h3,h4,div,label{overflow-wrap:break-word}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom)) !important;}
@media(min-width:768px){body{padding-bottom:96px !important;}}
h1,h2,h3,h4{margin:0;line-height:1.22}
h1{font-size:1.48rem;font-weight:800}
h2{font-size:1.14rem;font-weight:800;margin-bottom:.35rem}
h3{font-size:.95rem;font-weight:700}
@media(max-width:480px){
  h1{font-size:1.25rem}
  h2{font-size:1.05rem}
  h3{font-size:.9rem}
}
.wrap{
  max-width:1140px;margin:0 auto;padding:0 16px;
  width:100%;min-width:0;box-sizing:border-box;
}
@media(max-width:480px){.wrap{padding:0 12px}}
.muted{color:var(--muted)}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip:focus{
  position:fixed;top:8px;left:8px;z-index:99;
  background:var(--card);color:var(--ink);padding:12px 18px;border-radius:8px;
  border:2.5px solid var(--ring);box-shadow:0 6px 20px rgba(0,0,0,.35);font-weight:800;
}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* Global Form Controls & Inputs */
input,select,textarea{
  font:inherit;color:var(--ink);background:var(--card-alt);
  border:1.5px solid var(--line);border-radius:10px;padding:0 12px;
  min-height:42px;width:100%;max-width:100%;min-width:0;
  box-sizing:border-box;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{padding:8px 12px;min-height:72px;resize:vertical}
input:focus,select:focus,textarea:focus{
  border-color:var(--ring);box-shadow:0 0 0 3px rgba(29,95,191,.18);
}
label,.field{display:grid;gap:4px;min-width:0;max-width:100%;text-align:left}
.field-label{font-size:.78rem;font-weight:700;color:var(--muted);line-height:1.2}

/* Header & Primary Navigation */
.top{
  position:sticky;top:0;z-index:40;background:var(--card);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top);
  box-shadow:0 2px 10px rgba(0,0,0,.04);transition:box-shadow .2s ease,border-color .2s;
  width:100%;max-width:100%;
}
.top.scrolled{box-shadow:0 4px 18px rgba(0,0,0,.09)}
.bar{
  display:flex;align-items:center;justify-content:space-between;
  min-height:50px;gap:8px;padding:4px 0;min-width:0;max-width:100%;
}
.brand{
  display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.15rem;
  color:var(--ink);text-decoration:none;min-height:40px;min-width:0;flex-shrink:0;
}
.brand svg{flex-shrink:0}
.brand > div{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand-sub{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:block;line-height:1.1;
}
@media(max-width:540px){.brand-sub{display:none}}
@media(max-width:420px){.brand{font-size:1.02rem;gap:6px}.brand svg{width:26px;height:26px}}

/* Main Desktop / Tablet Navigation Hidden (Consolidated permanently into Bottom Dock) */
.main-menu{display:none !important;}

/* Permanent Bottom Navigation Bar (Mobile, Tablet & Desktop) */
.mobile-tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--card);
  border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  padding:4px 6px max(8px, env(safe-area-inset-bottom));
  box-shadow:0 -2px 16px rgba(0,0,0,.08);transition:background .2s,border-color .2s;
  width:100%;max-width:100vw;box-sizing:border-box;
}
@media(min-width:768px){
  .mobile-tabbar{
    left:50%;right:auto;transform:translateX(-50%);
    width:calc(100% - 32px);max-width:540px;
    bottom:16px;border-radius:20px;border:1.5px solid var(--line);
    box-shadow:0 10px 32px rgba(0,0,0,.18);
    background:var(--card);
    padding:6px 12px;
  }
}
.mobile-tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 2px;border-radius:10px;color:var(--muted);text-decoration:none;
  font-size:.74rem;font-weight:700;line-height:1;min-height:48px;position:relative;
  transition:color .15s,background .15s;
}
.mobile-tab svg{width:21px;height:21px;stroke:currentColor;stroke-width:2;fill:none}
.mobile-tab[aria-current="page"]{color:var(--red);background:var(--card-alt)}
.mobile-tab[aria-current="page"]::before{
  content:'';position:absolute;top:0;left:20%;right:20%;height:3px;
  background:var(--red);border-radius:0 0 3px 3px;
}
@media(min-width:768px){
  .mobile-tab{
    min-height:46px;
    font-size:.8rem;
    padding:6px 8px;
    border-radius:12px;
  }
  .mobile-tab:hover{
    background:var(--card-alt);
    color:var(--ink);
  }
}
.mobile-refresh-tab{
  background:transparent;border:none;cursor:pointer;font-family:inherit;color:var(--muted);width:100%;
}
.mobile-refresh-tab:hover,.mobile-refresh-tab:active{color:var(--ink)}
.mobile-refresh-tab.spinning svg,.btn.icon.spinning svg{animation:spinIcon .8s linear infinite}
@keyframes spinIcon{to{transform:rotate(360deg)}}
/* Header Actions & Tap Targets */
.header-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:0}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  padding:5px 11px;border-radius:999px;background:var(--card-alt);border:1.5px solid var(--line);
  color:var(--muted);cursor:pointer;min-height:36px;user-select:none;flex-shrink:0;
}
.status-pill:hover{border-color:var(--ink);color:var(--ink)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--hit);flex-shrink:0}
.status-pill.offline .status-dot{background:var(--warn)}
.status-popover{
  position:absolute;top:54px;right:16px;z-index:60;background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);font-size:.82rem;max-width:280px;display:grid;gap:6px;
}
.status-popover[hidden]{display:none}

@media(max-width:767px){
  /* Hide non-essential top header buttons on mobile to avoid overcrowding */
  #parlour-btn, #print-wall-chart-btn, #pwa-install-btn {
    display: none !important;
  }
  .header-actions {
    gap: 4px;
  }
}
@media(max-width:440px){
  #feed-label{display:none}
  #feed-pill{padding:4px 7px;min-width:32px;min-height:32px;justify-content:center}
  .header-actions{gap:4px}
  .btn.icon{width:36px;height:36px;min-width:36px;min-height:36px}
  .btn.icon svg{width:17px;height:17px}
}

/* Live Ticker & Pause Control */
.ticker-container{
  position:relative;background:linear-gradient(90deg,var(--red-dark),var(--red));
  display:flex;align-items:center;width:100%;max-width:100%;overflow:hidden;
}
.ticker{height:34px;overflow:hidden;flex:1;min-width:0;color:var(--on-red);font-weight:600;font-size:.85rem;white-space:nowrap}
.ticker-track{display:inline-block;padding-left:100%;line-height:34px;animation:tick 44s linear infinite}
.ticker.paused .ticker-track,.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{margin-right:2.4rem;display:inline-flex;align-items:center;gap:6px}
.ticker-track b{font-weight:800;text-underline-offset:2px}
.ticker-toggle{
  background:rgba(0,0,0,.22);color:#FFF;border:0;padding:0 10px;height:34px;
  font-size:.74rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
}
.ticker-toggle:hover{background:rgba(0,0,0,.4)}
@keyframes tick{to{transform:translateX(-100%)}}
@media(max-width:540px){.ticker-track{animation-duration:32s}}

/* Tabs Bar, Scroll Fade Masks & Schedule Strip */
.tabs-bar{position:relative;display:grid;gap:6px;padding:8px 0 4px;min-width:0;max-width:100%;overflow:hidden}
.tabs-scroll-wrap{position:relative;display:flex;align-items:center;min-width:0;max-width:100%;overflow:hidden}
.tabs{
  display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  flex:1;min-width:0;max-width:100%;padding:4px 2px;scroll-behavior:smooth;
}
.tabs::-webkit-scrollbar{display:none}
.tabs .btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;min-height:40px;
  padding:0 13px;border-radius:11px;font-size:.86rem;
}
.tab-dot{width:9px;height:9px;border-radius:50%;flex:none}
.tab-star{font-size:.84rem;color:var(--gold);margin-left:2px}

/* Daily Schedule Timeline & Mobile-Optimized Ergonomics */
.schedule-strip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  font-size: .78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--card-alt);
  border-radius: 12px;
  margin-top: 6px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.sched-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.sched-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  min-width: 0;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}

.sched-pill.next {
  border-color: rgba(206,17,38,0.55);
  background: linear-gradient(135deg, rgba(206,17,38,0.08), transparent);
}

.sched-pill-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.sched-pill-period {
  font-weight: 800;
  color: var(--ink);
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sched-pill-time {
  font-size: .68rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.sched-badge {
  padding: 3px 7px;
  border-radius: 6px;
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  flex-shrink: 0;
  letter-spacing: .02em;
  white-space: nowrap;
}

.sched-badge.completed {
  background: var(--line);
  color: var(--muted);
}

.sched-badge.next {
  background: var(--red);
  color: #FFF;
  animation: pulseRed 1.8s infinite;
  box-shadow: 0 1px 4px rgba(206,17,38,0.3);
}

.sched-badge.upcoming {
  background: var(--card-alt);
  border: 1px solid var(--line);
  color: var(--muted);
}

.sched-single-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: .82rem;
  box-sizing: border-box;
}

.sched-footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 5px;
  border-top: 1px dashed var(--line);
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}

.sched-footer-bar strong {
  color: var(--ink);
}

.sched-footer-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.sched-footer-item + .sched-footer-item::before {
  content: "·";
  margin-right: 12px;
  color: var(--muted);
}

@keyframes pulseRed {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}

/* Next Draw Countdown Clock & Banner (Item 13, 20) */
.draw-countdown-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 6px 14px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.draw-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 680px) {
  .schedule-strip {
    padding: 6px 8px;
    border-radius: 10px;
  }
  .sched-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .sched-pill {
    padding: 6px 8px !important;
    gap: 4px !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
  }
  .sched-pill-period {
    font-size: .74rem !important;
  }
  .sched-pill-time {
    font-size: .65rem !important;
  }
  .sched-badge {
    font-size: .58rem !important;
    padding: 2px 5px !important;
  }
  .sched-footer-bar {
    font-size: .68rem !important;
    gap: 2px 8px !important;
    padding-top: 4px !important;
  }
  .sched-footer-item + .sched-footer-item::before {
    margin-right: 8px;
  }
}

@media (max-width: 540px) {
  .draw-countdown-container {
    border-radius: 10px !important;
    padding: 6px 10px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 4px 8px !important;
  }
  .draw-countdown-badge {
    font-size: .78rem !important;
    width: auto !important;
    padding: 0 !important;
  }
  #ast-live-clock {
    font-size: .72rem !important;
    white-space: nowrap !important;
  }
  .schedule-strip {
    padding: 6px 8px !important;
  }
}

@media (max-width: 360px) {
  .sched-pill {
    padding: 4px 6px !important;
  }
  .sched-pill-period {
    font-size: .7rem !important;
  }
  .sched-pill-time {
    font-size: .62rem !important;
  }
  .sched-badge {
    font-size: .54rem !important;
    padding: 2px 4px !important;
  }
}

/* Guarantee strict hiding of any legacy admin or update navigation elements */
.mobile-tab[href*="admin"],
.mobile-tab[data-menu="update"],
.mobile-tab[data-menu="admin"],
.menu-item[href*="admin"],
.menu-item[data-menu="update"],
.menu-item[data-menu="admin"],
[data-menu="admin"],
[data-menu="update"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Buttons & Touch Ergonomics */
.btn{
  font:inherit;font-weight:600;min-height:42px;min-width:42px;padding:0 14px;
  border-radius:10px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;text-decoration:none;transition:transform .08s,background .15s,border-color .15s,box-shadow .15s;
  box-sizing:border-box;
}
.btn:hover{border-color:var(--muted);transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.sm{min-height:36px;min-width:36px;padding:0 11px;font-size:.82rem;border-radius:8px}
.btn.xs{min-height:28px;min-width:28px;padding:0 8px;font-size:.74rem;border-radius:6px}
.btn.on,.btn[aria-selected=true]{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.btn.primary{background:var(--red);color:var(--on-red);border-color:var(--red);box-shadow:0 2px 8px rgba(206,17,38,.24)}
.btn.primary:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.icon{padding:0;border:1.5px solid var(--line);background:var(--card-alt);width:42px;height:42px;min-height:42px;min-width:42px}
.btn.speaking{background:var(--hit);color:#FFF;border-color:var(--hit);animation:pulseGreen 1.5s infinite}
@keyframes pulseGreen{0%,100%{box-shadow:0 0 0 0 rgba(27,127,75,.4)}50%{box-shadow:0 0 0 6px rgba(27,127,75,0)}}

/* Layout, Grid & Cards */
main{padding-top:14px;padding-bottom:36px;display:grid;gap:16px;min-width:0;max-width:100%}
.page-banner{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:4px 2px;min-width:0;max-width:100%}
.page-kicker{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--red);display:block;margin-bottom:2px}
.grid{display:grid;gap:16px;min-width:0;max-width:100%}
@media(min-width:880px){.grid{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.03);transition:border-color .15s;
  min-width:0;max-width:100%;box-sizing:border-box;
}
@media(max-width:480px){.card{padding:14px;border-radius:14px}}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;min-width:0;max-width:100%}
.card-head > div:first-child{min-width:0;max-width:100%}
.chip-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%}

/* All 7 Games Overview Board */
.board-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:10px;margin-top:8px;min-width:0;max-width:100%;
}
.mini-game-card{
  background:var(--card-alt);border:1.5px solid var(--line);border-top:4px solid var(--g-accent,var(--red));
  border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;display:grid;gap:6px;
  transition:border-color .15s,transform .1s,box-shadow .15s;min-width:0;
}
.mini-game-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.05)}
.mini-game-card.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.mini-game-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.mini-game-top strong{font-size:.95rem;font-weight:800}
.mini-game-top small{font-size:.75rem;color:var(--muted);font-weight:700}
.mini-game-meta{font-size:.76rem;color:var(--muted);display:flex;justify-content:space-between;gap:4px}
.jp-badge{background:linear-gradient(135deg,var(--gold),#FFD040);color:#14201C;font-size:.7rem;font-weight:800;padding:1px 6px;border-radius:4px}

/* Hero Latest Draw Card */
.hero{border-top:5px solid var(--hero-accent,var(--red));display:grid;gap:12px;min-width:0;max-width:100%}
.hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;min-width:0;max-width:100%}
.hero-title-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
.draw-badge{
  display:inline-flex;align-items:center;gap:4px;background:var(--ink);color:var(--bg);
  font-weight:800;font-size:.84rem;padding:4px 10px;border-radius:8px;letter-spacing:.02em;cursor:pointer;
}
.draw-badge:hover{opacity:.85}
.period-badge{display:inline-flex;align-items:center;gap:4px;background:var(--card-alt);border:1px solid var(--line);font-weight:700;font-size:.8rem;padding:4px 10px;border-radius:8px;color:var(--ink)}
.mark-hero-badge{
  display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--gold),#FFD04D);
  color:#14201C;font-weight:800;font-size:1.02rem;padding:6px 14px;border-radius:10px;
  box-shadow:0 2px 8px rgba(242,169,0,.28);
}
.day-draws{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 10px;background:var(--card-alt);border-radius:10px;border:1px solid var(--line);min-width:0;max-width:100%}
.day-draws-label{font-size:.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}

/* Official 3D Lottery Balls & Color/Letter Rules */
.balls-stage{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;min-height:74px;padding:6px 0;min-width:0;max-width:100%}
.balls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0;max-width:100%}
.ball-unit{display:inline-flex;flex-direction:column;align-items:center;gap:4px;text-align:center;position:relative}
.ball{
  --bc:var(--c0);--fg:#FFFFFF;--bd:transparent;
  width:calc(54px * var(--ball-scale));height:calc(54px * var(--ball-scale));border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:calc(1.24rem * var(--ball-scale));line-height:1;letter-spacing:-.02em;
  color:var(--fg);border:2.5px solid var(--bd);
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.62) 0 13%,rgba(255,255,255,.15) 14% 28%,transparent 29%),var(--bc);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.28),0 3px 6px rgba(0,0,0,.14);
  user-select:none;position:relative;
  transition:transform .12s,box-shadow .12s;
  animation:ballPop .22s cubic-bezier(.2,.9,.3,1.1) both;
  flex-shrink:0;
}
.ball:hover{transform:translateY(-2px);box-shadow:inset 0 -6px 10px rgba(0,0,0,.32),0 5px 12px rgba(0,0,0,.2)}
@keyframes ballPop{from{transform:scale(.82);opacity:.4}to{transform:scale(1);opacity:1}}
.hero-balls .ball{width:calc(66px * var(--ball-scale));height:calc(66px * var(--ball-scale));font-size:calc(1.52rem * var(--ball-scale))}

@media(max-width:600px){
  .hero-balls .ball{
    width:calc(48px * var(--ball-scale));height:calc(48px * var(--ball-scale));
    font-size:calc(1.18rem * var(--ball-scale));
  }
  .hero-balls .ball.sym-ball{
    width:calc(42px * var(--ball-scale));height:calc(42px * var(--ball-scale));
    font-size:calc(.88rem * var(--ball-scale));
  }
  .hero-balls .ball-sep{min-height:48px;padding:0 2px}
  .balls{gap:6px}
  .balls-stage{gap:8px}
}
@media(max-width:360px){
  .hero-balls .ball{
    width:calc(40px * var(--ball-scale));height:calc(40px * var(--ball-scale));
    font-size:calc(1rem * var(--ball-scale));
  }
  .hero-balls .ball.sym-ball{
    width:calc(36px * var(--ball-scale));height:calc(36px * var(--ball-scale));
    font-size:calc(.8rem * var(--ball-scale));
  }
  .draw-badge,.period-badge,.mark-hero-badge{font-size:.74rem;padding:3px 7px}
}

/* Official Ball Colors (Chamber & Authentic Spec) */
/* Play Whe: Gold / Yellow Main Winning Ball */
.ball.pw-main,.ball.b1{
  --bc:linear-gradient(145deg,#FFD040,#F2A900 65%,#C98600);
  --fg:#14201C;--bd:#B87900;
  box-shadow:inset 0 -6px 10px rgba(120,75,0,.3),0 3px 8px rgba(242,169,0,.28);
}
/* Red Balls: MB/MU/MX/M, Cash Pot Multiplier, Fast Cash MD */
.ball.ball-red,.ball.b0,.ball.ball-multiplier-cashpot{
  --bc:linear-gradient(145deg,#FF475B,#CE1126 62%,#8F0716);
  --fg:#FFFFFF;--bd:#9E0B1C;
  box-shadow:inset 0 -6px 10px rgba(60,0,8,.38),0 3px 8px rgba(206,17,38,.3);
}
/* White Balls: Cash Pot Main Balls, Fast Cash Jackpot Numbers, Play Whe WB */
.ball.ball-white,.ball.ball-cashpot{
  --bc:linear-gradient(145deg,#FFFFFF,#F0F4F2 65%,#D6DFDB);
  --fg:#121E1A;--bd:#121E1A;
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.12);
}
[data-theme=dark] .ball.ball-white,[data-theme=dark] .ball.ball-cashpot{
  --bc:linear-gradient(145deg,#FFFFFF,#E8F0EC 68%,#C8D6D0);
  --fg:#0D1613;--bd:#DCE6E2;
  box-shadow:inset 0 -5px 8px rgba(0,0,0,.22),0 0 10px rgba(255,255,255,.18);
}
/* Orange Balls: Lotto Plus Multiplier, Fast Cash ME, Pick 2 2nd Ball, Pick 4 2nd Ball */
.ball.ball-orange,.ball.ball-multiplier-lotto,.ball.b6{
  --bc:linear-gradient(145deg,#FF8A47,#E0561B 65%,#9E3508);
  --fg:#FFFFFF;--bd:#B34010;
  box-shadow:inset 0 -6px 10px rgba(100,20,0,.3),0 3px 8px rgba(224,86,27,.28);
}
/* Darker Shade Orange Ball: Pick 4 3rd Ball */
.ball.ball-dark-orange {
  --bc: linear-gradient(145deg, #FF6E40, #E64A19 55%, #BF360C 85%, #870000);
  --fg: #FFFFFF; --bd: #BF360C;
  box-shadow: inset 0 -6px 10px rgba(120,30,0,.4), 0 3px 8px rgba(191,54,12,.32);
}
/* Off-Yellow Tang Ball: Pick 4 4th Ball */
.ball.ball-yellow-tang {
  --bc: linear-gradient(145deg, #FFE873, #FFB800 55%, #E69500 80%, #C47500);
  --fg: #14201C; --bd: #C47500;
  box-shadow: inset 0 -6px 10px rgba(160,90,0,.32), 0 3px 8px rgba(245,158,11,.3);
}
/* Yellow Balls: Lotto Plus Power Ball & Win for Life Cash Ball */
.ball.ball-yellow,.ball.ball-powerball,.ball.ball-cashball{
  --bc:linear-gradient(145deg,#FFF066,#FACC15 55%,#EAB308 80%,#CA8A04);
  --fg:#14201C;--bd:#CA8A04;
  box-shadow:inset 0 -6px 10px rgba(161,98,7,.35),0 3px 8px rgba(234,179,8,.3);
}
/* Light Blue Balls: Lotto Plus Main Winning Numbers (5 of 35) */
.ball.ball-light-blue,.ball.ball-lottoplus{
  --bc:linear-gradient(145deg,#BAE6FD,#60A5FA 50%,#3B82F6 80%,#2563EB);
  --fg:#FFFFFF;--bd:#3B82F6;
  box-shadow:inset 0 -6px 10px rgba(29,78,216,.3),0 3px 8px rgba(59,130,246,.3);
}
/* Medium Blue Balls: Fast Cash Winning Number (01–36) */
.ball.ball-medium-blue,.ball.ball-fastcash{
  --bc:linear-gradient(145deg,#60A5FA,#2563EB 55%,#1D4ED8 85%,#1E40AF);
  --fg:#FFFFFF;--bd:#1D4ED8;
  box-shadow:inset 0 -6px 10px rgba(30,64,175,.35),0 3px 8px rgba(37,99,235,.32);
}
/* Darker Shade Blue Balls: Win for Life Numbers (Darker than Fast Cash) */
.ball.ball-dark-blue,.ball.ball-winforlife{
  --bc:linear-gradient(145deg,#2563EB,#1D4ED8 40%,#1E3A8A 75%,#0F172A);
  --fg:#FFFFFF;--bd:#1E3A8A;
  box-shadow:inset 0 -6px 10px rgba(15,23,42,.5),0 3px 8px rgba(30,58,138,.35);
}
/* Green Balls: Pick 2 and Pick 4 (Chamber Spec) */
.ball.ball-green,.ball.ball-pick2,.ball.ball-pick4,.ball.b2{
  --bc:linear-gradient(145deg,#34D399,#10B981 50%,#059669 80%,#047857);
  --fg:#FFFFFF;--bd:#047857;
  box-shadow:inset 0 -6px 10px rgba(4,120,87,.35),0 3px 8px rgba(16,185,129,.3);
}
.ball.b3{--bc:linear-gradient(145deg,#3B82F6,#1D5FBF 65%,#103A7A);--fg:#FFF}
.ball.b4{--bc:linear-gradient(145deg,#9B5DE5,#7A3FB5 65%,#4E237A);--fg:#FFF}
.ball.b5{--bc:linear-gradient(145deg,#374B43,#1D2C26 65%,#0E1714);--fg:#FFF}

/* Estimated Jackpot Banner for Lotto Plus */
.hero-lotto-jackpot-strip {
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(245,158,11,.15));
  border: 1.5px solid rgba(59,130,246,.4);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 6px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.lotto-jp-tag {
  font-size: .8rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .03em;
  display: flex;
  align-items: center;
  gap: 4px;
}
.lotto-jp-amount {
  font-size: 1.28rem;
  font-weight: 900;
  color: #B87900;
  letter-spacing: -.02em;
}
[data-theme=dark] .lotto-jp-amount { color: #FFD040; }
.lotto-jp-sub {
  font-size: .75rem;
  color: var(--muted);
  width: 100%;
}
.lotto-history-jp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(245,158,11,.15);
  color: #B87900;
  border: 1px solid rgba(245,158,11,.35);
  font-size: .72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  margin-bottom: 4px;
}
[data-theme=dark] .lotto-history-jp-badge { color: #FFD040; }
.mini-lotto-jp {
  font-size: .7rem;
  font-weight: 800;
  color: #B87900;
  background: rgba(245,158,11,.12);
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 3px;
}
[data-theme=dark] .mini-lotto-jp { color: #FFD040; }

.ball-cap.cap-orange{color:var(--gold-dark);color:#EA580C}
[data-theme=dark] .ball-cap.cap-orange{color:#FB923C}

.ball.sym-ball{font-size:calc(1.02rem * var(--ball-scale));letter-spacing:-.04em}
.hero-balls .ball.sym-ball{width:calc(56px * var(--ball-scale));height:calc(56px * var(--ball-scale));font-size:calc(1.12rem * var(--ball-scale))}
.ball.aux-ball{outline:2.5px dashed var(--gold);outline-offset:3px}
.ball.match-glow{box-shadow:0 0 0 4px var(--gold),0 0 16px var(--gold)!important}
.ball.locked{outline:3px solid var(--hit);outline-offset:3px}
.lock-badge{position:absolute;top:-6px;right:-6px;background:var(--hit);color:#FFF;font-size:.65rem;border-radius:50%;width:18px;height:18px;display:grid;place-items:center;font-weight:800}

.ball-cap{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);line-height:1.1}
.ball-cap.cap-red{color:var(--red)}
.ball-cap.cap-gold{color:var(--gold-dark)}
[data-theme=dark] .ball-cap.cap-gold{color:var(--gold)}
.ball-sep{display:flex;align-items:center;justify-content:center;padding:0 4px;color:var(--muted);font-weight:800;font-size:.85rem;min-height:54px;flex-shrink:0}
.hero-balls .ball-sep{min-height:66px}

/* Color Timeline Ribbon & Legend */
.color-timeline{
  display:flex;align-items:center;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:8px 10px;background:var(--card-alt);border:1px solid var(--line);border-radius:10px;
  scrollbar-width:none;min-width:0;max-width:100%;box-sizing:border-box;
}
.tl-legend{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;color:var(--muted);margin-right:4px;flex-shrink:0}
.tl-pill{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;
  font-size:.72rem;font-weight:800;cursor:pointer;white-space:nowrap;border:1px solid var(--line);
  transition:transform .1s,box-shadow .1s;flex-shrink:0;
}
.tl-pill:hover{transform:scale(1.05);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.tl-pill.red-hit{background:rgba(206,17,38,.12);color:var(--red);border-color:rgba(206,17,38,.35)}
.tl-pill.white-hit{background:var(--card);color:var(--ink)}

/* Countdown & Toolbar */
.hero-subrow{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.88rem;
  min-width:0;max-width:100%;
}
.prev-draw-box{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card-alt);padding:6px 10px;border-radius:8px;border:1px solid var(--line);cursor:pointer}
.prev-draw-box:hover{border-color:var(--ink)}
.next{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px}
.next strong{font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--red);transition:color .2s}
.next strong.urgent{color:#DC2626;animation:blinkUrgent 1s infinite}
@keyframes blinkUrgent{0%,100%{opacity:1}50%{opacity:.5}}
@media(max-width:600px){
  .hero-subrow{flex-direction:column;align-items:stretch;gap:8px}
  .next{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--card-alt);padding:8px 12px;border-radius:8px;border:1px solid var(--line);box-sizing:border-box}
}
.hero-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:8px;padding-top:8px;border-top:1px solid var(--line);min-width:0;max-width:100%;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
@media(max-width:640px){
  /* Keep only the primary actions in hero toolbar on mobile; secondary ones move to bottom */
  .hero-actions{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    width: 100%;
  }
  .hero-actions .btn{
    width: 100%;
    font-size: .8rem;
    padding: 0 8px;
    min-height: 38px;
    text-align: center;
    justify-content: center;
  }
  #print-btn {
    display: none !important;
  }
}

/* Prize Accordion */
details.prize-box{border:1px solid var(--line);border-radius:10px;background:var(--card-alt);padding:8px 12px;font-size:.86rem;min-width:0;max-width:100%}
details.prize-box summary{cursor:pointer;font-weight:700;display:flex;justify-content:space-between;align-items:center}
details.prize-box summary .chevron{transition:transform .2s ease}
details.prize-box[open] summary .chevron{transform:rotate(180deg)}
.prize-list{margin:8px 0 0;padding-left:18px;display:grid;gap:5px}

/* Payout Calculator Card */
.calc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;max-width:100%}
.wager-steppers{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.wager-step-btn{
  background:var(--card-alt);border:1px solid var(--line);border-radius:6px;
  padding:3px 8px;font-size:.76rem;font-weight:800;cursor:pointer;
}
.wager-step-btn:hover{background:var(--ink);color:var(--bg)}
.calc-out-box{
  background:var(--card-alt);border:1.5px solid var(--line);border-radius:12px;
  padding:14px;margin-top:10px;display:grid;gap:6px;min-width:0;max-width:100%;
}
.calc-payout-total{font-size:1.42rem;font-weight:800;color:var(--hit)}
.calc-profit-line{font-size:.84rem;color:var(--muted);font-weight:700}
@media(max-width:560px){
  .calc-row{flex-direction:column!important;align-items:stretch!important}
  .calc-row label{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important}
  #calc-tier,.calc-row select{width:100%!important;max-width:100%!important;min-width:0!important}
  .card-head{flex-direction:column;align-items:stretch;gap:10px}
  .card-head .chip-row{width:100%}
  .card-head select{width:100%!important;max-width:100%!important}
}

/* Ticket Checker & Quick Pick */
.ticket-input-row{display:grid;gap:8px;grid-template-columns:1fr 125px;min-width:0;max-width:100%}
@media(max-width:420px){.ticket-input-row{grid-template-columns:1fr}}
.ticket-validation{font-size:.78rem;font-weight:700;margin-top:4px;padding:3px 8px;border-radius:6px}
.ticket-validation.err{background:rgba(206,17,38,.12);color:var(--red)}
.ticket-validation.ok{background:rgba(27,127,75,.12);color:var(--hit)}
.saved-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-width:0;max-width:100%}
.lucky-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--card-alt);
  border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:.8rem;font-weight:700;
}
.lucky-chip-del{
  background:transparent;border:0;color:var(--muted);cursor:pointer;
  padding:0 2px;font-size:.85rem;line-height:1;min-width:24px;min-height:24px;
}
.lucky-chip-del:hover{color:var(--red)}
.qp-slip-list{display:grid;gap:6px;margin-top:10px;min-width:0;max-width:100%}
.slip-board{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 12px;border:1px dashed var(--line);border-radius:8px;background:var(--card-alt);
  min-width:0;max-width:100%;flex-wrap:wrap;
}
.slip-label{font-weight:800;font-size:.82rem;color:var(--muted)}

/* Daily 4-Draw Matrix Table (History) */
.matrix-wrap{
  width:100%;max-width:100%;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.pw-matrix{width:100%;border-collapse:collapse;font-size:.86rem;min-width:500px}
.pw-matrix th,.pw-matrix td{border:1px solid var(--line);padding:8px 10px;text-align:center;vertical-align:middle}
.pw-matrix thead th{
  position:sticky;top:0;background:var(--card-alt);z-index:2;
  font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
}
.pw-matrix td.date-col{text-align:left;font-weight:700;white-space:nowrap;background:var(--card-alt)}
.matrix-cell{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px;border-radius:8px;transition:background .12s,opacity .15s}
.matrix-cell:hover{background:var(--card-alt)}
.matrix-cell.dimmed{opacity:.28}
.matrix-mark{font-weight:700;font-size:.78rem;line-height:1.1}
.matrix-syms{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.mini-sym{font-size:.64rem;font-weight:800;padding:1px 5px;border-radius:999px;line-height:1.2}
.mini-sym.r{background:var(--red);color:#FFF}
.mini-sym.w{background:#FFF;color:#121E1A;border:1px solid #121E1A}

/* Archive Filters & Summary */
.filter-bar{
  display:grid;gap:8px;margin:8px 0 10px;
  min-width:0;max-width:100%;grid-template-columns:1fr;
}
@media(min-width:760px){.filter-bar{grid-template-columns:2fr 1fr 1fr 1fr auto}}
.filter-sub-bar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:-4px;
  min-width:0;max-width:100%;
}
@media(max-width:420px){.filter-sub-bar{grid-template-columns:1fr}}

.date-presets-row{
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:8px;
  min-width:0;max-width:100%;
}
.preset-btn{
  background:var(--card-alt);border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap;
}
.preset-btn:hover{background:var(--ink);color:var(--bg)}
.archive-summary-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;
  padding:10px 14px;background:var(--card-alt);border:1.5px solid var(--line);border-radius:12px;
  font-size:.82rem;margin-bottom:12px;min-width:0;max-width:100%;
}
.summary-kpi-card{display:grid;gap:2px}
.summary-kpi-card small{font-size:.68rem;text-transform:uppercase;color:var(--muted);font-weight:800}
.summary-kpi-card strong{font-size:1.02rem;font-weight:800}
.empty-archive-state{
  text-align:center;padding:32px 16px;background:var(--card-alt);border-radius:12px;
  border:1.5px dashed var(--line);margin:12px 0;display:grid;place-items:center;gap:8px;
}

/* Past Draws List */
.list{list-style:none;margin:8px 0;padding:0;min-width:0;max-width:100%}
.list li{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 8px;border-bottom:1px solid var(--line);min-height:58px;
  border-radius:8px;transition:background .12s;min-width:0;max-width:100%;
}
.list li.clickable{cursor:pointer}
.list li.clickable:hover{background:var(--card-alt)}
.list .balls{min-height:0;gap:6px;flex-wrap:wrap}
.list .ball{width:36px;height:36px;font-size:.92rem}
.list .ball.sym-ball{width:32px;height:32px;font-size:.74rem}
.list .ball-cap{font-size:.6rem}
.when{font-size:.84rem;color:var(--muted);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.repeat-tag{font-size:.68rem;font-weight:800;background:var(--gold);color:#14201C;padding:1px 6px;border-radius:4px;text-transform:uppercase}
.partner-tag{font-size:.68rem;font-weight:800;background:var(--c2);color:#FFF;padding:1px 6px;border-radius:4px;text-transform:uppercase}
@media(max-width:480px){
  .list li{flex-wrap:wrap;gap:6px;padding:8px 4px}
  .when{
    width:100%;flex-direction:row;justify-content:space-between;align-items:center;
    border-top:1px dashed var(--line);padding-top:4px;margin-top:2px;font-size:.78rem;
  }
}

/* Table View in Archive */
#history-table-wrap{
  width:100%;max-width:100%;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.compact-table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:520px}
.compact-table th,.compact-table td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.compact-table th{font-size:.75rem;text-transform:uppercase;color:var(--muted);background:var(--card-alt);cursor:pointer}
.compact-table th:hover{color:var(--ink)}
.compact-table tr:hover{background:var(--card-alt);cursor:pointer}

/* Stats Heatmap, Inspector & Chart Tooltip */
.heatmap-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px;min-width:0;max-width:100%}
.heat-cell{
  border:1.5px solid var(--line);border-radius:10px;padding:6px 4px;text-align:center;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .1s,border-color .15s,box-shadow .15s;min-width:0;
}
.heat-cell:hover,.heat-cell.selected{border-color:var(--ink);transform:scale(1.05);box-shadow:0 3px 8px rgba(0,0,0,.12)}
.heat-cell strong{font-size:.92rem;font-weight:800}
.heat-cell small{font-size:.66rem;opacity:.85;line-height:1.1}
@media(max-width:380px){
  .heatmap-grid{gap:3px}
  .heat-cell{padding:4px 2px}
  .heat-cell strong{font-size:.82rem}
  .heat-cell small{font-size:.6rem}
}
.inspector-box{
  background:var(--card-alt);border:1.5px solid var(--line);border-radius:12px;
  padding:14px;margin-top:12px;display:grid;gap:8px;min-width:0;max-width:100%;
}
.inspector-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.chart-tooltip{
  position:fixed;z-index:90;background:var(--ink);color:var(--bg);
  padding:6px 10px;border-radius:6px;font-size:.78rem;font-weight:700;
  pointer-events:none;transform:translate(-50%,-120%);box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.chart-tooltip[hidden]{display:none}

/* Marks Category Pills & Jump Bar */
.mark-cat-pills{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0;min-width:0;max-width:100%}
.mark-jump-bar{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;min-width:0;max-width:100%}
.jump-num{
  width:28px;height:28px;border-radius:6px;border:1px solid var(--line);
  background:var(--card-alt);color:var(--ink);font-size:.74rem;font-weight:800;
  cursor:pointer;display:grid;place-items:center;transition:background .1s;flex-shrink:0;
}
.jump-num:hover{background:var(--gold);color:#14201C;border-color:var(--gold-dark)}
.mlist{max-height:520px;overflow-y:auto;overflow-x:hidden}
.mlist li{justify-content:flex-start;align-items:flex-start;gap:10px}
.mark-info{flex:1;display:grid;gap:2px;min-width:0}
.mark-meta-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.tag{font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--card-alt);border:1px solid var(--line);color:var(--muted)}
.tag.hot{background:rgba(206,17,38,.12);color:var(--red);border-color:rgba(206,17,38,.3)}
.tag.cold{background:rgba(29,95,191,.12);color:var(--c3);border-color:rgba(29,95,191,.3)}
.tag.today{background:var(--gold);color:#14201C;border-color:var(--gold-dark)}
.marks-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(125px,100%),1fr));
  gap:8px;max-height:540px;overflow-y:auto;overflow-x:hidden;padding:4px 0;min-width:0;max-width:100%;
}
.mark-tile{
  background:var(--card-alt);border:1px solid var(--line);border-radius:10px;padding:8px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:0;
}
.mark-tile:hover{border-color:var(--ink)}
.mark-tile.won-today{border:2px solid var(--gold);background:rgba(242,169,0,.08)}

/* Stats SVG Chart & KPIs */
.seg{display:flex;gap:5px;flex-wrap:wrap;min-width:0;max-width:100%}
.bars{display:grid;gap:6px;align-content:start;margin-top:8px;min-width:0;max-width:100%}
.bar-row{display:grid;grid-template-columns:88px 1fr 48px;gap:8px;align-items:center;font-size:.82rem;font-variant-numeric:tabular-nums;min-width:0;max-width:100%}
.bar-row i{display:block;height:13px;border-radius:7px;background:var(--gold);min-width:3px}
.bar-row.cold i{background:var(--c3)}
.bar-row.gap i{background:var(--c4)}
.bar-row.line-bar i{background:var(--c2)}
.bar-row.red-bar i{background:var(--red)}
.stat-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(135px,100%),1fr));gap:10px;margin-top:8px;min-width:0;max-width:100%}
.kpi-box{background:var(--card-alt);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.kpi-box small{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:block}
.kpi-box strong{font-size:1.02rem;font-weight:800;display:block;margin-top:2px}
.svg-chart{
  width:100%;max-width:100%;height:auto;max-height:230px;background:var(--card-alt);
  border:1px solid var(--line);border-radius:12px;padding:8px;margin-top:8px;box-sizing:border-box;
}

/* Admin Flash Animation */
@keyframes flashYellow{0%{background:rgba(242,169,0,.4)}100%{background:var(--bg)}}
.flash-highlight{animation:flashYellow .8s ease}

/* Modals & Toasts */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;
  display:grid;place-items:center;padding:16px;
}
.modal-backdrop[hidden]{display:none}
.modal-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  max-width:min(540px,calc(100vw - 24px));width:100%;padding:18px;display:grid;gap:12px;
  box-shadow:0 16px 40px rgba(0,0,0,.3);max-height:90vh;overflow-y:auto;box-sizing:border-box;
}
@media(max-width:400px){
  .modal-backdrop{padding:8px}
  .modal-card{padding:14px}
}
.toast{
  position:fixed;bottom:76px;right:16px;z-index:95;background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:10px;font-size:.86rem;font-weight:700;
  box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .2s,transform .2s;
  max-width:calc(100vw - 32px);box-sizing:border-box;
}
.toast[hidden]{display:none}
.back-top{position:fixed;bottom:76px;left:16px;z-index:60;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.back-top[hidden]{display:none}

/* Footer & Reference Links */
.foot{
  border-top:1px solid var(--line);padding:24px 0 36px;
  background:var(--card-alt);font-size:.78rem;color:var(--muted);line-height:1.6;
  min-width:0;max-width:100%;
}
.discovery-links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;min-width:0;max-width:100%}
.discovery-links a{color:var(--ink);font-weight:700;text-decoration:none}
.discovery-links a:hover{text-decoration:underline}

/* Play Whe Jackpot Numbers Promotion Banner & Balls */
.promo-banner{
  background:linear-gradient(135deg,rgba(242,169,0,.12),rgba(206,17,38,.07));
  border:1.5px solid rgba(242,169,0,.45);
  border-radius:14px;padding:12px 14px;margin:6px 0 10px;
  display:grid;gap:8px;box-sizing:border-box;min-width:0;max-width:100%;
}
[data-theme=dark] .promo-banner{
  background:linear-gradient(135deg,rgba(242,169,0,.18),rgba(206,17,38,.14));
  border-color:rgba(242,169,0,.55);
}
.promo-banner[hidden]{display:none!important}
.promo-banner-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
.promo-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.promo-badge{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--red);color:#FFF;padding:2px 7px;border-radius:999px;flex-shrink:0;
}
.promo-title{font-size:1.02rem;font-weight:800;color:var(--ink)}
.promo-pool-box{
  display:flex;flex-direction:column;align-items:flex-end;background:var(--card);
  padding:4px 10px;border-radius:8px;border:1px solid var(--line);flex-shrink:0;
}
.promo-pool-box small{font-size:.65rem;font-weight:700;text-transform:uppercase;color:var(--muted)}
.promo-pool-val{
  font-size:1.24rem;font-weight:900;color:#B87900;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
[data-theme=dark] .promo-pool-val{color:#FFD040}
.promo-desc{margin:0;font-size:.82rem;line-height:1.45;color:var(--ink);opacity:.9}
.promo-draw-jp-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:6px;
  border-top:1px dashed rgba(242,169,0,.35);min-width:0;max-width:100%;
}
.promo-draw-jp-row[hidden]{display:none!important}
.promo-jp-label{font-size:.78rem;font-weight:800;color:var(--muted)}
.promo-jp-balls{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.jp-ball{
  width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;
  font-size:.84rem;font-weight:800;background:linear-gradient(145deg,#FFE873,#F2A900 65%,#C98600);
  color:#14201C;border:1.5px solid #B87900;
  box-shadow:inset 0 -3px 6px rgba(120,75,0,.35),0 2px 4px rgba(0,0,0,.15);
  font-variant-numeric:tabular-nums;flex-shrink:0;
}
@media(max-width:480px){
  .promo-banner{padding:10px 12px}
  .promo-pool-box{align-items:flex-start;width:100%}
  .promo-title{font-size:.92rem}
  .promo-pool-val{font-size:1.12rem}
  .jp-ball{width:28px;height:28px;font-size:.76rem}
}

/* Hero Jackpot Numbers Box */
.hero-jackpot-box {
  background: linear-gradient(135deg, rgba(242,169,0,.15), rgba(206,17,38,.08));
  border: 1.5px solid rgba(242,169,0,.5);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 6px 0 10px;
  display: grid;
  gap: 8px;
}
.hero-jackpot-box[hidden] { display: none !important; }
.hero-jackpot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.hero-jackpot-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}
.hero-jackpot-pool {
  font-size: 1.05rem;
  font-weight: 900;
  color: #B87900;
  background: var(--card);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}
[data-theme=dark] .hero-jackpot-pool { color: #FFD040; }
.hero-jackpot-balls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Official Estimated Winnings / Prizes Card */
.prizes-content {
  display: grid;
  gap: 12px;
}
.prizes-jackpot-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(206,17,38,.08), rgba(242,169,0,.15));
  border: 1.5px solid rgba(242,169,0,.5);
  border-radius: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.prizes-jackpot-label {
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
}
.prizes-jackpot-sub {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 2px;
}
.prizes-jackpot-amount {
  font-size: 1.35rem;
  font-weight: 900;
  color: #B87900;
  letter-spacing: -.02em;
}
[data-theme=dark] .prizes-jackpot-amount { color: #FFD040; }
.prize-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.prize-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  text-align: left;
}
.prize-table th, .prize-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.prize-table th {
  background: var(--card-alt);
  font-weight: 800;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
}
.prize-table tr:last-child td { border-bottom: none; }
.prize-table tr:hover td { background: var(--card-alt); }
.prize-amount {
  font-weight: 800;
  color: var(--red);
}

@media(max-width: 680px) {
  .prize-table-wrap {
    border: none;
    background: transparent;
  }
  .prize-table, .prize-table thead, .prize-table tbody, .prize-table tr, .prize-table th, .prize-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .prize-table thead {
    display: none;
  }
  .prize-table tr {
    background: var(--card-alt);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .prize-table td {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .84rem;
  }
  .prize-table td:first-child {
    font-size: .95rem;
    font-weight: 800;
    color: var(--ink);
    border-bottom: 1px dashed var(--line);
    padding-bottom: 6px;
    margin-bottom: 2px;
  }
  .prize-table td:nth-child(2)::before {
    content: "Estimated Win:";
    font-weight: 700;
    color: var(--muted);
    font-size: .76rem;
    text-transform: uppercase;
  }
  .prize-table td:nth-child(3)::before {
    content: "Wager:";
    font-weight: 700;
    color: var(--muted);
    font-size: .76rem;
    text-transform: uppercase;
  }
  .prize-table td:nth-child(4)::before {
    content: "Odds:";
    font-weight: 700;
    color: var(--muted);
    font-size: .76rem;
    text-transform: uppercase;
  }
}

/* Official Results Board Grid Layout */
.nlcb-results-tables-container {
  display: grid;
  gap: 16px;
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scroll-behavior: smooth;
}
.nlcb-results-tables-container::-webkit-scrollbar {
  width: 6px;
}
.nlcb-results-tables-container::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.play-whe-result-date-row {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
.play-whe-result-date {
  background: var(--card-alt);
  padding: 10px 16px;
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.play-whe-result-row {
  display: flex;
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
.pwr-labels-column {
  width: 150px;
  min-width: 150px;
  background: var(--card-alt);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
@media(max-width: 1023px) {
  .pwr-labels-column { display: none !important; }
}
.pwr-label {
  padding: 10px 14px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  min-height: 48px;
  display: flex;
  align-items: center;
}
.pwr-label:last-child { border-bottom: none; }
.pwr-draws-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
}
@media(min-width: 641px) and (max-width: 1023px) {
  .pwr-draws-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px;
  }
  .pwr-draw {
    background: var(--card-alt);
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    overflow: hidden;
  }
  .mobile-only-label { display: block !important; }
}
@media(max-width: 640px) {
  .pwr-draws-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }
  .pwr-draw {
    background: var(--card-alt);
    border: 1px solid var(--line) !important;
    border-radius: 8px;
    overflow: hidden;
  }
  .mobile-only-label { display: block !important; }
}
.pwr-draw {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.pwr-draw:last-child { border-right: none; }
@media(max-width: 768px) {
  .pwr-draw {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .pwr-draw:last-child { border-bottom: none; }
}
.pwr-draw-value {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  min-height: 48px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  box-sizing: border-box;
}
.pwr-draw-value:last-child { border-bottom: none; }
.pwr-draw-time {
  font-size: .85rem;
  font-weight: 800;
  color: var(--ink);
  background: rgba(0,0,0,.02);
}
[data-theme=dark] .pwr-draw-time { background: rgba(255,255,255,.02); }
.mobile-only-label {
  display: none;
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  padding: 6px 14px 0;
}
@media(max-width: 768px) {
  .mobile-only-label { display: block; }
}
.pwr-ball {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: .86rem;
  flex-shrink: 0;
  box-sizing: border-box;
}
.pwr-ball.ball-pick2-1 {
  background: linear-gradient(145deg,#60A5FA,#2563EB 55%,#1D4ED8 85%,#1E40AF);
  color: #fff;
  box-shadow: inset 0 -3px 6px rgba(30,64,175,.35), 0 2px 5px rgba(37,99,235,.28);
}
.pwr-ball.ball-pick2-2 {
  background: linear-gradient(145deg,#FF8A47,#E0561B 65%,#9E3508);
  color: #fff;
  box-shadow: inset 0 -3px 6px rgba(100,20,0,.3), 0 2px 5px rgba(224,86,27,.28);
}
.pwr-ball.ball-pick4-1 {
  background: linear-gradient(145deg,#60A5FA,#2563EB 55%,#1D4ED8 85%,#1E40AF);
  color: #fff;
  box-shadow: inset 0 -3px 6px rgba(30,64,175,.35), 0 2px 5px rgba(37,99,235,.28);
}
.pwr-ball.ball-pick4-2 {
  background: linear-gradient(145deg,#FF8A47,#E0561B 65%,#9E3508);
  color: #fff;
  box-shadow: inset 0 -3px 6px rgba(100,20,0,.3), 0 2px 5px rgba(224,86,27,.28);
}
.pwr-ball.ball-pick4-3 {
  background: linear-gradient(145deg, #FF6E40, #E64A19 55%, #BF360C 85%, #870000);
  color: #fff;
  box-shadow: inset 0 -3px 6px rgba(120,30,0,.4), 0 2px 5px rgba(191,54,12,.3);
}
.pwr-ball.ball-pick4-4 {
  background: linear-gradient(145deg, #FFE873, #FFB800 55%, #E69500 80%, #C47500);
  color: #14201C;
  box-shadow: inset 0 -3px 6px rgba(160,90,0,.32), 0 2px 5px rgba(245,158,11,.3);
}
.pwr-regular-ball {
  background: linear-gradient(135deg, #FFE873, #F2A900 65%, #C98600);
  color: #14201C;
  border: 1.5px solid #B87900;
  box-shadow: inset 0 -3px 6px rgba(120,75,0,.3), 0 2px 4px rgba(0,0,0,.12);
}
.pwr-mega-ball {
  font-size: .78rem;
  border-radius: 50%;
}
.pwr-mega-ball.checked {
  background: linear-gradient(135deg, #FF6B6B, #CE1126 70%, #8A000F);
  color: #FFF;
  border: 1.5px solid #8A000F;
  box-shadow: inset 0 -3px 6px rgba(120,0,15,.4), 0 2px 5px rgba(206,17,38,.35);
}
.pwr-mega-ball.unchecked {
  background: var(--card-alt);
  color: var(--muted);
  border: 1.5px dashed var(--line);
  opacity: .75;
}
.pwr-jackpot-ball {
  width: 28px;
  height: 28px;
  font-size: .78rem;
  background: linear-gradient(145deg, #FFE873, #F2A900 65%, #C98600);
  color: #14201C;
  border: 1.5px solid #B87900;
  box-shadow: inset 0 -2px 4px rgba(120,75,0,.3);
}
.pwr-aux-ball {
  background: linear-gradient(135deg, #FF6B6B, #CE1126 70%, #8A000F);
  color: #FFF;
  border: 1.5px solid #8A000F;
}

/* ==========================================================================
   WheWise 200 Improvements Design System Extensions
   ========================================================================== */

/* 1. Specular 3D Lighting & Proportional Ball Hierarchy */
.ball {
  position: relative;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.32), 0 4px 10px rgba(0,0,0,0.18);
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.ball::after {
  content: "";
  position: absolute;
  top: 10%;
  left: 18%;
  width: 32%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 80%);
  pointer-events: none;
}
.ball:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.36), 0 8px 18px rgba(0,0,0,0.22);
}
.ball.pw-main {
  width: clamp(52px, 7vw, 64px);
  height: clamp(52px, 7vw, 64px);
  font-size: clamp(1.28rem, 2.2vw, 1.55rem);
  font-weight: 900;
  background: radial-gradient(circle at 35% 30%, #FFF399 0%, #F2A900 45%, #C27D00 85%, #8A5400 100%);
  border: 2px solid #B87900;
  color: #121E1A;
}
.ball.sym-ball {
  width: clamp(38px, 5.2vw, 44px);
  height: clamp(38px, 5.2vw, 44px);
  font-size: clamp(0.85rem, 1.3vw, 0.98rem);
}
.ball.aux-ball {
  width: clamp(38px, 5.2vw, 44px);
  height: clamp(38px, 5.2vw, 44px);
  font-size: clamp(0.88rem, 1.3vw, 1.02rem);
}
.ball.jp-ball, .jp-ball {
  width: clamp(34px, 4.6vw, 38px);
  height: clamp(34px, 4.6vw, 38px);
  font-size: clamp(0.82rem, 1.2vw, 0.92rem);
  background: radial-gradient(circle at 35% 30%, #FFF5B0 0%, #F5B82E 50%, #C98800 85%, #8F5B00 100%);
  border: 1.5px solid #E6A100;
  box-shadow: inset 0 -2px 5px rgba(110,65,0,0.4), 0 3px 6px rgba(0,0,0,0.16);
  color: #121E1A;
}

@media(max-width: 480px) {
  .ball.pw-main {
    width: clamp(44px, 12vw, 54px);
    height: clamp(44px, 12vw, 54px);
    font-size: clamp(1.1rem, 3.2vw, 1.32rem);
  }
  .ball.sym-ball, .ball.aux-ball {
    width: clamp(34px, 9vw, 40px);
    height: clamp(34px, 9vw, 40px);
    font-size: clamp(0.78rem, 2.2vw, 0.9rem);
  }
  .ball.jp-ball, .jp-ball {
    width: clamp(28px, 7.5vw, 34px);
    height: clamp(28px, 7.5vw, 34px);
    font-size: clamp(0.72rem, 2vw, 0.82rem);
  }
}
@media(max-width: 360px) {
  .ball.pw-main {
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
  }
  .ball.sym-ball, .ball.aux-ball {
    width: 32px;
    height: 32px;
    font-size: 0.74rem;
  }
  .ball.jp-ball, .jp-ball {
    width: 26px;
    height: 26px;
    font-size: 0.68rem;
  }
}

/* Pick 4 Chamber Dividers */
.chamber-divider {
  display: inline-block;
  width: 1px;
  height: 28px;
  background: var(--line);
  margin: 0 4px;
  vertical-align: middle;
}

/* 2. Desktop Split Hero Card Layout */
.hero-card-grid {
  min-width: 0;
  max-width: 100%;
}
.hero-main-pane, .hero-side-pane {
  min-width: 0;
  max-width: 100%;
}
@media(max-width: 1023px) {
  .hero-side-pane {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}
@media(min-width: 1024px) {
  .hero-card-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
  }
  .hero-main-pane {
    min-width: 0;
  }
  .hero-side-pane {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--card-alt);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px;
  }
}

/* Responsive Day-Draws Switcher */
@media(max-width: 640px) {
  #day-draws-btns {
    display: none !important;
  }
  .day-draws-nav {
    display: flex !important;
    width: 100%;
    margin-bottom: 0;
  }
  .day-draws-select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media(min-width: 641px) {
  .day-draws-nav {
    display: none !important;
  }
  #day-draws-btns {
    display: flex !important;
  }
}

/* 3. Smooth Board Accordion Animation */
.board-grid-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.board-grid-wrapper[hidden] {
  display: grid !important;
  grid-template-rows: 0fr;
  overflow: hidden;
}
.board-grid-inner {
  min-height: 0;
  overflow: hidden;
}

/* 4. Ticket Checker Physical Slip Styling & Multi-Board Tabs */
.ticket-slip-card {
  background: var(--card);
  border: 2px dashed var(--line);
  border-radius: 12px;
  padding: 18px;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  overflow: hidden;
}
.ticket-slip-card::before, .ticket-slip-card::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--bg);
  border-radius: 50%;
  transform: translateY(-50%);
}
.ticket-slip-card::before { left: -9px; }
.ticket-slip-card::after { right: -9px; }
.board-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  overflow-x: auto;
}
.board-tab-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  background: var(--card-alt);
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
}
.board-tab-btn.active {
  background: var(--red);
  color: #FFF;
  border-color: var(--red);
}
.match-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1B7F4B;
  color: #FFF;
  font-size: 0.72rem;
  font-weight: 900;
  margin-left: 4px;
  box-shadow: 0 2px 4px rgba(27,127,75,0.35);
}
.match-near-badge {
  background: #B87900;
}
.saved-slips-container {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 10px;
}
.saved-slip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.84rem;
}

/* 5. Shop Parlour Mode & Full-Screen TV Display */
body.parlour-mode {
  background: #000 !important;
  color: #FFF !important;
  font-size: 19px;
  --bg: #000000;
  --card: #111111;
  --card-alt: #1A1A1A;
  --ink: #FFFFFF;
  --muted: #A3A3A3;
  --line: #333333;
}
body.parlour-mode .top, body.parlour-mode .mobile-tabbar, body.parlour-mode .foot, body.parlour-mode #all-board {
  display: none !important;
}
body.parlour-mode .wrap {
  max-width: 1400px;
  padding: 24px;
}
body.parlour-mode .ball.pw-main {
  width: 84px !important;
  height: 84px !important;
  font-size: 2.2rem !important;
}
body.parlour-mode .ball.sym-ball, body.parlour-mode .ball.aux-ball {
  width: 60px !important;
  height: 60px !important;
  font-size: 1.4rem !important;
}
body.parlour-mode .ball.jp-ball {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.25rem !important;
}
.parlour-tv-bar {
  display: none;
  background: #181818;
  border-bottom: 2px solid var(--gold);
  padding: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
body.parlour-mode .parlour-tv-bar {
  display: flex !important;
}
.parlour-tv-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.parlour-countdown-hero {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* 6. Hot & Cold Leaderboard Layout */
.leaderboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 12px;
  min-width: 0;
  max-width: 100%;
}
.leaderboard-col {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  margin-top: 6px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.leaderboard-item .ball {
  width: 34px !important;
  height: 34px !important;
  font-size: 0.9rem !important;
  flex-shrink: 0;
}
@media(max-width: 600px) {
  .leaderboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .leaderboard-col {
    padding: 10px 12px;
  }
  .leaderboard-item {
    gap: 6px;
    padding: 5px 6px;
  }
  .badge-hot, .badge-cold {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
}

.badge-hot {
  background: rgba(206,17,38,0.12);
  color: var(--red);
  border: 1px solid rgba(206,17,38,0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}
.badge-cold {
  background: rgba(29,95,191,0.12);
  color: #1D5FBF;
  border: 1px solid rgba(29,95,191,0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* 7. Daily 4-Draw Matrix Sticky First Column */
.pw-matrix th:first-child, .pw-matrix td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--card);
  box-shadow: 2px 0 5px rgba(0,0,0,0.06);
}
.pw-matrix th:first-child {
  background: var(--card-alt);
}

/* 8. WhatsApp Card Canvas Modal */
.whatsapp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 12px;
  box-sizing: border-box;
}
.whatsapp-modal-backdrop[hidden] {
  display: none !important;
}
.whatsapp-modal-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  max-width: min(480px, calc(100vw - 24px));
  width: 100%;
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.3);
  box-sizing: border-box;
}
#whatsapp-canvas-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
#whatsapp-canvas {
  max-width: 100% !important;
  height: auto !important;
  display: block;
}
@media(max-width: 480px) {
  .whatsapp-modal-box {
    padding: 12px;
  }
  .whatsapp-modal-box .chip-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .whatsapp-modal-box .chip-row .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* Print & Thermal Receipt Layout */
@media print {
  body {
    background: #FFF !important;
    color: #000 !important;
    font-size: 12pt;
  }
  .top, .mobile-tabbar, .day-draws, .hero-toolbar, #all-board, #ticket, #quick, .foot, .back-top, .toast, .leaderboard-grid, #dream-search-card, #bet-tracker-card, #heatmap-matrix-card {
    display: none !important;
  }
  #parlour-wall-chart {
    display: block !important;
  }
  .card {
    border: 1.5px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }
}

/* 9 Features Design System Extensions */

/* Dream Keyword Search Results */
.dream-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin-top: 10px;
}
.dream-card {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.dream-card:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* 6x6 Play Whe Heatmap Matrix */
.heatmap-matrix-6x6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.heat-matrix-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  padding: 4px;
  text-align: center;
}
.heat-matrix-cell:hover {
  transform: scale(1.06);
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-color: var(--ink);
}
.heat-matrix-cell.temp-hot {
  background: linear-gradient(135deg, rgba(239,68,68,0.22), rgba(245,158,11,0.16));
  border-color: rgba(239,68,68,0.4);
}
.heat-matrix-cell.temp-warm {
  background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(234,179,8,0.1));
  border-color: rgba(245,158,11,0.35);
}
.heat-matrix-cell.temp-cold {
  background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(99,102,241,0.1));
  border-color: rgba(59,130,246,0.35);
}
.heat-matrix-num {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
}
.heat-matrix-mark {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
@media(max-width: 480px) {
  .heatmap-matrix-6x6 {
    gap: 4px;
  }
  .heat-matrix-num {
    font-size: 0.9rem;
  }
  .heat-matrix-mark {
    font-size: 0.58rem;
  }
}

/* Bankroll Manager & Bet Tracker */
.bet-form-wrap {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.bet-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.bet-card {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge-won {
  background: rgba(27,127,75,0.15);
  color: var(--hit);
  border: 1px solid rgba(27,127,75,0.35);
  font-weight: 800;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge-lost {
  background: rgba(206,17,38,0.1);
  color: var(--red);
  border: 1px solid rgba(206,17,38,0.3);
  font-weight: 800;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
}
.badge-pending {
  background: rgba(245,158,11,0.15);
  color: #b45309;
  border: 1px solid rgba(245,158,11,0.35);
  font-weight: 800;
  font-size: .75rem;
  padding: 2px 8px;
  border-radius: 999px;
}

/* Printable Parlour Wall Chart Container */
#parlour-wall-chart {
  display: none;
}

/* ==========================================================================
   HISTORY ARCHIVE ENHANCEMENTS (Density, Drawer, Pin Dock, Glow & Heat Ribbons)
   ========================================================================== */

/* 4-Draw Matrix Densities & Sticky Table */
.matrix-density-compact td { padding: 4px 6px !important; font-size: .8rem !important; }
.matrix-density-compact .matrix-ball-cell { min-height: 48px !important; }
.matrix-density-compact .matrix-ball { width: 34px !important; height: 34px !important; font-size: 1rem !important; }

.matrix-density-micro { font-size: .75rem !important; }
.matrix-density-micro td { padding: 2px 4px !important; }
.matrix-density-micro .matrix-ball-cell { min-height: 36px !important; gap: 2px !important; }
.matrix-density-micro .matrix-ball { width: 26px !important; height: 26px !important; font-size: .78rem !important; }
.matrix-density-micro .matrix-mark-name { display: none !important; }

/* Mini Matrix Balls & Ball Groups for Multi-Ball Games */
.matrix-balls-wrap {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.matrix-ball-mini {
  width: 28px !important;
  height: 28px !important;
  font-size: .82rem !important;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  line-height: 1;
}
.matrix-ball-p4 {
  width: 23px !important;
  height: 23px !important;
  font-size: .76rem !important;
}
.matrix-density-compact .matrix-ball-mini {
  width: 24px !important;
  height: 24px !important;
  font-size: .74rem !important;
}
.matrix-density-compact .matrix-ball-p4 {
  width: 20px !important;
  height: 20px !important;
  font-size: .68rem !important;
}
.matrix-density-micro .matrix-ball-mini {
  width: 20px !important;
  height: 20px !important;
  font-size: .66rem !important;
}
.matrix-density-micro .matrix-ball-p4 {
  width: 17px !important;
  height: 17px !important;
  font-size: .60rem !important;
}

.matrix-wrap {
  position: relative;
  max-height: 520px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.pw-matrix thead th {
  position: sticky;
  top: 0;
  background: var(--card-alt);
  z-index: 3;
  box-shadow: 0 1px 0 var(--line);
}
.pw-matrix td:first-child, .pw-matrix th:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: 1px 0 0 var(--line);
}
.pw-matrix thead th:first-child {
  z-index: 4;
  background: var(--card-alt);
}

/* History Card Multi-Column Responsive Grid */
@media (min-width: 641px) and (max-width: 1023px) {
  #history.list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (min-width: 1024px) {
  #history.list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}
#history.list > li {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: var(--card-alt) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  margin: 0 !important;
  position: relative !important;
  transition: transform .12s, box-shadow .12s, border-color .12s !important;
}
#history.list > li:hover {
  transform: translateY(-2px);
  border-color: var(--ink) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Historical Badges: Repeat, Hot, Cold Streak */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.streak-repeat { background: rgba(242,169,0,0.18); color: #B87900; border: 1px solid rgba(242,169,0,0.4); }
[data-theme=dark] .streak-repeat { color: #F2A900; }
.streak-hot { background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.3); }
.streak-cold { background: rgba(59,130,246,0.15); color: #3B82F6; border: 1px solid rgba(59,130,246,0.3); }

/* Glow Mode Highlighting */
.hist-glow-active .ball:not(.match-glow) {
  opacity: 0.28 !important;
  filter: grayscale(80%) !important;
}
.hist-glow-active .ball.match-glow {
  opacity: 1 !important;
  box-shadow: 0 0 16px var(--gold), 0 0 4px #FFF !important;
  transform: scale(1.14) !important;
  z-index: 5 !important;
}

/* Pin & Compare Floating Dock */
/* Pin & Compare Floating Dock (Docked cleanly above Bottom Navigation Bar) */
#compare-dock {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--card);
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.32);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: slideUpCompareMobile .22s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
@media(min-width: 768px) {
  #compare-dock {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 86px;
    width: min(94vw, 560px);
    border-radius: 18px;
    border: 2px solid var(--gold);
    box-shadow: 0 16px 38px rgba(0,0,0,0.32);
    animation: slideUpCompareDesktop .22s cubic-bezier(0.16, 1, 0.3, 1);
  }
}
@keyframes slideUpCompareMobile {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUpCompareDesktop {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.mobile-compare-tab {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--muted);
  width: 100%;
}
.mobile-compare-tab.active-dock {
  color: var(--gold);
  background: var(--card-alt);
}
.mobile-compare-tab.active-dock::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--gold);
  border-radius: 0 0 3px 3px;
}
.compare-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
  gap: 8px;
  max-height: 190px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  .compare-slots {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .compare-slot-card {
    min-width: 140px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}
.compare-slot-card {
  background: var(--card-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: .8rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.compare-tab-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tab-compare-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--gold);
  color: #121E1A;
  font-size: .65rem;
  font-weight: 800;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* Special Chamber Ratio Summary Progress Strip */
.chamber-ratio-bar {
  height: 8px;
  border-radius: 999px;
  display: flex;
  overflow: hidden;
  margin: 6px 0 2px;
  background: rgba(0,0,0,0.1);
}
.ratio-seg { height: 100%; transition: width .3s ease; }
.ratio-white { background: #E5E7EB; }
.ratio-mb { background: #EF4444; }
.ratio-mu { background: #DC2626; }
.ratio-mx { background: #991B1B; }

/* Filter Drawer / Collapsible Sheet */
.filter-drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.filter-badge-count {
  background: var(--gold);
  color: #121E1A;
  font-weight: 800;
  font-size: .72rem;
  padding: 1px 6px;
  border-radius: 999px;
}

/* Quick Filter Pills Row */
.quick-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 8px;
  scrollbar-width: none;
}
.quick-pills-row::-webkit-scrollbar { display: none; }
.filter-pill {
  border: 1px solid var(--line);
  background: var(--card-alt);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}
.filter-pill.on, .filter-pill:hover {
  background: var(--ink);
  color: var(--card);
  border-color: var(--ink);
}

/* Print & Accessibility */
@media print{
  .top,.mobile-tabbar,.day-draws,.hero-toolbar,#all-board,#ticket,#quick,.foot,.back-top,.toast{display:none!important}
  .card{border:2px solid #000;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none;padding-left:16px;overflow:auto}
  .sk,.ball{animation:none}
}
@media(forced-colors:active){
  .ball{border:2px solid CanvasText!important}
}


/* ==========================================================================
   100 UX Improvements Styles (WheWise Extended Features)
   ========================================================================== */

/* OLED Pitch Black Theme (Item 54) */
[data-theme="oled"] {
  --bg: #000000;
  --card: #080808;
  --card-alt: #101010;
  --ink: #FFFFFF;
  --muted: #A3A3A3;
  --line: #262626;
  --ring: #38BDF8;
  color-scheme: dark;
}
[data-theme="oled"] .card,
[data-theme="oled"] .top,
[data-theme="oled"] .modal-card {
  border-color: #262626;
}

/* High-Visibility Sunlight Mode (Item 53) */
[data-theme="sunlight"] {
  --bg: #FEF9C3;
  --card: #FFFFFF;
  --card-alt: #FEF08A;
  --ink: #000000;
  --muted: #1F2937;
  --line: #000000;
  --ring: #000000;
  color-scheme: light;
}
[data-theme="sunlight"] .card,
[data-theme="sunlight"] .ball,
[data-theme="sunlight"] .btn {
  border-width: 2px;
  border-color: #000000;
  font-weight: 800;
}

/* Custom Accent Colors (Item 98) */
[data-accent="teal"] { --ring: #0D9488; --c2: #0D9488; }
[data-accent="gold"] { --ring: #D97706; --gold: #F59E0B; }
[data-accent="green"] { --ring: #16A34A; --c2: #16A34A; }
[data-accent="red"] { --ring: #DC2626; --red: #DC2626; }

/* Font Size Scaler (Item 55) */
[data-font-size="sm"] { font-size: 13.5px; }
[data-font-size="md"] { font-size: 15.5px; }
[data-font-size="lg"] { font-size: 17.5px; }
[data-font-size="xl"] { font-size: 19.5px; }

/* Dyslexic Friendly Typeface (Item 72) */
[data-dyslexic="true"] body,
[data-dyslexic="true"] button,
[data-dyslexic="true"] input,
[data-dyslexic="true"] select {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}

/* Colorblind-Safe High Contrast Borders (Item 71) */
[data-colorblind="true"] .ball {
  outline: 2px solid #000;
  outline-offset: 1px;
}
[data-colorblind="true"] .ball-white { border: 3px solid #111827; }
[data-colorblind="true"] .ball-red { border: 3px double #FFFFFF; }

/* Battery Saver & Reduced Motion (Items 66, 90) */
[data-battery-saver="true"] *,
[data-reduced-motion="true"] * {
  animation: none !important;
  transition: none !important;
}

/* Next Draw Countdown Clock & Banner (Item 13, 20) */
.draw-countdown-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card-alt);
  border: 1.5px solid var(--line);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  transition: all .2s ease;
}
.draw-countdown-badge.urgent {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--red);
  color: var(--red);
  animation: pulse-urgent 1.5s infinite;
}
@keyframes pulse-urgent {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Live Draw In-Progress Pulse (Item 14) */
.in-draw-pulse {
  position: relative;
}
.in-draw-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--gold);
  animation: draw-ring-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes draw-ring-pulse {
  0% { transform: scale(0.98); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* Floating Action Button (FAB) on Mobile (Item 1) */
.mobile-fab {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom));
  right: 16px;
  z-index: 35;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--red);
  color: #FFF;
  border: none;
  box-shadow: 0 4px 16px rgba(206, 17, 38, 0.45);
  display: none;
  place-items: center;
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s;
}
.mobile-fab:active {
  transform: scale(0.92);
}
@media (max-width: 767px) {
  .mobile-fab { display: grid; }
}

/* Back to Top Floating Button (Item 77) */
.back-to-top-btn {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 35;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.back-to-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Offline Banner Strip (Item 86) */
.offline-banner-strip[hidden] {
  display: none !important;
}
.offline-banner-strip {
  background: #B45309;
  color: #FFF;
  padding: 6px 14px;
  font-size: .82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 50;
  position: sticky;
  top: 0;
}

/* Target Number Glow Mode (Item 28) */
.ball.target-glow,
.hist-col-val.target-glow,
.mark-card.target-glow {
  box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold) !important;
  transform: scale(1.08);
  z-index: 2;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Mark Hot / Cold Badges (Item 43) */
.mark-badge-hot {
  background: rgba(239, 68, 68, 0.16);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.mark-badge-cold {
  background: rgba(59, 130, 246, 0.16);
  color: #3B82F6;
  border: 1px solid rgba(59, 130, 246, 0.35);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Lucky Number Generator Mixer (Item 95) */
.lucky-mixer-card {
  text-align: center;
  padding: 20px;
  border-radius: 16px;
  background: var(--card-alt);
  border: 1.5px solid var(--line);
}
.lucky-balls-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
  min-height: 52px;
}
.lucky-ball-enter {
  animation: ball-pop-in .4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes ball-pop-in {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 1-36 Quick Dial Numeric Keypad (Item 50) */
.dialpad-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-width: 340px;
  margin: 0 auto;
}
.dialpad-btn {
  height: 44px;
  border-radius: 10px;
  background: var(--card-alt);
  border: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s ease;
}
.dialpad-btn:hover, .dialpad-btn:active {
  background: var(--ink);
  color: var(--card);
  transform: scale(0.96);
}

/* Breadcrumbs (Item 78) */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: 8px;
}
.breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Audio Voice Announcer Button (Item 61, 70) */
.audio-voice-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.audio-voice-btn.speaking {
  color: var(--red);
  animation: speaker-pulse 1s infinite alternate;
}
@keyframes speaker-pulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* ==========================================================================
   Draw History & 4-Draw Matrix Extended Feature Styles
   ========================================================================== */
.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--card-alt);
  border-top: 1px solid var(--line);
  font-size: .76rem;
  color: var(--muted);
}
.matrix-legend .legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.matrix-th-slot:hover {
  color: var(--gold);
  background: var(--card) !important;
}
.matrix-summary-cell {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.matrix-holiday-badge {
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(206, 17, 38, 0.12);
  color: var(--red);
  display: inline-block;
  margin-top: 2px;
}
.same-day-repeat-cell {
  border: 2px solid var(--gold) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.28) !important;
}
.pending-slot-chip {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: .74rem;
  color: var(--muted);
  display: inline-block;
}

/* Line Accents (Blue = Line 1, Teal = Line 2, Gold = Line 3, Red = Line 4) */
.line-accent-1 { border-left: 4px solid #3B82F6 !important; }
.line-accent-2 { border-left: 4px solid #0D9488 !important; }
.line-accent-3 { border-left: 4px solid #F59E0B !important; }
.line-accent-4 { border-left: 4px solid #EF4444 !important; }

/* Folklore Mark Card Silhouette Watermark */
.card-watermark {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 3.5rem;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

/* Ball Temperature Pips (Hot / Warm / Cold) */
.temp-pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.temp-hot { background: #EF4444; box-shadow: 0 0 5px #EF4444; }
.temp-warm { background: #F59E0B; }
.temp-cold { background: #3B82F6; }

/* Sum Trend Sparkline */
.sum-sparkline-wrap {
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
}
.sparkline-svg {
  width: 100%;
  height: 38px;
  overflow: visible;
  display: block;
}
.sparkline-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkline-area {
  fill: rgba(245, 158, 11, 0.12);
  stroke: none;
}

/* Draw Note Badge & Verification Seal */
.draw-note-badge {
  font-size: .72rem;
  background: rgba(59, 130, 246, 0.15);
  color: #3B82F6;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 1px 7px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
}
.verified-seal {
  font-size: .68rem;
  color: #10B981;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.diff-match-ball {
  box-shadow: 0 0 12px var(--gold), 0 0 4px #FFF !important;
  border: 2px solid var(--gold) !important;
}



/* Global Hidden Safety & Mark Badge */
[hidden] {
  display: none !important;
}
.mark-hero-badge[hidden] {
  display: none !important;
}

/* ========================================================
   All 4 Draws Daily Board & Responsive 4-Period Grid
   ======================================================== */
.day-draws-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-alt);
  border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 14px;
  width: 100%;
  box-sizing: border-box;
}
.day-draws-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.day-draws-select {
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
}
.day-4-draws-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .day-4-draws-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .day-4-draws-grid {
    grid-template-columns: 1fr;
  }
}

.day-period-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all .16s ease;
  position: relative;
  text-align: left;
  min-width: 0;
}
.day-period-card:hover {
  border-color: var(--hero-accent, var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.day-period-card.is-active {
  border-color: var(--hero-accent, var(--gold));
  background: linear-gradient(180deg, rgba(242,169,0,.07), var(--card));
  box-shadow: 0 0 0 2px var(--hero-accent, var(--gold)), 0 4px 14px rgba(0,0,0,.1);
}
.day-period-card.is-upcoming {
  opacity: .85;
  border-style: dashed;
  cursor: default;
}
.day-period-card.is-upcoming:hover {
  transform: none;
  box-shadow: none;
}
.day-period-card.is-next {
  border-color: var(--gold);
  border-style: solid;
  background: linear-gradient(180deg, rgba(242,169,0,.12), var(--card));
  opacity: 1;
}

.period-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}
.period-card-name {
  font-weight: 800;
  font-size: .88rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
}
.period-card-time {
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--card-alt);
  padding: 2px 6px;
  border-radius: 6px;
}
.period-card-badge {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.period-card-badge.done {
  background: rgba(16, 185, 129, .15);
  color: #059669;
}
.period-card-badge.next {
  background: rgba(242, 169, 0, .2);
  color: #B45309;
}
.period-card-badge.pending {
  background: var(--card-alt);
  color: var(--muted);
}
.period-card-badge.selected {
  background: var(--ink);
  color: #FFF;
}

.period-card-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 2px 0;
  flex-wrap: wrap;
}
.period-card-stage .ball {
  width: 38px;
  height: 38px;
  font-size: .95rem;
}
.period-card-stage .ball-cap {
  font-size: .68rem;
}
.period-card-mark {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
}
.period-card-meta {
  font-size: .75rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}



/* Period Card Jackpot Numbers Display */
.period-card-jp {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 8px;
  background: rgba(242, 169, 0, .09);
  border-radius: 8px;
  border: 1px solid rgba(242, 169, 0, .25);
  margin-top: 4px;
}
.period-jp-label {
  font-size: .7rem;
  font-weight: 800;
  color: #B45309;
  text-transform: uppercase;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 3px;
}
[data-theme=dark] .period-jp-label {
  color: #FFD040;
}
.period-jp-balls {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.jp-ball.sm {
  width: 24px;
  height: 24px;
  font-size: .72rem;
  font-weight: 800;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #FFE082, #F2A900 60%, #B45309 100%);
  color: #1A1A1A;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}