/* M1 bare-bones styling. Theming happens in Milestone 4 — keep this plain. */

:root {
  --bg: #f4f4f2;
  --panel: #ffffff;
  --ink: #222;
  --muted: #777;
  --line: #ccc;
  --accent: #2b6cb0;
  --danger: #c0392b;
  --ok: #2e7d32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header, footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

footer {
  border-bottom: none;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  justify-content: space-between;
}

h1 { font-size: 1.1rem; margin: 0; }
.tag { font-size: 0.7rem; font-weight: normal; color: var(--muted); }

#hud[hidden] { display: none; }

#hud {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.bar {
  width: 180px;
  height: 14px;
  border: 1px solid var(--line);
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}

.bar .fill {
  height: 100%;
  width: 100%;
  background: var(--ok);
  transition: background 0.3s;
}

.bar.vitality .fill.low { background: var(--danger); }

#hud-vit-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 220px;
}

#hud-vit-block .bar { width: 100%; }

#hud-vit-sub {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--muted);
}

#hud-drain.wounded { color: var(--danger); font-weight: bold; }

/* Compact skill bars */
.bar.mini {
  width: 100%;
  height: 8px;
}

.bar.mini .fill {
  width: 0;
  background: var(--accent);
}

.skill { margin: 0.45rem 0; }

.skill-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.skill-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 2px;
}

main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px 300px;
  gap: 1rem;
  padding: 1rem;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr 1fr; }
  #map-section { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  main { grid-template-columns: 1fr; }
  #map-section { grid-column: auto; }
}

#map-section, #panel-card, #lab-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem;
}

#panel-card, #lab-card {
  display: flex;
  flex-direction: column;
}

#panel, #lab-panel { flex: 1; }

#lab-panel h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

#lab-panel h3 {
  font-size: 0.85rem;
  margin: 1rem 0 0.25rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}

#lab-panel p { font-size: 0.85rem; line-height: 1.4; }
#lab-panel .muted { color: var(--muted); }

.panel-footer {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  text-align: right;
}

button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

button.danger:hover {
  background: var(--danger);
  color: #fff;
}

#map { width: 100%; height: auto; display: block; }
.map-hint { color: var(--muted); font-size: 0.8rem; margin: 0.5rem 0 0; }

/* Map nodes & routes */
.route { stroke: #999; stroke-width: 2; }
.route.treacherous { stroke-dasharray: 6 4; }
.route.blocked { stroke-dasharray: 2 5; stroke: #c5c5c5; }
.route.sealed { stroke-dasharray: 2 4; stroke: #c0398a; }
.route.restored { stroke: var(--ok); stroke-width: 3; }

.node circle { fill: #ddd; stroke: #888; stroke-width: 1.5; cursor: pointer; }
.node:hover circle { fill: #cfdef0; }
.node.selected circle { stroke: var(--accent); stroke-width: 3; }
.node.current circle { fill: var(--accent); }
.node text {
  font-size: 12px;
  fill: var(--ink);
  pointer-events: none;
  text-anchor: middle;
}

/* Panel */
#panel h2 { font-size: 1rem; margin: 0 0 0.5rem; }
#panel p { font-size: 0.85rem; line-height: 1.4; }
#panel .muted { color: var(--muted); }
#panel .death { color: var(--danger); }

button {
  font: inherit;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

button.secondary {
  background: transparent;
  color: var(--accent);
}

button:disabled {
  border-color: var(--line);
  background: #eee;
  color: var(--muted);
  cursor: not-allowed;
}

.action-row { margin: 0.5rem 0; }

#panel h3 {
  font-size: 0.85rem;
  margin: 1rem 0 0.25rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.25rem;
}

.small { font-size: 0.75rem; }

.equip-row {
  display: block;
  font-size: 0.85rem;
  margin: 0.3rem 0;
}

.progress {
  width: 100%;
  height: 10px;
  border: 1px solid var(--line);
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
  margin: 0.4rem 0;
}

.progress .fill { height: 100%; background: var(--accent); }

/* Task queue */
.queue {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem;
  margin: 0.25rem 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafafa;
  cursor: grab;
}

.queue-item.active {
  border-color: var(--accent);
  background: #f0f6fc;
}

.queue-item:active { cursor: grabbing; }

.q-handle { color: var(--muted); cursor: grab; user-select: none; }
.q-label { flex: 1; font-size: 0.85rem; }
.q-time { font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.q-remove {
  padding: 0 0.4rem;
  font-size: 0.8rem;
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

.q-remove:hover { border-color: var(--danger); color: var(--danger); background: transparent; }

.q-progress {
  flex-basis: 100%;
  height: 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: #eee;
}

.q-progress .fill { height: 100%; width: 0; background: var(--accent); }