/* ═══════════════════════════════════════════════════════════════════════
 * shared.css — single source of truth for theme tokens, layout scaffold,
 * and the unified topnav. Loaded by every page. Per-page inline <style>
 * blocks should only add page-specific rules, not redefine these.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Theme tokens ───────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --gb0: #f0e6d0;
  --gb1: #e6d7b8;
  --gb2: #4058a0;
  --gb3: #181820;
  --pkmn-red:    #d02828;
  --pkmn-red-dk: #901818;
  --pkmn-blue:   #2858a8;
  --pkmn-yellow: #f8c020;
  --textbox-bg:  #fffdf5;
  --textbox-sh:  #c8bea8;
  --grid-ink:    15, 56, 15;
  --warn-bg:     #fff8d8;
  --err-bg:      #ffe0e0;
  --pre-bg:      rgba(15, 56, 15, 0.05);
}

[data-theme="dark"] {
  --gb0: #0a0e2e;
  --gb1: #1e2240;
  --gb2: #6ab0ff;
  --gb3: #f8f0d8;
  --pkmn-red:    #e84040;
  --pkmn-red-dk: #a02020;
  --pkmn-blue:   #5a9cff;
  --pkmn-yellow: #ffcc00;
  --textbox-bg:  #1a1f3d;
  --textbox-sh:  #0a0e2e;
  --grid-ink:    248, 240, 216;
  --warn-bg:     #3a3420;
  --err-bg:      #3d1a1a;
  --pre-bg:      rgba(248, 240, 216, 0.06);
}

/* ── Global resets ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--gb0);
  color: var(--gb3);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  background-image:
    repeating-linear-gradient(0deg, rgba(var(--grid-ink), 0.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(var(--grid-ink), 0.08) 0 1px, transparent 1px 3px);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  transition: background-color 0.2s ease;
}

.pixel {
  font-family: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
  letter-spacing: 1px;
}

/* ── Page-level layout wrapper ──────────────────────────────────────── *
 * Every page uses .wrap as its outer container. Individual pages MAY
 * override `max-width` in their own inline <style> (calc has a 3-col
 * layout that needs 1200px; other pages stay at 820/920). Padding,
 * shape, and mobile behavior are NOT overridable — kept consistent.
 */
.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.wrap > * { min-width: 0; max-width: 100%; }

/* ── Unified top nav ────────────────────────────────────────────────── */
.topnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--gb3);
  color: var(--gb0);
  border: 4px solid var(--gb3);
  margin-bottom: 14px;
  width: 100%;
  max-width: 900px;
  flex-wrap: wrap;
  position: relative;
}
.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Pixel calculator: body + screen strip + 3×2 button dots */
.topnav-brand .brand-icon {
  width: 16px;
  height: 20px;
  background: var(--pkmn-red);
  border: 2px solid var(--gb0);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.topnav-brand .brand-icon::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px; right: 2px;
  height: 5px;
  background: var(--gb0);
}
.topnav-brand .brand-icon::after {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  top: 11px; left: 3px;
  background: var(--gb0);
  box-shadow:
    4px 0   0 0 var(--gb0),
    8px 0   0 0 var(--gb0),
    0   4px 0 0 var(--gb0),
    4px 4px 0 0 var(--gb0),
    8px 4px 0 0 var(--gb0);
}
.topnav-brand h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  color: var(--gb0);
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--gb2);
}

/* Desktop tab strip */
.topnav-tabs {
  display: inline-flex;
  gap: 6px;
}
.topnav-tab {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 8px 12px;
  background: transparent;
  color: var(--gb0);
  border: 2px solid var(--gb0);
  cursor: pointer;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topnav-tab:hover,
.topnav-tab.active {
  background: var(--pkmn-yellow);
  color: var(--gb3);
  border-color: var(--pkmn-yellow);
}
.topnav-tab.active { box-shadow: 2px 2px 0 0 var(--pkmn-blue); }
[data-theme="dark"] .topnav-tab:hover,
[data-theme="dark"] .topnav-tab.active {
  background: var(--pkmn-red);
  color: #fff;
  border-color: var(--pkmn-red);
}
[data-theme="dark"] .topnav-tab.active { box-shadow: 2px 2px 0 0 var(--gb3); }

/* Mobile page-switcher button (hidden on desktop) */
.topnav-page-switch {
  display: none;
  position: relative;
}
.topnav-page-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 8px 10px;
  background: var(--pkmn-yellow);
  color: var(--gb3);
  border: 2px solid var(--pkmn-yellow);
  box-shadow: 2px 2px 0 0 var(--pkmn-blue);
  cursor: pointer;
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}
.topnav-page-btn:hover { background: var(--gb0); border-color: var(--gb0); }
[data-theme="dark"] .topnav-page-btn {
  background: var(--pkmn-red);
  color: #fff;
  border-color: var(--pkmn-red);
  box-shadow: 2px 2px 0 0 var(--gb3);
}
[data-theme="dark"] .topnav-page-btn:hover {
  background: var(--gb0);
  color: var(--gb3);
  border-color: var(--gb0);
}

.topnav-page-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--textbox-bg);
  border: 3px solid var(--gb3);
  box-shadow: 4px 4px 0 0 var(--gb3);
  min-width: 210px;
  max-width: calc(100vw - 24px);
  z-index: 50;
  flex-direction: column;
}
.topnav-page-menu.open { display: flex; }
.tp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--textbox-bg);
  color: var(--gb3);
  border: 0;
  border-bottom: 1px solid var(--textbox-sh);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.tp-item:last-child { border-bottom: 0; }
.tp-item:hover { background: var(--pkmn-yellow); }
.tp-item.active { background: var(--pkmn-yellow); color: var(--gb3); font-weight: 700; }
[data-theme="dark"] .tp-item:hover,
[data-theme="dark"] .tp-item.active {
  background: var(--pkmn-red);
  color: #fff;
}

/* Overflow menu (⋯) */
.topnav-more { position: relative; display: inline-flex; }
.topnav-more-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--gb0);
  color: var(--gb3);
  border: 2px solid var(--gb0);
  cursor: pointer;
  line-height: 1;
}
.topnav-more-btn:hover { background: var(--pkmn-yellow); }
[data-theme="dark"] .topnav-more-btn:hover {
  background: var(--pkmn-red);
  color: #fff;
  border-color: var(--pkmn-red);
}
.topnav-more-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--textbox-bg);
  border: 3px solid var(--gb3);
  box-shadow: 4px 4px 0 0 var(--gb3);
  min-width: 200px;
  max-width: calc(100vw - 24px);
  z-index: 50;
  flex-direction: column;
}
.topnav-more-menu.open { display: flex; }
.tnm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--textbox-bg);
  color: var(--gb3);
  border: 0;
  border-bottom: 1px solid var(--textbox-sh);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  width: 100%;
}
.tnm-item:last-child { border-bottom: 0; }
.tnm-item:hover { background: var(--pkmn-yellow); }
[data-theme="dark"] .tnm-item:hover { background: var(--pkmn-red); color: #fff; }
[data-theme="dark"] .tnm-item:hover .tnm-key { color: #fff; }
.tnm-item .tnm-key {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--gb2);
  letter-spacing: 1px;
}

/* ── Mobile topnav ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wrap { padding: 10px 10px 72px; }

  .topnav {
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: space-between;
    border-width: 3px;
    margin-bottom: 10px;
    box-shadow: 2px 2px 0 0 var(--gb3);
  }
  .topnav-brand {
    order: 1;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .topnav-brand h1 { font-size: 13px; }
  .topnav-brand .brand-icon { width: 13px; height: 16px; }

  /* Swap the desktop tab strip for a single dropdown button */
  .topnav-tabs { display: none; }
  .topnav-page-switch {
    display: inline-flex;
    order: 2;
    flex: 0 1 auto;
    min-width: 0;
  }
  .topnav-page-btn {
    font-size: 8px;
    padding: 7px 9px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .topnav-page-menu {
    right: 0;
    min-width: 190px;
    max-width: calc(100vw - 16px);
  }

  .topnav-more { order: 3; flex: 0 0 auto; }
  .topnav-more-btn { font-size: 13px; padding: 7px 12px; }
  .topnav-more-menu {
    right: 6px;
    min-width: 200px;
    max-width: calc(100vw - 16px);
  }
}

@media (max-width: 380px) {
  .topnav-brand h1 { font-size: 11px; }
  .topnav-page-btn { font-size: 7px; padding: 7px 8px; }
}