/* =========================================================================
   MatrixMind — base.css   ·   THE FOUNDATION, LOADED FIRST
   Colour tokens, reset, the app shell grid, sidebar, buttons, view container.
   Everything here is shared by two or more views — that is the rule for what
   belongs in this file. Anything only one view uses lives in that view's own
   stylesheet instead.

   The full set, in load order (see index.html):
     base → home → tactics → learn → daily → modals → bots → vault
     → game-feel → animations
   ========================================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Color tokens ---------- */
:root {
  --bg-sidebar: #161512;        /* Chess.com Deep Obsidian                  */
  --bg-main: #262522;           /* Mid Dark Charcoal Backdrop               */
  --bg-card: #2d2b28;           /* Elevated Core Surface Slate              */
  --bg-inset: #232120;          /* Recessed cells inside cards              */
  --line: #3f3d3a;              /* Hairline borders                          */
  --accent-green: #81B64C;      /* Signature Chess.com Primary Green        */
  --accent-green-hover: #a3d968;
  --accent-green-shadow: #537d33;
  --accent-blue: #3B82F6;
  --accent-orange: #F97316;
  --accent-emerald: #10B981;
  --neon-cyan: #22d3ee;
  --neon-magenta: #d946ef;
  --text-main: #FFFFFF;
  --text-muted: #bababa;
  --radius: 12px;
  --sidebar-w: 15rem;
}

/* ---------- App shell: sidebar | scrollable dashboard ---------- */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: #3f3d3a; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #55524d; }

/* =========================================================================
   SIDEBAR
   ========================================================================= */
#app-sidebar {
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  padding: 14px 10px 16px;
  border-right: 1px solid rgba(255, 255, 255, .04);
}

.logo-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 16px;
  text-align: left;
}

.logo-mark { width: 27px; height: 27px; flex: 0 0 auto; }

.logo-text { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.logo-text b { color: var(--accent-green); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  transition: background-color .15s, color .15s;
}

.nav-item svg { width: 20px; height: 20px; flex: 0 0 auto; }

.nav-item:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-main); }

.nav-item.active {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--text-main);
  box-shadow: inset 3px 0 0 var(--accent-green);
}

/* Vault nav item + the account dock travel as one unit, pinned to the
   bottom — keeps the Vault physically apart from the puzzle-mode nav
   while still sitting right above the profile card, not floating alone. */
.sidebar-lower { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }

.vault-nav-item {
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 15px;
}

.sidebar-bottom { display: flex; flex-direction: column; gap: 9px; }

.sidebar-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  color: #6f6c67;
  font-size: 12px;
}

.sidebar-links button { color: #8f8b86; font-size: 12px; }
.sidebar-links button:hover { color: var(--text-main); text-decoration: underline; }

/* =========================================================================
   BUTTONS — tactile, chess.com-style heavy bottom shadow
   ========================================================================= */
.btn-green {
  background-color: var(--accent-green);
  color: #fff;
  font-weight: 800;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 15px;
  box-shadow: 0 5px 0 var(--accent-green-shadow), 0 8px 18px rgba(0, 0, 0, .35);
  transition: background-color .15s, transform .06s, box-shadow .06s;
}

.btn-green:hover { background-color: var(--accent-green-hover); }

.btn-green:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--accent-green-shadow), 0 2px 6px rgba(0, 0, 0, .3);
}

.btn-gray {
  background-color: #3a3835;
  color: #e8e6e3;
  font-weight: 700;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 14px;
  box-shadow: 0 4px 0 #232120;
  transition: background-color .15s, transform .06s, box-shadow .06s;
}

.btn-gray:hover { background-color: #464440; }

.btn-gray:active { transform: translateY(3px); box-shadow: 0 1px 0 #232120; }

.btn-block { width: 100%; }

.btn-hero { font-size: 19px; padding: 16px 40px; border-radius: 10px; }

/* =========================================================================
   VIEWS
   ========================================================================= */
#app-viewport { min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }

.app-view { display: none; }
.app-view.active { display: block; min-height: 100%; }