*{box-sizing:border-box}
:root{
  --bg:#eef2f7;
  --card:#ffffff;
  --ink:#0b1220;
  --muted:#334155;
  --line:#b6c2d1;
  --line2:#6b7c93;
  --accent:#1d4ed8;
  --accent2:#0f766e;
  --chip:#e7f0ff;
  --warn:#b91c1c;
  --warnbg:#fff1f2;
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 700px at 10% 0%, #dde8ff 0%, transparent 60%),
    radial-gradient(900px 700px at 90% 10%, #dff7f3 0%, transparent 55%),
    linear-gradient(180deg, var(--bg), #f8fafc);
}

.app{max-width:1280px;margin:auto;padding:14px}

.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px;margin-bottom:12px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:16px;
  box-shadow:0 10px 18px rgba(11,18,32,.06);
}

.brand{display:flex;align-items:center;gap:10px}
.logo{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:white;font-weight:900;font-size:18px;
}
.brand-text h1{margin:0;font-size:16px;letter-spacing:.2px}
.brand-text p{margin:1px 0 0;color:var(--muted);font-size:12px}

.topbar-actions{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ctl{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted)}
.ctl select{
  font-size:13px;
  border:2px solid var(--line);
  border-radius:12px;
  padding:7px 10px;
  background:#fff;
  outline:none;
}
.ctl select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(29,78,216,.12)}

.layout{display:grid;grid-template-columns: 1fr 1fr;gap:12px}

.card{
  background:var(--card);
  border:2px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 22px rgba(11,18,32,.06);
  padding:12px;
}

.card-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px dashed rgba(107,124,147,.55);
}
.card-head h2{margin:0;font-size:14px}
.hint{color:var(--muted);font-size:12px}
.summary{
  font-size:12px;color:var(--ink);
  padding:4px 8px;border:2px solid var(--line);
  border-radius:12px;background:#f1f7ff;
  min-height:18px;
}

.msg{
  display:none;
  margin:0 0 10px 0;
  padding:4px 8px;
  border-radius:12px;
  border:2px solid rgba(185,28,28,.35);
  background:var(--warnbg);
  color:var(--warn);
  font-size:12px;
  font-weight:800;
}

/* MATRIX */
.matrix-wrap{border:2px solid var(--line2);border-radius:14px;overflow:hidden;background:#fff}
.matrix-head{
  display:grid;
  grid-template-columns: 0.65fr 1fr 1fr 1fr 2.35fr;
  background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(15,118,110,.10));
  border-bottom:2px solid var(--line2);
}
.matrix-head > div{
  padding:8px 8px;
  font-size:12px;
  font-weight:900;
  border-right:1px solid rgba(107,124,147,.55);
  text-align:center;
}
.matrix-head > div:last-child{border-right:none}
.grid{display:flex;flex-direction:column}

/* Each row is its own band */
.mrow{
  display:grid;
  grid-template-columns: 0.65fr 1fr 1fr 1fr 2.35fr;
  border-bottom:1px solid rgba(107,124,147,.55);
}
.mrow:last-child{border-bottom:none}
.mrow:nth-child(odd){background:#fbfdff}
.mrow:nth-child(even){background:#f7fafc}

.cell{
  padding:6px;
  border-right:1px solid rgba(107,124,147,.35);
}
.mrow .cell:last-child{border-right:none}

.cell select{
  width:100%;
  border:1.8px solid var(--line);
  border-radius:8px;
  padding:6px 8px;
  background:#fff;
  outline:none;
  font-size:12px;
}

/* two selects side-by-side, compact */
.pair{display:grid;grid-template-columns: 1.2fr .8fr;gap:6px}
.pair select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px rgba(15,118,110,.10)}

/* TICKETS: fit 4 tables per row on desktop */
.tickets{
  margin-top:10px;
  display:grid;
  /*
    Zoomable + responsive tiles.
    - The slider updates --ticketZoom on #tickets.
    - Bigger zoom => wider tiles => fewer columns.
  */
  --ticketZoom: 1;
  --ticketMinBase: 170px;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--ticketMinBase) * var(--ticketZoom)), 1fr));
  gap: calc(8px * clamp(0.9, var(--ticketZoom), 1.35));
}

/* Generated Tickets zoom controller */
.ticketZoomCtl{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.ticketZoomLabel{
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.ticketZoom{
  width:140px;
  max-width:32vw;
}
.ticketZoomVal{
  font-size:12px;
  font-weight:900;
  min-width:46px;
  text-align:right;
  color:var(--text);
}

@media (max-width: 520px){
  .ticketZoom{ width:120px; }
}

/* Keep tickets comfortably sized on very narrow screens */
@media (max-width: 380px){
  .tickets{ --ticketMinBase: 155px; }
}


/* small 2-col table */
.ticket{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  border:2px solid var(--line2);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.ticket thead th{
  border:1px solid var(--line2);
  padding: calc(5px * clamp(0.85, var(--ticketZoom), 1.35));
  font-size: clamp(9px, calc(10.5px * var(--ticketZoom)), 16px);
  text-align:left;
  background:linear-gradient(135deg, rgba(29,78,216,.14), rgba(15,118,110,.12));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ticket thead th:last-child{
  text-align:center;
  font-weight:1000;
}

.ticket td{
  border:1px solid var(--line2);
  padding: calc(5px * clamp(0.85, var(--ticketZoom), 1.35));
  font-size: clamp(9px, calc(10.5px * var(--ticketZoom)), 16px);
}

.ticket td.pick{
  text-align:center;
  font-weight:1000;
  color:var(--accent);
  width: clamp(40px, calc(44px * var(--ticketZoom)), 70px);
}

.ticket td.pick.requiredPick{
  border:2px solid var(--warn);
  border-radius:8px;
}

.ticket td:first-child{
  width:auto;
}

.buttons{display:flex;gap:8px;margin-top:12px}
button{
  flex:1;
  border:2px solid var(--line2);
  border-radius:14px;
  padding:10px 10px;
  background:#fff;
  color:var(--ink);
  font-weight:900;
  cursor:pointer;
}
button:hover{background:rgba(29,78,216,.06)}
button:active{transform:translateY(1px)}

@media(max-width:980px){
  .layout{grid-template-columns:1fr}
}
@media(max-width:560px){
  .matrix-head, .mrow{grid-template-columns: repeat(5, 1fr);}
  .rowtag{grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));}
}


/* === Compact square selects + remove arrows === */
.cell select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  border-radius:4px !important;
  padding:4px 6px !important;
  font-size:12px !important;
}

/* Also apply to top controls */
.ctl select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  border-radius:4px !important;
  padding:4px 6px !important;
}

/* Reduce rounding on matrix container */
.matrix-wrap{ border-radius:6px !important; }
.mrow{ }
.cell{ border-radius:0 !important; }



/* === Keyboard typing game input === */
.pair input.game{
  width:100%;
  border:1.8px solid var(--line);
  background:#fff;
  border-radius:6px;
  padding:4px 6px;
  font-size:12px;
  outline:none;
}

/* remove number spinners (arrows) */
.pair input.game::-webkit-outer-spin-button,
.pair input.game::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.pair input.game{ -moz-appearance: textfield; }

.pair input.game:focus{
  border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(15,118,110,.10);
}


/* === Ticket color refresh: light green + light yellow === */
.ticket{
  background:#f7fdf7; /* very light green */
  border-color:#86c9a8 !important;
}

.ticket thead th{
  background:linear-gradient(135deg, #e9f9ee, #fff6da) !important; /* green -> yellow */
  color:#064e3b;
}

.ticket td{
  background:#fbfffb; /* subtle green */
}

.ticket tbody tr:nth-child(even) td{
  background:#fffbea; /* very light yellow stripe */
}

.ticket td.pick{
  color:#166534; /* deeper green for pick */
}

/* Slightly soften grid lines inside tickets */
.ticket td,
.ticket thead th{
  border-color:#9fd7bd !important;
}


/* === Neon Game Field States === */

/* default placeholder = neon red */
.pair input.game::placeholder{
  color:#ff0033;
  font-weight:900;
}

/* Firefox */
.pair input.game::-moz-placeholder{
  color:#ff0033;
  font-weight:900;
}

/* when game has value -> neon green */
.pair input.game.filled{
  color:#00ff66;
  font-weight:900;
}

/* caret also green when filled */
.pair input.game.filled{
  caret-color:#00ff66;
}


/* === Valid = Dark Blue, Invalid = Flash Red === */

/* placeholder stays neon red */
.pair input.game::placeholder{ color:#ff0033; font-weight:900; }
.pair input.game::-moz-placeholder{ color:#ff0033; font-weight:900; }

/* valid filled value -> dark blue */
.pair input.game.filled{
  color:#0b3c8a;           /* dark blue */
  font-weight:900;
  caret-color:#0b3c8a;
}

/* invalid flash */
@keyframes flashRed {
  0%   { background:#ffe4e6; }
  50%  { background:#fecaca; }
  100% { background:#ffffff; }
}

.pair input.game.invalid{
  animation: flashRed .6s ease;
  border-color:#b91c1c !important;
}


/* Back to top button */
.toTop{
  position:fixed;
  right:14px;
  bottom:14px;
  width:42px;
  height:42px;
  border-radius:8px;
  border:2px solid var(--line2);
  background:#ffffff;
  color:var(--ink);
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(11,18,32,.12);
  display:none; /* shown on scroll */
}
.toTop:hover{ background:rgba(29,78,216,.08); }


/* Remove dropdown arrows + make corners less rounded */
.cell select, .ctl select, select.game{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none !important;
  border-radius:4px !important;
  padding:4px 6px !important;
}

/* Dropdown number styling */
select.game, .cell select{
  color:#0b1220;
  font-weight:900;
}
select.game option{
  color:#0b1220;
  font-weight:900;
}
select.game option:disabled{
  color:#cbd5e1;
  font-weight:700;
}

/* Alternating column colors in input matrix (A/B/A/B/A) */
.mhead div:nth-child(2),
.mhead div:nth-child(4),
.mhead div:nth-child(6),
.mrow .cell:nth-child(2),
.mrow .cell:nth-child(4),
.mrow .cell:nth-child(6){
  background:#eef6ff;
}
.mhead div:nth-child(3),
.mhead div:nth-child(5),
.mrow .cell:nth-child(3),
.mrow .cell:nth-child(5){
  background:#f6fff3;
}

/* === Pick Summary table (below input matrix) === */
.pickSummaryWrap{
  margin-top:10px;
  border:2px solid #6b7c93;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
}
.pickSummaryHead{
  font-weight:900;
  padding:6px;
  background:#e7f0ff;
  border-bottom:1px solid #6b7c93;
}
.pickSummary{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.pickSummary th, .pickSummary td{
  border:1px solid #cbd5e1;
  padding:6px;
  font-size:12px;
}
.pickSummary th{
  background:#f1f7ff;
  text-align:left;
}
.pickSummary tbody tr:nth-child(even) td{
  background:#f8fafc;
}
.pickChips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pickChip{
  display:inline-block;
  padding:2px 8px;
  border:2px solid #6b7c93;
  border-radius:6px;
  background:#fffbea;
  font-weight:900;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  user-select:none;
}
.pickChip:hover{
  background:#fde68a;
}

#msg{display:none !important;}


/* Small red 'Game Number' label in generated tickets */
.gameLabel{
  font-size:10px;
  font-weight:700;
  color:#dc2626; /* red */
}


/* Light blue header row for generated tickets */
.ticket thead th{
  background:#dbeafe !important; /* light blue */
}


/* Winner logo in original header (slightly bigger) */
.winnerLogo{
  width:40px;
  height:40px;
  object-fit:contain;
  margin-right:6px;
}

/* Odds boxed section */
.oddsWrap{
  margin-top: 12px;
  border: 1px solid #6b7c93;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.65);
}
.oddsHead{
  padding: 8px 10px;
  font-weight: 700;
  border-bottom: 1px solid #6b7c93;
  background: rgba(220,235,255,0.7);
}
.oddsTable{
  width: 100%;
  border-collapse: collapse;
}
.oddsTable td{
  height: 34px;
  border: 1px solid rgba(0,0,0,0.65);
}

.oddsSelect{
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 4px;
  font-size: 14px;
}
.oddsSelect:focus{
  outline: none;
}

/* Pick Summary + Odds side-by-side (together equal Input Matrix width) */
.psOddsRow{
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.psOddsRow > .pickSummaryWrap,
.psOddsRow > .oddsWrap{
  flex: 1;
  min-width: 0;
  margin-top: 0; /* row handles spacing */
}

/* Responsive: stack on narrow screens */
@media (max-width: 780px){
  .psOddsRow{
    flex-direction: column;
  }
}

/* Force 50/50 split inside the row */
.psOddsRow > .pickSummaryWrap,
.psOddsRow > .oddsWrap{
  flex: 0 0 calc(50% - 6px);
}



/* Neon return display in generated tickets */


/* Crisp return display in generated tickets */
.ticket tfoot .returnTotal{
  text-align: center !important;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #ff2b2b;
  font-weight: 800;
}

/* Google100.net logo colors (no layout changes) */
.googleLogo{margin:0;font-size:26px;font-weight:800;letter-spacing:-0.5px}
.gBlue{color:#4285F4}
.gRed{color:#DB4437}
.gYellow{color:#F4B400}
.gGreen{color:#0F9D58}
.dot{color:#555}


.pair{
  grid-template-columns: 5fr 1fr;
  gap:2px;
}
.pair select.game{
  width:100%;
}
.pair select.picksel{
  width:100%;
}



.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:0 !important;
}



.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:0 !important;
  padding-left:4px;
  padding-right:4px;
}



.pair{
  grid-template-columns: 1fr 1fr; /* both get equal max width */
  gap:0;
}

.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:0 !important;
  padding:2px 4px;
}



.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:1%;
  padding:2px 4px;
}



.cell{
  padding:0 !important;
}

.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:1%;
  padding:2px 4px;
}

/* Final tweak: Game wider, Pick smaller, 1px per side gap (clean look) */
.pair{
  grid-template-columns: 4fr 1.5fr;
  gap:2px !important; /* ~1px on each side */
}

.cell{
  padding:0 !important;
}

.pair select.game,
.pair select.picksel{
  width:100%;
  border-radius:1%;
  padding:2px 4px;
}


.matrix .row:nth-child(even){
  background: #e9efff;
}



/* Use full width for Input Matrix (remove side padding completely) */
.matrix-wrap{
  padding-left:0 !important;
  padding-right:0 !important;
}

.matrix{
  margin-left:0 !important;
  margin-right:0 !important;
}


.matrix .row:nth-child(even){
  background: #e4ebfb; /* slightly darker companion */
}


.matrix .row:nth-child(even){
  background: #e6ecfa; /* gentle contrast */
}

/* Higher-contrast alternating colors for Input Matrix rows */
.matrix .row:nth-child(odd){
  background: #edf2ff; /* lighter */
}
.matrix .row:nth-child(even){
  background: #d7e1fb; /* noticeably darker */
}

/* Input Matrix pick selector: slightly smaller, not bold */
.pair select.picksel{
  font-size: 12px;
  font-weight: 400;
}


.oddsDone select{
  color:#0b7a2a !important; /* dark green */
  font-weight:900;
}
.oddsIdle select{
  color:#000;
}


.oddsNeed select{
  color:#ff1e1e !important; /* neon red */ /* very dark gray (almost black) */
  font-weight:900;
}

.totalCombosLabel{
  color:#1a7dff; /* neon-ish blue */
  font-weight:800;
}
.totalCombosNum{
  color:#ff1e1e; /* red number */
  font-weight:900;
  font-size:16px;
}

/* Keep top controls in one row */
.topbar-actions{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:nowrap;
}

/* Total combos control */
.totalCtl{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
  white-space:nowrap;
}
.totalCombosLabel{
  color:#1a7dff; /* sharp neon blue */
  font-weight:800;
}
.totalCombosNumWrap{
  line-height:1;
}
.totalCombosNum{
  color:#ff1e1e; /* red */
  font-weight:900;
  font-size:16px;
}


.oddsNeed select{
  color:#ff1e1e !important; /* neon red */ /* very dark gray */
  font-weight:900;
}
.oddsDone select{
  color:#0b7a2a !important; /* dark green */ /* sharp neon green */
  font-weight:900;
}

/* Topbar controls polish: uniform boxed controls */
.topbar-actions{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}

.ctl{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:700;
  color:#111;
  white-space:nowrap;
}

/* Make selects look like consistent input boxes */
.ctl select{
  border:1px solid rgba(0,0,0,0.25);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  font-weight:700;
}

/* Total combos box to match selects */
.totalCtl .totalCombosNumWrap{
  border:1px solid rgba(0,0,0,0.25);
  border-radius:8px;
  padding:6px 10px;
  background:#fff;
  min-width:52px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.totalCombosLabel{
  margin:0;
}

/* Align label text sizes */
.ctl, .totalCtl .totalCombosLabel{
  font-size:12px;
}

/* Total combos styling */
.totalCombosLabel{
  color:#1a7dff;
  font-weight:800;
}
.totalCombosNum{
  color:#ff1e1e;
  font-weight:900;
  font-size:16px;
  line-height:1;
}

/* Odds indicators: light gray (disabled), dark gray (needs input), dark green (changed) */
.oddsIdle select{
  color:#cfcfcf !important;
  font-weight:600;
}
.oddsNeed select{
  color:#ff1e1e !important; /* neon red */
  font-weight:900;
}
.oddsDone select{
  color:#0b7a2a !important; /* dark green */
  font-weight:900;
}
.oddsIdle select:disabled{
  background:#fff;
  cursor:not-allowed;
}

/* Mobile: use more of the screen width (reduce outer app padding) */
@media (max-width: 600px){
  .app{
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* Mobile: reduce inner padding inside Input Matrix to gain width (no design change) */
@media (max-width: 600px){
  .matrix .cell{
    padding:2px !important;
  }
  .pair select.game,
  .pair select.picksel{
    padding-left:4px !important;
    padding-right:4px !important;
  }
}

/* Mobile: ultra-compact inner spacing for tables (use full width) */
@media (max-width: 600px){
  .matrix-wrap{
    padding:0 !important;
  }
  .card{
    padding-left:4px !important;
    padding-right:4px !important;
  }
  .matrix{
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .matrix .row{
    margin:0 !important;
  }
  .matrix .cell{
    padding:1px !important;
  }
}


/* --- Two-column wrapper to keep original left/right cards while allowing a new section above Input Matrix --- */
.colLeft, .colRight{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* --- Buttons section styles (compact, same width as Input Matrix card) --- */
.buttonsCard{ padding:12px; }

.buttonsRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
}

.buttonsLeft{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.buttonsRight{
  display:flex;
  gap:14px;
  margin-left:auto;
}

.dotWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  min-width:34px;
}

.dot{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid currentColor;
  background:transparent;
  padding:0;
}

.dotLabel{
  line-height:1;
}

/* Color borders via currentColor */
.d1{ color:#ff0000; }
.d2{ color:#ff6a00; }
.d3{ color:#ffee00; }
.d4{ color:#00ff2a; }
.d5{ color:#00c3ff; }
.d6{ color:#2b4cff; }
.d7{ color:#b000ff; }
.d8{ color:#00ffd5; }
.d9{ color:#ff005d; }
.d10{ color:#9dff00; }

.off{ color:#ff2a2a; }
.on{ color:#00ff55; }


/* === VERY CLEAR CIRCLE LIGHTS (no flat, no tricks) === */
.buttonsRight .dot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:3px solid currentColor;
  background:transparent;
  display:inline-block;
  cursor:pointer;
}

/* OFF = red outline */
.dotWrap.off .dot{
  color:#ff0000;
}

/* ON = green outline */
.dotWrap.on .dot{
  color:#00ff55;
}

/* Active = filled circle (obvious circle) */
.dotWrap.isActive .dot{
  background:currentColor;
}


/* === FORCE 100% PERFECT CIRCLES (hard override) === */
.buttonsRight .dot,
.buttonsRight .dotWrap .dot{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:22px !important;
  height:22px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius:9999px !important;
  border:3px solid currentColor !important;
  background:transparent !important;
  line-height:0 !important;
  flex:0 0 auto !important;
}

.buttonsRight .dotWrap.isActive .dot{
  background:currentColor !important;
}


/* === Color dots: clickable only when ON === */
.colorDot:disabled{
  opacity:0.25;
  cursor:not-allowed;
}

.dotWrap.isSelected .colorDot{
  background: currentColor;
}






/* === per-cell color fills stay as assigned === */
#grid .cell.hasFill{
  background: var(--pickedFill) !important;
}


/* === Strong cell fill with chosen color (per-cell) === */
#grid .cell.hasFill{
  background: var(--pickedFill) !important;
  border-radius:12px;
}

/* Let the color show through (avoid "gray" look) */
#grid .cell.hasFill .pair{
  background: transparent !important;
}

#grid .cell.hasFill select{
  background: transparent !important;
  border-color: var(--pickedFill) !important;
}


/* === Bigger, easier-to-click color buttons === */
.buttonsLeft .dot{
  width:26px !important;
  height:26px !important;
  border-width:3px !important;
}

.dotWrap{
  min-width:48px;
  cursor:pointer;
}

.dotLabel{
  font-size:12px;
  cursor:pointer;
}


/* === NEW: 5 visible pill color buttons (same design language) === */
.colorBtn{
  width:48px;
  height:26px;
  border-radius:999px;
  border:2px solid currentColor;
  background:#fff;
  cursor:pointer;
}
.colorBtn:hover{
  background: currentColor;
  opacity:0.25;
}

/* light but visible colors */
.d1{ color:#ff4d4d; }
.d2{ color:#ff9f43; }
.d3{ color:#ffd93d; }
.d4{ color:#2ecc71; }
.d5{ color:#54a0ff; }

/* layout: same row */
.buttonsRow{
  display:flex;
  align-items:center;
  gap:18px;
}
.buttonsLeft{
  display:flex;
  gap:12px;
}
.buttonsRight{
  display:flex;
  gap:12px;
  margin-left:auto;
}


/* === Light FILLED color buttons (same layout, clearer visibility) === */
.colorBtn{
  width:48px;
  height:26px;
  border-radius:999px;
  border:1.5px solid rgba(0,0,0,0.25);
  cursor:pointer;
  opacity:0.95;
}

.colorBtn:hover{
  opacity:1;
}

/* very light filled colors */
.d1{ background:#fde2e2; } /* light rose */
.d2{ background:#ffe8cc; } /* light peach */
.d3{ background:#fff3bf; } /* light cream yellow */
.d4{ background:#e6fcf5; } /* light mint */
.d5{ background:#e7f0ff; } /* light sky blue */


/* === Google100.net wiggly dot === */
.wiggleDot{
  display:inline-block;
  width:10px;
  height:10px;
  margin:0 2px;
  background:#4285F4;
  border-radius:50%;
  position:relative;
  top:-4px;
  animation: wiggle 1.6s infinite ease-in-out;
}

/* playful wobble */
@keyframes wiggle{
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(8deg); }
  50%  { transform: translateY(1px) rotate(-6deg); }
  75%  { transform: translateY(-1px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}


/* ======================================================
   OLD MONEY TERMINAL – FULL COLOR PALETTE
   ====================================================== */

/* App background */
body{
  background:#f6f4ef;
  color:#1f2933;
}

/* Cards */
.card{
  background:#ffffff;
  border-color:#9aa4b2;
}

/* Headers */
.card-head{
  border-bottom:1px dashed #9aa4b2;
}
.card-head h2{
  color:#1f2933;
}

/* Text */
h1, h2, h3, h4{
  color:#1f2933;
}
.muted, .hint, .ctl{
  color:#6b7280;
}

/* Controls */
select, button{
  background:#ffffff;
  color:#1f2933;
  border-color:#9aa4b2;
}

/* Input Matrix */
.matrix-wrap{
  border-color:#9aa4b2;
  background:#ffffff;
}
.mrow:nth-child(odd){
  background:#faf9f6;
}
.mrow:nth-child(even){
  background:#f1efe9;
}
.cell{
  border-color:#9aa4b2;
}

/* Tickets */
.ticket{
  background:#ffffff;
  border-color:#9aa4b2;
}
.ticket thead th{
  background:#e9e6df !important;
  color:#1f2933;
}
.ticket td{
  background:#ffffff;
  color:#1f2933;
}
.ticket tbody tr:nth-child(even) td{
  background:#f4f2ec;
}

/* Totals / important numbers */
.totalCombosLabel{
  color:#14532d;
}
.totalCombosNum{
  color:#7f1d1d;
}

/* Odds */
.oddsWrap{
  border-color:#9aa4b2;
}
.oddsHead{
  background:#e9e6df;
  color:#1f2933;
}

/* Pick chips */
.pickChip{
  background:#f4f2ec;
  border-color:#9aa4b2;
  color:#1f2933;
}
.pickChip:hover{
  background:#e9e6df;
}

/* Color buttons – soften to match palette */
.colorBtn.d1{ background:#f3d6d6; }
.colorBtn.d2{ background:#f4dfc9; }
.colorBtn.d3{ background:#f5edc7; }
.colorBtn.d4{ background:#dfe8df; }
.colorBtn.d5{ background:#dde4ee; }

/* Filled cells */
#grid .cell.hasFill{
  filter:saturate(0.75);
}


/* === Generated Tickets: distinct header row color === */
.ticket thead th{
  background:#e6efe9 !important; /* light sage / mint */
  color:#1f2933;
  font-weight:900;
}


/* === Generated ticket action buttons: allow extra buttons without squeezing === */
.colRight .buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.colRight .buttons button{
  flex:1 1 calc(33% - 8px);
  min-width:90px;
}

/* === Tofes modal viewer === */
.tofesModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:9999;
}
.tofesModal.isOpen{ display:flex; }

.tofesPanel{
  width:min(920px, 96vw);
  height:min(92vh, 980px);
  background:#ffffff;
  border:2px solid rgba(0,0,0,0.25);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.tofesTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.03);
}
.tofesTitle{ font-weight:900; }
.tofesClose{
  width:auto;
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:8px;
}

.tofesBody{
  flex:1;
  overflow:auto;
  background:rgba(0,0,0,0.02);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:10px;
}

.tofesCanvas{
  width:100%;
  max-width:860px;
  height:auto;
  border:1px solid rgba(0,0,0,0.15);
  border-radius:8px;
  background:#fff;
}

.tofesBottom{
  border-top:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.03);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;

  /* If the bottom area (controls + magnifier) gets taller than the available
     modal height, allow *this* section to scroll so action buttons aren't trapped. */
  flex:0 1 auto;
  min-height:0;
  max-height:45vh;
  overflow:auto;
}

.tofesMsg{
  font-size:12px;
  font-weight:800;
  color:#7f1d1d;
  min-height:16px;
}

.tofesControls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

/* Keep the lock badge and calibration buttons visible on narrow screens */
.tofesLock{
  display:block;
  width:100%;
  padding:4px 8px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.02);
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.15;
}

.tofesControls button{
  flex:0 0 auto;
  width:auto;
  padding:8px 12px;
  border-radius:12px;
}
.tofesCounter{
  font-weight:900;
}


/* === Tofes viewer: zoom control + save button === */
.tofesControls{
  flex-wrap:wrap;
}
.tofesZoomCtl{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:12px;
  background:rgba(255,255,255,0.7);
}
.tofesZoomLabel{ font-weight:900; font-size:12px; }
#tofesZoom{ width:160px; }
.tofesZoomVal{ font-weight:900; font-size:12px; min-width:48px; text-align:right; }

.tofesBody{
  /* make zoom feel anchored from top-left */
  justify-content:flex-start;
}
.tofesCanvas{
  transform-origin: top left;
}


/* === Tofes viewer: pan buttons + pro calibration === */
.tofesPanCtl{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:12px;
  background:rgba(255,255,255,0.7);
}
.tofesPanCtl button{
  width:auto;
  padding:6px 10px;
  border-radius:8px;
}
#tofesCalPro, #tofesResetCal{
  width:auto;
  padding:8px 12px;
  border-radius:12px;
}


/* === Calibration magnifier === */
.tofesMagWrap{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.75);
}
.tofesMagTitle{ font-weight:900; font-size:12px; }
.tofesMag{ border:1px solid rgba(0,0,0,0.2); border-radius:8px; background:#fff; }
.tofesMagHint{ font-size:11px; font-weight:800; color:#6b7280; }

.tofesBody.calibrating{
  cursor: crosshair;
}


/* === Fix canvas sizing: let JS control width/height so it doesn't collapse === */
.tofesCanvas{
  display:block;
  height:auto; /* JS sets explicit height */
}


/* === Fix layout: keep full form visible; magnifier as overlay (doesn't steal height) === */
.tofesPanel{ min-height:0; }
.tofesBody{
  position:relative;
  min-height:0;
}
.tofesMagOverlay{
  position:absolute;
  right:12px;
  bottom:12px;
  width:min(320px, 92vw);
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:14px;
  background:rgba(255,255,255,0.92);
  box-shadow:0 10px 22px rgba(0,0,0,0.18);
  pointer-events:none; /* lets you click the form under it */
}
.tofesMagOverlay .tofesMag{ pointer-events:none; }
.tofesMagOverlay .tofesMagTitle,
.tofesMagOverlay .tofesMagHint{ pointer-events:none; }


/* === Draggable magnifier overlay === */
.tofesMagOverlay{
  pointer-events:auto; /* needed so we can drag it */
  user-select:none;
  touch-action:none;
}
.tofesMagOverlay .tofesMag,
.tofesMagOverlay .tofesMagHint{
  pointer-events:none; /* clicks go through to the form */
}
.tofesMagHandle{
  cursor: grab;
  pointer-events:auto;
}
.tofesMagOverlay.dragging .tofesMagHandle{ cursor: grabbing; }

/* default starting position */
.tofesMagOverlay{
  left:auto;
  top:auto;
}


/* === Sticky magnifier: stays on screen while the form scrolls === */
.tofesPanel{ position:relative; }
.tofesMagOverlay{
  position:absolute !important;
  right:12px;
  top:62px; /* under the title bar */
  bottom:auto;
  left:auto;
  z-index:5;
}

/* Body can scroll independently */
.tofesBody{
  overflow:auto;
}

.tofesBody{ flex:1; min-height:0; overflow:auto; }

/* --- Calibration UX upgrades (saved + indicator + undo) --- */
.tofesBody.calibrating #tofesCanvas{ cursor: crosshair; }

.tofesLock{
  display:block;
  width:100%;
  padding:4px 8px;
  border-radius:14px;
  border:2px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.02);
  font-weight:900;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.15;
}
.tofesLock::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 2px rgba(15,23,42,.12) inset;
}
.tofesLock[data-tone="green"]::before{
  background:#16a34a;
  box-shadow:0 0 10px rgba(22,163,74,.55);
}
.tofesLock[data-tone="orange"]::before{
  background:#f59e0b;
  box-shadow:0 0 10px rgba(245,158,11,.55);
}
.tofesLock[data-tone="gray"]::before{
  background:#94a3b8;
  box-shadow:none;
}

/* Make calibration buttons stand out a bit */
#tofesUndoCal{ border-color: rgba(185,28,28,.35); }
#tofesUndoCal:hover{ background: rgba(185,28,28,.08); }
#tofesTune12{ border-color: rgba(15,118,110,.35); }
#tofesTune12:hover{ background: rgba(15,118,110,.08); }

/* Quick-fix controls (edit one calibration spot) */
.tofesMiniRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.tofesMiniSelect{
  flex:1 1 180px;
  min-width:160px;
  padding:10px 12px;
  border-radius:12px;
  border:2px solid rgba(0,0,0,0.18);
  background:rgba(255,255,255,0.95);
  font-weight:800;
}


/* === Marks-only printing offsets === */
.tofesPrintOffsets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px dashed rgba(0,0,0,0.25);
  border-radius:14px;
}
.tofesPrintOffsets label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
}
.tofesPrintOffsets input{
  width:90px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.25);
}


/* Magnifier: allow dragging the handle while keeping the overlay click-through */
.tofesMagHandle, .tofesMagTitle{
  pointer-events:auto;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.tofesMagOverlay.dragging .tofesMagHandle,
.tofesMagOverlay.dragging .tofesMagTitle{
  cursor:grabbing;
}


/* --- Main Table (1X2 picks) --- */
.mainTableCard .card-head{ align-items:flex-start; }

/* Controls: tighter + aligned */
.mainTableControls{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.inlineCtl{ min-width: 170px; }
.smallMsg{ margin:0; padding:6px 10px; font-size:12px; border-radius:12px; }
.smallMsg.warn{ border-color: var(--warn); background: var(--warnbg); color: var(--warn); }

.mainTableWrap{ overflow:auto; border-radius:16px; }

/* Professional compact table:
   - zebra by LINE (A/B)
   - thick divider between LINES (not between slots)
   - subtle gridlines + clearer column dividers
*/
.mainTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background: var(--card);
  font-size:12.5px;
  line-height:1.15;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(11,18,32,.06);
}

/* Header */
.mainTable thead th{
  position:sticky;
  top:0;
  z-index:1;
}
.mainTable th{
  background: linear-gradient(180deg,#f8fafc,#f1f5f9);
  color:#0f172a;
  font-weight:800;
  border-bottom:1px solid var(--line);
  padding:6px 6px;
  text-align:center;
}
.mainTable th.subtleHead{ color:#94a3b8; font-weight:700; }

/* Cells */
.mainTable td{
  padding:4px 6px;
  text-align:center;
  vertical-align:middle;
  border-bottom:1px solid #e5eaf2;
}
.mainTable tr:last-child td{ border-bottom:0; }

/* Column dividers (cleaner than full borders everywhere) */
.mainTable td + td,
.mainTable th + th{
  border-left:1px solid #e5eaf2;
}

/* Line number column */
.mainTable .lineCol{
  width: 38px;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.2px;
}

/* Game column */
.mainTable .gameCol{ text-align:left; min-width: 120px; }
.gameCellWrap{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Slot tag (A/B) */
.slotTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  color:#0f172a;
  background:#e2e8f0;
  border:1px solid #cbd5e1;
}

/* Selects: compact and consistent */
.mainTable select{
  width:100%;
  padding:3px 8px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  font-weight:800;
  background:#fff;
  height:28px;
}
.mainTable select:focus-visible{
  outline:2px solid rgba(29,78,216,.35);
  outline-offset:2px;
  border-color:#93c5fd;
}

/* Picks: tighter pills */
.pickToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  position:relative;
}

/* Hide native checkbox – the square you see is the pill itself */
.pickToggle input{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  pointer-events:none;
}

.pickPill{
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid #94a3b8;
  background:#f8fafc;
  color:#0f172a;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.06);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.pickToggle:hover .pickPill{
  transform: translateY(-0.5px);
}

/* Neon “lit” state */
.pickToggle:active .pickPill{
  transform: translateY(0.5px);
}

.pickToggle input:focus-visible + .pickPill{
  outline:2px solid rgba(29,78,216,0.55);
  outline-offset:2px;
}

.pickToggle input:checked + .pickPill{
  border-color:#22c55e;
  background:#bbf7d0; /* filled light green */
  color:#064e3b;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.35), 0 0 14px rgba(34,197,94,0.55);
}

/* Zebra striping by line (A/B) — subtle, “app” vibes */
.mainTable tr.lineA td{ background:#ffffff; }
.mainTable tr.lineB td{ background:#f8fafc; }

/* Hover: gentle focus without nuking contrast */
.mainTable tr.lineA:hover td,
.mainTable tr.lineB:hover td{
  background:#eef2ff;
}

/* Divider between lines (only on the first slot row) */
.mainTable tr.lineStart td{
  border-top:2px solid #cbd5e1;
}
.mainTable tr.lineStart td:first-child{
  border-top-left-radius:12px;
}
.mainTable tr.lineStart td:last-child{
  border-top-right-radius:12px;
}

/* Reduce visual noise between slots inside the same line */
.mainTable tr:not(.lineStart) td{
  border-top:0;
}
.mainTable tr:not(.lineEnd) td{
  /* keep bottom rule; lineEnd gives a little breathing room */
}

/* Slightly separate each LINE section with extra spacing illusion */
.mainTable tr.lineEnd td{
  box-shadow: inset 0 -6px 0 rgba(15,23,42,.02);
}

/* --- /Main Table --- */
/* --- /Main Table --- */


/* Generated tickets header - light orange */
.tickets table thead th,
.ticketTable thead th,
.tickets .ticketHeader {
  background-color: #ffe4b3 !important; /* light orange */
  color: #333;
}




/* Modern ON/OFF toggle buttons */
.mainTableToggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Base button */
.toggleBtn {
  min-width: 64px;
  padding: 6px 14px;
  border-radius: 999px; /* pill shape */
  border: 2px solid;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ON button */
.toggleOn {
  border-color: #2ecc71;
  color: #2ecc71;
}

.toggleOn.active {
  background: linear-gradient(180deg, #2ecc71, #27ae60);
  color: #fff;
  box-shadow: 0 2px 6px rgba(46,204,113,0.45);
  transform: translateY(1px);
}

/* OFF button */
.toggleOff {
  border-color: #e74c3c;
  color: #e74c3c;
}

.toggleOff.active {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  color: #fff;
  box-shadow: 0 2px 6px rgba(231,76,60,0.45);
  transform: translateY(1px);
}

/* Hover effects */
.toggleBtn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.toggleBtn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}



/* Required picks (when ON-mode was used) */
.pickPill.reqPick {
  border: 2px solid #e74c3c !important; /* red border */
  box-sizing: border-box;
}

/* =====================================================
   Neon "lights" effect for REQUIRED picks
   - Toggled by body.lights-on (the rocker switch)
   - Keeps the normal red border, but adds a glowing neon aura
   ===================================================== */

@keyframes neonPulseRed {
  0%, 100% {
    box-shadow:
      0 0 2px rgba(255, 30, 30, 0.60),
      0 0 8px rgba(255, 30, 30, 0.55),
      0 0 18px rgba(255, 30, 30, 0.35);
    filter: brightness(1.05);
  }
  50% {
    box-shadow:
      0 0 3px rgba(255, 30, 30, 0.75),
      0 0 12px rgba(255, 30, 30, 0.65),
      0 0 28px rgba(255, 30, 30, 0.45);
    filter: brightness(1.15);
  }
}

body.lights-on .pickPill.reqPick {
  border-color: #ff1e1e !important;
  background: rgba(255, 30, 30, 0.10);
  color: #ff1e1e;
  animation: neonPulseRed 1.6s ease-in-out infinite;
}

/* Make the glow a bit stronger on hover/tap (feels like a real switchable light) */
body.lights-on .pickToggle:hover .pickPill.reqPick,
body.lights-on .pickToggle:active .pickPill.reqPick {
  box-shadow:
    0 0 4px rgba(255, 30, 30, 0.85),
    0 0 16px rgba(255, 30, 30, 0.70),
    0 0 34px rgba(255, 30, 30, 0.50);
}








/* OFF state: rocker looks "up" */
.lightSwitch:not(.is-on) .rocker-face{
  transform: rotateX(10deg) translateY(-1px);
}

/* ON state: rocker looks "pressed down" + subtle green glow */
.lightSwitch.is-on .rocker{
  border-color: rgba(46, 204, 113, 0.65);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.16), 0 2px 4px rgba(0,0,0,0.12);
}
.lightSwitch.is-on .rocker-face{
  background: linear-gradient(to bottom, rgba(46, 204, 113, 0.18), rgba(255,255,255,0.55));
  transform: rotateX(-10deg) translateY(1px);
}
.lightSwitch.is-on .rocker-icon{
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.40));
}




/* --- Realistic wall light switch (VERTICAL / wide orientation) --- */
.lightSwitch{
  margin-left: 12px;
  width: 52px;      /* wider */
  height: 28px;     /* shorter height */
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}

.lightSwitch .switchPlate{
  width: 52px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(to right, #f8f8f8, #e0e0e0);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.8),
    inset -1px 0 0 rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightSwitch .switchToggle{
  width: 26px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(to right, #ffffff, #d8d8d8);
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.9),
    inset -1px 0 0 rgba(0,0,0,0.15);
  transform: translateX(-8px);
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

/* ON state: switch pressed right */
.lightSwitch.is-on .switchToggle{
  transform: translateX(8px);
  background: linear-gradient(to right, #eaffea, #b8f0b8);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.9),
    inset -1px 0 0 rgba(0,128,0,0.25),
    0 0 6px rgba(46,204,113,0.5);
}

.lightSwitch.is-on .switchPlate{
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.8),
    inset -1px 0 0 rgba(0,128,0,0.2),
    0 0 6px rgba(46,204,113,0.4);
}.compactCtl{
  margin-left: 6px;
  gap: 4px;
}

.compactCtl .ctlLabel{
  font-size: 11px;
  opacity: 0.7;
}

.compactSelect{
  width: 44px;      /* very thin */
  padding: 2px 4px;
  font-size: 12px;
}


/* Right-side controls in same row */
.rightControls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Ensure parent row uses flex so rightControls stays on same line */
.topbar-actions,
.controlsRow,
.mainControls{
  display: flex;
  align-items: center;
}

/* ===== Calibration / Magnifier panel cleanup ===== */
.tofesMagOverlay{
  position: fixed;
  right: 14px;
  top: 74px;
  width: 360px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 92px);
  overflow: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index: 9999;
}

.tofesMagTitle{
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  cursor: grab;
  user-select: none;
}

.tofesControls{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 14px 12px;
}

.tofesNavRow{
  display:flex;
  align-items:center;
  gap:8px;
}
.tofesNavRow .tofesCounter{
  flex:1;
  text-align:center;
  font-weight:600;
  opacity:.9;
}
.tofesBtnSmall{
  padding: 8px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.tofesGroup{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  overflow: hidden;
}
.tofesGroup > summary{
  list-style: none;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  user-select: none;
}
.tofesGroup > summary::-webkit-details-marker{ display:none; }
.tofesGroupBody{
  padding: 10px 12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tofesRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.tofesLabel{
  width: 64px;
  font-weight: 600;
  opacity: .9;
}
.tofesZoomRow{
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
}
.tofesZoomRow input[type="range"]{ flex: 1; }

.tofesBtnStack{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tofesBtnRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.tofesBtnRow button{ width:100%; }

.tofesBtnGrid2{
  flex:1;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.tofesBtnIcon{
  padding: 10px 0;
  border-radius: 10px;
}

.tofesMiniRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
}
.tofesMiniSelect{
  flex:1;
  min-width: 160px;
  padding: 8px 10px;
  border-radius: 10px;
}
.tofesMiniLab{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight: 600;
  opacity: .9;
}
.tofesMiniLab input{
  width: 80px;
  padding: 6px 8px;
  border-radius: 10px;
}

@media (max-width: 860px){
  .tofesMagOverlay{
    top: auto;
    bottom: 12px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 48vh;
  }
}

.tofesMagHint{
  pointer-events:none;
  opacity:.75;
}


/* --- Main Table multi-slot (Line + Slot tags) --- */
#mainTable .lineCol{
  width: 38px;
  text-align:center;
  font-weight:700;
  color:var(--muted);
}
#mainTable .gameCellWrap{
  display:flex;
  align-items:center;
  gap:8px;
}
#mainTable .slotTag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.35);
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  color:var(--muted);
}

/* Empty state for tickets */
.ticketsEmpty{
  padding: 12px 10px;
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.85;
}


/* Locked game numbers: make disabled options clearly "not available" */
select.game option:disabled{
  color: #7d7d7d;
  background: #e9e9e9;
}

/* Visual feedback when user tries to pick a locked number */
select.blockedPulse{
  animation: blockedPulse 0.55s ease;
}
@keyframes blockedPulse{
  0%{ transform: translateX(0); }
  20%{ transform: translateX(-2px); }
  40%{ transform: translateX(2px); }
  60%{ transform: translateX(-2px); }
  80%{ transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

/* Toast */
#toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(18,18,20,0.92);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  letter-spacing: 0.2px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: opacity 140ms ease, transform 140ms ease;
}
#toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}


/* Strong visual for locked game numbers in dropdowns */
select.mainGameSel option:disabled,
select.mainGameSel option.lockedOpt{
  color: #b5b5b5 !important;
  background: #f3f3f3;
}

select.mainGameSel:disabled{
  opacity: 0.6;
}


/* Odds calculator */
.oddsCard .oddsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.oddsCtl{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

.oddsCtl select{
  height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:var(--ink);
  padding:0 10px;
  font-size:13px;
  outline:none;
}

.oddsCtl select:focus{
  border-color:rgba(29,78,216,.55);
  box-shadow:0 0 0 3px rgba(29,78,216,.15);
}

.oddsResults{
  display:flex;
  gap:14px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(182,194,209,.9);
}

.oddsResultItem{
  flex:1;
  background:linear-gradient(180deg, #ffffff, #f7fafc);
  border:1px solid rgba(182,194,209,.75);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.oddsResultLabel{
  font-size:12px;
  color:var(--muted);
}

.oddsResultValue{
  font-size:16px;
  letter-spacing:.2px;
}

@media (max-width: 980px){
  .oddsCard .oddsGrid{ grid-template-columns: 1fr; }
  .oddsResults{ flex-direction:column; }
}




/* v28 Odds Calculator: vertical rows that match Games to pick */
.oddsCard .oddsLayout{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:12px;
  margin-top:10px;
}

.oddsList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.oddsRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(182,194,209,.75);
  background:linear-gradient(180deg, #ffffff, #f7fafc);
}

.oddsRowIdx{
  width:22px;
  height:22px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  color:rgba(15,23,42,.75);
  background:#eef2f7;
  border:1px solid rgba(182,194,209,.9);
  flex:0 0 auto;
}

.oddsRowLabel{
  font-size:12px;
  color:var(--muted);
  flex:1 1 auto;
}

.oddsRow select{
  height:32px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f8fafc;
  color:var(--ink);
  padding:0 10px;
  font-size:13px;
  outline:none;
  min-width:120px;
}

.oddsRow select:focus{
  border-color:rgba(29,78,216,.55);
  box-shadow:0 0 0 3px rgba(29,78,216,.15);
}

.oddsSummary{
  border-radius:18px;
  border:1px solid rgba(182,194,209,.75);
  background:linear-gradient(180deg, #ffffff, #f6f8fb);
  padding:10px 12px;
  height: fit-content;
}

.oddsSummaryRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 6px;
  border-bottom:1px dashed rgba(182,194,209,.9);
}

.oddsSummaryRow:last-child{
  border-bottom:none;
}

.oddsKey{
  font-size:12px;
  color:var(--muted);
}

.oddsVal{
  font-weight:800;
  letter-spacing:.2px;
  font-variant-numeric: tabular-nums;
}

.totalReturnRow .oddsVal{
  font-size:16px;
}


/* Main Table: % slider column */
.mainTable th.pctCol,
.mainTable td.pctCol{
  width: 320px;
  min-width: 300px;
}
.pctWrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.pctWrap .mainPctRange{
  flex: 1 1 auto;
  width: 240px;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--pctColor,#cbd5e1) 0%, var(--pctColor,#cbd5e1) var(--pctFill,0%), #d6d6d6 var(--pctFill,0%), #d6d6d6 100%);
  outline: none;
  border: 1px solid rgba(0,0,0,0.08);
}
.mainPctRange::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: transparent;
}
.mainPctRange::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pctColor,#94a3b8);
  border: 2px solid #ffffff;
  box-shadow: 0 0 var(--pctGlow,0px) var(--pctColor,#94a3b8);
  margin-top: -4px; /* centers thumb on track */
}
.mainPctRange::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: transparent;
}
.mainPctRange::-moz-range-progress{
  height: 10px;
  border-radius: 999px;
  background: var(--pctColor,#94a3b8);
}
.mainPctRange::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pctColor,#94a3b8);
  border: 2px solid #ffffff;
  box-shadow: 0 0 var(--pctGlow,0px) var(--pctColor,#94a3b8);
}
.pctWrap .pctVal{
  font-weight:700;
  min-width: 48px;
  text-align:right;
}

/* --- Game Appearance Stats --- */
.statsCard{margin-top:12px}
.statsHint{font-size:12px;color:var(--muted)}
.statsTableWrap{overflow:auto;border-radius:14px;border:2px solid var(--line);background:linear-gradient(180deg,#ffffff,#fbfdff)}
.statsTable{width:100%;border-collapse:separate;border-spacing:0;min-width:520px}
.statsTable thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#f2f6ff,#ffffff);
  color:var(--muted);
  font-weight:800;
  font-size:12px;
  border-bottom:2px solid var(--line);
  padding:10px 10px;
  text-align:left;
}
.statsTable tbody td{
  padding:10px 10px;
  border-bottom:1px solid rgba(182,194,209,.7);
  font-size:13px;
}
.statsTable tbody tr:nth-child(2n) td{background:rgba(231,240,255,.25)}
.statsTable tbody tr:hover td{background:rgba(223,247,243,.45)}
.statsTable .rankCol{width:44px}
.statsTable .gameNumCol{width:90px;font-weight:900}
.statsTable .countCol{width:110px;font-weight:800}
.statsTable .pctOfTicketsCol{width:110px;font-weight:800}
.statsTable .barCol{min-width:220px}
.statsEmpty{
  padding:12px 14px;
  color:var(--muted);
  font-size:12px;
}
.statBar{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(11,18,32,.06);
  overflow:hidden;
}
.statBar > i{
  display:block;height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#eab308,#f97316,#ef4444,#b91c1c);
  box-shadow:0 6px 12px rgba(185,28,28,.18);
}
.badgeChip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(11,18,32,.12);
  background:rgba(231,240,255,.7);
  font-size:12px;
  font-weight:800;
  color:var(--ink);
}

/* Tickets Viewer Modal (show one generated ticket at a time) */
.ticketsModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:10000;
}
.ticketsModal.isOpen{ display:flex; }

.ticketsPanel{
  width:min(420px, 94vw); /* smaller than a typical phone screen but responsive */
  height:min(78vh, 560px);
  background:#ffffff;
  border:2px solid rgba(0,0,0,0.25);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.ticketsTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.03);
}
.ticketsTitle{ font-weight:900; }
.ticketsClose{
  width:auto;
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:8px;
}

.ticketsBody{
  flex:1;
  overflow:auto;
  background:rgba(0,0,0,0.02);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:10px;
}

.ticketViewer{
  width:100%;
  display:flex;
  justify-content:center;
}

.ticketViewer .ticket{
  width:100%;
  max-width:380px;
}

.ticketsBottom{
  border-top:1px solid rgba(0,0,0,0.18);
  background:rgba(0,0,0,0.03);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ticketsNav{
  width:auto;
  padding:8px 12px;
  border-radius:10px;
  flex:0 0 auto;
}

.ticketCounter{
  font-weight:900;
  opacity:0.85;
  text-align:center;
  min-width:88px;
}


/* ===== Ticket viewer (modal) – upgraded design (scoped so main page stays the same) ===== */
.ticketsPanel{
  border:1px solid rgba(0,0,0,0.18);
  background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
}

.ticketsTop{
  background:linear-gradient(135deg, rgba(29,78,216,.10), rgba(15,118,110,.08));
}

.ticketViewer .ticket{
  max-width:320px;        /* smaller + more “card” vibe */
  margin:6px auto 2px;
  border:0;
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,0.12);
}

.ticketsPanel .ticket thead th{
  border:0;
  padding:12px 12px;
  background:linear-gradient(135deg, rgba(29,78,216,.18), rgba(15,118,110,.14));
  font-size:14px;
}

.ticketsPanel .ticket thead th:last-child{
  text-align:right;
}

.ticketsPanel .ticket td{
  border-left:0;
  border-right:0;
  padding:10px 12px;
  font-size:13px;
}

.ticketsPanel .ticket tbody tr:nth-child(odd) td{
  background:rgba(0,0,0,0.018);
}

.ticketsPanel .ticket tbody tr:hover td{
  background:rgba(29,78,216,0.045);
}

.ticketsPanel .ticket td.pick{
  text-align:right;
  font-weight:1000;
  letter-spacing:0.2px;
  color:var(--ink);
}

.ticketsPanel .ticket td.pick::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:99px;
  margin-right:8px;
  background:rgba(29,78,216,.55);
  vertical-align:middle;
}

.ticketsPanel .ticket td.pick.requiredPick{
  border:0;
  position:relative;
  color:#7a1a1a;
}

.ticketsPanel .ticket td.pick.requiredPick::before{
  background:rgba(255,43,43,.70);
  box-shadow:0 0 0 4px rgba(255,43,43,.14);
}

.ticketsPanel .ticket tfoot td.returnTotal{
  border:0;
  padding:10px 12px;
  background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  color:#b51616;
  font-weight:1000;
  font-size:13px;
}

.ticketsPanel .ticketsNav{
  border-radius:12px;
  padding:8px 12px;
}