/* ==========================================================================
   style.css — shared shell for all TCMStudy games pages
   Design tokens, the top navbar, and the icon set. Linked by every page
   (index, connections-index, acuquest/herbquest via quest.css, connections).
   Page- and game-specific styles live in each page's own CSS.
   ========================================================================== */

/* ---------- design tokens ---------- */
:root {
  --bg: #f4f4f9;
  --card: #ffffff;
  --ink: #2b2b2b;
  --muted: #8a8f98;
  --line: #e6e8ec;
  --header-bg: #ffffff;
  --star-off-bg: #eceef1;
  --star-off: #b7bcc4;
  --star-on-bg: #ffd15c;
  --star-on: #a9781a;
}
body.dark-mode {
  --bg: #1c1c1c;
  --card: #2a2a2a;
  --ink: #e8e8e8;
  --muted: #9a9ea6;
  --line: #3a3a3a;
  --header-bg: #2a2a2a;
  --star-off-bg: #3a3a3a;
  --star-off: #777;
}

/* ---------- top navbar (shared by every page) ---------- */
.header-bar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  /* border-box so the 18px side padding stays inside the 100% width — without
     this the bar overflows and right-aligned icons get clipped on pages that
     have no global box-sizing reset (e.g. connections.html). */
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
}
.header-bar .logo { height: 36px; width: auto; display: block; }
.header-bar .logo.dark { display: none; }
body.dark-mode .header-bar .logo.light { display: none; }
body.dark-mode .header-bar .logo.dark { display: block; }

.header-button {
  background: none; border: none; cursor: pointer; color: var(--ink);
  font-size: 20px; margin: 0; padding: 4px 5px; border-radius: 8px; line-height: 1;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.header-icons { display: flex; align-items: center; gap: 0; }

/* ---------- icon set (SVG masks, tinted with currentColor) ---------- */
[class^="icon-"], [class*=" icon-"] {
  display: inline-block; width: 1em; height: 1em;
  background-color: currentColor;
  vertical-align: -0.125em;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.icon-chevron { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.icon-cog { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E"); }
/* help + bulb use Material *outline* paths (thin-line look, like the old fa-*-o) */
.icon-help { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z'/%3E%3C/svg%3E"); }
.icon-bulb { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z'/%3E%3C/svg%3E"); }