/* =========================================
   1) SIDEBAR RULES — one rule per line,
      checkbox on the left, label on the right
   ========================================= */

/* Scope to your left rules panel. If your wrapper
   is different, just add it to this comma list. */
#tte-rules,
#tte-rules-sidebar,
#rulesSidebar,
#rulesPanel,
.tte-rules,
.tte-rules-panel {
  /* nothing; this block is only a scope anchor */
}

/* Common checkbox+label stacks (.form-check is common in many UIs) */
#tte-rules .form-check,
#tte-rules-sidebar .form-check,
#rulesSidebar .form-check,
#rulesPanel .form-check,
.tte-rules .form-check,
.tte-rules-panel .form-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

/* If your markup doesn't use .form-check, make plain label rows work too */
#tte-rules label[for],
#tte-rules-sidebar label[for],
#rulesSidebar label[for],
#rulesPanel label[for],
.tte-rules label[for],
.tte-rules-panel label[for] {
  display: inline-block;
  margin: 0 0 0 8px;
  white-space: normal;           /* let long labels wrap */
}

#tte-rules input[type="checkbox"],
#tte-rules-sidebar input[type="checkbox"],
#rulesSidebar input[type="checkbox"],
#rulesPanel input[type="checkbox"],
.tte-rules input[type="checkbox"],
.tte-rules-panel input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

/* Make each rule line up as its own row even if the original CSS centered things */
#tte-rules .rule-row,
#tte-rules-sidebar .rule-row,
#rulesSidebar .rule-row,
#rulesPanel .rule-row,
.tte-rules .rule-row,
.tte-rules-panel .rule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

/* Keep number/select inputs compact */
#tte-rules input[type="number"],
#tte-rules select,
#tte-rules-sidebar input[type="number"],
#tte-rules-sidebar select,
#rulesSidebar input[type="number"],
#rulesSidebar select,
#rulesPanel input[type="number"],
#rulesPanel select,
.tte-rules input[type="number"],
.tte-rules select,
.tte-rules-panel input[type="number"],
.tte-rules-panel select {
  height: 28px;
  line-height: 28px;
}

/* =========================================
   2) BOARD — enforce 3×3 layout and center it
   ========================================= */

/* Center whatever wraps the board */
#classicBoardCard .card-body,
.tte-board-body,
.board-area,
#board-parent {
  text-align: center;
}

/* Center the #board itself */
#board {
  display: grid !important;              /* guarantee a grid, even if previous CSS said otherwise */
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 10px;                             /* space between cells; adjust if you have your own gaps */
  width: max-content;
  margin: 0 auto;
  padding: 0;
}

/* Make sure cells behave as squares with the game’s own sizing.
   If your project already sets explicit width/height via another CSS file,
   this will simply respect it; otherwise these ensure squares. */
#board .cell {
  box-sizing: border-box;
  aspect-ratio: 1 / 1; /* keeps them square if width is fluid */
  /* If you prefer fixed size instead of aspect-ratio, uncomment:
     width: 112px;
     height: 112px;
  */
}

/* The card/hands rows often need to be centered too */
#handHuman,
#handAI {
  display: inline-block;
  margin: 8px auto 0;
}

/* IMPORTANT: if you previously added any rules that forced the cells to stack,
   e.g. `#board .cell { display:block; width:100% }` or `float:none;`,
   please remove them. This file intentionally does NOT set float, so any old
   float:none rules can cause a column layout. */
   
   /* --- TTE fixes (append at end of tte-fixes.css) ------------------------- */

/* 1) Rules sidebar: one checkbox + one label per line, label to the right */
#tteRulesSidebar input[type="checkbox"][id^="rule"] {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 8px 8px 0; /* space to the right, and a little bottom gap for one-per-line */
}

#tteRulesSidebar input[type="checkbox"][id^="rule"] + label,
#tteRulesSidebar label[for^="rule"] {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 0 8px 0; /* bottom gap so each rule is on its own line */
  white-space: nowrap; /* keep short labels on one line */
}

/* If some global rule forces labels to block-level, neutralize it here (scoped!) */
#tteRulesSidebar label { display: inline-block !important; }

/* 2) Hands: horizontal row (fix vertical stacking) */
#handHuman, #handAI {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  overflow-x: auto; /* avoids wrapping if space is tight */
}
#handHuman .cardTT, #handAI .cardTT {
  flex: 0 0 auto; /* keep card widths; don’t stretch */
}

/* 3) 3×3 board grid safety (if a prior rule broke the grid) */
#board {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
#board .cell { aspect-ratio: 1 / 1; }

/* === TTE: rules sidebar + layout fixes (append at end) ================== */

/* Sidebar: put the checkbox and its label on the same line */
#tteRulesSidebar input[type="checkbox"][id^="rule"],
#rulesPanel       input[type="checkbox"][id^="rule"],
.rules-panel      input[type="checkbox"][id^="rule"],
.leftRules        input[type="checkbox"][id^="rule"] {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0 8px 8px 0;             /* a little space to the right; one-per-line gap */
}

/* Labels that belong to those rule checkboxes */
#tteRulesSidebar label[for^="rule"],
#rulesPanel       label[for^="rule"],
.rules-panel      label[for^="rule"],
.leftRules        label[for^="rule"] {
  display: inline-block !important; /* kill any global "label { display:block }" */
  vertical-align: middle;
  margin: 0 0 8px 0;                /* one-per-line spacing */
  white-space: nowrap;
  line-height: 1.2;
}

/* If a global rule forces all labels to block, neutralize it inside the sidebar */
#tteRulesSidebar label,
#rulesPanel label,
.rules-panel label,
.leftRules label {
  display: inline-block !important;
}

/* Hands: keep them horizontal and centered */
#handHuman, #handAI {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;          /* center under the board */
  align-items: center;
  gap: 12px;
  overflow-x: auto;
}
#handHuman .cardTT, #handAI .cardTT { flex: 0 0 auto; }

/* Board grid safety (in case a previous rule broke it) */
#board {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-left: auto;                /* center the board itself */
  margin-right: auto;
}
#board .cell { aspect-ratio: 1 / 1; }

/* Center the board section block within the middle column */

.tte-center-panel {
  max-width: 880px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Left rules panel: force 'checkbox + label' on one line --- */
/* Be generous with selectors to cover your current markup */
#tte-rules label,
#tte-rules .rule,
#tte-rules .row,
.tte-rules label,
.tte-rules .rule,
.tte-rules .row,
.sidebar .TTE label,
.sidebar .TTE .rule,
.sidebar .TTE .row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 !important;
}

/* Some themes style labels as blocks; ensure text sits to the right */
#tte-rules label,
.tte-rules label,
.sidebar .TTE label {
  white-space: nowrap;
}

/* If any group containers stack items vertically, let them wrap neatly */
#tte-rules .group,
.tte-rules .group {
  display: block;
}

/* --- Board centering + 3×3 guardrails --- */
#board {
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(96px, 1fr)) !important; /* set a sane min size */
  gap: var(--board-gap, 12px) !important;
  max-width: 860px; /* adjust to your theme if needed */
}

/* Ensure each board cell remains square and sized */
#board .cell {
  aspect-ratio: 1 / 1;
  min-width: 96px;
}

/* --- Hands: always horizontal rows under the board --- */
#handHuman,
#handAI {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px !important;
  justify-content: center;   /* center them under the board */
  flex-wrap: wrap;           /* allow wrapping on small screens */
}

/* Card sizing guardrails (prevents giant or tiny cards) */
#handHuman .cardTT,
#handAI   .cardTT {
  width: clamp(72px, 9vw, 110px);
  aspect-ratio: 1 / 1;
}

/* Optional: center the enclosing board panel if your layout wrapper exists */
.tte-center,
.panel:has(#board),
section:has(#board),
main:has(#board) {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}


/* === TTE sidebar (left) — one rule per line, checkbox on the left === */
.tte-sidebar {
  /* keep the panel narrow layout intact */
}

.tte-sidebar label,
.tte-sidebar .rule,
.tte-sidebar .row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 !important;     /* one rule per line */
  line-height: 1.2;              /* tighter, consistent baseline */
  white-space: nowrap;           /* prevent label wrapping under the box */
}

/* If markup is <label><input type=checkbox> Text</label> */
.tte-sidebar label > input[type="checkbox"] {
  margin-right: 8px !important;
}

/* If markup is <input type=checkbox> <label>Text</label> */
.tte-sidebar input[type="checkbox"] + label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 !important;
  white-space: nowrap;
}

/* Keep the little section headings tidy */
.tte-sidebar .section-title,
.tte-sidebar h4,
.tte-sidebar h5 {
  margin: 10px 0 4px;
  line-height: 1.2;
}

/* Don’t let long labels collapse underneath on narrow widths */
.tte-sidebar { overflow: visible; }

/* --- Sidebar rules: checkbox left, label right, one line --- */

/* 1) Make the element immediately after each rule checkbox sit inline on the same row */
input[type="checkbox"][id^="rule"] + * {
  display: inline-block !important;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.2;
}

/* 2) Keep the checkbox itself inline and aligned */
input[type="checkbox"][id^="rule"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0; /* spacing handled by the sibling */
}

/* Left rules rail: checkbox left, text right, one row */
#tte-left-rail label {
  display: flex;          /* ensure flex layout is actually on */
  flex-direction: row;    /* put input + text on the same line */
  align-items: center;    /* vertical alignment */
  gap: 6px;               /* space between checkbox and text */
  margin: 6px 0;          /* one rule per line */
}

/* If your markup is "input + label" (sibling) instead of "label > input",
   this ensures the sibling label also lays out horizontally. Safe to keep. */
#tte-left-rail input[type="checkbox"] + label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Keep the checkbox tight; the gap above handles spacing */
#tte-left-rail input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}
/* Min/Max dropdown sizing so "10 (A)" fits neatly */
/* Left rail: one rule per line, checkbox left, text right */
#tte-left-rail label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  white-space: nowrap;   /* stop label from wrapping under the checkbox */
  margin: 6px 0;
}

/* Keep the checkbox tight; spacing comes from the label gap */
#tte-left-rail input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
}

/* Min/Max dropdown sizing so "10 (A)" fits, without blowing layout */
#tte-left-rail #ruleMinLevel,
#tte-left-rail #ruleMaxLevel {
  max-width: 72px; /* your working value */
}

/* Set Wall dropdown */
#tte-left-rail #ruleSetWall {
  max-width: 75px; /* your working value */
}

/* Left rail: compact Tile Pattern select */
#tte-left-rail #tilePreset { max-width: 120px; }

/* Ensure the top-right HUD is visible and on top */
#tte-rules-hud {
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;           /* guards against accidental display:none */
  align-items: center;
  gap: 8px;
  z-index: 9991;           /* above board/panels */
}

#board .cell { position: relative; }
.tte-badge, .tte-badge-plus { pointer-events:none; z-index:9999; }