/* Missing XI — pro sports-card aesthetic with a pixel-jersey signature.
 * Font stack:
 *   Inter    — UI text, names, keyboard, buttons
 *   Bebas Neue — scoreline, big numerals, progress (sport vibes)
 * Pixel rendering is scoped to .kit-svg only; everything else is smooth. */

:root {
  --mxi-bg:        #0a1122;
  --mxi-surface:   #121b33;
  --mxi-surface-2: #1a2444;
  --mxi-text:      #eef2ff;
  --mxi-text-dim:  #9ba7c6;
  --mxi-accent:    #ffc857;     /* gold (formations, captain, CTAs) */
  --mxi-good:      #3ecf8e;     /* success green */
  --mxi-warn:      #ff5c7a;     /* give-up / errors */
  --mxi-grass:     #2a7a3c;
  --mxi-grass-dk:  #205e2f;
  --mxi-line:      rgba(255,255,255,0.28);
}

.mxi-body {
  background: radial-gradient(ellipse at top, #141e3b 0%, var(--mxi-bg) 60%) fixed;
  color: var(--mxi-text);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.mxi-wrap { max-width: 520px; margin: 0 auto; padding: 14px; }

/* ---------- match head ---------- */
.mxi-matchhead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  text-align: center;
  padding: 16px 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border-radius: 16px;
  margin-bottom: 10px;
}
.mxi-matchhead .team   { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mxi-matchhead .team .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--mxi-text-dim);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mxi-matchhead .team .formation {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-family: "Bebas Neue", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  background: rgba(255,200,87,0.12);
  border: 1px solid rgba(255,200,87,0.4);
  color: var(--mxi-accent);
  border-radius: 6px;
  vertical-align: middle;
}
.mxi-matchhead .middle .comp  {
  font-size: 10px;
  color: var(--mxi-text-dim);
  letter-spacing: 2.5px;
  font-weight: 600;
  text-transform: uppercase;
}
.mxi-matchhead .middle .score {
  font-family: "Bebas Neue", sans-serif;
  font-size: 42px;
  line-height: 1;
  margin: 4px 0;
  letter-spacing: 2px;
  color: var(--mxi-text);
  text-shadow: 0 2px 12px rgba(255,200,87,0.2);
}
.mxi-matchhead .middle .date  {
  font-size: 10px;
  color: var(--mxi-text-dim);
  letter-spacing: 1px;
}
.kit-small { width: 44px; height: 40px; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.35)); }

/* ---------- browser (landing) ---------- */
.mxi-browser-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px 10px;
  gap: 10px;
}
.mxi-solved-count {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--mxi-accent);
}
.mxi-random {
  background: linear-gradient(180deg, #ff6b81 0%, #d53d58 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(213,61,88,0.4);
}
.mxi-browser-search {
  width: 100%;
  background: var(--mxi-surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--mxi-text);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.mxi-browser-search:focus { outline: 2px solid rgba(255,200,87,0.5); border-color: transparent; }
.mxi-browser-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.mxi-match-card {
  background: var(--mxi-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  transition: transform .1s ease, border-color .12s ease, background .12s ease;
  position: relative;
}
.mxi-match-card:hover { transform: translateY(-1px); border-color: var(--mxi-accent); background: var(--mxi-surface-2); }
.mxi-match-card.solved { border-color: rgba(62,207,142,0.3); background: rgba(30,60,50,0.35); }
.mxi-match-card-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}
.mxi-match-card-meta {
  font-size: 10px;
  color: var(--mxi-text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 3px;
}
.mxi-match-card-score {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: var(--mxi-accent);
}
.mxi-match-card-solved {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #3ecf8e;
  font-size: 13px;
  font-weight: 800;
}

/* ---------- rounds bar (pitch view) ---------- */
.mxi-rounds {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  padding: 6px;
  background: var(--mxi-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.mxi-round-btn,
.mxi-round-today {
  background: var(--mxi-surface-2);
  color: var(--mxi-text);
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s;
}
.mxi-round-btn:hover:not(:disabled),
.mxi-round-today:hover:not(:disabled) { background: rgba(255,200,87,0.15); color: var(--mxi-accent); }
.mxi-round-btn:disabled,
.mxi-round-today:disabled { opacity: 0.3; cursor: not-allowed; }
.mxi-round-today {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 12px;
}
.mxi-round-select {
  flex: 1;
  background: var(--mxi-surface-2);
  color: var(--mxi-text);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  cursor: pointer;
}

/* ---------- pitch frame ---------- */
.mxi-pitch-frame {
  background: linear-gradient(180deg, var(--mxi-grass) 0%, var(--mxi-grass-dk) 100%);
  padding: 8px;
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow:
    0 20px 60px -20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.08);
  position: relative;
}
.mxi-pitch-inner {
  position: relative;
  min-height: 500px;
  background:
    radial-gradient(circle at center, transparent 70px, var(--mxi-line) 72px, transparent 74px),
    linear-gradient(90deg, transparent calc(50% - 1px), var(--mxi-line) calc(50% - 1px), var(--mxi-line) calc(50% + 1px), transparent calc(50% + 1px)),
    repeating-linear-gradient(0deg, var(--mxi-grass) 0 50px, var(--mxi-grass-dk) 50px 100px);
  border: 2px solid var(--mxi-line);
  border-radius: 8px;
  padding: 18px 12px;
  display: flex;
  flex-direction: column-reverse;
  gap: 22px;
}
.mxi-row { display: flex; justify-content: space-around; align-items: flex-end; }

/* ---------- pixel kit (inline SVG) ---------- */
.kit {
  width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s ease;
}
.kit:hover { transform: translateY(-2px); }
.kit:not(.solved):active { transform: translateY(0); }

.kit-svg {
  width: 64px;
  height: 60px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
}
.kit-svg .num {
  font-family: "Bebas Neue", "Courier New", monospace;
  font-weight: 400;
  font-size: 8px;
  fill: #fff;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 0.7;
  letter-spacing: 0.5px;
}

/* Captain armband — a small gold band overlay on the left sleeve. */
.kit .captain-band {
  position: absolute;
  top: 14px;
  left: 10px;
  width: 12px;
  height: 7px;
  background: linear-gradient(180deg, #ffd872, #e5a521);
  border: 1px solid #000;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6px;
  font-weight: 800;
  color: #000;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  z-index: 2;
}

.kit .name-box {
  background: rgba(255,255,255,0.96);
  color: #101730;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 4px 6px;
  min-width: 64px;
  max-width: 78px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  text-transform: uppercase;
}
.kit .name-box .letters {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Goal balls — one SVG football per goal, inline after the name. */
.kit .name-box .goals {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.kit .name-box .goals svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.kit.solved .name-box {
  background: linear-gradient(180deg, #d8f5a8 0%, #a6d463 100%);
  box-shadow: 0 2px 6px rgba(62,207,142,0.4);
}
.kit.exhausted {
  cursor: not-allowed;
  opacity: 0.55;
}
.kit.exhausted .name-box {
  background: rgba(255,92,122,0.9);
  color: #fff;
}

/* ---------- difficulty selector ---------- */
.diff-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  padding: 16px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 4px;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow:
    0 10px 24px -6px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}
.diff-btn.normal {
  top: 32%;
  background: linear-gradient(180deg, #7a6cff 0%, #4a3ec8 100%);
}
.diff-btn.hard   {
  top: 62%;
  background: linear-gradient(180deg, #ff6b81 0%, #d53d58 100%);
}
.diff-btn:active { transform: translate(-50%, 2px); box-shadow: 0 4px 8px -2px rgba(0,0,0,0.5); }

.mxi-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--mxi-accent);
  font-weight: 600;
  padding: 12px 4px;
  letter-spacing: 1px;
  font-size: 12px;
}
.mxi-nav-link { color: var(--mxi-accent); text-decoration: none; font-size: 13px; }
.mxi-nav-num  { color: var(--mxi-text-dim); font-size: 12px; font-family: "Bebas Neue", sans-serif; letter-spacing: 2px; }

/* ---------- footer (progress + give up / win CTA) ---------- */
.mxi-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  margin-top: 8px;
  gap: 10px;
}
.mxi-progress {
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--mxi-text);
  letter-spacing: 3px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.mxi-progress .progress-lbl {
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: var(--mxi-text-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
.mxi-progress.won {
  color: var(--mxi-good);
  text-shadow: 0 0 20px rgba(62,207,142,0.4);
}

.mxi-giveup {
  background: linear-gradient(180deg, #ff6b81 0%, #d53d58 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 8px 20px -4px rgba(213,61,88,0.4),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.1s;
}
.mxi-giveup:active { transform: translateY(1px); }

/* Win-state CTA replaces the red give-up on 11/11. */
.mxi-win-cta {
  background: linear-gradient(180deg, #4cdc9c 0%, #2fa877 100%);
  color: #0a1122;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 8px 20px -4px rgba(62,207,142,0.5),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ---------- wordle view ---------- */
.mxi-back {
  background: none;
  border: none;
  color: var(--mxi-text);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 4px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.mxi-wordle-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 14px 4px;
}
.mxi-wordle-row { display: flex; gap: 6px; }
.mxi-wordle-cell {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--mxi-text);
  background: var(--mxi-surface);
  border-radius: 4px;
  transition: all 0.2s;
}
.mxi-wordle-cell.filled { border-color: rgba(255,255,255,0.35); background: var(--mxi-surface-2); }
.mxi-wordle-cell.correct { background: var(--mxi-good); border-color: var(--mxi-good); color: #0a1122; }
.mxi-wordle-cell.present { background: var(--mxi-accent); border-color: var(--mxi-accent); color: #0a1122; }
.mxi-wordle-cell.absent  { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.05); color: #5e6a88; }

.mxi-keyboard {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  padding: 14px 4px;
}
.mxi-kbd-row { display: flex; gap: 4px; }
.mxi-kbd-key {
  min-width: 30px;
  height: 44px;
  padding: 0 8px;
  background: var(--mxi-surface-2);
  color: var(--mxi-text);
  border: none;
  border-radius: 5px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s, transform 0.08s;
}
.mxi-kbd-key:active { transform: translateY(1px); }
.mxi-kbd-key.wide { min-width: 56px; font-size: 11px; letter-spacing: 1px; }
.mxi-kbd-key.correct { background: var(--mxi-good); color: #0a1122; }
.mxi-kbd-key.present { background: var(--mxi-accent); color: #0a1122; }
.mxi-kbd-key.absent  { background: rgba(255,255,255,0.03); color: #4a546e; }

/* ---------- end result ---------- */
#mxi-result:not(:empty) {
  margin: 16px 0;
  padding: 18px;
  background: var(--mxi-surface);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  color: var(--mxi-text-dim);
}

/* Subtle shake for wrong guess — used by the wordle view via .shake */
@keyframes mxi-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.shake { animation: mxi-shake 0.4s ease; }

/* Win pulse for solved kits */
@keyframes mxi-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(62,207,142,0.5); }
  100% { box-shadow: 0 0 0 14px rgba(62,207,142,0); }
}
.kit.just-solved .name-box { animation: mxi-pulse 0.6s ease-out; }