/* style.css */
:root{
  --green:#1a7c2e;--green2:#25a83d;--green3:#e8f5eb;
  --yellow:#f9c623;--yellow2:#fff3c4;
  --red:#e63946;--blue:#2176ae;--purple:#7b2d8b;
  --bg:#f4fbf5;--card:#fff;--text:#1a2e1c;--muted:#5a7060;
  --radius:18px;--shadow:0 4px 20px rgba(0,0,0,0.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
a{text-decoration:none; color:inherit;}

/* HERO */
.hero{background:linear-gradient(135deg,#0d4a1a 0%,#1a7c2e 50%,#0a5c20 100%);padding:2rem 1rem 3rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,0.03) 0px,rgba(255,255,255,0.03) 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,rgba(255,255,255,0.03) 0px,rgba(255,255,255,0.03) 1px,transparent 1px,transparent 40px)}
.hero-badge{display:inline-block;background:var(--yellow);color:#5a3800;font-weight:800;font-size:12px;padding:4px 14px;border-radius:999px;margin-bottom:12px;letter-spacing:1px;text-transform:uppercase}
.hero h1{font-family:'Baloo 2',sans-serif;font-size:clamp(2rem,6vw,3.5rem);color:#fff;line-height:1.1;margin-bottom:10px}
.hero h1 span{color:var(--yellow)}
.hero p{color:rgba(255,255,255,0.8);font-size:1.1rem;max-width:500px;margin:0 auto 1.5rem}
.hero-balls{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.ball{position:absolute;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e84040,#a00);opacity:0.15;animation:float 6s ease-in-out infinite}
.ball:nth-child(1){left:5%;top:20%;animation-delay:0s;width:30px;height:30px}
.ball:nth-child(2){right:8%;top:40%;animation-delay:2s;width:50px;height:50px}
.ball:nth-child(3){left:20%;bottom:10%;animation-delay:4s;width:25px;height:25px}
.ball:nth-child(4){right:25%;top:15%;animation-delay:1s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(180deg)}}

/* SEARCH BAR */
.search-wrap{max-width:860px;margin:-1.8rem auto 0;padding:0 1rem;position:relative;z-index:10}
.search-box{background:#fff;border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,0.15);padding:1.2rem 1.5rem;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.search-input{flex:1;min-width:180px;border:2px solid #d4edda;border-radius:12px;padding:10px 16px;font-size:1rem;font-family:'Nunito',sans-serif;outline:none;transition:.2s}
.search-input:focus{border-color:var(--green2)}
.search-input::placeholder{color:#aaa}
.filter-btns{display:flex;gap:8px;flex-wrap:wrap}
.fbtn{padding:8px 14px;border-radius:999px;border:2px solid #d4edda;background:#fff;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:.2s;color:var(--muted)}
.fbtn:hover,.fbtn.active{background:var(--green);color:#fff;border-color:var(--green)}
.fbtn.active-yellow{background:var(--yellow);color:#5a3800;border-color:var(--yellow)}

/* MAIN */
.main{max-width:1100px;margin:2rem auto;padding:0 1rem}
.section-title{font-family:'Baloo 2',sans-serif;font-size:1.4rem;color:var(--green);margin-bottom:1rem;display:flex;align-items:center;gap:8px}
.count-badge{background:var(--green3);color:var(--green);padding:3px 10px;border-radius:999px;font-size:13px;font-family:'Nunito',sans-serif;font-weight:800}

/* GROUND CARDS GRID */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.gcard{display:block;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem;cursor:pointer;transition:.25s;border:2.5px solid transparent;position:relative;overflow:hidden}
.gcard:hover{transform:translateY(-4px);box-shadow:0 10px 35px rgba(0,0,0,0.15);border-color:var(--green2)}
.gcard::before{content:'';position:absolute;top:0;left:0;width:6px;height:100%;border-radius:var(--radius) 0 0 var(--radius)}
.gcard.india::before{background:linear-gradient(180deg,#ff9933,#fff,#138808)}
.gcard.australia::before{background:linear-gradient(180deg,#00008b,#fff,#00008b)}
.gcard.england::before{background:linear-gradient(180deg,#cf142b,#fff,#cf142b)}
.gcard.other::before{background:linear-gradient(180deg,#8d153a,#f2c144,#06357a)}
.gcard-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;padding-left:8px}
.gcard-name{font-family:'Baloo 2',sans-serif;font-size:1.05rem;color:var(--text);font-weight:700;line-height:1.2}
.gcard-city{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600}
.gcard-flag{font-size:1.8rem}
.mini-oval{width:100%;height:80px;margin:8px 0}
.gcard-stats{display:flex;gap:8px;margin-top:10px;padding-left:8px}
.stat-pill{background:var(--green3);color:var(--green);padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.stat-pill.yellow{background:var(--yellow2);color:#7a5200}
.stat-pill.blue{background:#e3f0fa;color:var(--blue)}
.explore-btn{margin-top:12px;width:100%;padding:10px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border:none;border-radius:12px;font-family:'Baloo 2',sans-serif;font-size:1rem;cursor:pointer;font-weight:700;transition:.2s;letter-spacing:.5px}
.explore-btn:hover{transform:scale(1.02);filter:brightness(1.08)}
.no-results{text-align:center;padding:3rem;color:var(--muted);font-size:1.1rem}
.no-results span{font-size:3rem;display:block;margin-bottom:12px}

/* DETAIL PAGE */
.back-btn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:2px solid #d4edda;padding:10px 20px;border-radius:999px;font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;cursor:pointer;color:var(--green);margin-bottom:1.5rem;transition:.2s; text-decoration:none;}
.back-btn:hover{background:var(--green3)}
.detail-hero{background:linear-gradient(135deg,#0d4a1a,#1a7c2e);border-radius:var(--radius);padding:2rem;color:#fff;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}
.detail-info h2{font-family:'Baloo 2',sans-serif;font-size:2rem; margin:0;}
.detail-info p{opacity:.8;margin-top:4px;font-size:14px}
.detail-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.dbadge{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.25);color:#fff;padding:5px 14px;border-radius:999px;font-size:12px;font-weight:700}
.fun-fact{background:var(--yellow2);border-left:4px solid var(--yellow);border-radius:0 12px 12px 0;padding:12px 16px;margin-bottom:1.5rem;font-size:14px;color:#5a3800}
.fun-fact strong{font-size:15px}

/* PITCH SELECTOR */
.pitch-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem}
.pitch-section h3{font-family:'Baloo 2',sans-serif;color:var(--green);font-size:1.2rem;margin-bottom:1rem}
.pitch-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem}
.pbtn{width:46px;height:46px;border-radius:50%;border:2.5px solid #d4edda;background:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;position:relative}
.pbtn:hover{border-color:var(--green2);background:var(--green3)}
.pbtn.active{background:var(--green);color:#fff;border-color:var(--green)}
.pbtn.center::after{content:'★';position:absolute;top:-8px;right:-4px;font-size:10px;color:var(--yellow);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.pitch-desc{font-size:13px;color:var(--muted);padding:10px 14px;background:var(--green3);border-radius:10px;font-weight:600}

/* GROUND DIAGRAM */
.diagram-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem}
.diagram-section h3{font-family:'Baloo 2',sans-serif;color:var(--green);font-size:1.2rem;margin-bottom:1rem}
.diagram-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
@media(max-width:600px){.diagram-layout{grid-template-columns:1fr}}
canvas#mainCanvas{width:100%;height:auto;display:block;border-radius:12px}
.boundary-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bcard{border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.bcard.short-b{background:#ffeaeb;border:1.5px solid #f5b8bb}
.bcard.med-b{background:#fff8e1;border:1.5px solid #ffe082}
.bcard.long-b{background:#e8f5e9;border:1.5px solid #a5d6a7}
.bcard-dir{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.bcard-val{font-size:1.3rem;font-weight:800;font-family:'Baloo 2',sans-serif}
.bcard.short-b .bcard-val{color:var(--red)}
.bcard.med-b .bcard-val{color:#e65100}
.bcard.long-b .bcard-val{color:var(--green)}
.bcard-tag{font-size:11px;font-weight:700}
.bcard.short-b .bcard-tag{color:#c62828}
.bcard.med-b .bcard-tag{color:#bf360c}
.bcard.long-b .bcard-tag{color:var(--green)}

/* TABLE */
.table-section{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.5rem}
.table-section h3{font-family:'Baloo 2',sans-serif;color:var(--green);font-size:1.2rem;margin-bottom:1rem}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.ptable{width:100%;border-collapse:collapse;min-width:580px}
table.ptable th{background:var(--green);color:#fff;padding:10px 12px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.5px;white-space:nowrap}
table.ptable th:first-child{border-radius:10px 0 0 0;text-align:left}
table.ptable th:last-child{border-radius:0 10px 0 0}
table.ptable td{padding:9px 12px;text-align:center;border-bottom:1px solid #eaf3ec;font-size:13px;font-weight:600}
table.ptable td:first-child{text-align:left;font-family:'Baloo 2',sans-serif;font-size:14px;color:var(--text)}
table.ptable tr.active-row{background:#e8f5eb}
table.ptable tr:hover{background:#f4fbf5}
.tc-short{color:var(--red);font-weight:800}
.tc-med{color:#e65100;font-weight:800}
.tc-long{color:var(--green);font-weight:800}

/* LEGEND & ICC BOX */
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:1rem;padding:12px 16px;background:var(--green3);border-radius:12px}
.leg-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.leg-dot{width:12px;height:12px;border-radius:50%}
.icc-box{background:linear-gradient(135deg,#e3f0fa,#cce0f5);border:2px solid #90caf9;border-radius:var(--radius);padding:1.2rem 1.5rem;margin-bottom:1.5rem}
.icc-box h4{color:var(--blue);font-family:'Baloo 2',sans-serif;font-size:1.1rem;margin-bottom:8px}
.icc-rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.icc-rule{background:#fff;border-radius:10px;padding:10px 12px}
.icc-rule .val{font-family:'Baloo 2',sans-serif;font-size:1.4rem;font-weight:700;color:var(--blue)}
.icc-rule .lbl{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px}

/* FOOTER */
.footer{text-align:center;padding:2rem 1rem;color:var(--muted);font-size:13px;font-weight:600;margin-top:1rem}

/* MATCH SCHEDULE CARDS */
.match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.mcard { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 1.2rem; text-decoration: none; color: var(--text); display: block; transition: .2s; border-left: 4px solid var(--blue); position: relative; overflow: hidden; }
.mcard:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.12); border-color: var(--yellow); }
.m-date { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.m-teams { font-family: 'Baloo 2', sans-serif; font-size: 1.3rem; line-height: 1.2; color: var(--text); margin-bottom: 6px; }
.m-venue { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.m-badge { position: absolute; top: 12px; right: 12px; background: #e3f0fa; color: var(--blue); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.mcard.today { border-left-color: var(--red); background: #fffcfc; }
.mcard.today .m-badge { background: #ffeaea; color: var(--red); }