/* ============================================================
   OnlyBrains design system
   ------------------------------------------------------------
   Every game page links this file BEFORE its own <style> block,
   so a page can still override anything here for game-specific
   needs — but the shell (navbar, sidebar, game header, buttons,
   result panel, modal, footer) should come from here and only
   from here. Before adding a rule to a page, check it does not
   belong in this file instead.

   Colours are true black with layered greys on top. The three
   semantic colours (green / yellow / grey) are deliberately the
   old values: they carry meaning inside the games and appear in
   the emoji grids people paste into chats, so they are not ours
   to restyle.

   Per-page knob: --ob-col sets the width of the game column and
   the header above it. Set it once in the page's own :root.
   ============================================================ */

:root {
  /* Surfaces, darkest first */
  --ob-bg:          #000000;   /* page */
  --ob-surface:     #0e0e10;   /* navbar, sidebar, modal, panels */
  --ob-surface-2:   #151519;   /* inputs, cards sitting on a panel */
  --ob-surface-3:   #1e1e23;   /* controls: buttons, keys */
  --ob-surface-4:   #2c2c33;   /* control hover */

  /* Lines */
  --ob-line:        #26262c;   /* hairline separators */
  --ob-line-strong: #36363e;   /* component borders */

  /* Text */
  --ob-text:        #f2f2f4;
  --ob-text-dim:    #9c9ca6;
  --ob-text-faint:  #6e6e78;

  /* Semantic — same values the games use in their own logic */
  --ob-correct:     #538d4e;
  --ob-correct-hi:  #63a85c;
  --ob-present:     #b59f3b;
  --ob-absent:      #3a3a3c;
  --ob-error:       #e0524d;

  /* Shape and rhythm */
  --ob-radius:      6px;
  --ob-radius-lg:   10px;
  --ob-col:         520px;

  --ob-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ob-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                  Consolas, "Liberation Mono", monospace;
}

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

body {
  font-family: var(--ob-font);
  background: var(--ob-bg);
  color: var(--ob-text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Navbar ---------------------------------------- */
nav {
  background: var(--ob-surface);
  border-bottom: 1px solid var(--ob-line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  width: 36px; height: 36px;
  background: var(--ob-surface-3);
  border-radius: var(--ob-radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  overflow: hidden;
}
.logo img { width: 100%; height: 100%; object-fit: contain; }
.page-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- Layout ---------------------------------------- */
.container { display: flex; flex: 1; min-height: 0; }

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 24px 40px;
  overflow-y: auto;
}

/* ---------- Sidebar --------------------------------------- */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--ob-surface);
  border-right: 1px solid var(--ob-line);
  padding: 18px 0;
  overflow-y: auto;
}
.sidebar-title {
  padding: 8px 20px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ob-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.games-list { list-style: none; }
.games-list li { margin: 0; }

/* Navigation keeps each game's name in its natural case — a list of
   shouted words is harder to scan. The uppercase treatment belongs to
   the game header, where it is a wordmark rather than a link. */
.game-item {
  display: block;
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  color: var(--ob-text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.game-item:hover { background: var(--ob-surface-3); color: var(--ob-text); }
.game-item.active {
  background: var(--ob-surface-2);
  border-left-color: var(--ob-correct);
  color: var(--ob-text);
  font-weight: 600;
}

.badge-new, .badge-soon, .badge-dev {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.06em;
}
.badge-new  { background: var(--ob-correct); color: #fff; }
.badge-soon { background: var(--ob-present); color: #000; }
/* Playable but still being tuned. Outlined rather than filled so it reads
   as unfinished; an inset shadow, not a border, keeps it the same size as
   the filled badges. Unlike badge-new it does not trigger the phone-menu
   reveal in shared-games-utils.js. */
.badge-dev  { background: transparent; color: var(--ob-present); box-shadow: inset 0 0 0 1px var(--ob-present); }

/* ---------- Game header ----------------------------------- */
/* Three slots: help on the left, wordmark centred, game-specific
   controls on the right. The grid (not flex) is what keeps the
   wordmark optically centred no matter how wide the side slots get,
   so no page needs an absolutely positioned corner or an invisible
   spacer button to fake it. */
.game-header {
  width: 100%;
  max-width: var(--ob-col);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 4px 0 14px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--ob-line);
}
.game-header > *:nth-child(1) { justify-self: start; }
.game-header > *:nth-child(2) { justify-self: center; }
.game-header > *:nth-child(3) { justify-self: end; }

/* Pages carry each game's name in its natural case and let CSS shout
   it, so the name has exactly one spelling in the source. */
#game-title, .game-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right-hand slot: timers, puzzle numbers, hint buttons. */
.header-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}
.puzzle-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--ob-text-faint);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.header-stat {
  font-size: 13px;
  font-weight: 600;
  color: var(--ob-text-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- Buttons --------------------------------------- */
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--ob-radius);
  background: var(--ob-surface-3);
  color: var(--ob-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--ob-surface-4); }
.btn:focus-visible { outline: 2px solid var(--ob-correct); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--ob-correct); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--ob-correct-hi); }

.btn-quiet {
  background: transparent;
  border-color: var(--ob-line-strong);
  color: var(--ob-text-dim);
}
.btn-quiet:hover:not(:disabled) { background: var(--ob-surface-3); color: var(--ob-text); }

.btn-sm { font-size: 12px; padding: 7px 12px; min-height: 32px; gap: 6px; }
.btn-lg { font-size: 15px; padding: 13px 26px; min-height: 46px; }
.btn-block { width: 100%; }

/* Header buttons are the small, quiet variant. Kept as its own class
   because every page's markup already names it. */
.header-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--ob-line-strong);
  border-radius: var(--ob-radius);
  background: transparent;
  color: var(--ob-text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.header-btn:hover:not(:disabled) {
  background: var(--ob-surface-3);
  color: var(--ob-text);
}
.header-btn:focus-visible { outline: 2px solid var(--ob-correct); outline-offset: 2px; }
.header-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Share All lives in the navbar on every page. */
#main-share-btn { margin-left: auto; }

/* ---------- Transient message line ------------------------ */
/* Fixed height so the board never jumps when a message appears. */
#msg {
  min-height: 26px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  color: var(--ob-text-dim);
}

#loading {
  color: var(--ob-text-faint);
  margin-top: 48px;
  font-size: 15px;
}

/* ---------- Result panel ---------------------------------- */
/* Every game ends in this panel, with the same running order:
   headline, then the detail lines, then Share, then the sign-off.
   Games differ in what they put in the detail slot and nothing else. */
.result-panel {
  width: 100%;
  max-width: var(--ob-col);
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ob-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.result-panel[hidden] { display: none; }

.result-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ob-correct);
}
.result-title.is-loss { color: var(--ob-error); }

.result-detail {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ob-text-dim);
}
.result-detail strong { color: var(--ob-text); font-weight: 600; }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 2px;
}

.result-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ob-text-faint);
}

.result-pop { animation: obResultPop 0.45s ease-out; }
@keyframes obResultPop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Modal ----------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.show { display: flex; }
.modal-content {
  background: var(--ob-surface);
  border: 1px solid var(--ob-line-strong);
  border-radius: var(--ob-radius-lg);
  padding: 26px 28px;
  width: 100%;
  max-width: 540px;
  max-height: 82vh;
  overflow-y: auto;
}
.modal-content h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.modal-content p  { margin-bottom: 12px; line-height: 1.6; font-size: 14px; color: var(--ob-text-dim); }
.modal-content ul { margin: 0 0 12px 20px; }
.modal-content li { margin-bottom: 6px; line-height: 1.6; font-size: 14px; color: var(--ob-text-dim); }
.modal-content strong, .modal-content b { color: var(--ob-text); }
.modal-content .close {
  float: right;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: var(--ob-text-faint);
  margin: -4px -4px 0 12px;
}
.modal-content .close:hover { color: var(--ob-text); }
.attribution {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ob-line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ob-text-faint);
}

/* ---------- Support footer (injected by shared-games-utils) - */
#support-footer {
  margin-top: 40px;
  padding: 18px 16px 4px;
  border-top: 1px solid var(--ob-line);
  width: 100%;
  max-width: var(--ob-col);
  text-align: center;
  font-size: 12px;
  color: var(--ob-text-faint);
}
#support-footer a { color: var(--ob-text-dim); }

/* ---------- Site notices ---------------------------------- */
/* Both notices are hidden here and revealed by a page script setting
   style.display, so the inline value keeps winning over this rule. */
.site-notice {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  padding: 10px 16px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  background: var(--ob-surface);
  border-top: 1px solid var(--ob-line);
  color: var(--ob-text-faint);
}
.site-notice.is-warn {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  background: #1c0f0f;
  border-top-color: #4a2626;
  color: #d8a0a0;
}
.notice-btn {
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  margin-left: 8px;
  padding: 4px 11px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}
.notice-btn:hover { opacity: 1; }

/* ---------- Responsive ------------------------------------ */
@media (max-width: 768px) {
  .sidebar { width: 180px; }
  .page-title { font-size: 20px; }
}

@media (max-width: 600px) {
  .container { flex-direction: column; }
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--ob-line);
    padding: 8px 0;
    overflow-x: auto;
    display: flex;
  }
  .games-list { display: flex; flex-direction: row; gap: 4px; padding: 0 12px; }
  .sidebar-title { display: none; }
  .game-item {
    padding: 8px 14px;
    white-space: nowrap;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--ob-radius);
  }
  .game-item.active { border-left: none; border-bottom-color: var(--ob-correct); }

  nav { padding: 10px 16px; gap: 10px; }
  .page-title { font-size: 18px; }
  .logo { width: 30px; height: 30px; }

  .main-content { padding: 18px 14px 32px; }
  .game-header { font-size: 17px; padding-bottom: 12px; }
  #game-title, .game-title { font-size: 16px; letter-spacing: 0.12em; }

  .result-title { font-size: 19px; }
  .modal-content { padding: 20px 18px; }

  button { -webkit-touch-callout: none; -webkit-user-select: none; }
}