* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #1b1f27;
  color: #e8e8ee;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #262b36;
  border-bottom: 1px solid #363c4a;
}

header h1 {
  margin: 0;
  font-size: 1.4rem;
}

.header-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

#user-email { color: #c7ccd6; }
#sync-status { min-width: 90px; text-align: right; }

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-box {
  background: #262b36;
  border: 1px solid #3a4152;
  border-radius: 10px;
  padding: 28px;
  max-width: 360px;
  width: 100%;
}

.auth-box h1 {
  margin: 0 0 10px;
  font-size: 1.4rem;
  text-align: center;
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab-btn {
  background: transparent;
  border: 1px solid #3a4152;
  color: #9aa1b3;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}

.tab-btn.active {
  background: #4c6ef5;
  color: white;
  border-color: #4c6ef5;
}

.view.hidden { display: none !important; }

.panel {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px 24px;
}

.stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  flex: 1;
  background: #232833;
  border: 1px solid #363c4a;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #9aa1b3;
  letter-spacing: 0.04em;
}

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  margin-top: 4px;
}

.gear-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gear-swords {
  white-space: nowrap;
  color: #c7ccd6;
}

.icon-dagger { font-size: 0.75rem; }
.icon-sword { font-size: 1rem; }
.icon-greatsword { font-size: 1.5rem; vertical-align: middle; }

.gear-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.result-body {
  white-space: pre-wrap;
  line-height: 1.5;
}

.board {
  display: flex;
  gap: 12px;
  padding: 16px;
  overflow-x: auto;
  align-items: flex-start;
}

.column {
  flex: 0 0 240px;
  background: #232833;
  border: 1px solid #363c4a;
  border-radius: 8px;
  padding: 10px;
}

.column h2 {
  font-size: 0.95rem;
  margin: 0 0 10px;
  color: #b8bdca;
}

.text-input {
  width: 100%;
  background: #1b1f27;
  color: #e8e8ee;
  border: 1px solid #3a4152;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.95rem;
  margin: 10px 0;
}

.search-input {
  width: 100%;
  background: #1b1f27;
  color: #e8e8ee;
  border: 1px solid #3a4152;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

.sort-select {
  width: 100%;
  background: #1b1f27;
  color: #9aa1b3;
  border: 1px solid #3a4152;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

/* One global sort control in the header (not per-column) -- override the
   block-level width/margin from .sort-select to sit inline with the
   header's other buttons instead. */
.header-sort-select {
  width: auto;
  margin-bottom: 0;
  padding: 7px 8px;
}

/* Gold star on a default (shipped, non-custom) verse's reference --
   matches the RPG build's ★ convention for named Store items. */
.card-ref.default-verse { color: #e0c050; }

.card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card {
  background: #2b3140;
  border: 1px solid #3a4152;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-ref {
  font-weight: 600;
  font-size: 0.9rem;
}

.card-text {
  font-size: 0.8rem;
  color: #c7ccd6;
  line-height: 1.4;
}

.board.blurred {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.card-meta {
  font-size: 0.78rem;
  color: #9aa1b3;
}

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-bronze { background: #7a4a2b; color: #ffd9b3; }
.badge-silver { background: #6b7280; color: #f1f2f4; }
.badge-gold { background: #8a6d1a; color: #ffe9a8; }

.btn {
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
}

.btn-block { width: 100%; margin-bottom: 10px; }

.card-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.card-buttons .btn { flex: 1 1 auto; }
.btn-primary { background: #4c6ef5; color: white; }
.btn-secondary { background: #3a4152; color: #e8e8ee; }
.btn-danger { background: #7a3030; color: #ffd9d9; }

.quiz-picker-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.quiz-picker-btn { flex: 1 1 160px; padding: 16px; font-size: 1rem; }

.form-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #9aa1b3;
  letter-spacing: 0.04em;
  margin: 14px 0 4px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #e8e8ee;
  margin: 14px 0 4px;
  cursor: pointer;
}

.hidden { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.overlay-box {
  background: #262b36;
  border: 1px solid #3a4152;
  border-radius: 10px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.hint-text {
  color: #9aa1b3;
  font-size: 0.85rem;
}

.typing-input {
  width: 100%;
  min-height: 140px;
  background: #1b1f27;
  color: #e8e8ee;
  border: 1px solid #3a4152;
  border-radius: 6px;
  padding: 10px;
  font-size: 1rem;
  resize: vertical;
}

.typing-buttons {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.result-pass { color: #6fe07a; }
.result-fail { color: #f08a6c; }

.result-label {
  margin: 14px 0 6px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa1b3;
}

.word-diff {
  line-height: 1.8;
  background: #1b1f27;
  border-radius: 6px;
  padding: 10px;
  max-height: 28vh;
  overflow-y: auto;
}

.typed-text {
  color: #c7ccd6;
  white-space: pre-wrap;
}

.word-ok { color: #6fe07a; }
.word-bad { color: #f08a6c; text-decoration: underline; }

/* ---- Achievements ---- */

.header-brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

/* Selected achievement title, shown next to the app name in the header. */
.header-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffe9a8;
  background: #8a6d1a;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}

.rarity-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.rarity-common { background: #4a515f; color: #d6dae2; }
.rarity-uncommon { background: #2f6b3f; color: #c8f0d2; }
.rarity-rare { background: #2f4f8f; color: #cfe0ff; }
.rarity-epic { background: #6b3f9f; color: #ecd9ff; }
.rarity-legendary { background: #8a6d1a; color: #ffe9a8; }

.title-select-row { margin: 4px 0 10px; }
.title-select-row .text-input { max-width: 320px; }

.achievement-card .gear-card-top {
  align-items: center;
  gap: 8px;
}

.achievement-locked {
  opacity: 0.62;
}

.achievement-unlocked {
  border-color: #5a6b3a;
  background: #2c3327;
}

.achievement-box {
  text-align: center;
  max-width: 420px;
}

.achievement-kicker {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa1b3;
  margin: 0 0 10px;
}

.achievement-box h2 {
  margin: 10px 0 6px;
}

.achievement-box .rarity-badge {
  font-size: 0.72rem;
}

.achievement-box .btn {
  margin-top: 16px;
}