/* ============================================================
   PhyCircuit — Φ Thermal game styles (Lab Stage 3)
   Reuses route.css patterns; pairs with lab.css for visual language.
   ============================================================ */

.tg-intro { padding: var(--space-7) var(--space-5) var(--space-5); }
.tg-intro h1 { margin: var(--space-2) 0 var(--space-3); font-size: clamp(var(--fs-28), 3.5vw, var(--fs-44)); }
.tg-intro p { color: var(--fg-1); font-size: var(--fs-16); max-width: 70ch; line-height: 1.55; }

.tg-stage {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-5);
  padding: 0 var(--space-5) var(--space-7);
}
@media (max-width: 900px) { .tg-stage { grid-template-columns: 1fr; } }

/* ----- side panel ----- */
.tg-side { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 901px) {
  .tg-side { position: sticky; top: var(--space-5); align-self: start; max-height: calc(100vh - var(--space-7)); overflow-y: auto; }
}

/* ----- tool buttons ----- */
.tg-tools { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tg-tool-btn {
  background: var(--bg-0); color: var(--fg-1);
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 0.55rem 0.9rem; font: inherit; font-size: var(--fs-14);
  cursor: pointer; min-height: 44px; transition: border-color .15s;
}
.tg-tool-btn:hover { border-color: var(--accent-2); }
.tg-tool-btn.is-active[data-tool="via"] { background: color-mix(in oklch, var(--accent) 15%, var(--bg-0)); border-color: var(--accent); color: var(--accent); }
.tg-tool-btn.is-active[data-tool="pour"] { background: color-mix(in oklch, var(--accent-2) 15%, var(--bg-0)); border-color: var(--accent-2); color: var(--accent-2); }
.tg-tool-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* reuse route panel/stats styles */
.tg-panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--space-4); }
.tg-panel h3 { margin: 0 0 var(--space-3); font-size: var(--fs-14); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; }
.tg-objective { color: var(--fg-1); font-size: var(--fs-14); line-height: 1.5; margin: 0 0 var(--space-2); }
.tg-hint { color: var(--fg-2); font-size: var(--fs-13); line-height: 1.5; margin: 0; font-style: italic; }

.tg-stats > div {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0.3rem 0; border-top: 1px solid var(--line);
  font-size: var(--fs-14); color: var(--fg-1);
}
.tg-stats > div:first-of-type { border-top: 0; }

.tg-temps { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.tg-temps th, .tg-temps td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--line); text-align: left; }
.tg-temps th { color: var(--fg-2); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.04em; }
.tg-over { color: #FF6B6B; font-weight: 600; }
.tg-ok   { color: #5BE49B; }

.tg-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tg-btns button { min-height: 44px; }

/* ----- main canvas area ----- */
.tg-main { display: flex; flex-direction: column; gap: var(--space-4); }

.tg-board {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--space-3);
}
#tg-canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 3/2;
  cursor: crosshair; border-radius: var(--r-2);
  touch-action: none;
  outline: none;
}
#tg-canvas:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 4px;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent-2) 25%, transparent);
}

.tg-cbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0; color: var(--fg-2); font-size: var(--fs-12); }
#tg-cbar { width: 100%; height: 10px; border-radius: var(--r-1); }

.tg-warn { color: var(--fg-2); font-size: var(--fs-14); margin: var(--space-2) 0 0; min-height: 1.4em; }
.tg-warn--on { color: #F0BE5B; }

.tg-win {
  background: linear-gradient(135deg, color-mix(in oklch, #5BE49B 10%, var(--bg-1)), var(--bg-1));
  border: 1px solid color-mix(in oklch, #5BE49B 35%, var(--line));
  border-radius: var(--r-3);
  padding: var(--space-4);
}
.tg-win h3 { margin: 0 0 var(--space-2); color: #5BE49B; }

.tg-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-13); color: var(--fg-2); }
.tg-legend span { display: flex; align-items: center; gap: var(--space-1); }
.tg-legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* ----- how it works cards ----- */
.tg-method { padding: var(--space-7) var(--space-5); }
.tg-method h2 { margin: 0 0 var(--space-4); }
.tg-method__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
@media (max-width: 720px) { .tg-method__grid { grid-template-columns: 1fr; } }
.tg-method__grid .card { padding: var(--space-4); }
.tg-method__grid h3 { margin: 0 0 var(--space-2); font-size: var(--fs-18); }
.tg-method__grid p { color: var(--fg-1); font-size: var(--fs-14); line-height: 1.55; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  #tg-canvas { cursor: default; }
}