/* 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);
}

.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);
}