/* This page was created with the help of Claude Fable 5 by Anthropic. */
/* triangle-logic.css — 세모세모 로직 board (SVG; user units = triangle side). */

/* The board may take the full viewport height: the header floats above
   the game instead of stacking above it, and the page never scrolls. */
body {
  overflow: hidden;
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;        /* icon corner only — board stays clickable elsewhere */
  padding-right: 0;
  z-index: 100;
}

#game-area {
  padding-bottom: 0;  /* header is out of the flow — center in the full viewport */
}

/* Keep the info lines inside the centered unit so nothing can hang past
   the viewport (the sizing math in calcSize reserves for them exactly). */
.game-info-stack {
  position: static;
  translate: none;
  margin-top: var(--space-2);
}

#board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

#tri-board {
  display: block;
}

.tcell {
  fill: transparent;
  stroke: var(--g2);
  stroke-width: 0.028;
  cursor: pointer;
}

.tcell.filled {
  fill: var(--g4);
}

/* 회색 β (beta/triangle-gray): half-weight cells */
.tcell.gray {
  fill: var(--g3);
}

/* 부호 β (beta/triangle-sign, beta/triangle-sign-x): every cell starts
   gray; black (−1) cells take the page background with an opposite-color
   −, white (+1) cells the opposite color with a matching +. In variant A
   the × sits on a gray cell (confirmed gray); in the X variant × is its
   own empty value on the background. */
.sign-board .tcell {
  fill: var(--g3);
}

.sign-board .tcell.neg {
  fill: var(--g0);
}

.sign-board .tcell.pos {
  fill: var(--g4);
}

.sign-board .tmark {
  stroke: var(--g0);
}

.sign-board.sign-x .tcell.xcell {
  fill: var(--g0);
}

.sign-board.sign-x .tmark {
  stroke: var(--g3);
}

.tsign {
  stroke-width: 0.09;
  stroke-linecap: round;
  display: none;
  pointer-events: none;
}

.tsign.show {
  display: block;
}

.tsign.minus {
  stroke: var(--g4);
}

.tsign.plus {
  stroke: var(--g0);
}

.tcell.cursor {
  stroke: var(--accent);
  stroke-width: 0.06;
}

#tri-outline {
  fill: none;
  stroke: var(--g4);
  stroke-width: 0.05;
  pointer-events: none;
}

.tmark {
  stroke: var(--g3);
  stroke-width: 0.07;
  stroke-linecap: round;
  display: none;
  pointer-events: none;
}

.tmark.show {
  display: block;
}

.tguide {
  stroke: var(--g2);
  stroke-width: 0.028;
}

.tclue text {
  fill: var(--g4);
  /* the main game sets --tclue-font per board size (see triangle-logic.js);
     the beta page keeps the fallback */
  font-size: var(--tclue-font, 0.46px);
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
  font-variant-numeric: tabular-nums;
}

.tclue.done text {
  fill: var(--g3);
}

/* Per-clue progress: certainly-finished runs fade, contradicted runs
   turn red (see js/line-clues.js) */
.tclue text.done {
  fill: var(--g3);
}

.tclue text.wrong {
  fill: var(--danger);
}

/* Selected-cell highlight: the clues of the lines through the cursor cell
   get bold digits and an accent guide line — the same hue as the cursor
   outline, in both themes. */
.tclue.active text {
  font-weight: 800;
}

.tclue.active .tguide {
  stroke: var(--accent);
  stroke-width: 0.05;
}