/* ============================================================
   RuniK — Feuille de style partagée (thème grimoire/parchemin)
   Utilisée par toutes les pages : connexion, grimoire, historique,
   et l'espace admin. grimoire.css complète celle-ci pour la page
   principale du talisman.
   ============================================================ */

:root {
  --parchment: #efe3c8;
  --parchment-dark: #ddc9a3;
  --parchment-shadow: #c9b28c;
  --ink: #2e1f14;
  --ink-soft: #4a3220;
  --wood: #6b4a30;
  --wood-dark: #4a3220;
  --gold: #b8860b;
  --gold-bright: #d4a017;
  --success: #4a6741;
  --fail: #7a2e2e;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --font-display: "Cinzel", serif;
  --font-body: "EB Garamond", serif;
}

* { box-sizing: border-box; }

/* Barre de scroll personnalisée */
* {
  scrollbar-width: thin;
  scrollbar-color: #8b6914 transparent;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c8960c, #8b6914);
  border-radius: 3px;
}

/* CRITIQUE — sans ça toutes les vues/pop-ups s'affichent en même temps */
.hidden { display: none !important; }

.msg { padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.88rem; }
.msg.error   { background: rgba(178,52,52,0.12); color: #8a2323; border: 1px solid rgba(178,52,52,0.3); }
.msg.success { background: rgba(60,120,60,0.12); color: #2c5c2c; border: 1px solid rgba(60,120,60,0.3); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%, #f3e8ce 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, #e6d5ab 0%, transparent 55%),
    var(--parchment-dark);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(74,50,32,0.03) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(74,50,32,0.02) 0px, transparent 1px, transparent 3px);
  z-index: 0;
}

a { color: var(--wood); }

/* ---------- Top navigation (client + admin) ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 1.5rem;
  background: var(--wood-dark);
  color: var(--parchment);
  flex-wrap: wrap;
  box-shadow: 0 2px 10px rgba(46,31,20,0.3);
}

.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.brand-logo { height: 34px; width: auto; flex-shrink: 0; }

.topbar .brand-mark { color: var(--gold-bright); }

.nav-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}

.topbar nav {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}

.topbar nav a {
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.82;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.topbar nav a:hover { opacity: 1; }
.topbar nav a.active { opacity: 1; border-bottom-color: var(--gold-bright); }

.topbar .spacer { flex: 1; }

.topbar .user-chip {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.9;
}
.user-chip-btn {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.user-chip-btn::after { content: " »"; font-style: normal; opacity: 0.7; }
.user-chip-btn:hover { text-decoration: underline; opacity: 1; }

.auth-form-scroll { max-height: 60vh; overflow-y: auto; padding-right: 0.4rem; }

/* ---------- Layout container ---------- */

.container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3.5rem;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  margin: 0 0 0.3rem;
}

.page-subtitle {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 1.75rem;
}

.talisman-subtitle {
  text-transform: uppercase;
  font-weight: 700;
}
.talisman-subtitle strong { font-weight: 700; }

/* ---------- Cards / panels ---------- */

.panel {
  background: var(--parchment);
  border: 1px solid var(--parchment-shadow);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 2px 0 rgba(74,50,32,0.15);
}

.panel + .panel { margin-top: 1.5rem; }

.btn-shortcut {
  background: var(--wood-dark);
  border-color: #2e2013;
  box-shadow: 0 3px 0 #2e2013;
}

/* ---------- Toggle slide (remplace les checkboxes simples pour les
   réglages "activé/désactivé", ex: rune active pour le bandit) ---------- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #c9bfa8;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--wood); outline-offset: 2px; }

.faq-panel h3 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--wood);
  margin: 1.5rem 0 0.5rem;
}
.faq-panel h3:first-child { margin-top: 0; }
.faq-panel p { margin: 0 0 0.5rem; line-height: 1.5; }
.faq-panel ul { margin: 0 0 0.75rem; padding-left: 1.3rem; }
.faq-panel li { margin-bottom: 0.2rem; line-height: 1.5; }

#privacyBackdrop .modal-content h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--wood);
  margin: 1.25rem 0 0.4rem;
}
#privacyBackdrop .modal-content h4:first-child { margin-top: 0; }
#privacyBackdrop .modal-content p { margin: 0 0 0.5rem; line-height: 1.5; }
#privacyBackdrop .modal-content ul { margin: 0 0 0.75rem; padding-left: 1.3rem; }
#privacyBackdrop .modal-content li { margin-bottom: 0.2rem; line-height: 1.5; }

/* ---------- Runo-Machine ---------- */

.runo-status { font-size: 1.05rem; color: var(--wood); margin: 0 0 1rem; }

/* Dans une grille (cartes côte à côte), cette marge casse l'alignement :
   seuls les panels du 1er élément de chaque ligne n'ont pas de sibling
   précédent, donc les autres se retrouvaient décalés vers le bas —
   ça donnait l'impression que la première carte était "plus grande". */
.grid > .panel + .panel { margin-top: 0; }

.panel h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--wood);
  margin: 0 0 1rem;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--parchment);
  background: var(--wood);
  border: 1px solid var(--wood-dark);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--wood-dark);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease;
}

.btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--wood-dark); }
.btn:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-dark); }

.btn:disabled {
  background: var(--parchment-shadow);
  color: var(--ink-soft);
  border-color: var(--parchment-shadow);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-sm { font-size: 0.72rem; padding: 0.35rem 0.75rem; box-shadow: 0 2px 0 var(--wood-dark); }
.btn-ghost {
  background: transparent;
  color: var(--wood);
  box-shadow: none;
  border-color: var(--wood);
}
.btn-ghost:not(:disabled):hover { background: rgba(107,74,48,0.08); transform: none; box-shadow: none; }

.btn-danger { background: var(--fail); border-color: #5a1f1f; box-shadow: 0 3px 0 #5a1f1f; }
.btn-danger:not(:disabled):hover { box-shadow: 0 4px 0 #5a1f1f; }
.btn-danger:not(:disabled):active { box-shadow: 0 1px 0 #5a1f1f; }

.btn-success { background: var(--success); border-color: #35492f; box-shadow: 0 3px 0 #35492f; }
.btn-success:not(:disabled):hover { box-shadow: 0 4px 0 #35492f; }
.btn-success:not(:disabled):active { box-shadow: 0 1px 0 #35492f; }

/* ---------- Forms ---------- */

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--wood);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}

.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #f8f1e0;
  border: 1px solid var(--parchment-shadow);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}

.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.textarea { resize: vertical; min-height: 70px; }

.form-row { display: flex; gap: 0.9rem; flex-wrap: wrap; }
.form-row > .field { flex: 1; min-width: 160px; }

/* ---------- Tables ---------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.table th, .table td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--parchment-shadow);
}

.table th {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wood);
}

.table tbody tr:hover { background: rgba(107,74,48,0.05); }

/* IMPORTANT : ne jamais mettre display:flex directement sur une cellule de
   tableau (<td>) — ça la sort du calcul normal de hauteur de ligne (les
   autres <td> restent en display:table-cell, celle-ci devient un conteneur
   flex indépendant), ce qui décale sa bordure inférieure et casse l'état de
   survol de la ligne. vertical-align + marge entre boutons donnent le même
   rendu visuel sans ce problème. */
.actions-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.actions-cell > * + * {
  margin-left: 0.4rem;
}

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--wood);
  color: var(--wood);
}

.badge.in_progress { color: var(--wood); border-color: var(--wood); }
.badge.locked { background: var(--wood-dark); color: var(--parchment); border-color: var(--wood-dark); }
.badge.used { background: var(--success); color: var(--parchment); border-color: var(--success); }
.badge.broken { background: var(--fail); color: var(--parchment); border-color: var(--fail); }

/* ---------- Filter bar ---------- */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.filter-bar .checks { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }
.filter-bar .checks label { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; }

/* ---------- Toast / feedback ---------- */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  visibility: hidden;
  z-index: 50;
  background: var(--wood-dark);
  color: var(--parchment);
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(46,31,20,0.35);
  font-size: 0.92rem;
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
.toast.error { background: var(--fail); }
.toast.success { background: var(--success); }

/* ---------- Grid ---------- */

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

.combos-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .combos-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .combos-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .combos-grid-4 { grid-template-columns: 1fr; } }

.rune-admin-card {
  background: #f8f1e0;
  border: 1px solid var(--parchment-shadow);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.rune-admin-card img { width: 72px; height: 72px; object-fit: contain; }
.rune-admin-card .name { font-family: var(--font-display); font-size: 0.95rem; }
.rune-admin-card .desc { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; }
.rune-admin-card.rune-inactive { opacity: 0.45; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.rune-pick-card {
  background: var(--parchment);
  border: 1px solid var(--parchment-shadow);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.5rem;
  text-align: center;
  width: 100%;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.rune-pick-card img { width: 40px; height: 40px; object-fit: contain; }
.rune-pick-card.is-zero { opacity: 0.45; }
.rune-pick-card .rune-pick-name {
  font-size: 0.8rem;
  margin: 0.3rem 0;
  height: 2.2em;
  line-height: 1.1em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(46,31,20,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background: var(--parchment);
  border: 1px solid var(--wood);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: min(100%, 480px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(46,31,20,0.4);
}

.modal h3 {
  font-family: var(--font-display);
  margin: 0 0 1rem;
  color: var(--wood);
}

.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem; }

.modal.modal-lg { width: min(100%, 780px); }

.empty-state {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  padding: 2rem 1rem;
}

.muted { color: var(--ink-soft); font-size: 0.88rem; }

/* ---------- Admin layout (sidebar gauche) ---------- */

.admin-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }

.sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  width: 220px;
  flex-shrink: 0;
  background: var(--wood-dark);
  color: var(--parchment);
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); letter-spacing: 0.1em;
  font-size: 1rem; text-transform: uppercase;
  padding: 0 1.25rem 1rem;
}
.sidebar .brand-mark { color: var(--gold-bright); }
.sidebar a {
  color: var(--parchment);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.25rem;
  border-left: 3px solid transparent;
  opacity: 0.82;
  cursor: pointer;
}
.sidebar a:hover { opacity: 1; background: rgba(255,255,255,0.05); }
.sidebar a.active { opacity: 1; border-left-color: var(--gold-bright); background: rgba(255,255,255,0.08); }
.sidebar .sidebar-foot { margin-top: auto; padding: 1rem 1.25rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sidebar .sidebar-foot a { padding: 0; border: none; font-size: 0.78rem; font-style: italic; }
.sidebar .sidebar-sep { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0.6rem 1.25rem; }

.admin-main { flex: 1; min-width: 0; }

/* ─── Menu burger (mobile) — grimoire + admin ────────────────────────────── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--parchment); }
.admin-burger { display: none; margin: 0.8rem 0 0.4rem 1rem; }
.admin-burger span { background: var(--wood); }

.sidebar-backdrop { display: none; }

@media (max-width: 720px) {
  .nav-burger { display: flex; }
  .nav-group {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--wood-dark);
    flex-direction: column;
    align-items: stretch;
    padding: 0.4rem 1.25rem 1rem;
    gap: 0;
  }
  .nav-group.open { display: flex; }
  .nav-group .spacer { display: none; }
  .topbar nav { flex-direction: column; gap: 0; }
  .topbar nav a { padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .nav-group .user-chip-btn,
  .nav-group #logoutBtn,
  .nav-group #adminLink {
    width: 100%;
    text-align: left;
    padding: 0.7rem 0;
    margin: 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    border-radius: 0;
    box-shadow: none;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    opacity: 0.85;
  }
  .nav-group .user-chip-btn:hover,
  .nav-group #logoutBtn:hover,
  .nav-group #adminLink:hover {
    opacity: 1;
    transform: none;
    box-shadow: none;
  }
  .nav-group .user-chip-btn::after,
  .nav-group #logoutBtn::after,
  .nav-group #adminLink::after { content: "›"; float: right; opacity: 0.7; font-style: normal; }

  .admin-shell { flex-direction: column; position: relative; }
  .admin-burger { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 250px;
    flex-direction: column; flex-wrap: nowrap; overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 35;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar .brand { width: auto; padding: 0.9rem 1.25rem; }
  .sidebar a { border-left: 3px solid transparent; border-bottom: none; white-space: normal; }
  .sidebar a.active { border-left-color: var(--gold-bright); border-bottom: none; }
  .sidebar .sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; }
  .sidebar-backdrop.open {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 30;
  }

  /* Tableaux : plutôt que d'écraser les colonnes illisiblement, on laisse le
     panneau parent scroller horizontalement UNIQUEMENT si le contenu réel du
     tableau l'exige (pas de largeur minimale arbitraire, qui forcerait un
     scroll même sur des tableaux à 3 colonnes qui tiendraient très bien). */
  .panel { overflow-x: auto; }
  .table { width: auto; min-width: 100%; }

  /* Formulaires en 2 colonnes : on force l'empilement complet en dessous de
     720px plutôt que de laisser flex-wrap gérer ça au cas par cas. */
  .form-row { flex-direction: column; }
  .form-row > .field { min-width: 0; }
}

/* Stock de runes d'un joueur : plusieurs sur une ligne, compact */
.stock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.6rem;
}
.stock-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #f8f1e0;
  border: 1px solid var(--parchment-shadow);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.6rem;
}
.stock-chip img { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.stock-chip .info { flex: 1; min-width: 0; }
.stock-chip .info .n { font-size: 0.85rem; font-weight: 600; }
.stock-chip .info .q { font-size: 0.72rem; color: var(--ink-soft); }
.stock-chip .minus {
  border: none; background: var(--fail); color: #fff;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: 1rem; line-height: 1; flex-shrink: 0;
}
.stock-chip .minus:hover { filter: brightness(1.1); }

/* Runes admin : 5 par ligne */
.grid-runes-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8rem; }
@media (max-width: 900px) { .grid-runes-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .grid-runes-5 { grid-template-columns: repeat(2, 1fr); } }

/* Combo rune picker avec quantité — 5 par ligne, façon cartes du bandit */
.rune-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
@media (max-width: 640px) { .rune-picker { grid-template-columns: repeat(3, 1fr); } }
.rune-pick {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 0.6rem 0.4rem; border: 1px solid var(--parchment-shadow);
  border-radius: var(--radius-md); background: #f8f1e0; font-size: 0.78rem;
  text-align: center;
}
.rune-pick.checked { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.rune-pick img { width: 44px; height: 44px; object-fit: contain; }
.rune-pick .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.rune-pick input[type=checkbox] { margin: 0; }
.rune-pick input[type=number] { width: 48px; padding: 0.15rem 0.2rem; font-size: 0.8rem; border: 1px solid var(--parchment-shadow); border-radius: 4px; text-align: center; }
.rune-pick input[type=number]:disabled { opacity: 0.4; }
.required-runes { display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.required-runes .rr { display: inline-flex; align-items: center; gap: 2px; }
.required-runes img { width: 24px; height: 24px; object-fit: contain; }
.required-runes .x { font-size: 0.7rem; color: var(--wood); font-family: var(--font-display); }

/* ---------- Auth (login/register) ---------- */

.auth-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.auth-card { width: min(100%, 420px); text-align: center; }
.auth-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.auth-brand .brand-mark { color: var(--gold); }
.auth-tagline { font-style: italic; color: var(--ink-soft); margin-bottom: 1.75rem; }
.tabs { display: flex; margin-bottom: 1.25rem; border-bottom: 1px solid var(--parchment-shadow); }
.tab {
  flex: 1;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 0.6rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.tab.active { color: var(--wood); border-bottom-color: var(--gold); }
.auth-form { text-align: left; }
.auth-form .btn { width: 100%; margin-top: 0.5rem; }

.password-field { position: relative; }
.password-field .input { padding-right: 4.5rem; }
.password-toggle {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--wood-dark);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}