:root {
  --arcade-bg-dark: #102117;
  --arcade-bg-mid: #17342c;
  --arcade-panel: rgba(255, 252, 244, 0.9);
  --arcade-panel-soft: rgba(255, 255, 255, 0.12);
  --arcade-line: rgba(16, 33, 23, 0.12);
  --arcade-text: #11231b;
  --arcade-muted: #5b7265;
  --arcade-accent: #77cb75;
  --arcade-accent-strong: #56b36c;
  --arcade-accent-soft: rgba(119, 203, 117, 0.18);
  --arcade-shadow: 0 18px 40px rgba(10, 18, 13, 0.18);
  --arcade-shadow-soft: 0 10px 28px rgba(10, 18, 13, 0.12);
  --arcade-radius-xl: 28px;
  --arcade-radius-lg: 20px;
  --arcade-radius-md: 16px;
  --arcade-radius-sm: 12px;
}

html,
body {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.secondary-link,
.action-link,
.home-link,
.hud-home-link,
.icon-button,
.wide-button,
.tool-button,
.face-button,
.build-button,
.save-card-select,
.save-actions button,
.tech-card button {
  border-radius: var(--arcade-radius-md);
  border: 1px solid rgba(16, 33, 23, 0.1);
  box-shadow: var(--arcade-shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background 140ms ease;
}

button:hover,
.secondary-link:hover,
.action-link:hover,
.home-link:hover,
.hud-home-link:hover,
.icon-button:hover,
.wide-button:hover,
.tool-button:hover,
.face-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(10, 18, 13, 0.16);
  filter: saturate(1.02);
}

input,
select,
textarea {
  border: 1px solid rgba(16, 33, 23, 0.12);
  border-radius: var(--arcade-radius-md);
  background: rgba(255, 252, 244, 0.94);
  color: var(--arcade-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

input[type="color"] {
  min-height: 52px;
  padding: 6px;
}

input[type="range"] {
  accent-color: var(--arcade-accent-strong);
}

select {
  cursor: pointer;
}

.overlay,
.menu-overlay {
  background: rgba(10, 17, 13, 0.46);
  backdrop-filter: blur(10px);
}

.menu-card,
.panel,
.hud-chip,
.hud-pill,
.stat-card,
.summary-stat,
.summary-card,
.tech-card,
.save-card,
.control-group,
.setting-card,
.minimap-card,
.ranking-panel,
.board-panel,
.edge-panel,
.canvas-shell,
.topbar-block {
  border-radius: var(--arcade-radius-lg);
  border: 1px solid rgba(16, 33, 23, 0.08);
  box-shadow: var(--arcade-shadow);
}

.menu-card,
.panel,
.hud-chip,
.hud-pill,
.stat-card,
.summary-stat,
.summary-card,
.tech-card,
.save-card,
.control-group,
.setting-card,
.minimap-card,
.ranking-panel,
.board-panel,
.edge-panel,
.topbar-block {
  backdrop-filter: blur(10px);
}

.topbar,
.hud-bar {
  backdrop-filter: blur(10px);
  box-shadow: var(--arcade-shadow-soft);
}

details.instructions,
.instructions,
.edge-note,
.menu-notes,
.legend {
  border-radius: var(--arcade-radius-lg);
  border: 1px solid rgba(16, 33, 23, 0.08);
  backdrop-filter: blur(10px);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(8, 16, 12, 0.18);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(170, 234, 154, 0.95), rgba(96, 180, 116, 0.95));
  border-radius: 999px;
  border: 2px solid rgba(255, 252, 244, 0.45);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(187, 240, 174, 0.98), rgba(106, 190, 126, 0.98));
}