/* ============================================================
   PhyCircuit — Φ Route game styles
   Pairs with lab.css. Layout: sticky-left side panel + centered
   canvas. Mobile collapses to single column.
   ============================================================ */

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

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

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

.route-panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--space-4);
}
.route-panel h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-14);
  color: var(--fg-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.route-levels {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.route-level-btn {
  background: var(--bg-0); color: var(--fg-1);
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: 0.6rem 0.8rem;
  font: inherit; font-size: var(--fs-14);
  text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 44px;  /* mobile tap target */
}
.route-level-btn:hover { border-color: var(--accent-2); }
.route-level-btn.is-active {
  background: color-mix(in oklch, var(--accent-2) 10%, var(--bg-0));
  border-color: var(--accent-2);
  color: var(--fg-0);
}
.route-level-btn.is-locked {
  opacity: 0.4; cursor: not-allowed;
}
.route-level-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

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

.route-btns {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.route-btns .btn { min-height: 44px; }
.route-help {
  margin: var(--space-3) 0 0; color: var(--fg-2);
  font-size: var(--fs-12); line-height: 1.5;
}

.route-main {
  display: flex; flex-direction: column; gap: var(--space-4);
}
.route-canvas-wrap {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--space-3);
  display: flex; justify-content: center;
}
#route-canvas {
  display: block;
  width: 100%; max-width: 720px; height: auto; aspect-ratio: 1 / 1;
  touch-action: none;  /* let the canvas own the pointer */
  cursor: crosshair;
  border-radius: var(--r-2);
  outline: none;
}
#route-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) 30%, transparent);
}

.route-done {
  background: linear-gradient(135deg, color-mix(in oklch, var(--accent-2) 10%, var(--bg-1)), var(--bg-1));
  border: 1px solid color-mix(in oklch, var(--accent-2) 30%, var(--line));
  border-radius: var(--r-3);
  padding: var(--space-4);
}
.route-done h3 { margin: 0 0 var(--space-2); }
.route-stars {
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in oklch, var(--accent) 50%, transparent);
}

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

/* fire / game-over state */
@keyframes route-shake {
  0%,100% { transform: translate(0, 0); }
  15%     { transform: translate(-6px, 2px) rotate(-1deg); }
  30%     { transform: translate(6px, -2px) rotate(1deg); }
  45%     { transform: translate(-4px, 4px) rotate(-0.5deg); }
  60%     { transform: translate(4px, -4px) rotate(0.5deg); }
  75%     { transform: translate(-2px, 2px); }
}
.route-shake {
  animation: route-shake 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .route-stars { text-shadow: none; }
  .route-shake { animation: none; }
}