* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none; /* no pull-to-refresh bounce on mobile */
  background: #0b1220;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #e8f0ff;
}

#game-canvas {
  /* Pinned to the viewport like every other overlay element (#hud,
   * #inspector, #toast) instead of sitting in normal document flow. Flow
   * positioning relied on JS (canvas.width/height, set from
   * window.innerWidth/innerHeight on "resize") staying perfectly in sync
   * with the actual viewport — but browser/page zoom (and especially
   * mobile pinch-zoom) doesn't reliably fire "resize", so the canvas's
   * flow box could end up taller than the current viewport and scroll
   * below the fixed HUD instead of staying full-bleed behind it.
   * position: fixed here makes that structurally impossible regardless of
   * whether a resize event ever fires. */
  position: fixed;
  inset: 0;
  display: block;
  cursor: pointer;
  /* Own every touch gesture ourselves — otherwise a tap-drag to build a
   * line can trigger the browser's pinch/pan/double-tap-zoom instead. */
  touch-action: none;
}

.panel {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.4;
  pointer-events: auto;
}

button {
  touch-action: manipulation; /* removes the ~300ms tap delay on mobile */
  -webkit-tap-highlight-color: transparent;
}

.dim {
  color: #94a3b8;
  font-size: 12px;
}

#hud {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  right: calc(8px + env(safe-area-inset-right));
  /* Safety net: the HUD must never be taller than the viewport, or it
   * covers the map entirely with nothing below it to scroll to. */
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px); /* accounts for mobile browsers' address bar */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

#hud-controls {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: calc(12px + env(safe-area-inset-left));
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}

#hud-controls button, #game-over-panel button {
  background: #1e293b;
  color: #e8f0ff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 6px;
  padding: 10px 14px;
  min-height: 40px;
  font-size: 13px;
  cursor: pointer;
}

#hud-controls button:hover, #game-over-panel button:hover {
  background: #334155;
}

#btn-next-turn {
  font-weight: 600;
}

.anger-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.anger-label {
  width: 80px;
  flex-shrink: 0;
}

.anger-track {
  flex: 1;
  height: 8px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.anger-fill {
  height: 100%;
}

.anger-fill.ok { background: #4ade80; }
.anger-fill.warn { background: #f59e0b; }
.anger-fill.danger { background: #f87171; }

.anger-value {
  width: 60px;
  text-align: right;
  font-size: 12px;
  color: #94a3b8;
}

.warning {
  background: rgba(248, 113, 113, 0.15);
  border: 1px solid rgba(248, 113, 113, 0.4);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  pointer-events: auto;
}

.hidden {
  display: none !important;
}

#hud-modes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#hud-help-text {
  margin-left: 4px;
}

.mode-btn {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  padding: 9px 12px;
  min-height: 40px;
  font-size: 12px;
  cursor: pointer;
}

.mode-btn.selected {
  background: rgba(96, 165, 250, 0.25);
  color: #e8f0ff;
  border-color: #60a5fa;
}

#inspector {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 240px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
}

.inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inspector-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 18px;
  min-width: 32px;
  min-height: 32px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.storage-mode-row {
  display: flex;
  gap: 6px;
}

.storage-mode-btn {
  flex: 1;
  font-size: 11px;
  padding: 7px 6px;
  min-height: 32px;
}

.dial-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.line-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.dial-label {
  width: 60px;
  flex-shrink: 0;
}

.dial-label.current-phase {
  font-weight: 700;
  color: #e8f0ff;
}

.dial-input {
  width: 62px;
  min-height: 32px;
  background: #1e293b;
  color: #e8f0ff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 16px; /* iOS Safari auto-zooms the page on focus for inputs under 16px */
}

.dial-toggle-btn {
  width: 62px;
  min-height: 32px;
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.dial-toggle-btn.on {
  background: rgba(74, 222, 128, 0.2);
  border-color: #4ade80;
  color: #4ade80;
}

.dial-effective.dial-mismatch {
  color: #facc15;
}

.dial-effective {
  flex: 1;
  text-align: right;
}

.storage-charge {
  font-size: 13px;
}

.dismantle-btn {
  background: #1e293b;
  color: #e8f0ff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 36px;
  font-size: 12px;
  cursor: pointer;
  align-self: flex-start;
}

.link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.link-chip {
  background: rgba(15, 23, 42, 0.6);
  border: 1.5px solid;
  border-radius: 12px;
  padding: 6px 10px;
  min-height: 32px;
  font-size: 11px;
  cursor: pointer;
}

.link-chip.selected {
  background: rgba(226, 232, 240, 0.25);
}

.link-actions {
  display: flex;
  gap: 6px;
}

.link-action-btn {
  flex: 1;
  background: #1e293b;
  color: #e8f0ff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 6px;
  padding: 8px 6px;
  min-height: 36px;
  font-size: 11px;
  cursor: pointer;
}

.link-action-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#btn-debug-toggle {
  border-style: dashed;
}

#btn-debug-toggle.debug-active {
  background: rgba(248, 113, 113, 0.25);
  border-color: #f87171;
  color: #f87171;
}

#saves-panel {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

/* Bottom-right, deliberately not sharing #inspector's top-right corner —
 * unlike the saves panel, the debug panel is meant to stay open *while*
 * inspecting a node (e.g. to edit its capacity), so it can't claim the
 * same spot. */
#debug-panel {
  position: fixed;
  bottom: calc(68px + env(safe-area-inset-bottom));
  right: calc(12px + env(safe-area-inset-right));
  width: 280px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
}

.debug-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.debug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.debug-input {
  width: 90px;
  min-height: 32px;
  background: #1e293b;
  color: #e8f0ff;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 16px; /* iOS Safari auto-zooms the page on focus for inputs under 16px */
}

.debug-tools {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.debug-tool-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.debug-tool-btn {
  font-size: 11px;
  padding: 7px 10px;
  min-height: 32px;
}

.debug-remove-btn {
  border-color: #f87171;
  color: #f87171;
}

.debug-remove-btn.selected {
  background: rgba(248, 113, 113, 0.25);
}

.saves-name-input {
  flex: 1;
  width: auto;
}

.saves-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}

.save-row-info {
  min-width: 0; /* allow the name/detail text to wrap/truncate instead of pushing the buttons off */
}

.save-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.save-row-actions .dismantle-btn {
  padding: 6px 10px;
  min-height: 28px;
  font-size: 11px;
}

.save-delete-btn {
  border-color: #f87171;
  color: #f87171;
}

#toast {
  position: fixed;
  /* Clears the hud-controls button row (which can wrap to two lines on
   * narrow phones) sitting at the same bottom edge. */
  bottom: calc(68px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  text-align: center;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  transition: opacity 0.3s;
}

#game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}

#game-over-panel {
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  padding: 24px 32px;
  width: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  text-align: center;
}

#game-over-panel h1 {
  margin-top: 0;
}

#game-over-stats {
  text-align: left;
  margin: 16px 0;
  font-size: 14px;
  line-height: 1.7;
}

#game-over-panel button {
  margin-top: 8px;
}