:root {
  --bg-dark: #020617;
  --bg-panel: #1f2937;
  --bg-panel-dark: #111827;
  --bg-input: #0f172a;
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --success: #15803d;
  --success-hover: #166534;
  --warning: #ca8a04;
  --warning-hover: #a16207;
  --felt-base: #2f4f2f;
  --felt-dark: #1a2f1d;
  --felt-light: #355e3b;
  --wood-border: #3e2723;
  --card-width: 48px;
  --card-height: 64px;
  --sidebar-bg: #1f2937;
  --sidebar-border: #374151;
}

@media (min-width: 640px) {
  :root {
    --card-width: 56px;
    --card-height: 80px;
  }
}

@media (min-width: 768px) {
  :root {
    --card-width: 64px;
    --card-height: 96px;
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.hidden {
  display: none !important;
}

/* Layout */
.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .app-container {
    flex-direction: row;
  }
}