/* ============================================================
   Living/Origin Dex Tracker — style.css
   Theme: "Pokedex" — dark charcoal shell, red accent, cyan screen glow.
   ============================================================ */

:root {
  --color-bg:             #15171c;
  --color-surface:        #1c1f26;
  --color-surface-raised: #232631;
  --color-border:         #2c3040;
  --color-border-bright:  #3c4258;

  --color-text:           #e9edf5;
  --color-text-muted:     #8890a4;
  --color-text-dim:       #4b5166;

  --color-accent:         #ef4b4b;
  --color-accent-glow:    rgba(239, 75, 75, 0.18);
  --color-accent-hover:   #ff6b6b;

  --color-screen:         #5ff1e0;
  --color-screen-glow:    rgba(95, 241, 224, 0.18);

  --color-success:        #3ecf74;
  --color-danger:         #f05a5a;
  --color-caught:         #3ecf74;
  --color-evolve:         #f0b840;
  --color-shiny:          #ffd451;
  --color-shiny-glow:     rgba(255, 212, 81, 0.35);

  --color-header-bg:      #101216;
  --color-tab-bg:         #12141a;
  --color-tab-active-bg:  #1c1f26;
  --color-tab-hover-bg:   #171a20;

  --header-height:        60px;
  --tab-height:           40px;
  --sticky-top:           calc(var(--header-height) + var(--tab-height));

  --font-body:            'Inter', system-ui, sans-serif;
  --font-display:         'Rajdhani', sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ----------------------------------------------------------
   Type colors — used for type badges
   ---------------------------------------------------------- */
:root {
  --type-normal:   #a8a878; --type-fire:     #f08030; --type-water:    #6890f0;
  --type-electric: #f8d030; --type-grass:    #78c850; --type-ice:      #98d8d8;
  --type-fighting: #c03028; --type-poison:   #a040a0; --type-ground:   #e0c068;
  --type-flying:   #a890f0; --type-psychic:  #f85888; --type-bug:      #a8b820;
  --type-rock:     #b8a038; --type-ghost:    #705898; --type-dragon:   #7038f8;
  --type-dark:     #705848; --type-steel:    #b8b8d0; --type-fairy:    #ee99ac;
}

/* ----------------------------------------------------------
   Reset & base
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ----------------------------------------------------------
   Sticky header
   ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.25rem;
  gap: 1rem;
}

.header-left { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }

.back-link {
  font-size: 1rem;
  color: var(--color-text-muted);
  padding: 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
}
.back-link:hover { color: var(--color-accent); background: var(--color-accent-glow); }

.game-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, var(--color-accent), var(--color-screen));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.header-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  display: none;
}
@media (min-width: 640px) { .header-subtitle { display: inline; } }

.header-right { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }

.toolbar-btn {
  background: transparent;
  border: 1px solid var(--color-border-bright);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.32rem 0.65rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.toolbar-btn:hover { border-color: var(--color-screen); color: var(--color-screen); background: var(--color-screen-glow); }
.toolbar-btn--danger:hover { border-color: var(--color-danger); color: var(--color-danger); background: rgba(240,90,90,0.1); }
.toolbar-btn.active { background: var(--color-shiny); border-color: var(--color-shiny); color: #2b2103; font-weight: 700; }
.toolbar-btn.active:hover { background: var(--color-shiny); border-color: var(--color-shiny); color: #2b2103; }

.progress-bar-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--color-border);
}
.progress-bar-fill {
  height: 100%; background: var(--color-accent); width: 0%;
  transition: width 0.4s ease;
}

/* ----------------------------------------------------------
   Tabs
   ---------------------------------------------------------- */
.tab-nav {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  display: flex;
  gap: 0.25rem;
  height: var(--tab-height);
  padding: 0 1.25rem;
  background: var(--color-tab-bg);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0 0.9rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab-btn:hover { background: var(--color-tab-hover-bg); color: var(--color-text); }
.tab-btn.active { color: var(--color-text); border-bottom-color: var(--color-accent); background: var(--color-tab-active-bg); }

/* ----------------------------------------------------------
   Main content / section header
   ---------------------------------------------------------- */
.main-content { max-width: 1200px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }

.section-header { position: sticky; top: var(--sticky-top); z-index: 80; background: var(--color-bg); padding-bottom: 0.75rem; }

.section-progress-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; }
.progress-bar-track { flex: 1; height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.progress-bar-fill--section { background: linear-gradient(90deg, var(--color-accent), var(--color-screen)); border-radius: 999px; }
.progress-label { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }

.search-row { margin-bottom: 0.6rem; }
.search-input {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
}
.search-input:focus { outline: none; border-color: var(--color-screen); }

.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }

.filter-select-label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.68rem; color: var(--color-text-muted); }
.filter-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.filter-group { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.filter-btn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: 0.32rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.filter-btn:hover { color: var(--color-text); }
.filter-btn.active { color: var(--color-bg); background: var(--color-screen); border-color: var(--color-screen); font-weight: 600; }

.filter-check { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--color-text-muted); }
.filter-check input { accent-color: var(--color-accent); }
/* Shiny toggle (relocated from the old top-toolbar #btn-shiny-mode button)
 * gets the same gold accent that toolbar-btn.active used, and dims like a
 * disabled <button> did when Generation is locked to Gen 1 — see
 * updateShinyModeCheckboxAvailability(). */
#toggle-shiny { accent-color: var(--color-shiny); }
.filter-check.is-disabled { opacity: 0.45; cursor: not-allowed; }
.filter-check.is-disabled input { cursor: not-allowed; }

.empty-state { text-align: center; color: var(--color-text-muted); padding: 3rem 0; }

/* ----------------------------------------------------------
   Entry grid / cards
   ---------------------------------------------------------- */
.entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.entry-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.25rem;
  position: relative;
  transition: border-color 0.15s, transform 0.1s;
}
.entry-card:hover { border-color: var(--color-border-bright); transform: translateY(-1px); }
.entry-card.is-caught { border-color: var(--color-caught); background: linear-gradient(180deg, rgba(62,207,116,0.08), var(--color-surface) 40%); }
.entry-card.is-evolve { border-color: var(--color-evolve); }
/* Permanently marked shiny wins the border tint over caught/evolve — rarer
   and more special, and this rule simply comes last in the cascade. */
.entry-card.is-shiny { border-color: var(--color-shiny); box-shadow: 0 0 0 1px var(--color-shiny-glow); }

/* Gender-difference entries (e.g. a separate "Female" row for the same dex
   number) get a small marker so they don't read as an unlabeled duplicate
   of the entry next to them. */
.gender-tag {
  position: absolute; top: 0.4rem; right: 0.5rem;
  font-size: 0.7rem; color: #d874c9; font-weight: 700;
}

.entry-card-dexnum { font-family: var(--font-display); font-size: 0.68rem; color: var(--color-text-dim); position: absolute; top: 0.4rem; left: 0.5rem; }

/* Sprite chip — a fixed, consistent backdrop behind every sprite. Sprites
   from older generations often carry their own baked-in (non-transparent,
   low-res) background; giving every sprite the same deliberate card here
   means that never reads as a stray box, and `object-fit: contain` keeps
   small/large source images uniformly sized without stretching. */
.entry-sprite-wrap {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.entry-sprite { max-width: 82%; max-height: 82%; object-fit: contain; image-rendering: auto; transition: opacity 0.1s; }
.entry-sprite[src=""], .entry-sprite:not([src]) { visibility: hidden; }

/* Hover-to-see-the-back-sprite: a second sprite stacked exactly on top of
   the front one, invisible until the wrap is hovered. Deliberately pure CSS
   (no JS mouseenter/mouseleave) — see setBackSprite()'s doc comment for why.
   The front sprite fades out at the same time so the two never show at
   once — otherwise the back sprite (usually narrower) just layers on top of
   the front one still showing underneath it. */
.entry-sprite--back {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.entry-sprite-wrap:hover .entry-sprite--back[src] { opacity: 1; }
.entry-sprite-wrap:hover .entry-sprite:not(.entry-sprite--back) { opacity: 0; }

/* "Mark this species as shiny" toggle — sits in the checks row alongside
   Caught/Evolve rather than overlaid on the sprite itself, so it never
   competes with (or obscures) the artwork. Reuses .entry-check-btn's own
   look in the card; the detail-modal version below gets its own, since the
   detail modal doesn't have a checks row to join. */
.entry-check-btn.checked--shiny { background: var(--color-shiny); border-color: var(--color-shiny); color: #2b2103; font-weight: 700; }

.shiny-toggle-btn {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-bright);
  background: transparent;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.shiny-toggle-btn:hover { color: var(--color-shiny); border-color: var(--color-shiny); }
.shiny-toggle-btn.active {
  background: var(--color-shiny);
  border-color: var(--color-shiny);
  color: #2b2103;
  font-weight: 700;
}
.shiny-toggle-btn--detail { font-size: 0.75rem; padding: 0.3rem 0.7rem; }

.entry-attribution--shiny { color: var(--color-shiny); }

.entry-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.entry-form { font-size: 0.68rem; color: var(--color-screen); line-height: 1.1; }

.entry-types { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: center; }

.entry-origin {
  font-size: 0.62rem;
  color: var(--color-text-dim);
  line-height: 1.1;
}
.type-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}

.gmax-toggle-btn {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-border-bright);
  background: transparent;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}
.gmax-toggle-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
#detail-gmax-toggle { margin-bottom: 0.6rem; }

.entry-checks { display: flex; gap: 0.5rem; margin-top: 0.15rem; }
.entry-check-btn {
  font-size: 0.65rem;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-bright);
  background: transparent;
  color: var(--color-text-muted);
}
.entry-check-btn.checked--caught { background: var(--color-caught); border-color: var(--color-caught); color: #0a1a10; font-weight: 700; }
.entry-check-btn.checked--evolve { background: var(--color-evolve); border-color: var(--color-evolve); color: #221a00; font-weight: 700; }

/* ----------------------------------------------------------
   HOME boxes view
   ---------------------------------------------------------- */
.boxes-help { font-size: 0.78rem; color: var(--color-text-muted); padding: 0.75rem 0 1rem; max-width: 62ch; }

.box-list { display: flex; flex-direction: column; gap: 1.5rem; }
.home-box { }
.home-box-title { font-family: var(--font-display); font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.home-box-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  background: var(--color-border);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.home-slot {
  aspect-ratio: 1;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.home-slot.is-line-start { box-shadow: inset 2px 0 0 var(--color-screen); }
.home-slot img { max-width: 80%; max-height: 80%; object-fit: contain; filter: grayscale(1) brightness(0.6); transition: opacity 0.1s; }
.home-slot.is-caught img { filter: none; }
.home-slot.is-shiny { box-shadow: inset 0 0 0 2px var(--color-shiny); }
.home-slot.is-shiny.is-line-start { box-shadow: inset 0 0 0 2px var(--color-shiny), inset 2px 0 0 var(--color-screen); }
.home-slot.is-empty { background: var(--color-bg); }
.home-slot-img--back {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.home-slot:hover .home-slot-img--back[src] { opacity: 1; }
.home-slot:hover .home-slot-img:not(.home-slot-img--back) { opacity: 0; }

/* ----------------------------------------------------------
   Modal
   ---------------------------------------------------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--color-border);
}
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.modal-close { background: transparent; border: none; color: var(--color-text-muted); font-size: 1.3rem; line-height: 1; }
.modal-close:hover { color: var(--color-text); }

.detail-body { padding: 1rem; overflow-y: auto; }
.detail-sprite-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.detail-sprite-row .entry-sprite-wrap { width: 96px; height: 96px; }
.detail-sprite-row .entry-sprite-wrap img { max-width: 82%; max-height: 82%; object-fit: contain; }
/* NOTE: the ".detail-sprite-row .entry-sprite-wrap"/"...img" rules above
   target a class name ("entry-sprite-wrap") that doesn't actually appear in
   the detail modal's markup (it uses "detail-sprite-wrap") — a pre-existing
   mismatch, unrelated to this feature, left as-is rather than fixed here. */
.detail-sprite-wrap { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.detail-sprite-wrap .detail-sprite-img { max-width: 82%; max-height: 82%; object-fit: contain; transition: opacity 0.1s; }
.detail-sprite-img--back {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.detail-sprite-wrap:hover .detail-sprite-img--back[src] { opacity: 1; }
.detail-sprite-wrap:hover .detail-sprite-img:not(.detail-sprite-img--back) { opacity: 0; }
.detail-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3rem 1rem; font-size: 0.8rem; margin: 0.6rem 0; }
.detail-stat-label { color: var(--color-text-muted); }
.detail-row { margin: 0.5rem 0; font-size: 0.85rem; }
.detail-row strong { color: var(--color-text-muted); font-weight: 600; }
.detail-notice { font-size: 0.78rem; color: var(--color-text-muted); background: var(--color-surface); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); margin-top: 0.5rem; }

/* ----------------------------------------------------------
   Shared-progress attribution + pairing
   ---------------------------------------------------------- */
.entry-attribution {
  font-size: 0.62rem;
  color: var(--color-text-dim);
  line-height: 1.1;
}

.pairing-body { padding: 1rem; }
.pairing-intro { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 0.9rem; line-height: 1.4; }
.pairing-field {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.75rem; color: var(--color-text-muted);
  margin-bottom: 0.8rem;
}
.pairing-field input {
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
}
.pairing-error { color: var(--color-evolve); font-size: 0.78rem; margin: 0 0 0.6rem; }
.pairing-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
#pairing-skip { background: transparent; color: var(--color-text-dim); font-size: 0.72rem; }

.auth-link-btn {
  display: block;
  background: transparent;
  border: none;
  color: var(--color-accent);
  font-size: 0.74rem;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
  padding: 0;
  margin: -0.3rem 0 0.7rem;
}
.auth-link-btn:hover { color: var(--color-accent-hover); }
/* Explicit override: without this, [hidden]'s UA display:none loses to the
   .auth-link-btn display:block above at equal specificity, and a "hidden"
   link stays visible. */
.auth-link-btn[hidden] { display: none; }

/* Can be opened from on top of the auth modal (signup/reset) or the account
   modal (regenerating a code) — always render above either. */
#recovery-modal { z-index: 260; }

.recovery-code-display {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-bright);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  padding: 0.8rem 0.6rem;
  margin-bottom: 0.9rem;
  user-select: all;
}

.auth-mode-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.9rem; }
.auth-mode-tab {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.auth-mode-tab.active {
  background: var(--color-accent, #3d8bfd);
  color: #fff;
  border-color: transparent;
}

/* ----------------------------------------------------------
   Account modal — profile, password, merge progress
   ---------------------------------------------------------- */
.account-modal { max-width: 520px; }
.account-body { padding: 1rem; overflow-y: auto; }
.account-section {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.account-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.account-section-title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.account-section-desc {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 0.6rem;
}
.account-field-row { display: flex; gap: 0.5rem; }
.account-field-row input {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  padding: 0.45rem 0.6rem;
  font-size: 0.9rem;
  min-width: 0;
}
.account-field-error { color: var(--color-evolve); font-size: 0.76rem; margin: 0.4rem 0 0; }

.merge-request-list { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.merge-list-empty { font-size: 0.78rem; color: var(--color-text-dim); margin: 0; }
.merge-request-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  flex-wrap: wrap;
}
.merge-request-text { font-size: 0.78rem; color: var(--color-text-muted); flex: 1; min-width: 140px; }
.merge-request-actions { display: flex; gap: 0.4rem; }
.merge-request-actions .toolbar-btn { padding: 0.3rem 0.55rem; font-size: 0.72rem; }

/* ----------------------------------------------------------
   Presence — "who's here" avatar strip (header)
   ---------------------------------------------------------- */
.presence-bar {
  display: flex;
  align-items: center;
  margin-right: 0.3rem;
}
.presence-bar[hidden] { display: none; }
.presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-surface-raised);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-left: -8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar.is-me { box-shadow: 0 0 0 2px var(--color-accent), 0 1px 3px rgba(0,0,0,0.35); }

.sync-notice {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, calc(100% + 1rem));
  max-width: min(90vw, 420px);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-bright);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.9rem;
  font-size: 0.78rem;
  color: var(--color-text);
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  z-index: 300;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}
.sync-notice.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  .game-title { font-size: 0.92rem; }
  .toolbar-btn { padding: 0.28rem 0.5rem; font-size: 0.66rem; }
  .entry-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}