:root{
  /* paleta FIFA World Cup 26 */
  --bg:#000; --ink:#0c0c0e; --pill:#fff; --pink:#ff2e8b; --red:#e5231b;
  --blue:#1e5bff; --green:#16b85c; --purple:#6e2ef0; --lime:#c4e000;
  --teal:#19e5c8; --orange:#ff4a1c; --lav:#b6a4f2; --navy:#0b2e8c;
  --txt:#fff; --mut:#9aa0ab; --line:#22242b; --card:#101116;
  --win:var(--green); --draw:var(--lime); --loss:var(--red);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);position:relative;
  font-family:"Noto Sans",-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45;overflow-x:hidden}
h1,h2,h3,.cond{font-family:"Anton",Impact,sans-serif;font-weight:400;letter-spacing:.5px;text-transform:uppercase}

/* ---------- HERO ---------- */
.hero{position:relative;padding:30px 22px 26px;display:flex;align-items:center;gap:18px;overflow:hidden}
.hero-curve{position:absolute;top:-120px;right:-120px;width:420px;height:300px;
  background:var(--blue);border-radius:0 0 0 100%;opacity:.9;z-index:0}
.hero-curve::after{content:"";position:absolute;left:-90px;bottom:-70px;width:220px;height:220px;
  background:var(--green);border-radius:50%}
.emblem{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  background:#000;border:3px solid #fff;border-radius:16px;padding:8px 14px;line-height:.82}
.emblem span{font-family:"Anton";font-size:2.6rem;line-height:.95}
.emblem small{font-size:.7rem;letter-spacing:3px;font-weight:800;margin-top:3px}
.hero-txt{position:relative;z-index:1}
.hero-txt h1{margin:0;font-size:3rem;line-height:1.04}
.tag{margin:6px 0 0;color:var(--mut);font-size:.82rem;letter-spacing:.5px}
.tag b{color:var(--lime)} .aramco{color:#fff;font-weight:700}

/* ---------- STATS ---------- */
.stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:6px 16px}
.stat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 16px;text-align:center;min-width:104px}
.stat .info{position:absolute;top:6px;right:7px;width:16px;height:16px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:#23262e;color:var(--mut);cursor:pointer;
  font-family:Georgia,serif;font-style:italic;font-size:.72rem;line-height:1;
  display:flex;align-items:center;justify-content:center}
.stat .info:hover{color:#fff;border-color:var(--mut)}
.stat .pop{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:210px;
  background:#1b1e26;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:.72rem;color:#cfd4dc;line-height:1.45;text-align:left;z-index:40;display:none;
  box-shadow:0 10px 28px rgba(0,0,0,.55)}
.stat .pop::before{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#1b1e26}
.stat .pop.show{display:block}
.stat b{display:block;font-family:"Anton";font-size:1.5rem;line-height:1;margin-bottom:5px}
.stat .lbl{line-height:1.25}
.stat.dc b{color:var(--teal)} .stat.xgb b{color:var(--purple)} .stat.ens b{color:var(--lime)}
.stat.live b{color:var(--orange)} .stat.exact b{color:var(--pink)}
.stat .lbl{font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.stat .ls{display:none}
.warn{color:var(--lime);font-size:.76rem;text-align:center;max-width:660px;margin:8px auto 2px;opacity:.85}
.live-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  margin:10px auto;max-width:900px;background:#1a0d10;border:1px solid var(--red);border-radius:14px;padding:8px 14px}
.live-banner.hidden{display:none}
.live-banner b{color:var(--red);font-family:"Anton";letter-spacing:1px}
.live-banner .lv{display:inline-flex;align-items:center;gap:6px;background:#000;border-radius:20px;padding:3px 10px;font-weight:700}
.live-banner .lv img{width:22px;height:15px;border-radius:3px;object-fit:cover}
.live-banner .lv i{color:var(--red);font-style:normal;font-size:.72rem}

/* ---------- TOOLBAR ---------- */
.toolbar{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:16px}
.viewtabs{display:flex;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:4px}
.vtab{display:flex;flex-direction:column;align-items:center;line-height:1;cursor:pointer;
  padding:7px 18px;border-radius:24px;color:var(--mut);font-family:"Anton";font-size:.95rem;letter-spacing:.5px}
.vtab small{font-family:"Noto Sans";font-size:.6rem;font-weight:600;margin-top:3px;opacity:.8;letter-spacing:0}
.vtab.active{background:#fff;color:#000}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:30px;
  padding:6px 14px;font-size:.78rem;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:.5px}
.chip.active{background:#fff;color:#000;border-color:#fff}
.onlynext{color:var(--mut);font-size:.8rem;cursor:pointer;display:flex;gap:6px;align-items:center}

/* ---------- DAY SECTIONS + GRID ---------- */
main{max-width:1240px;margin:0 auto;padding:0 18px 60px;position:relative;z-index:2}
.day{margin:26px 0 14px;display:flex;align-items:center;gap:12px}
.day h2{margin:0;font-size:1.9rem;color:#fff}
.day .num{color:var(--pink)}
.day .count{color:var(--mut);font-size:.78rem;font-weight:700;letter-spacing:.5px}
.day.todayhdr{border-left:5px solid var(--lime);padding-left:12px;margin-left:-17px}
.hoy{font-family:"Anton";background:var(--lime);color:#000;border-radius:7px;padding:2px 10px;font-size:1rem;letter-spacing:1px}
.ko{font-family:"Anton";color:#fff;background:#23262e;border-radius:6px;padding:1px 7px;font-size:.74rem}
.empty{color:var(--mut);padding:40px;text-align:center}
.day-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}

/* ---------- MATCH CARD ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:14px;cursor:pointer;
  transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-3px);border-color:#fff}
.card.live{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 22px -8px var(--red)}
.card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.gtag{font-family:"Anton";font-size:.8rem;background:#fff;color:#000;border-radius:8px;padding:1px 9px}
.topright{display:flex;align-items:center;gap:8px}
.city{color:var(--mut);font-size:.7rem;text-align:right}
.badge{font-family:"Anton";font-size:.66rem;letter-spacing:.5px;padding:2px 8px;border-radius:7px;
  display:inline-flex;align-items:center;gap:5px}
.badge.final{background:#23262e;color:#cfd4dc}
.badge.next{background:var(--blue);color:#fff}
.badge.live{background:var(--red);color:#fff}
.badge .dot,.live-banner .dot{width:7px;height:7px;border-radius:50%;background:#fff;display:inline-block;
  animation:pulse 1.1s infinite}
.live-banner .dot{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.vsbadge.livec{color:var(--red);font-weight:800;animation:blink 1.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.5}}
.row{display:flex;align-items:center;gap:10px;background:var(--pill);color:#000;border-radius:13px;
  padding:8px 12px;margin:6px 0}
.row .flag{width:34px;height:24px;border-radius:5px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.row .name{font-family:"Anton";font-size:1.05rem;flex:1;line-height:1;letter-spacing:.3px}
.row .g{font-family:"Anton";font-size:1.35rem;min-width:26px;text-align:center}
.row.win-row .g{color:var(--green)} .row.lose-row .g{color:#b9bdc4}
.vsbadge{text-align:center;margin:2px 0;font-size:.72rem;color:var(--mut);font-weight:700;letter-spacing:1px}
.predline{text-align:center;font-size:.8rem;margin:8px 0 6px;color:var(--mut)}
.predline b{color:var(--lime);font-family:"Anton";font-size:1rem;letter-spacing:.5px}

.bar{display:flex;height:24px;border-radius:8px;overflow:hidden;font-size:.7rem;font-weight:800}
.bar>div{display:flex;align-items:center;justify-content:center;color:#04130b;min-width:0;white-space:nowrap}
.bh{background:var(--win)} .bd{background:var(--draw)} .ba{background:var(--loss);color:#fff}
.barlbl{display:flex;justify-content:space-between;color:var(--mut);font-size:.64rem;margin-top:4px}
.played{margin-top:9px;font-size:.76rem;text-align:center;border-top:1px solid var(--line);padding-top:8px;font-weight:700}
.ok{color:var(--green)} .bad{color:var(--red)} .pend{color:var(--blue);font-weight:700}

/* ---------- MODAL ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:18px;z-index:60}
.modal.hidden{display:none}
.modal-box{background:var(--ink);border:1px solid var(--line);border-radius:22px;max-width:560px;width:100%;
  max-height:90vh;overflow:auto;padding:24px;position:relative}
.close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--mut);font-size:1.2rem;cursor:pointer}
.modal h2{margin:0 0 2px;font-size:1.5rem}
.modal .msub{color:var(--mut);font-size:.8rem;margin-bottom:12px}
.modal .mhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.modal .mhead:first-of-type{padding-right:42px}   /* deja sitio al boton cerrar */
.modal .mhead img{width:40px;height:28px;border-radius:5px;object-fit:cover}
.modal .mscore{font-family:"Anton";font-size:1.4rem;margin-left:auto}
table.hm{border-collapse:collapse;margin:6px auto;font-size:.7rem}
table.hm td,table.hm th{width:30px;height:26px;text-align:center;color:var(--mut)}
table.hm th{font-weight:800}
table.hm td.cell{color:#0a0e13;border-radius:4px;font-weight:800}
.axislbl{color:var(--mut);font-size:.72rem;text-align:center;margin:6px}
.toplist{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin-top:8px;font-size:.82rem}
.toplist .trow{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:3px 0}
.toplist .trow b{color:var(--lime)}

/* ---------- DECOR BLOBS + FOOTER ---------- */
.blobs{position:absolute;left:0;bottom:0;width:100%;height:160px;z-index:0;pointer-events:none;overflow:hidden}
.blobs .b{position:absolute;bottom:-90px;width:200px;height:200px;border-radius:46% 46% 30px 30px;opacity:.85}
.b1{left:2%;background:var(--green)} .b2{left:13%;background:var(--blue);border-radius:50%}
.b3{left:60%;background:var(--purple)} .b4{left:74%;background:var(--orange);border-radius:46% 46% 30px 30px}
footer{position:relative;z-index:2;text-align:center;color:var(--mut);font-size:.72rem;padding:18px}
@media(max-width:600px){
  .hero{padding:26px 18px 14px;gap:14px}
  .hero-curve{width:280px;height:190px;top:-80px;right:-80px}
  .hero-txt h1{font-size:2.2rem}
  .stats{margin-top:26px;gap:5px;padding:6px 8px;flex-wrap:nowrap}
  .stat{flex:1 1 0;min-width:0;padding:10px 2px;border-radius:11px}
  .stat b{font-size:1.05rem}
  .stat .lbl{font-size:.56rem;letter-spacing:0;white-space:nowrap}
  .stat .lf{display:none}
  .stat .ls{display:inline}
  .stat .info{top:3px;right:3px;width:13px;height:13px;font-size:.58rem}
  .warn{margin:14px auto}
  .live-banner{margin:14px}
  .toolbar{gap:18px;padding:22px 14px}
  .viewtabs{margin-bottom:2px}
  .day{margin:32px 0 16px}
  .day h2{font-size:1.6rem}
  .day.todayhdr{margin-left:-13px;padding-left:10px}
  .day-grid{gap:16px}
  .card{padding:16px}
  main{padding:0 14px 72px}
  .stat .pop{width:190px}
}