/* Box2Box — Immaculate Grid, Moroccan football edition.
   Dark arena theme aligned with the niche-foot crimson accent. Every
   surface sits on the global --bg palette so the page feels like part
   of the site, not a bolted-on game from 2019. */

.b2b-body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

.b2b-wrap {
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 14px 60px;
}

.b2b-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 38px);
  letter-spacing: 10px;
  font-weight: 800;
  padding: 18px 0 6px;
  background: none; color: var(--ma-red);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Today's featured card ---------- */
.b2b-featured {
  background: var(--bg-card);
  border: 1px solid var(--ma-red);
  border-radius: .625rem;
  padding: 18px 22px;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.b2b-featured::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: transparent;
  pointer-events: none;
}
.b2b-featured-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ma-gold);
  font-weight: 800;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
}
.b2b-featured-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 6px;
}
.b2b-featured-meta {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.b2b-featured-cta {
  background: var(--ma-gold);
  color: #0a1122;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  border-radius: .625rem;
  padding: 14px 24px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: transform 0.1s;
}
.b2b-featured-cta:active { transform: translateY(1px); }
.b2b-featured.solved { border-color: rgba(62,207,142,0.45); }
.b2b-featured.solved .b2b-featured-label { color: #3ecf8e; }
.b2b-featured.solved .b2b-featured-cta {
  background: #3ecf8e;
}

/* ---------- Puzzle browser (landing view) ---------- */
.b2b-browser { margin-top: 16px; }
.b2b-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.b2b-solved-count {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--ma-gold);
  font-weight: 700;
}
.b2b-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.b2b-filter {
  background: var(--border);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .625rem;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.b2b-filter:hover { background: rgba(255,212,77,0.12); border-color: var(--ma-gold); }
.b2b-filter.active { background: var(--ma-gold); color: #0a1122; border-color: var(--ma-gold); }
.b2b-random {
  background: var(--ma-red);
  color: #fff;
  border: none;
  border-radius: .625rem;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
}

.b2b-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.b2b-card {
  background: rgba(29,36,64,0.55);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .1s ease, border-color .12s ease, background .12s ease;
  position: relative;
}
.b2b-card:hover { transform: translateY(-2px); border-color: var(--ma-gold); background: rgba(40,48,80,0.65); }
.b2b-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.b2b-card-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.b2b-card-diff {
  padding: 2px 8px;
  border-radius: .625rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #0a1122;
}
.b2b-card-diff.easy   { background: #3ecf8e; }
.b2b-card-diff.normal { background: #ffc857; }
.b2b-card-diff.hard   { background: #ff5c7a; color: #fff; }
.b2b-card-solved {
  position: absolute;
  top: 8px;
  right: 10px;
  color: #3ecf8e;
  font-size: 14px;
  font-weight: 800;
}
.b2b-card.solved { border-color: rgba(62,207,142,0.3); background: rgba(30,60,50,0.35); }

.b2b-back {
  background: none;
  color: var(--ma-gold);
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 0 12px;
  cursor: pointer;
  letter-spacing: 1px;
}
.b2b-back:hover { color: #fff; }

/* Round switcher — sits between the title and the stat strip. Lets
   the user browse every active puzzle; "Featured" snaps back to the
   site's highlighted pick. */
.b2b-rounds {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0;
  padding: 8px 10px;
  background: rgba(29,36,64,0.55);
  border: 1px solid var(--border);
  border-radius: .625rem;
  font-size: 13px;
}
.b2b-round-btn {
  background: var(--border);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: .625rem;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  font-family: inherit;
}
.b2b-round-btn:hover:not(:disabled) {
  background: rgba(255,212,77,0.12);
  border-color: var(--ma-gold);
}
.b2b-round-btn:disabled { opacity: .35; cursor: not-allowed; }
.b2b-round-btn.b2b-round-today { margin-left: auto; }
.b2b-round-select {
  flex: 1;
  background: rgba(10,13,26,0.7);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-width: 0;
}
.b2b-round-select:focus {
  outline: none;
  border-color: var(--ma-gold);
  box-shadow: none;
}

/* Stat strip — two chips on a subtle card. */
.b2b-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: rgba(29,36,64,0.6);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: 12px 14px;
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
}
.b2b-stats span {
  text-align: center;
  color: var(--text);
}
.b2b-stats span b {
  display: block;
  font-size: 22px;
  color: var(--ma-red);
  font-weight: 800;
  margin-bottom: 2px;
  letter-spacing: 0;
}

/* ---- Pitch-themed 4×4 grid ---------------------------------------------
   Corner tile = dark indigo with site mark; column + row headers sit on
   lighter grass and show a big crest/flag/trophy icon with the category
   label beneath in white bold uppercase. Cells are slightly lighter
   grass with a blue jersey SVG background — the player's shirt number
   (or initial) reads large and white across the jersey, with the
   player's name underneath. Matches the reference mock. */

.b2b-grid-wrap {
  border-radius: .625rem;
  padding: 0;
  background: #1f6a31;            /* deep pitch green */
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: none;
  overflow: hidden;
}
.b2b-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.b2b-grid th, .b2b-grid td {
  width: 25%;
  padding: 0;
  vertical-align: middle;
  border: 2px solid #14522c;
}

/* Corner — site identity chip. Indigo so it reads as "not part of the
   pitch" and clearly delimits header vs body. */
.b2b-grid .corner {
  background: #1d1a47;
  text-align: center;
  font-weight: 800;
  letter-spacing: 3px;
  font-size: 11px;
  color: #fff;
  padding: 18px 4px;
  text-transform: uppercase;
}
.b2b-grid .corner::before {
  content: "";
  display: block;
  width: 46px; height: 46px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='%23fff' stroke='%231d1a47' stroke-width='3'/><polygon points='50,18 60,30 54,43 46,43 40,30' fill='%231d1a47'/><polygon points='22,40 36,34 44,44 38,56 26,55' fill='%231d1a47'/><polygon points='78,40 74,55 62,56 56,44 64,34' fill='%231d1a47'/><polygon points='32,72 30,58 42,52 50,62 48,72' fill='%231d1a47'/><polygon points='68,72 52,72 50,62 58,52 70,58' fill='%231d1a47'/></svg>") center/36px no-repeat;
}

/* Category headers (col + row) — grass panel, large imagery, label. */
.b2b-grid .col-head,
.b2b-grid .row-head {
  background: #2a7a3c;
  text-align: center;
  padding: 14px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}
.b2b-grid .col-head:hover, .b2b-grid .row-head:hover {
  background: #2e853f;
}
.b2b-grid .col-head .type { display: none; }
.b2b-grid .col-head .text,
.b2b-grid .row-head .text {
  display: block;
  margin-top: 8px;
  line-height: 1.15;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
}

/* Logo image inside a header. Large + crisp, no drop shadow — the
   reference crests are sharp and sit on a clean grass panel. */
.b2b-img {
  display: block;
  margin: 0 auto;
  max-width: 62px;
  max-height: 62px;
  width: auto; height: auto;
  object-fit: contain;
}
.b2b-grid .row-head .b2b-img { max-height: 60px; }
.b2b-grid .col-head .b2b-img { max-height: 60px; }

/* Country flags get a circular white frame so they read like crests. */
.b2b-grid .b2b-img.is-nation {
  border-radius: 50%;
  border: 2px solid #fff;
  background: #fff;
  width: 54px; height: 54px;
  object-fit: cover;
}

/* Fallback badge for category-with-no-logo — coloured disc with initial. */
.b2b-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  font-weight: 800; font-size: 20px;
  color: #1a0002;
  margin: 0 auto;
  box-shadow: none;
  background: var(--ma-gold);
}
.b2b-badge.honour      { background: #ffc857; color: #1a1200; }
.b2b-badge.competition { background: #a06bff; color: #fff; }
.b2b-badge.coach       { background: #ceff28; color: #0a0a0a; }

/* ---- Playable cells — lighter grass, jersey overlay on fill ---- */
.b2b-grid .cell {
  background: #3a8f4c;            /* slightly lighter pitch */
  aspect-ratio: 1 / 1;
  cursor: pointer;
  position: relative;
  transition: background .12s ease;
}
.b2b-grid .cell:hover { background: #44a055; }
.b2b-grid .cell .empty {
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-align: center;
  padding-top: 38%;
  pointer-events: none;
  font-weight: 700;
  text-transform: uppercase;
}
.b2b-grid .cell .empty::before {
  content: "+";
  display: block;
  font-size: 36px;
  font-weight: 300;
  line-height: 0.8;
  margin-bottom: 6px;
  color: var(--text-muted);
}

/* Filled cell — jersey as SVG background, number+name rendered on top. */
.b2b-grid .cell.filled {
  background: #3a8f4c;
  cursor: default;
  animation: b2b-pop 450ms cubic-bezier(.2,.8,.2,1);
}
.b2b-grid .cell.filled:hover { background: #3a8f4c; }
@keyframes b2b-pop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.b2b-grid .cell.filled .player-kit {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  height: 100%; padding: 8px 6px 10px;
  gap: 4px;
}
/* Jersey + number: SVG background, number text centred on top. The SVG
   is a solid blue shirt with a darker collar; white number sits in the
   middle via positioning. */
.b2b-grid .cell.filled .player-kit .num {
  position: relative;
  flex: 1;
  width: 82%;
  min-height: 0;
  max-height: 72%;
  display: flex; align-items: center; justify-content: center;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140' fill='%231e5fb8'><path d='M22 22 L8 36 L0 54 L12 66 L26 60 L26 138 L94 138 L94 60 L108 66 L120 54 L112 36 L98 22 L76 22 Q72 36 60 36 Q48 36 44 22 Z' stroke='%230d3a7a' stroke-width='2'/><path d='M60 36 L56 48 L60 52 L64 48 Z' fill='%23ffffff' opacity='0.85'/></svg>") center/contain no-repeat;
  font-size: clamp(22px, 6.2vw, 40px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0;
  padding-top: 18%;
  text-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.b2b-grid .cell.filled .player-kit .name {
  font-size: 12px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1.15;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Search panel ---- */
.b2b-search {
  position: relative;
  margin-top: 18px;
  background: rgba(29,36,64,0.95);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: .625rem;
  padding: 12px 12px 8px;
  box-shadow: none;
}
.b2b-input {
  width: calc(100% - 54px);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 14px;
  background: rgba(10,13,26,0.75);
  border: 1px solid var(--border);
  border-radius: .625rem;
  color: var(--text);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.b2b-input:focus {
  outline: none;
  border-color: var(--ma-gold);
  box-shadow: none;
}
.b2b-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 42px; height: 42px;
  background: var(--ma-red);
  color: #fff;
  border: none;
  border-radius: .625rem;
  font-weight: 800; font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.b2b-close:hover { background: var(--ma-red-dark); transform: scale(1.04); }

.b2b-results {
  max-height: 320px;
  overflow-y: auto;
  margin-top: 10px;
  border-radius: .625rem;
}
.b2b-results div {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  transition: background-color .1s ease;
}
.b2b-results div:last-child { border-bottom: none; }
.b2b-results div:hover { background: rgba(255,212,77,0.1); }
.b2b-results .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Result banner (win/lose toast under the grid). */
#b2b-result:not(:empty) {
  margin-top: 16px;
  padding: 14px;
  background: rgba(29,36,64,0.8);
  border: 1px solid var(--border);
  border-radius: .625rem;
  text-align: center;
  font-weight: 700;
}

/* Mobile polish. */
/* ---------- Mobile / tablet (<= 520px) ---------- */
@media (max-width: 520px) {
  .b2b-wrap { padding: 10px 6px 60px; }
  .b2b-title { font-size: 22px; letter-spacing: 4px; padding: 10px 0 4px; }

  /* Browser cards: 2-col grid on narrow, stacked meta */
  .b2b-browser-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .b2b-card { padding: 10px; }
  .b2b-card-title { font-size: 12px; }
  .b2b-card-meta { font-size: 9px; }

  .b2b-browser-head { gap: 8px; }
  .b2b-filters { justify-content: center; }
  .b2b-filter, .b2b-random { padding: 6px 10px; font-size: 10px; }

  /* Featured card: stack the title + CTA vertically */
  .b2b-featured {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
  .b2b-featured-title { font-size: 15px; }
  .b2b-featured-cta { width: 100%; padding: 12px 16px; }

  /* Rounds nav: shrink chevrons + collapse "Featured" label */
  .b2b-rounds { gap: 4px; padding: 6px; }
  .b2b-round-btn { padding: 5px 8px; font-size: 12px; }
  .b2b-round-select { font-size: 11px; padding: 5px 6px; }
  .b2b-round-today { font-size: 10px; padding: 5px 8px; }

  /* The 3x3 grid itself — cells need to fit a 360px viewport */
  .b2b-grid { table-layout: fixed; width: 100%; }
  .b2b-grid th, .b2b-grid td { padding: 2px; }
  .b2b-grid .col-head,
  .b2b-grid .row-head {
    width: auto;
  }
  .b2b-grid .col-head .text,
  .b2b-grid .row-head .text {
    font-size: 9px;
    line-height: 1.15;
  }
  .b2b-img { max-width: 40px; max-height: 40px; }
  .b2b-grid .cell { min-width: 0; }
  .b2b-grid .cell.empty { font-size: 22px; }
  .b2b-grid .cell.filled .player-kit { padding: 4px 3px 6px; }
  .b2b-grid .cell.filled .player-kit .num {
    width: 76%; padding-top: 14%;
    font-size: clamp(18px, 5.5vw, 28px);
  }
  .b2b-grid .cell.filled .player-kit .name { font-size: 9px; }

  /* Search view (picking a player for a cell) */
  .b2b-search { padding: 10px 4px; }
  .b2b-input { font-size: 15px; padding: 8px 10px; }
  .b2b-results { max-height: 40vh; }
}

/* Very narrow (<= 360px, iPhone SE etc.) */
@media (max-width: 380px) {
  .b2b-grid .col-head .text,
  .b2b-grid .row-head .text { font-size: 9px; }
  .b2b-img { max-width: 34px; max-height: 34px; }
  .b2b-grid .cell.filled .player-kit .num { font-size: 18px; }
  .b2b-grid .cell.filled .player-kit .name { font-size: 8px; }
}