/* Visual enrichment — subtle texture, card decoration & micro-animations.
   Loaded AFTER app.css. Self-contained so it won't collide with other edits. */

/* ---- Page texture: faint brand wash + dot grid ---- */
body{
  background:
    radial-gradient(1200px 420px at 50% -140px, rgba(216,0,39,.06), transparent 72%),
    var(--bg);
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(20,22,40,.032) 1px, transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 60%, transparent);
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.12) 60%, transparent);
}
.site-main,.site-footer{position:relative;z-index:1}
.site-header{z-index:50} /* keep app.css position:sticky; sit above the texture layer */

/* ---- Hero: soft brand glow behind the featured card ---- */
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-120px;top:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,0,.10),transparent 65%);pointer-events:none}

/* ---- Lottery cards: growing top accent + corner glow ---- */
.lot-card{position:relative;overflow:hidden}
.lot-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--brand),var(--gold));transition:width .35s ease;z-index:2}
.lot-card:hover::before{width:100%}
.lot-card::after{content:"";position:absolute;right:-36px;top:-36px;width:132px;height:132px;border-radius:50%;
  background:radial-gradient(circle,rgba(216,0,39,.07),transparent 68%);pointer-events:none;transition:transform .45s ease;z-index:0}
.lot-card:hover::after{transform:scale(1.35)}
.lot-card>*{position:relative;z-index:1}

/* ---- Content / info cards: accent bar + faint ring watermark ---- */
.content-card{position:relative;overflow:hidden}
.content-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand),var(--gold))}
.content-card::after{content:"";position:absolute;right:-46px;bottom:-46px;width:150px;height:150px;border-radius:50%;
  border:14px solid rgba(20,22,40,.025);pointer-events:none}
.content-card>*{position:relative}

/* ---- Jackpot hero: gently floating balls ---- */
.jackpot-hero{position:relative;overflow:hidden}
.jackpot-hero::before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;top:-22px;right:-8px;
  background:radial-gradient(circle at 35% 30%,rgba(255,180,0,.16),transparent 70%);animation:mlFloat 6s ease-in-out infinite}
.jackpot-hero::after{content:"";position:absolute;width:60px;height:60px;border-radius:50%;bottom:-16px;left:16px;
  background:radial-gradient(circle at 35% 30%,rgba(216,0,39,.12),transparent 70%);animation:mlFloat 7.5s ease-in-out infinite reverse}
.jackpot-hero .inner{position:relative;z-index:1}
@keyframes mlFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- Live "next draw" pulse dot ---- */
.lc-meta .dot{animation:mlPulse 2.2s infinite}
@keyframes mlPulse{0%{box-shadow:0 0 0 0 rgba(15,157,88,.5)}70%{box-shadow:0 0 0 6px rgba(15,157,88,0)}100%{box-shadow:0 0 0 0 rgba(15,157,88,0)}}

/* ---- Section headings: brand tick ---- */
.sec-head h2{position:relative;padding-left:.8rem}
.sec-head h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--gold))}

/* ---- Balls lift subtly on result-row hover ---- */
.result-row .ball{transition:transform .16s ease}
.result-row:hover .ball{transform:translateY(-2px)}

/* ---- Buttons: soft shadow + lift ---- */
.btn-primary,.btn-gold{box-shadow:0 2px 8px rgba(216,0,39,.18)}
.btn-gold{box-shadow:0 2px 8px rgba(255,180,0,.28)}
.btn-primary:hover,.btn-gold:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(216,0,39,.24)}

/* ---- Stat / step cards: hover lift ---- */
.step,.stat-card,.faq-item{transition:box-shadow .18s ease,transform .18s ease,border-color .18s}
.step:hover,.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.faq-item:hover{border-color:#d7dbe6;box-shadow:var(--shadow-sm)}

/* ---- Scroll reveal (class added by enrich.js; no-JS users unaffected) ---- */
.reveal-init{opacity:0;transform:translateY(16px)}
.reveal-in{opacity:1;transform:none;transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.3,1)}

@media (prefers-reduced-motion:reduce){
  .reveal-init{opacity:1;transform:none}
  .jackpot-hero::before,.jackpot-hero::after,.lc-meta .dot{animation:none}
  .lot-card:hover::after{transform:none}
}

/* ================= Polish pass ================= */

/* ---- Self-hosted fonts (Inter body / Manrope headings) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/manrope.woff2') format('woff2')}
body{font-family:'Inter',var(--font)}
h1,h2,h3,h4,.brand,.brand-text,.hero h1,.jh-amount,.lc-jackpot,.cw-prize,.lr-date,.page-hero h1{
  font-family:'Manrope','Inter',var(--font);letter-spacing:-.025em}
.jh-amount,.lc-jackpot,.cd-box b,.hero h1{letter-spacing:-.035em}

/* ---- Premium glossy lottery balls ---- */
.ball{
  background:radial-gradient(circle at 38% 27%,#fff 0%,#f2f4fa 45%,#dde2ec 100%);
  border:1px solid #ccd2df;
  box-shadow:inset 0 -3px 6px rgba(20,22,40,.10),inset 0 2px 3px rgba(255,255,255,.9),0 2px 5px rgba(20,22,40,.14)}
.ball.bonus{
  background:radial-gradient(circle at 38% 27%,#ffe9a8 0%,#ffca3a 52%,#f2a800 100%);
  border-color:#e0930a;color:#5a3b00;
  box-shadow:inset 0 -3px 6px rgba(120,70,0,.20),inset 0 2px 3px rgba(255,255,255,.55),0 2px 5px rgba(190,120,0,.28)}
.ball::after{content:"";position:absolute;top:12%;left:20%;width:42%;height:30%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.75),transparent 70%);pointer-events:none}
.ball{position:relative}
.ball.sm::after{display:none}

/* ---- Brand mark & buttons: subtle depth ---- */
.brand-mark{background:linear-gradient(180deg,#e60a2f,var(--brand));box-shadow:0 3px 8px rgba(216,0,39,.28)}
.btn-primary{background:linear-gradient(180deg,#e60a2f,var(--brand))}
.btn-primary:hover{background:linear-gradient(180deg,var(--brand),var(--brand-600))}
.btn-gold{background:linear-gradient(180deg,#ffc133,var(--gold))}
.btn-gold:hover{background:linear-gradient(180deg,var(--gold),var(--gold-600))}

/* ---- Card lottery icon a touch larger + crisp ---- */
.lc-head .lot-ico{width:48px;height:48px;filter:drop-shadow(0 2px 4px rgba(20,22,40,.14))}

/* ---- Prize table row hover ---- */
.prize-table tbody tr{transition:background .12s}
.prize-table tbody tr:hover{background:var(--surface-2)}
.prize-table tbody tr.is-jackpot:hover{background:var(--brand-100)}

/* ---- Pick numbers: gloss on selected ---- */
.pick-num{transition:transform .1s ease,background .12s,border-color .12s,box-shadow .12s}
.pick-num.sel{box-shadow:0 3px 8px rgba(216,0,39,.3)}
.pick-num.bonus.sel{box-shadow:0 3px 8px rgba(255,180,0,.35)}
.pick-num:active{transform:scale(.92)}

/* ---- Countdown boxes: soft top highlight ---- */
.cd-box{background:linear-gradient(180deg,#fff,var(--surface-2));box-shadow:inset 0 1px 0 #fff}

/* ---- Details / interaction niceties ---- */
::selection{background:rgba(216,0,39,.16)}
html{scrollbar-width:thin;scrollbar-color:#c9cedb transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#cbd0dd;border-radius:7px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b1b8c9}
a:focus-visible,.btn:focus-visible,.pick-num:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
.prose a,.footer-col a,.main-nav a{transition:color .12s}
.lc-name,.rr-lot .lc-name{transition:color .12s}
.lot-card:hover .lc-name,.rr-link:hover .lc-name{color:var(--brand)}

/* ================= Design-review fixes (P0/P1/P2) ================= */
:root{
  /* P0: darken micro-label grey to meet WCAG AA (was #878da0 = 3.31:1 → now ~4.6:1) */
  --ink-3:#5f6577;
  /* P2: canonical token reference (8pt spacing + fixed type scale) */
  --fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-16:16px;--fs-20:20px;--fs-24:24px;--fs-32:32px;--fs-40:40px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;
  --success:#0f7a44;--warning:#a15c00;--error:#c0122b;--info:#1a56db;
}

/* P0: touch targets ≥ 44px (Web) */
.btn-sm{min-height:44px}
.fb-field select,.slip-select{min-height:44px}
.lot-tab{padding-top:.62rem;padding-bottom:.62rem}
.main-nav a{padding-top:.62rem;padding-bottom:.62rem}

/* P1: lottery-card CTA demoted to outline so the grid has no competing primaries;
   the whole card is the primary target — CTA fills solid only on that card's hover */
.lot-card .btn-primary{background:#fff;color:var(--brand);border:1px solid #f2c6ce}
.lot-card:hover .btn-primary{background:var(--brand);color:#fff;border-color:transparent}

/* P2: top navigation progress bar (perceived loading on full-page reloads) */
#mlProgress{position:fixed;left:0;top:0;height:3px;width:0;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,var(--brand),var(--gold));box-shadow:0 0 8px rgba(216,0,39,.4);
  opacity:0;transition:width .25s ease,opacity .3s}
#mlProgress.on{opacity:1}

/* Fix: legacy dark scroll-header handler in app.js set a dark inline bg that never reset.
   Force the header white in the light theme; add only a subtle shadow on scroll. */
#siteHeader.site-header{background:#fff !important;transition:box-shadow .2s ease}
#siteHeader.site-header.scrolled{box-shadow:0 2px 12px rgba(20,22,40,.09)}