/* ===== Typography & Theme Vars ===== */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;800&display=swap');

:root{
  --font-ui: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --blue-900:#0f172a;
  --blue-800:#111827;
  --blue-700:#1f2937;
  --tile:#0b1d3a;
  --tile-border:#0a1530;
  --tile-selected:#6b7280;

  /* unified greens (prediction pill & highlights) */
  --green-soft:#e6f6e9;
  --green-soft-border:#b5e2c2;
  --green-soft-text:#0f5132;

  --red-soft:#fde8ea;
}

/* ===== Layout & Base ===== */
.esoccer-wrap{
  width:100%;
  max-width:none;
  margin:0;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
}

.esoccer-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:28px 28px; /* single source of truth */
  margin:16px 0;
}

/* Headings */
.esoccer-h,
.esoccer-card h3,
.esoccer-card summary,
.esoccer-section-title{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:20px;
  margin:0 0 10px;
  color:#0f172a;
}

/* Labels */
.esoccer-label{display:block;font-weight:600;margin-bottom:6px}

/* ===== Inputs ===== */
.esoccer-select{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  background:var(--green-soft) !important;
  border:1px solid var(--green-soft-border);
  min-height:42px;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:600;
  appearance:none;
  margin-top:6px;
}
.esoccer-select option{background:#fff;color:#111;}
.esoccer-select:hover{border-color:#8fd3a9;}
.esoccer-select:focus{
  outline:none;
  border-color:#8fd3a9;
  box-shadow:0 0 0 3px rgba(181,226,194,.45);
}

.esoccer-input{
  padding:10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-family:var(--font-ui);
  font-size:16px;
}

.esoccer-textarea{
  width:100%;
  min-height:64px;
  border:1px solid #d1d5db;
  border-radius:10px;
  padding:10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.esoccer-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--blue-800);
  background:var(--blue-800);
  color:#fff;
  cursor:pointer;
}
.esoccer-btn--ghost{background:#fff;color:var(--blue-800);}

.esoccer-note-small{font-size:12px;color:#6b7280;margin-top:6px;}
.esoccer-section{margin:10px 0}

/* ===== Tables ===== */
.esoccer-table{width:100%;border-collapse:separate;border-spacing:0}
.esoccer-table thead th{
  background:var(--blue-900);
  color:#fff;
  text-align:left;
  font-weight:700;
  padding:10px 12px;
  font-size:16px;
}
.esoccer-table tbody td{
  border-top:1px solid #e5e7eb;
  padding:8px 12px;
  font-size:16px;
  font-weight:400;
}
.esoccer-table caption{caption-side:top;font-weight:700}
.esoccer-table-wrap{overflow:auto}

/* Totals shading */
.esoccer-total-green{background:var(--green-soft)}
.esoccer-total-red{background:var(--red-soft)}

/* ===== H2H Layout ===== */
.esoccer-h2h-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:56px;
  row-gap:20px;
  align-items:start;
  margin-top:14px;
}
.esoccer-h2h-grid > div{ padding-bottom:8px; }

@media (max-width:900px){
  .esoccer-h2h-grid{ grid-template-columns:1fr }
}

/* Grey stat pills under each player */
.esoccer-stat-pills{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:14px;
}
.esoccer-stat-pills .pill{
  background:#eef2f7;
  border:1px solid #e2e8f0;
  color:#0f172a;
  padding:8px 14px;
  border-radius:9999px;
  font-weight:600;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.esoccer-stat-pills .pill span{ opacity:.8; font-weight:500; }

/* Generic pill */
.pill{display:inline-flex;align-items:center;gap:6px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:6px 10px;font-size:14px}
.pill strong{font-weight:700}
.pill--highlight{background:#dff5e9;border-color:#bcebd7}

/* H2H bits */
.esoccer-h2h-tally{font-weight:700;color:#334155;margin-left:8px}
.esoccer-footnote{color:#475569;font-size:13px;margin:8px 0 0}
.esoccer-error{margin-top:10px;color:#b91c1c}

/* ===== Picker Grid ===== */
.esoccer-pick-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.esoccer-pill-count{margin-left:auto;color:#475569;font-size:12px}
.esoccer-pick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  max-height:460px;
  overflow:auto;
  padding-right:6px
}
@media (max-width:900px){
  .esoccer-pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.esoccer-pick-item{
  border:1px solid var(--tile-border);
  background:var(--tile);
  color:#fff;
  border-radius:10px;
  padding:12px 10px;
  text-align:center;
  font-weight:700;
  cursor:pointer;
  user-select:none;
}
.esoccer-pick-item.is-selected{
  background:var(--tile-selected);
  border-color:#4b5563;
  color:#fff;
}

/* ===== Prediction pill (deduplicated & responsive) ===== */
.esoccer-prediction-pill{
  display:inline-flex;
  align-items:center;
  flex-wrap:nowrap;              /* keep number on same line */
  gap:10px;
  margin-top:16px;
  background:var(--green-soft);
  border:1px solid var(--green-soft-border);
  color:var(--green-soft-text);
  padding:10px 16px;
  border-radius:9999px;
  font-weight:700;
  max-width:100%;
}
.esoccer-prediction-pill span{
  overflow:hidden;               /* avoid spill if container gets narrow */
  text-overflow:ellipsis;
}
.esoccer-prediction-pill strong{
  flex:0 0 auto;                 /* do not shrink */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;                /* accommodates 1–3+ digits */
  height:36px;
  padding:0 10px;
  line-height:1;
  font-weight:800;
  background:#fff;
  color:var(--green-soft-text);
  border:1px solid var(--green-soft-border);
  border-radius:9999px;
}