/* Logic Grid puzzle-specific styles — builds on unified-2d-game.css + newspaper-theme.css */

:root {
  --logic-header-bg: var(--news-ink);
  --logic-header-text: var(--news-paper);
  --logic-cell-bg: var(--news-paper);
  --logic-cell-hover: rgba(0,0,0,0.04);
  --logic-cell-border: var(--news-rule-light);
  --logic-thick-border: var(--news-ink);
  --logic-true-bg: rgba(46,125,50,0.15);
  --logic-true-text: var(--news-correct);
  --logic-false-bg: rgba(198,40,40,0.15);
  --logic-false-text: var(--news-incorrect);
  --logic-clue-border: var(--news-accent);
  --logic-feedback-correct-bg: rgba(46,125,50,0.1);
  --logic-feedback-correct-text: var(--news-correct);
  --logic-feedback-correct-border: var(--news-correct);
  --logic-feedback-incorrect-bg: rgba(198,40,40,0.1);
  --logic-feedback-incorrect-text: var(--news-incorrect);
  --logic-feedback-incorrect-border: var(--news-incorrect);
  --logic-feedback-partial-bg: color-mix(in srgb, var(--warn) 10%, transparent);
  --logic-feedback-partial-text: var(--warn);
  --logic-feedback-partial-border: var(--warn);
}

html[data-theme='dark'] {
  --logic-cell-hover: rgba(255,255,255,0.04);
  --logic-true-bg: rgba(76,175,80,0.2);
  --logic-true-text: var(--news-correct);
  --logic-false-bg: rgba(239,83,80,0.2);
  --logic-false-text: var(--news-incorrect);
  --logic-feedback-correct-bg: rgba(76,175,80,0.15);
  --logic-feedback-incorrect-bg: rgba(239,83,80,0.15);
  --logic-feedback-partial-bg: color-mix(in srgb, var(--warn) 15%, transparent);
  --logic-feedback-partial-text: var(--warn);
  --logic-feedback-partial-border: var(--warn);
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

th, td {
  border: 1px solid var(--logic-cell-border);
  padding: 8px;
  text-align: center;
  min-width: 40px;
  height: 40px;
  position: relative;
  font-family: var(--news-font-body);
  font-size: 0.85rem;
}

th {
  background-color: var(--logic-header-bg);
  font-weight: 700;
  color: var(--logic-header-text);
  font-family: var(--news-font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.header-cell {
  background-color: var(--logic-header-bg);
  font-weight: 700;
  color: var(--logic-header-text);
}

.cell {
  cursor: pointer;
  transition: background-color 0.15s;
  background-color: var(--logic-cell-bg);
  color: var(--news-ink);
}

.cell:hover {
  background-color: var(--logic-cell-hover);
}

.empty-cell {
  background-color: var(--news-paper);
  cursor: default;
  border: none;
}

.thick-border-right { border-right: 2px solid var(--logic-thick-border) !important; }
.thick-border-left { border-left: 2px solid var(--logic-thick-border) !important; }
.thick-border-top { border-top: 2px solid var(--logic-thick-border) !important; }
.thick-border-bottom { border-bottom: 2px solid var(--logic-thick-border) !important; }

.cell.false {
  background-color: var(--logic-false-bg);
  color: var(--logic-false-text);
  font-size: var(--font-size-lg);
}

.cell.true {
  background-color: var(--logic-true-bg);
  color: var(--logic-true-text);
  font-size: var(--font-size-lg);
}

.clue {
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--news-paper);
  border-left: 3px solid var(--logic-clue-border);
  font-family: var(--news-font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--news-ink-light);
}

.feedback {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: 0;
  text-align: center;
  font-family: var(--news-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  display: none;
}

.feedback.correct {
  background: var(--logic-feedback-correct-bg);
  color: var(--logic-feedback-correct-text);
  border: 1px solid var(--logic-feedback-correct-border);
}

.feedback.incorrect {
  background: var(--logic-feedback-incorrect-bg);
  color: var(--logic-feedback-incorrect-text);
  border: 1px solid var(--logic-feedback-incorrect-border);
}

.feedback.partial {
  background: var(--logic-feedback-partial-bg);
  color: var(--logic-feedback-partial-text);
  border: 1px solid var(--logic-feedback-partial-border);
}

/* Let the board column shrink so the card can scroll its own table.
   -------------------------------------------------------------------------
   This sheet is loaded only on the logic page and comes after newspaper-theme.css,
   which sets `.classic-grid-section { flex-shrink: 0 }` for every puzzle. Logic's
   grid is sized by its cell contents, so on expert it is wider than the content
   column and, being unshrinkable, pushed the whole document sideways: measured
   177px of horizontal page overflow at a 1280px viewport, and 3px even on hard.
   The card already asks for `overflow-x: auto`; it just could never take effect
   because the flex item refused to shrink. Allowing that here contains the table
   inside the card, which scrolls, instead of scrolling the page. */
.classic-grid-section {
  flex-shrink: 1;
  min-width: 0;
  /* ...and give the clue column a floor.
     Before this, logic's board was unshrinkable and wider than the row, so the
     clues — `flex: 1; min-width: 0` — were squeezed to exactly 0px on hard and
     expert: the clue text was invisible, not merely narrow. Measured on the
     unmodified page: grid 987px (hard) and 1751px (expert) against a 920px row,
     clues 0 in both. Now the board column yields and scrolls its own table, and
     the clues keep a readable width. */
}

/* Declared on the shared parent, not on .classic-grid-section: that is the clues'
   SIBLING, so a custom property there is not inherited and `var()` would have been
   invalid and dropped, leaving min-width: 0 to win from newspaper-theme.css. */
.classic-content {
  --logic-clues-floor: 300px;
}

.classic-clues-section {
  min-width: var(--logic-clues-floor);
}

/* Stacked on mobile, so the floor does not apply and the clues take the full width. */
@media (max-width: 768px) {
  .classic-clues-section {
    min-width: 0;
  }
}

.logic-grid-card {
  overflow-x: auto;
}