/* TUG Co. page styles.
   These pages wear the game's own palette (from tug-game src/styles/tokens.css)
   inside the site chrome. Light = the game's warm paper; dark = its designed
   night twin (deep plum, cream ink). Teal marks "moves with", coral marks
   "moves against", exactly as on the board. Gold stays reserved for the
   game's light and currency; the site never uses it decoratively. */

.tug-page {
  --tug-bg: #F3F2EE;
  --tug-panel: #FBFAF7;
  --tug-ink: #23262B;
  --tug-dim: #8B9098;
  --tug-faint: #C2C5CA;
  --tug-with: #3E9C8E;
  --tug-against: #C76B4E;
  --tug-coin: #E2B14C;
  background: var(--tug-bg);
  color: var(--tug-ink);
}

body.dark .tug-page {
  --tug-bg: #211b2e;
  --tug-panel: #2b2440;
  --tug-ink: #f0e8da;
  --tug-dim: #9a8fac;
  --tug-faint: #4e4562;
  --tug-with: #6fb8a2;
  --tug-against: #d98f70;
  --tug-coin: #ebc167;
}

.tug-display {
  font-family: "Baloo 2", sans-serif;
}

.tug-panel { background: var(--tug-panel); }
.tug-ink { color: var(--tug-ink); }
.tug-dim { color: var(--tug-dim); }
.tug-with { color: var(--tug-with); }
.tug-against { color: var(--tug-against); }

.tug-rule {
  height: 1px;
  background: var(--tug-faint);
  opacity: 0.6;
}

/* ---- The tuggable row (hero demo) ---------------------------------- */
/* Three rows, real board grammar: A and B move together, C moves against B.
   Dragging performs a carry: pieces track the pointer, then ease home on
   release. Nothing is spent; it is a peek, the same as in the game. */

.tugdemo {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.tugdemo-row {
  position: relative;
  height: 56px;
  cursor: grab;
}

.tugdemo-row:active { cursor: grabbing; }

.tugdemo-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: var(--tug-faint);
  transform: translateY(-50%);
}

.tugdemo-detent {
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tug-faint);
  transform: translate(-50%, -50%);
}

.tugdemo-home {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px dashed var(--tug-dim);
  opacity: 0.55;
  transform: translate(-50%, -50%);
}

.tugdemo-ball {
  position: absolute;
  top: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--tug-ink);
  transform: translate(-50%, -50%) translateX(calc(var(--t, 0) * 1px));
  will-change: transform;
}

.tugdemo-row.homing .tugdemo-ball {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tugdemo-row.homing .tugdemo-ball { transition: none; }
}

/* Coupling brackets in the side gutters, split by type as on the board:
   with-links route left, against-links route right. */
.tugdemo-bracket {
  position: absolute;
  width: 10px;
  border: 2px solid;
  border-radius: 3px;
}

.tugdemo-bracket.with {
  left: -18px;
  border-right: none;
  border-color: var(--tug-with);
}

.tugdemo-bracket.against {
  right: -18px;
  border-left: none;
  border-color: var(--tug-against);
}

.tugdemo-caption {
  color: var(--tug-dim);
  font-size: 0.8125rem;
}

/* ---- Answer blocks / fact cards ------------------------------------ */

.tug-fact {
  background: var(--tug-panel);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 3px rgba(35, 38, 43, 0.06);
}

body.dark .tug-fact {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ---- FAQ ------------------------------------------------------------ */

.tug-faq details {
  border-bottom: 1px solid var(--tug-faint);
  padding: 1rem 0;
}

.tug-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--tug-ink);
  list-style: none;
}

.tug-faq summary::-webkit-details-marker { display: none; }

.tug-faq summary::after {
  content: "+";
  float: right;
  color: var(--tug-dim);
}

.tug-faq details[open] summary::after { content: "\2212"; }

.tug-faq details p {
  margin-top: 0.625rem;
  color: var(--tug-dim);
  font-size: 0.9375rem;
  line-height: 1.6;
}