*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #0a140a;
  color: #90c090;
  font-family: 'Courier New', monospace;
  min-height: 100dvh;
}

.container {
  padding: 10px 8px calc(90px + env(safe-area-inset-bottom, 0px));
  max-width: 500px;
  margin: 0 auto;
}

header {
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.4em;
  color: #b0d0b0;
  padding: 6px 0;
}

header span { color: #50a050; }

.tree-wrap { width: 100%; }

/* SVG default styles */
svg circle, svg rect, svg polygon {
  fill: #0d220d;
  stroke: #2a6a2a;
  stroke-width: 1.5;
}

svg line {
  stroke: #1e4e1e;
  stroke-width: 1.5;
}

svg text {
  fill: #70b070;
  font-family: 'Courier New', monospace;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  user-select: none;
}

/* Active path highlight */
svg .node-active circle,
svg .node-active rect,
svg .node-active polygon {
  fill: #1a5a1a;
  stroke: #70ff70;
  stroke-width: 2;
}

svg .node-active text { fill: #ffffff; }
svg .edge-active { stroke: #70ff70 !important; stroke-width: 2.5 !important; }

/* Output row */
.output {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 8px 0;
  padding: 10px 16px;
  background: #0d220d;
  border: 1px solid #1e4e1e;
  border-radius: 8px;
}

#path-display {
  font-size: 1.2rem;
  color: #50a050;
  min-width: 84px;
  text-align: right;
  letter-spacing: 0.12em;
}

#letter-display {
  font-size: 2.8rem;
  font-weight: bold;
  color: #70ff70;
  min-width: 44px;
  text-align: left;
}

/* Fixed button bar */
.buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #080f08;
  border-top: 1px solid #1e4e1e;
}

.buttons button {
  flex: 1;
  padding: 14px 0;
  font-size: 2rem;
  font-family: 'Courier New', monospace;
  background: #0d220d;
  color: #70b070;
  border: 1.5px solid #2a6a2a;
  border-radius: 10px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.08s;
}

.buttons button:active { background: #1a4a1a; }

#btn-reset {
  flex: 0.5;
  font-size: 1.4rem;
  color: #50a050;
}