* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', Arial,sans-serif; background:#f0f2f5; color:#222; }
.container { 
  max-width:1100px; 
  margin: 0 auto; 
  padding:15px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

/* HEADER */
.top-bar {
  background: linear-gradient(90deg,#0b4da2,#0a74da);
  color:#fff;
  text-align:center;
  padding:16px;
  font-size:24px;
  font-weight:bold;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  width: 100%;
  margin-bottom:15px;
}

/* MATCH SELECTOR */
.match-selector { 
  width:100%; 
  text-align:center; 
  margin-bottom:20px; 
}
.match-selector select { padding:8px 12px; font-size:16px; border-radius:5px; }

.match-selector {
  margin: 20px 0;
  text-align: center;
}

#matchSelect {
  width: 280px;
  height: 42px;
  padding: 6px 10px;
  font-size: 16px;
  border-radius: 8px;
  border: 2px solid #1976d2;
  cursor: pointer;
  background: #fff;
}

.match-selector {
  position: relative;
  z-index: 9999;
}

select {
  position: relative;
  z-index: 9999;
}

#matchSelect {
  width: 280px;
  height: 42px;
  font-size: 16px;
  background: #fff;
  cursor: pointer;
}

/* If parent containers exist */
.section,
.container,
.dashboard {
  overflow: visible !important;
}

/* Fix for mobile & Chrome */
#matchSelect:focus {
  outline: none;
  border-color: #0d47a1;
}

/* TOTAL BOXES */
.total-prob { 
  display:flex; 
  flex-wrap:wrap; 
  gap:15px; 
  margin-bottom:20px; 
  justify-content: center; 
}
.total-box { 
  min-width:250px; 
  padding:20px; 
  border-radius:8px; 
  color:#fff; 
  font-weight:bold; 
  text-align:center; 
  position:relative; 
  overflow:hidden; 
}
.toss-total { background: linear-gradient(90deg,#ff9800,#ffc107); }
.match-total { background: linear-gradient(90deg,#1b7f3b,#145f2d); }
.total-box h4 { margin-bottom:10px; font-size:16px; font-weight:600; }
.prob-value { font-size:28px; font-weight:bold; transition: all 1s ease; }

/* MATCH CARD */
.match-card { 
  background:#fff; 
  padding:20px; 
  border-radius:8px; 
  text-align:center; 
  margin-bottom:20px; 
  box-shadow:0 4px 12px rgba(0,0,0,0.08); 
  width: 100%; 
}

.skeleton {
  display: flex;
  gap: 20px;
  margin: 30px 0;
}

.skeleton-box {
  flex: 1;
  height: 120px;
  background: linear-gradient(
    90deg,
    #eee 25%,
    #ddd 37%,
    #eee 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 12px;
}

@keyframes shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* GRID */
.grid-2 { 
  display:grid; 
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); 
  gap:20px; 
  margin-bottom:20px; 
  justify-items: center; 
  width: 100%; 
}
.card { 
  background:#fff; 
  padding:20px; 
  border-radius:8px; 
  box-shadow:0 4px 12px rgba(0,0,0,0.08); 
  width: 100%; 
}
.card h3 { font-size:16px; margin-bottom:10px; font-weight:600; }

/* TOSS CARD */
.toss-card .toss-box { 
  background: linear-gradient(90deg,#ff9800,#ffc107); 
  color:#fff; 
  font-weight:bold; 
  font-size:18px; 
  padding:14px; 
  border-radius:6px; 
  text-align:center; 
  transition: all 1s ease; 
}

/* WIN PROBABILITY BAR */
.probability-bar { 
  display:flex; 
  height:40px; 
  border-radius:8px; 
  overflow:hidden; 
  margin-top:10px; 
  width: 100%; 
}
.probability-bar span { 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  color:#fff; 
  font-weight:bold; 
  transition: width 1s ease; 
}
.india { background: linear-gradient(90deg,#0b4da2,#1e6ec2); width:0; }
.pakistan { background: linear-gradient(90deg,#1b7f3b,#3da25c); width:0; }

.confidence-bar {
  width: 100%;
  height: 14px;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}

#confidenceFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9800, #4caf50);
  transition: width 0.5s ease;
}

/* FINAL RESULT BOX */
.final-result-card { text-align:center; width:100%; }
.final-result-card .result-box { font-size:24px; font-weight:bold; color:#0b4da2; margin-top:10px; }

/* SIMULATOR */
.simulator-card { text-align:center; width:100%; }
.btn { border:none; padding:12px 20px; color:#fff; font-weight:bold; cursor:pointer; border-radius:6px; margin:5px; transition: all 0.3s ease; }
.btn:hover { opacity:0.85; }
.blue { background:#0b4da2; }
.green { background:#1b7f3b; }
.result-box { margin-top:15px; font-size:20px; font-weight:bold; transition: all 0.5s ease; }

/* ABOUT */
.small { font-size:14px; color:#555; text-align:center; padding:10px; }

/* FOOTER */
footer { text-align:center; margin-top:25px; font-size:14px; color:#555; width:100%; }

/* RESPONSIVE */
@media(max-width:600px) { 
  .total-prob { flex-direction:column; align-items:center; }
}