/* ==========================================================================
   Chave do Dia - tokens do design system
   Paleta roxo + amarelo, Baloo 2 (titulos) e Poppins (texto).
   Os nomes de classe sao os que o render.mjs gera; os tokens sao os da marca.
   ========================================================================== */
:root{
  color-scheme: light dark;

  --roxo-50:#F5F1FA;  --roxo-100:#E7DEF2; --roxo-500:#6E3FA0;
  --roxo-800:#4A2670; --roxo-900:#34174F;
  --amarelo-500:#FFD400; --amarelo-600:#E6BE00;
  --rosa-500:#E8467C; --laranja-500:#FF8A3D; --agua-500:#16BFA8;
  --branco:#FFFFFF;

  --ground:var(--roxo-50);
  --surface:var(--branco);
  --surface-2:var(--roxo-50);
  --ink:var(--roxo-900);
  --muted:var(--roxo-500);
  --line:var(--roxo-100);
  --brand:var(--roxo-500);
  --brand-soft:var(--roxo-50);
  --next-bg:var(--roxo-500);
  --next-fg:var(--branco);
  --gold:var(--amarelo-600);
  --gold-fill:var(--amarelo-500);
  --sobre-amarelo:var(--roxo-900);
  --hot:var(--rosa-500);
  --cold:var(--agua-500);
  --slot:var(--roxo-100);

  --bola-1:var(--roxo-500);
  --bola-2:var(--agua-500);
  --bola-3:var(--amarelo-500);
  --bola-4:var(--laranja-500);
  --bola-5:var(--rosa-500);

  --raio-sm:8px; --raio-md:12px; --raio-lg:20px; --raio-pilula:999px;
  --shadow:0 1px 2px rgba(52,23,79,.06), 0 12px 32px -16px rgba(52,23,79,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:var(--roxo-900); --surface:var(--roxo-800); --surface-2:#3F2060;
    --ink:var(--branco); --muted:var(--roxo-100); --line:#5A3382;
    --brand:var(--amarelo-500); --brand-soft:#3F2060; --next-bg:var(--roxo-500);
    --slot:#5A3382;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:var(--roxo-900); --surface:var(--roxo-800); --surface-2:#3F2060;
  --ink:var(--branco); --muted:var(--roxo-100); --line:#5A3382;
  --brand:var(--amarelo-500); --brand-soft:#3F2060; --next-bg:var(--roxo-500);
  --slot:#5A3382;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 14px 34px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Poppins","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Baloo 2","Poppins",Arial,sans-serif;font-weight:800;text-wrap:balance;margin:0}
.mono{font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold-fill);outline-offset:3px;border-radius:var(--raio-sm)}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- topo ---------- */
.masthead{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.masthead .wrap{display:flex;align-items:center;gap:20px;height:66px}
.logo{display:flex;align-items:baseline;gap:2px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:21px;letter-spacing:.01em;text-decoration:none;color:var(--brand)}
.logo .dot{color:var(--gold-fill)}
.logo .tld{font-weight:500;color:var(--muted);font-size:15px;font-family:"Poppins",sans-serif}
nav.main{margin-left:auto;display:flex;gap:24px;font-size:15px;font-weight:500}
nav.main a{text-decoration:none;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent}
nav.main a.on,nav.main a:hover{color:var(--ink);border-bottom-color:var(--gold-fill)}
.draftflag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-amarelo);background:var(--gold-fill);border-radius:var(--raio-pilula);padding:5px 14px}
@media(max-width:860px){nav.main{display:none}}

.notice{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.notice .wrap{padding-top:10px;padding-bottom:10px}

/* ---------- espacos publicitarios ---------- */
.adslot{border:2px dashed var(--slot);border-radius:var(--raio-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);text-align:center;background:transparent}
.adslot b{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.adslot span{font-size:12px}
.ad-leader{height:96px;margin:24px 0}
.ad-rect{height:262px}
.ad-inline{height:104px;margin:6px 0 4px}

/* anuncios da casa: a imagem manda na altura, nunca transborda */
.casa{display:block;line-height:0;border-radius:var(--raio-md);overflow:hidden}
.casa img{display:block;width:100%;height:auto;max-width:100%}
.casa.leaderboard{max-width:728px;margin:24px auto}
.casa.rail{max-width:300px}
.casa.artigo{max-width:970px;margin:20px auto}

/* ---------- estrutura ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:32px;align-items:start;padding-bottom:48px}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.rail{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
@media(max-width:1000px){.rail{position:static}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--raio-lg);box-shadow:var(--shadow);overflow:hidden}
.panel-pad{padding:24px}
@media(min-width:700px){.panel-pad{padding:32px}}

.eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- sorteio principal ---------- */
.draw-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-bottom:4px}
.draw-head h1{font-size:clamp(28px,4vw,40px);line-height:1.1}
.draw-id{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted);background:var(--surface-2);border-radius:var(--raio-pilula);padding:5px 14px;white-space:nowrap}
.balls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 6px}
.ball{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bola-1);border:0;color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.balls .ball:nth-child(5n+1){background:var(--bola-1);color:#fff}
.balls .ball:nth-child(5n+2){background:var(--bola-2);color:#fff}
.balls .ball:nth-child(5n+3){background:var(--bola-3);color:var(--sobre-amarelo)}
.balls .ball:nth-child(5n+4){background:var(--bola-4);color:var(--roxo-900)}
.balls .ball:nth-child(5n+5){background:var(--bola-5);color:#fff}
.plus{color:var(--muted);font-size:22px;font-weight:600;padding:0 2px}
.star{width:66px;height:66px;display:grid;place-items:center;position:relative;flex:none;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:24px;color:var(--sobre-amarelo);font-variant-numeric:tabular-nums}
.star::before{content:"";position:absolute;inset:0;background:var(--gold-fill);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star span{position:relative;transform:translateY(3px)}
@media(max-width:560px){
  .ball{width:50px;height:50px;font-size:20px}
  .star{width:54px;height:54px;font-size:19px}
  .balls{gap:8px}
}
.legend{display:flex;flex-wrap:wrap;gap:22px;font-size:13.5px;color:var(--muted);margin-top:12px}
.legend b{color:var(--ink);font-weight:600}

/* ---------- barra de estado ---------- */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
@media(max-width:640px){.statrow{grid-template-columns:1fr}}
.stat{background:var(--surface);padding:18px 24px}
.stat .k{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.stat .v{font-family:"Baloo 2",sans-serif;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.stat .v.jack{color:var(--brand)}

/* ---------- proximo sorteio ---------- */
.next{background:var(--next-bg);color:var(--next-fg);border-radius:var(--raio-lg);padding:24px;border:0}
.next .eyebrow{color:rgba(255,255,255,.75)}
.next .eyebrow::after{background:rgba(255,255,255,.25)}
.next .amount{font-family:"Baloo 2",sans-serif;font-size:34px;line-height:1.12;font-weight:800;margin:8px 0 4px;color:var(--gold-fill);font-variant-numeric:tabular-nums}
.next .when{font-size:14px;color:rgba(255,255,255,.85)}
.clock{display:flex;gap:8px;margin-top:16px}
.clock div{flex:1;background:rgba(255,255,255,.14);border-radius:var(--raio-sm);padding:8px 4px;text-align:center}
.clock .n{font-family:"Baloo 2",sans-serif;font-size:21px;font-weight:800;color:var(--next-fg);font-variant-numeric:tabular-nums}
.clock .l{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.72)}

/* ---------- tabela escaloes ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
th,td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;border-bottom:1.5px solid var(--line)}
tbody td{font-variant-numeric:tabular-nums;font-size:14px}
tbody td:first-child{font-weight:500}
tbody tr:first-child td{background:var(--brand-soft)}
tbody tr:hover td{background:var(--surface-2)}
.tier{color:var(--muted);font-weight:400;margin-right:8px;font-size:13px}

/* ---------- sorteio anterior ---------- */
.prev{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
@media(max-width:700px){.prev{grid-template-columns:1fr}}
.miniballs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mini{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bola-1);border:0;color:#fff;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:17px;line-height:1;font-variant-numeric:tabular-nums}
.miniballs .mini:nth-child(5n+1){background:var(--bola-1);color:#fff}
.miniballs .mini:nth-child(5n+2){background:var(--bola-2);color:#fff}
.miniballs .mini:nth-child(5n+3){background:var(--bola-3);color:var(--sobre-amarelo)}
.miniballs .mini:nth-child(5n+4){background:var(--bola-4);color:var(--roxo-900)}
.miniballs .mini:nth-child(5n+5){background:var(--bola-5);color:#fff}
.mini.st{background:var(--gold-fill);color:var(--sobre-amarelo)}
.m1lhao{border-left:4px solid var(--gold-fill);background:var(--surface-2);padding:14px 18px;border-radius:0 var(--raio-md) var(--raio-md) 0}
.m1lhao .code{font-family:"Baloo 2",sans-serif;font-size:26px;font-weight:800;letter-spacing:.08em;color:var(--brand)}
.m1lhao .k{font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}

/* ---------- estatisticas ---------- */
.freqgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:16px}
.freq{border:1px solid var(--line);border-radius:var(--raio-md);padding:10px 12px;display:flex;align-items:center;gap:10px}
.freq .n{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:16px;font-variant-numeric:tabular-nums;color:#fff}
.freq.h .n{background:var(--hot)}
.freq.c .n{background:var(--cold)}
.freq .meta{min-width:0}
.freq .c1{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.freq .c2{font-size:12px;color:var(--muted)}
.bar{height:4px;border-radius:2px;background:var(--line);margin-top:4px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px}
.freq.h .bar i{background:var(--hot)}
.freq.c .bar i{background:var(--cold)}

/* ---------- arquivo / faq ---------- */
.archive{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:14px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:var(--raio-md);padding:11px 16px;text-decoration:none;font-size:14.5px}
.arow:hover{border-color:var(--brand);background:var(--surface-2)}
.arow .d{color:var(--muted);font-size:13px}
.arow .k{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}

details{border-bottom:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:0}
summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted)}
details[open] summary::after{content:"−"}
details p{margin:10px 0 0;color:var(--muted);font-size:15px;max-width:62ch}

.prose p{color:var(--muted);max-width:64ch;font-size:15.5px}
.prose p strong{color:var(--ink)}

/* ---------- rodape ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding:32px 0 44px;font-size:14px;color:var(--muted)}
footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
@media(max-width:760px){footer .grid{grid-template-columns:1fr}}
footer a{color:var(--muted)}
footer h4{font-family:"Baloo 2",sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.age{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--hot);color:#fff;font-weight:700;font-size:13px}

.gap{display:flex;flex-direction:column;gap:24px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- extras por jogo ---------- */
.ball.ex,.mini.ex{color:#fff}
.balls .ball.ex-sonho,.miniballs .mini.ex-sonho{background:var(--laranja-500);color:var(--roxo-900)}
.balls .ball.ex-sorte,.miniballs .mini.ex-sorte{background:var(--agua-500);color:#fff}

/* ---------- cartoes de jogo na pagina inicial ---------- */
.jogos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:20px}
.jogo{display:flex;flex-direction:column;gap:12px;text-decoration:none;border:1px solid var(--line);border-radius:var(--raio-lg);padding:18px;background:var(--surface)}
.jogo:hover{border-color:var(--brand);background:var(--surface-2)}
.jogo-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jogo-nome{font-family:"Baloo 2",sans-serif;font-weight:800;font-size:18px}
.jogo-top .d{font-size:12.5px;color:var(--muted)}
.jogo .miniballs{margin-top:0}
.jogo-pe{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.jogo .mini{width:36px;height:36px;font-size:14px}

.rail .next + .next{margin-top:0}