/* Honeycomb Puzzle - Byrne's Euclid Style */

:root {
  --bg-cream: #f5f0e6;
  --rust-red: #c44536;
  --slate-blue: #457b9d;
  --ochre: #e0a458;
  --dark: #1d3557;
  --black: #14213d;
  --path-green: #4a7c59;
}

.honeycomb-container {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  background: var(--bg-cream);
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
}

/* Header */
.honeycomb-header {
  text-align: center;
  margin-bottom: 20px;
}

.honeycomb-header h1 {
  font-size: 2rem;
  font-weight: normal;
  font-style: italic;
  margin-bottom: 6px;
  color: var(--dark);
}

.subtitle {
  color: var(--slate-blue);
  font-size: 0.95rem;
  font-style: italic;
  margin-bottom: 15px;
}

.status-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: 2px solid var(--dark);
  background: var(--bg-cream);
}

.status-bar .count {
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--rust-red);
}

.status-bar .count.complete {
  color: var(--path-green);
}

/* Honeycomb Grid */
.honeycomb-grid {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  grid-template-rows: repeat(2, 220px);
  gap: 15px 10px;
  margin-bottom: 130px; /* Account for middle column offset */
}

/* Honeycomb offset - middle column drops down */
.hex-container.hex-1,
.hex-container.hex-4 {
  transform: translateY(110px);
}

.hex-container {
  position: relative;
}

/* Hexagon shape */
.hexagon {
  width: 230px;
  height: 200px;
  background: var(--bg-cream);
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hexagon::before {
  content: '';
  position: absolute;
  inset: -3px;
  background: var(--dark);
  clip-path: polygon(
    25% 0%, 75% 0%, 100% 50%,
    75% 100%, 25% 100%, 0% 50%
  );
  z-index: -1;
}

.hexagon.connected::before {
  background: var(--path-green);
}

.hexagon.disconnected::before {
  background: var(--rust-red);
}

.hex-label {
  position: absolute;
  top: 15px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--dark);
  font-style: italic;
}

.hex-status {
  position: absolute;
  bottom: 12px;
  font-size: 0.7rem;
  font-style: italic;
  padding: 2px 8px;
  border: 1px solid;
}

.hex-status.connected {
  color: var(--path-green);
  border-color: var(--path-green);
}

.hex-status.disconnected {
  color: var(--rust-red);
  border-color: var(--rust-red);
}

/* Path label (C → G etc) */
.path-label {
  position: absolute;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
}

.node-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: bold;
  color: white;
  border: 2px solid var(--dark);
}

.node-badge.start {
  background: var(--slate-blue);
}

.node-badge.end {
  background: var(--rust-red);
}

/* Graph SVG container */
.graph-svg {
  width: 180px;
  height: 130px;
}

.graph-svg svg {
  width: 100%;
  height: 100%;
}

/* Graph nodes */
.graph-svg .node circle {
  stroke: var(--dark);
  stroke-width: 2px;
}

.graph-svg .node.start circle { fill: var(--slate-blue); }
.graph-svg .node.end circle { fill: var(--rust-red); }
.graph-svg .node.on-path circle { fill: var(--ochre); }
.graph-svg .node.regular circle { fill: var(--black); }

.graph-svg .node text {
  fill: white;
  font-size: 9px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

/* Graph edges */
.graph-svg .edge line {
  stroke: var(--dark);
  stroke-width: 2px;
  cursor: pointer;
}

.graph-svg .edge:hover line {
  stroke: var(--slate-blue);
  stroke-width: 4px;
}

.graph-svg .edge.on-path line {
  stroke: var(--ochre);
  stroke-width: 4px;
}

.graph-svg .edge.disabled line {
  stroke: #ccc;
  stroke-width: 1px;
  stroke-dasharray: 4 3;
}

/* Controls */
.controls {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.controls button {
  padding: 8px 18px;
  font-size: 0.8rem;
  font-family: 'Palatino Linotype', Georgia, serif;
  font-style: italic;
  border: 2px solid var(--dark);
  background: var(--bg-cream);
  color: var(--dark);
  cursor: pointer;
  transition: all 0.15s;
}

.controls button:hover {
  background: var(--dark);
  color: var(--bg-cream);
}

.controls button.primary {
  background: var(--slate-blue);
  border-color: var(--slate-blue);
  color: white;
}

.instructions {
  color: var(--slate-blue);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
  max-width: 500px;
}

/* Technical description */
.tech-description {
  margin-top: 30px;
  padding: 20px 30px;
  border: 2px solid var(--dark);
  background: rgba(255, 255, 255, 0.5);
  max-width: 650px;
  text-align: left;
}

.tech-description h3 {
  font-size: 1rem;
  font-weight: normal;
  font-style: italic;
  margin-bottom: 12px;
  color: var(--dark);
}

.tech-description p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dark);
  margin-bottom: 10px;
}

.tech-description .highlight {
  color: var(--slate-blue);
  font-weight: bold;
}

/* Key/Legend */
.legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 15px 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}

.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--dark);
}

.legend-swatch.start { background: var(--slate-blue); }
.legend-swatch.end { background: var(--rust-red); }
.legend-swatch.path { background: var(--ochre); }
.legend-swatch.node { background: var(--black); }

.legend-line {
  width: 25px;
  height: 3px;
}

.legend-line.active { background: var(--dark); }
.legend-line.path { background: var(--ochre); height: 4px; }

/* Win overlay */
.win-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(245, 240, 230, 0.95);
  z-index: 100;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

.win-overlay.active {
  display: flex;
}

.win-text {
  font-size: 2.5rem;
  font-style: italic;
  color: var(--dark);
}

.win-moves {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--slate-blue);
}

.play-again {
  margin-top: 20px;
  padding: 12px 30px;
  font-size: 1rem;
  font-family: 'Palatino Linotype', Georgia, serif;
  font-style: italic;
  border: 2px solid var(--slate-blue);
  background: var(--slate-blue);
  color: white;
  cursor: pointer;
  transition: all 0.15s;
}

.play-again:hover {
  background: var(--dark);
  border-color: var(--dark);
}