/* Shared panel chrome -------------------------------------------------- */
.screen--settings, .screen--shop, .screen--missions, .screen--achievements,
.screen--stats, .screen--about, .screen--data {
  background: rgb(var(--screen-bg));
}
.settings__card, .shop__card, .missions__card, .achievements__card,
.stats__card, .about__card, .data__card {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.settings__header, .shop__header, .missions__header, .achievements__header,
.stats__header, .about__header, .data__header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.settings__header, .data__header { justify-content: space-between; }
.settings__title, .shop__title, .missions__title, .achievements__title,
.stats__title, .about__title, .data__title {
  margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.2px;
  color: rgb(var(--text-primary)); flex: 1;
}
.settings__close, .shop__close, .missions__close, .achievements__close,
.stats__close, .about__close, .data__close {
  width: 34px; height: 34px; border: none; background: none;
  color: rgb(var(--text-muted)); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: color 0.15s;
  flex-shrink: 0;
}
.settings__close:active, .shop__close:active, .missions__close:active,
.achievements__close:active, .stats__close:active,
.about__close:active, .data__close:active { color: rgb(var(--text-primary)); }

/* Settings ------------------------------------------------------------- */
.settings__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0; border-bottom: 1px solid rgba(var(--text-primary),0.08);
  font-size: 14px; color: rgb(var(--text-secondary));
}
.settings__toggle {
  padding: 6px 18px; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; border-radius: var(--radius);
  border: 1px solid rgba(var(--text-primary),0.2); background: none;
  color: rgb(var(--text-muted)); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.settings__toggle--on { background: rgb(var(--accent)); border-color: transparent; color: rgb(var(--screen-bg)); }

/* Shop ----------------------------------------------------------------- */
.shop__bal { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: rgb(var(--text-primary)); }
.shop-tabs { display: flex; gap: 24px; margin-bottom: 18px; border-bottom: 1px solid rgba(var(--text-primary),0.08); }
.shop-tab {
  padding: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: rgb(var(--text-muted)); cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.shop-tab--active { color: rgb(var(--text-primary)); border-bottom-color: rgb(var(--accent)); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-card {
  padding: 14px; border-radius: var(--radius);
  border: 1px solid rgba(var(--text-primary),0.08); background: none;
  display: flex; flex-direction: column; gap: 8px;
}
.shop-card--equipped { border-color: rgba(var(--accent),0.6); }
.shop-card__preview { border-radius: 4px; min-height: 30px; display: flex; align-items: center; justify-content: center; }
.shop-prev { display: flex; align-items: center; justify-content: center; }
.shop-card__name { font-size: 13px; font-weight: 600; color: rgb(var(--text-primary)); }
.shop-card__rarity { font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.shop-card__rarity--common { color: rgb(var(--text-muted)); }
.shop-card__rarity--rare { color: rgb(var(--text-secondary)); }
.shop-card__rarity--epic { color: rgb(var(--text-primary)); }
.shop-card__rarity--legendary { color: rgb(var(--danger)); }
.shop-card__desc { font-size: 11px; color: rgb(var(--text-muted)); flex: 1; line-height: 1.4; }
.shop-card__btn {
  padding: 8px 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.5px; border-radius: var(--radius);
  border: 1px solid rgba(var(--text-primary),0.18); background: none;
  color: rgb(var(--text-secondary)); cursor: pointer; width: 100%; transition: color 0.15s, border-color 0.15s;
}
.shop-card__btn:active { border-color: rgba(var(--text-primary),0.4); color: rgb(var(--text-primary)); }
.shop-card--equipped .shop-card__btn { border-color: rgba(var(--accent),0.5); color: rgb(var(--accent)); }
.shop-card__btn:disabled { opacity: 0.4; cursor: default; }
.shop-card__btn--locked { opacity: 0.3; }

/* Missions ------------------------------------------------------------- */
.mission-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid rgba(var(--text-primary),0.08);
}
.mission-row--claimed { opacity: 0.4; }
.mission-row__info { flex: 1; min-width: 0; }
.mission-row__desc { display: block; font-size: 13px; font-weight: 500; color: rgb(var(--text-primary)); margin-bottom: 8px; }
.mission-row__bar-track { display: block; width: 100%; height: 2px; background: rgba(var(--text-primary),0.10); overflow: hidden; }
.mission-row__bar-fill { display: block; height: 100%; background: rgb(var(--accent)); transition: width 0.3s ease-out; }
.mission-row__count { display: block; font-family: var(--font-mono); font-size: 10px; color: rgb(var(--text-muted)); margin-top: 5px; }
.mission-row__btn {
  flex-shrink: 0; padding: 9px 16px; font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; border-radius: var(--radius);
  border: 1px solid rgba(var(--text-primary),0.18); background: none;
  color: rgb(var(--text-muted)); cursor: pointer;
}
.mission-row--done .mission-row__btn { border-color: transparent; background: rgb(var(--accent)); color: rgb(var(--screen-bg)); }
.mission-row__btn:disabled { cursor: default; }
.mission-row--claimed .mission-row__btn { background: none; border-color: rgba(var(--text-primary),0.12); color: rgb(var(--text-muted)); }

/* Achievements --------------------------------------------------------- */
.achievements__progress { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: rgb(var(--text-secondary)); }
.achievement-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(var(--text-primary),0.08); }
.achievement-row__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: rgb(var(--text-muted)); }
.achievement-row__icon svg { width: 18px; height: 18px; }
.achievement-row--done .achievement-row__icon { color: rgb(var(--accent)); }
.achievement-row__info { flex: 1; min-width: 0; }
.achievement-row__name { display: block; font-size: 13px; font-weight: 500; color: rgb(var(--text-primary)); }
.achievement-row__desc { display: block; font-size: 11px; color: rgb(var(--text-muted)); margin-top: 2px; }
.achievement-row__reward { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: rgb(var(--text-secondary)); flex-shrink: 0; }
.achievement-row--done { opacity: 0.55; }

/* Stats ---------------------------------------------------------------- */
.stats-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(var(--text-primary),0.08); }
.stats-row__label { font-size: 14px; color: rgb(var(--text-secondary)); }
.stats-row__value { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: rgb(var(--text-primary)); font-variant-numeric: tabular-nums; }


/* About ---------------------------------------------------------------- */
.about__content { font-size: 13px; color: rgb(var(--text-secondary)); line-height: 1.7; }
.about__section { margin-bottom: 24px; }
.about__section-title { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgb(var(--text-secondary)); margin-bottom: 10px; }
.about__fineprint { font-size: 11px; color: rgb(var(--text-muted)); margin-top: 8px; line-height: 1.6; }
.about__copyright { font-family: var(--font-mono); font-size: 11px; color: rgb(var(--text-muted)); margin-top: 24px; text-align: center; }
.about__website {
  display: block; margin: 4px auto 0; padding: 9px 20px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.5px;
  color: rgb(var(--accent)); background: none;
  border: 1px solid rgba(var(--accent), 0.4); border-radius: var(--radius);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.about__website:active { background: rgba(var(--accent), 0.12); border-color: rgba(var(--accent), 0.7); }

/* Data ----------------------------------------------------------------- */
.data__content { display: flex; flex-direction: column; gap: 24px; }
.data__section { display: flex; flex-direction: column; gap: 10px; }
.data__section-title { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgb(var(--text-secondary)); }
.data__field {
  width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical;
  padding: 12px; border-radius: var(--radius); border: 1px solid rgba(var(--text-primary),0.14);
  background: rgb(var(--screen-bg)); color: rgb(var(--text-primary));
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; outline: none;
}
.data__field:focus { border-color: rgba(var(--accent),0.5); }
.data__btn {
  align-self: flex-start; padding: 10px 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  border-radius: var(--radius); border: 1px solid rgba(var(--text-primary),0.18); background: none;
  color: rgb(var(--text-primary)); cursor: pointer; transition: border-color 0.15s;
}
.data__btn:active { border-color: rgba(var(--text-primary),0.4); }
.data__status { margin: 0; min-height: 16px; font-family: var(--font-mono); font-size: 12px; color: rgb(var(--text-secondary)); }
.data__status--ok { color: rgb(var(--text-primary)); }
.data__status--err { color: rgb(var(--danger)); }