/* Daily Lotto Predictor (/predict) - the site's own blue, matching the
   home page hero (.home-hero in templates/index.html) so the banner reads as
   the same site rather than a separate product.
   Layered over Bootstrap 4.5.2, which stays because menu_bar.html needs it. */
:root{
  --ct:#007BFF; --ct-light:#2f9bff; --ct-dark:#0062cc;
  --ct-wash:#eff6ff; --ct-edge:#bfdbfe;
  --ink:#0a2540; --muted:#64748b; --line:#e8eef5;
  --ct-shadow:0 6px 24px rgba(16,42,77,0.08);
}
*{box-sizing:border-box;}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:#f2f4f7;
     margin:0;color:#334155;line-height:1.6;}

/* ---- Hero ---- */
/* Gradient and dot overlay copied verbatim from .home-hero so the two banners
   are the same blue. Change them together or they drift. */
.ct-hero{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(135deg,#0062cc 0%,#007BFF 55%,#2f9bff 100%);
  padding:40px 20px 58px;}
.ct-hero::after{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px,transparent 1px);
  background-size:22px 22px;pointer-events:none;}
.ct-hero-inner{max-width:1100px;margin:0 auto;position:relative;}
.ct-badge{display:inline-block;background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);color:#fff;font-weight:700;font-size:0.74rem;
  letter-spacing:0.05em;text-transform:uppercase;padding:5px 13px;border-radius:100px;
  margin-bottom:14px;}
.ct-hero h1{font-size:2rem;font-weight:800;margin:0 0 8px;letter-spacing:-0.02em;}
.ct-hero p{opacity:0.95;margin:0 auto;font-size:1.02rem;max-width:520px;}
.ct-updated{opacity:.8;font-size:0.86rem;margin:6px auto 0;}
.ct-clock{display:inline-block;margin-top:16px;
  background:rgba(0,0,0,0.22);padding:9px 16px;border-radius:10px;
  font-weight:800;font-size:0.95rem;}
.ct-clock #contestCountdown{margin-left:6px;}
/* The leaderboard is the reason to come back, but its only links were faint
   ghost buttons in the sidebar, below the fold on a phone. A solid white
   button on the hero is unmissable and still does not compete with Submit my
   picks, which owns the blue further down the page. */
.ct-hero-cta{margin-top:16px;}
.ct-hero-btn{display:inline-block;background:#fff;color:var(--ct-dark);
  font-weight:800;font-size:0.95rem;padding:11px 22px;border-radius:99px;
  text-decoration:none;box-shadow:0 5px 16px rgba(0,0,0,0.18);
  transition:background .12s ease,transform .12s ease;}
.ct-hero-btn:hover{background:#eaf3ff;color:var(--ct-dark);
  text-decoration:none;transform:translateY(-1px);}
.ct-hero-btn i{margin-right:7px;}
.ct-hero-btn:focus-visible{outline:3px solid #fff;outline-offset:3px;}

/* ---- Layout ---- */
.ct-wrap{max-width:1100px;margin:-34px auto 60px;padding:0 16px;position:relative;}
.ct-wrap.narrow{max-width:720px;}
.ct-cols{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;}
@media (min-width:992px){.ct-cols{grid-template-columns:1.55fr 1fr;}}

/* ---- Cards ---- */
.ct-card{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--ct-shadow);padding:22px;margin-bottom:18px;}
.ct-card h2{font-size:1.15rem;font-weight:800;color:var(--ink);margin:0 0 14px;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.ct-card h2 .ct-count{font-size:0.9rem;color:var(--ct);font-weight:800;}
.ct-card .ct-sub{color:var(--muted);font-size:0.9rem;margin:-8px 0 16px;}
/* Shown only to a player whose email is not confirmed yet. Amber, not red:
   nothing has gone wrong, there is just one step left. */
.ct-verify{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;
  padding:14px 16px;margin:0 0 18px;text-align:left;}
.ct-verify strong{display:block;color:#92400e;font-size:1rem;margin-bottom:4px;}
.ct-verify span{color:#78350f;font-size:0.92rem;}
.ct-alert{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  border-radius:12px;padding:12px 16px;margin-bottom:18px;font-weight:600;}

/* ---- Number grid ---- */
.ct-nums{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
@media (min-width:768px){.ct-nums{grid-template-columns:repeat(9,1fr);}}
.ct-num{aspect-ratio:1;border-radius:50%;background:#fff;border:2px solid #e2e8f0;
  color:#64748b;font-weight:700;font-size:1rem;cursor:pointer;padding:0;
  transition:background .12s ease,border-color .12s ease,color .12s ease,transform .12s ease;}
.ct-num:hover{border-color:var(--ct-light);color:var(--ct-dark);}
.ct-num.is-picked{background:var(--ct);border-color:var(--ct);color:#fff;
  box-shadow:0 4px 10px rgba(0,123,255,0.35);transform:translateY(-1px);}
.ct-num:focus-visible{outline:3px solid var(--ct-light);outline-offset:2px;}

/* 6 balls only clear a 44px tap target with tighter spacing. At this file's
   own base spacing (16/22/8) 320px gives 34.0px, 360px gives 40.7px and
   375px gives 43.2px, all below 44px. The tight 8/8/4 spacing gives
   44.7px, 51.3px and 53.8px at those same widths, so the breakpoint below
   has to cover every width up to the first one that clears 44px on the
   base spacing alone, which is 380px at exactly 44.0px. The breakpoint sits
   at 389px, slightly wider than strictly needed, which costs nothing. */
@media (max-width:389px){
  .ct-wrap{padding:0 8px;}
  .ct-card--nums{padding:8px;}
  .ct-nums{gap:4px;}
}

/* ---- Rules steps ---- */
.ct-steps{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:768px){.ct-steps{grid-template-columns:repeat(5,1fr);}}
.ct-step{background:var(--ct-wash);border:1px solid var(--ct-edge);border-radius:12px;
  padding:12px 14px;display:flex;gap:10px;align-items:flex-start;}
@media (min-width:768px){.ct-step{flex-direction:column;gap:6px;}}
.ct-step .n{display:inline-flex;width:24px;height:24px;border-radius:50%;
  background:var(--ct);color:#fff;font-weight:800;font-size:0.8rem;
  align-items:center;justify-content:center;flex:none;}
.ct-step span{color:#334155;font-size:0.9rem;line-height:1.4;}

/* ---- Points chips ---- */
.ct-points{display:grid;gap:8px;}
.ct-point{display:flex;justify-content:space-between;align-items:center;
  background:#f8fafc;border:1px solid #eef2f7;border-radius:10px;padding:10px 14px;}
.ct-point b{font-weight:800;color:var(--ct-dark);}
.ct-point.is-top{background:var(--ct-wash);border-color:var(--ct-edge);}
.ct-point.is-top span{font-weight:800;color:var(--ink);}

/* ---- Ranked rows ---- */
.ct-row{display:flex;align-items:center;gap:12px;padding:11px 4px;
  border-bottom:1px solid #f1f5f9;}
.ct-row:last-child{border-bottom:none;}
.ct-rank{width:28px;height:28px;border-radius:50%;background:#f1f5f9;color:var(--muted);
  font-weight:800;font-size:0.82rem;display:flex;align-items:center;justify-content:center;flex:none;}
.ct-rank.is-1{background:#fde68a;color:#92400e;}
.ct-rank.is-2{background:#e2e8f0;color:#475569;}
.ct-rank.is-3{background:#fed7aa;color:#9a3412;}
.ct-name{flex:1;min-width:0;font-weight:700;color:var(--ink);font-size:0.95rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-name small{display:block;font-weight:500;color:#64748b;font-size:0.76rem;}
.ct-score{font-weight:800;color:var(--ct-dark);font-size:1rem;flex:none;}
.ct-score small{color:#64748b;font-size:0.72rem;font-weight:600;}
.ct-empty{color:var(--muted);text-align:center;padding:18px 0;margin:0;}

/* ---- Tabs ----
   A segmented control, not two loose buttons. The strip sits half over the
   blue hero because .ct-wrap pulls up over it, so a blue active tab on a blue
   background disappeared and the pair read as two cards rather than a choice.
   The white track is what supplies the contrast on any background, and the
   filled segment is unambiguously the selected one. */
.ct-tabs{display:flex;gap:4px;margin-bottom:18px;background:#fff;padding:5px;
  border-radius:14px;border:1px solid var(--line);box-shadow:var(--ct-shadow);}
.ct-tab{flex:1;text-align:center;font-weight:800;font-size:0.92rem;padding:11px 8px;
  border-radius:10px;background:transparent;color:var(--muted);border:none;
  cursor:pointer;font-family:inherit;position:relative;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;}
.ct-tab:hover{background:var(--ct-wash);color:var(--ct-dark);}
.ct-tab.is-active{background:var(--ct);color:#fff;
  box-shadow:0 3px 10px rgba(0,123,255,0.32);}
.ct-tab.is-active:hover{background:var(--ct);color:#fff;}
/* A notch under the selected segment, pointing at the panel it controls, so
   the strip reads as tabs rather than a pair of toggle buttons. */
.ct-tab.is-active::after{content:'';position:absolute;bottom:-9px;left:50%;
  width:12px;height:12px;background:var(--ct);transform:translateX(-50%) rotate(45deg);
  border-radius:2px;}
.ct-tab:focus-visible{outline:3px solid var(--ct-light);outline-offset:2px;}
.ct-panel{display:none;}
.ct-panel.is-active{display:block;}

/* ---- Form ---- */
.ct-field{margin-bottom:16px;}
.ct-field label{display:block;font-weight:700;color:var(--ink);font-size:0.9rem;margin-bottom:6px;}
.ct-input{width:100%;border:1px solid #e2e8f0;border-radius:10px;padding:11px 13px;
  font-size:1rem;color:var(--ink);background:#fff;}
.ct-input:focus{outline:none;border-color:var(--ct-light);box-shadow:0 0 0 3px rgba(0,123,255,0.25);}
.ct-hint{color:var(--muted);font-size:0.82rem;margin-top:6px;}
.ct-fields-2{display:grid;grid-template-columns:1fr;gap:0 14px;}
@media (min-width:768px){.ct-fields-2{grid-template-columns:1fr 1fr;}}
.ct-btn{display:block;width:100%;border:none;border-radius:12px;background:var(--ct);
  color:#fff;font-weight:800;font-size:1.02rem;padding:14px;cursor:pointer;
  box-shadow:0 5px 14px rgba(0,123,255,0.3);transition:background .12s ease;}
.ct-btn:hover{background:var(--ct-dark);color:#fff;}
.ct-btn.ghost{background:#fff;color:var(--ct-dark);border:1px solid var(--ct-edge);
  box-shadow:none;text-decoration:none;text-align:center;}
.ct-btn.ghost:hover{background:var(--ct-wash);}

/* ---- Picked-number balls (my entries) ---- */
.ct-balls{display:flex;flex-wrap:wrap;gap:5px;}
.ct-ball{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--ct-wash);
  border:1px solid var(--ct-edge);color:var(--ct-dark);font-weight:800;font-size:0.82rem;}
.ct-ball.is-hit{background:var(--ct);border-color:var(--ct);color:#fff;}

.ct-foot{text-align:center;color:var(--muted);font-size:0.9rem;margin:6px 0 0;}