/* Tiki-Taka-Toe — landing + play board.
   Landing: 4 mode cards on top, settings panel below.
   Play: scoreboard + 3x3 grid + player search modal. */

.ttt-landing { max-width: 960px; margin: 0 auto; padding: 24px 16px 60px; }

/* Hero strip */
.ttt-hero { text-align: center; margin-bottom: 28px; }
.ttt-hero__badge {
  display: inline-block;
  background: var(--ma-red);
  color: #0a0a0a;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.ttt-hero h1 {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  margin-bottom: 8px;
}
.ttt-hero p { color: var(--text-muted); font-size: 14px; }

/* Section title */
.ttt-sec-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Mode cards */
.ttt-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ttt-mode {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s;
}
.ttt-mode:hover { border-color: var(--ma-red); text-decoration: none; }
.ttt-mode__icon { font-size: 30px; color: var(--ma-red); margin-bottom: 6px; }
.ttt-mode__name {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ma-red);
}
.ttt-mode__desc { font-size: 12px; color: var(--text-muted); }

/* Settings */
.ttt-settings {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ttt-setting__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.ttt-seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  border-radius: 8px;
  overflow: hidden;
}
.ttt-seg button {
  background: color-mix(in srgb, var(--text) 8%, var(--bg-card));
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 6px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s;
  line-height: 1.2;
}
.ttt-seg button small { display: block; font-size: 10px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }
.ttt-seg button:hover { border-color: var(--ma-red); }
.ttt-seg button.active {
  background: var(--ma-red);
  color: #0a0a0a;
  border-color: var(--ma-red);
}
.ttt-seg button.active small { color: #0a0a0a; opacity: 0.75; }

/* Toggle + checkboxes */
.ttt-toggle label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.ttt-toggle input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--ma-red);
}
.ttt-toggle__name { font-weight: 700; }
.ttt-toggle__desc {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 32px;
}
.ttt-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.ttt-cats-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
.ttt-cats-grid input[type="checkbox"] { accent-color: var(--ma-red); }
.ttt-cats-note { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

/* -------- PLAY page -------- */
.ttt-play { max-width: 720px; margin: 0 auto; padding: 20px 12px 60px; }

.ttt-scoreboard {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}
.ttt-score {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.ttt-score__mark {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}
.ttt-score--x .ttt-score__mark { color: var(--ma-red); }
.ttt-score--o .ttt-score__mark { color: #7affa2; }
.ttt-score.turn {
  box-shadow: 0 0 0 2px var(--ma-red) inset;
}
.ttt-score--o.turn { box-shadow: 0 0 0 2px #7affa2 inset; }
.ttt-score__name { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ttt-score__wins { font-size: 24px; font-weight: 800; margin-top: 4px; }

.ttt-series {
  text-align: center;
  display: flex; flex-direction: column;
  gap: 4px;
}
.ttt-series__turn {
  font-size: 13px;
  font-weight: 700;
  color: var(--ma-red);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ttt-series__timer {
  font-family: monospace;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
}
.ttt-series__timer.danger { color: #ff5e5e; }
.ttt-series__bestof { font-size: 11px; color: var(--text-muted); }

/* Grid — pitch theme to match Box2Box reference. Dark-indigo corner,
   grass-green headers + cells, jersey SVG as the filled-cell backdrop
   with the X/O mark rendered on top, player name in white bold caps. */
.ttt-grid-wrap {
  overflow-x: auto;
  border-radius: 14px;
  background: #1f6a31;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.ttt-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ttt-grid th, .ttt-grid td {
  border: 2px solid #14522c;
  padding: 0;
  vertical-align: middle;
}
.ttt-grid .corner {
  background: #1d1a47;
  width: 25%;
  height: 90px;
  text-align: center;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 10px;
  color: #fff;
  text-transform: uppercase;
}
.ttt-grid .corner::before {
  content: "";
  display: block;
  width: 40px; height: 40px;
  margin: 0 auto 6px;
  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/32px no-repeat;
}
.ttt-grid .corner::after { content: "TIKI-TAKA-TOE"; display: block; }
.ttt-grid .col-head,
.ttt-grid .row-head {
  background: #2a7a3c;
  padding: 10px 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
}
.ttt-grid .col-head img,
.ttt-grid .row-head img {
  max-width: 52px;
  max-height: 52px;
  display: block;
  margin: 0 auto 6px;
  object-fit: contain;
}
.ttt-grid .col-head .text,
.ttt-grid .row-head .text {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Playable cells — grass green; no hint text, just a "+" prompt. */
.ttt-grid .cell {
  background: #3a8f4c;
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
  height: 110px;
  padding: 6px;
  text-align: center;
  vertical-align: middle;
  font-size: 0;                   /* hide the "CLICK" placeholder text */
  color: var(--text-muted);
}
.ttt-grid .cell:hover { background: #44a055; }
.ttt-grid .cell::before {
  content: "+";
  display: block;
  color: var(--text-muted);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
}
.ttt-grid .cell.locked { cursor: not-allowed; }
.ttt-grid .cell.locked::before { content: "—"; font-size: 22px; }
.ttt-grid .cell.locked:hover { background: #3a8f4c; }

/* Filled — hide the + prompt; show a jersey graphic with X/O on chest
   and the player name underneath in white bold uppercase. */
.ttt-grid .cell.filled-x,
.ttt-grid .cell.filled-o {
  cursor: default;
  background: #3a8f4c;
  padding: 6px;
  display: table-cell;
}
.ttt-grid .cell.filled-x::before,
.ttt-grid .cell.filled-o::before { content: none; }
/* Shared shirt geometry — no glyph inside, distinguished by colour per side. */
.ttt-grid .cell.filled-x .mark,
.ttt-grid .cell.filled-o .mark {
  position: relative;
  top: auto; right: auto;
  display: flex; align-items: center; justify-content: center;
  width: 82%;
  margin: 0 auto 4px;
  aspect-ratio: 1 / 1.1;
  max-height: 70px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* X = blue shirt */
.ttt-grid .cell.filled-x .mark {
  background-image: 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'/></svg>");
}
/* O = red shirt */
.ttt-grid .cell.filled-o .mark {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 140' fill='%23c0392b'><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='%23791e14' stroke-width='2'/></svg>");
}
.ttt-grid .cell .player-name {
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 2px;
}
.ttt-grid .cell.winline {
  box-shadow: 0 0 0 3px var(--ma-red) inset;
}

/* Round banner (between rounds in a series) */
.ttt-round-banner {
  margin-top: 14px;
  background: var(--bg-card);
  border: 1px solid var(--ma-red);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  font-weight: 700;
}

/* Player search modal */
.ttt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
}
.ttt-modal__box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  max-width: 460px;
  width: 100%;
  position: relative;
  margin-top: 60px;
}
.ttt-modal__close {
  position: absolute;
  top: 8px; right: 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
.ttt-modal__head {
  font-size: 13px;
  font-weight: 700;
  color: var(--ma-red);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-right: 24px;
}
.ttt-modal__input {
  width: 100%;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--text) 8%, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 10px;
}
.ttt-modal__input:focus { outline: none; border-color: var(--ma-red); }
.ttt-modal__list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ttt-modal__list .ttt-mi {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--text) 8%, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.ttt-modal__list .ttt-mi:hover { border-color: var(--ma-red); }
.ttt-modal__list .ttt-mi .n { font-weight: 700; }
.ttt-modal__list .ttt-mi .m { font-size: 11px; color: var(--text-muted); }
.ttt-modal__empty { padding: 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Result card */
.ttt-result {
  margin-top: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
}
.ttt-result h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ma-red);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ttt-result .series-score {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.ttt-result .actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Room lobby (used by multiplayer modes in commit B) */
.ttt-lobby {
  max-width: 460px;
  margin: 30px auto;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 22px;
  text-align: center;
}
.ttt-lobby h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ma-red);
  margin-bottom: 14px;
}
.ttt-lobby__code {
  font-family: monospace;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 4px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--text) 8%, var(--bg-card));
  border: 1px solid var(--ma-red);
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 12px;
}
.ttt-lobby__status { font-size: 13px; color: var(--text-muted); margin-bottom: 14px; }
.ttt-lobby__code-input {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.ttt-lobby__code-input input {
  font-family: monospace;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--text) 8%, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  flex: 1;
  max-width: 220px;
  text-align: center;
}
.ttt-lobby__code-input input:focus { outline: none; border-color: var(--ma-red); }

/* Mobile tightening */
@media (max-width: 480px) {
  .ttt-grid .corner { height: 68px; font-size: 9px; letter-spacing: 1px; }
  .ttt-grid .corner::before { width: 30px; height: 30px; background-size: 24px; margin-bottom: 4px; }
  .ttt-grid .col-head, .ttt-grid .row-head { padding: 6px 4px; font-size: 9px; letter-spacing: 0.3px; }
  .ttt-grid .col-head img, .ttt-grid .row-head img { max-width: 34px; max-height: 34px; margin-bottom: 4px; }
  .ttt-grid .cell { height: 82px; padding: 4px; }
  .ttt-grid .cell.filled-x .mark, .ttt-grid .cell.filled-o .mark { font-size: 22px; max-height: 46px; }
  .ttt-grid .cell .player-name { font-size: 9px; }
  .ttt-scoreboard { grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; }
  .ttt-score__wins { font-size: 20px; }
}