/* ═══════════════════════════════════════════════════════════════
   MTG-Assistant — GRIMOIRE.CSS — Phase 6
   Modern grimoire + neon MTG Arena design system
   Loaded AFTER gamified.css to override key tokens & components.
   Gamification UI removed in this phase.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Raleway:wght@300;400;500;600&family=Uncial+Antiqua&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Base sombre */
  --bg-deep: #0a0610;
  --bg-parchment: #1a1410;
  --bg-arcane: #14101a;
  --bg-glass: rgba(20, 16, 26, 0.65);
  --bg-glass-light: rgba(35, 28, 50, 0.55);

  /* Or ouvragé */
  --gold-ornate: #c9a84c;
  --gold-glow: #e8c97a;
  --gold-faded: #8a7530;
  --gold-ink: #5a4520;

  /* Encre */
  --ink-deep: #1a1410;
  --ink-line: #3a2a1a;

  /* Néon WUBRG */
  --neon-w: #f5e6c8;
  --neon-u: #4ec1ff;
  --neon-b: #b366ff;
  --neon-r: #ff5547;
  --neon-g: #4adb7a;
  --neon-c: #a8a8b8;

  /* Texte */
  --text-primary: #ede4d0;
  --text-secondary: #b0a890;
  --text-muted: #6b6450;

  /* Borders ornés */
  --border-ornate: 1px solid var(--gold-faded);
  --border-glow:   1px solid var(--gold-glow);

  /* Compat avec ancien gamified.css */
  --color-gold: var(--gold-ornate);
  --color-text-muted: var(--text-muted);
  --bg-card: var(--bg-glass);
  --border-gold: var(--gold-faded);
}

/* Theme Ethereal override */
html[data-theme='ethereal'] {
  --bg-deep: #f3f0e8;
  --bg-parchment: #faf6ec;
  --bg-arcane: #ebe5d6;
  --bg-glass: rgba(250, 246, 236, 0.85);
  --bg-glass-light: rgba(255, 252, 240, 0.7);
  --gold-ornate: #8a6b1f;
  --gold-glow: #c9a84c;
  --gold-faded: #6e5418;
  --gold-ink: #4a3810;
  --ink-deep: #2a1f10;
  --ink-line: #5a4520;
  --text-primary: #2a1f10;
  --text-secondary: #5a4d30;
  --text-muted: #8a7c5c;
}

/* ── Reset/global tweaks ────────────────────────────────────── */
html, body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: 'Raleway', 'Inter', sans-serif;
  font-weight: 400;
}

/* Vignette globale */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at center,
    transparent 35%,
    rgba(0,0,0,0.4) 85%,
    rgba(0,0,0,0.7) 100%);
}
html[data-theme='ethereal'] body::before {
  background: radial-gradient(ellipse at center,
    transparent 50%,
    rgba(60,40,10,0.08) 90%,
    rgba(60,40,10,0.18) 100%);
}

/* Parchment SVG noise filter */
.parchment-bg {
  position: relative;
}
.parchment-bg::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.55 0 0 0 0 0.2 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  border-radius: inherit;
}

/* ── Typography ─────────────────────────────────────────────── */
h1, .h-arcane {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-glow);
  text-shadow: 0 0 24px rgba(232, 201, 122, 0.18);
}
h2, h3, .h-cormorant {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-weight: 500;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.runic, .h-runic {
  font-family: 'Uncial Antiqua', 'Cinzel', serif;
  letter-spacing: 0.08em;
}
.ink-write {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, var(--gold-glow) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: inkWrite 1.5s ease-out forwards;
}
@keyframes inkWrite {
  0%   { background-position: 100% 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: 0% 0; }
}

/* ── Ornate frame (4 corners SVG) ───────────────────────────── */
.ornate-frame {
  position: relative;
}
.ornate-frame::before, .ornate-frame::after,
.ornate-frame > .of-tl, .ornate-frame > .of-tr,
.ornate-frame > .of-bl, .ornate-frame > .of-br {
  content: '';
  position: absolute;
  width: 32px; height: 32px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}
.ornate-frame::before {
  top: -2px; left: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='%23c9a84c' stroke-width='1.5'><path d='M2 2 L18 2 M2 2 L2 18 M2 2 Q12 4 16 12 M2 2 Q4 12 12 16'/><circle cx='2' cy='2' r='1.5' fill='%23e8c97a'/></g></svg>");
}
.ornate-frame::after {
  top: -2px; right: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='%23c9a84c' stroke-width='1.5'><path d='M30 2 L14 2 M30 2 L30 18 M30 2 Q20 4 16 12 M30 2 Q28 12 20 16'/><circle cx='30' cy='2' r='1.5' fill='%23e8c97a'/></g></svg>");
}
.ornate-frame > .of-bl {
  bottom: -2px; left: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='%23c9a84c' stroke-width='1.5'><path d='M2 30 L18 30 M2 30 L2 14 M2 30 Q12 28 16 20 M2 30 Q4 20 12 16'/><circle cx='2' cy='30' r='1.5' fill='%23e8c97a'/></g></svg>");
}
.ornate-frame > .of-br {
  bottom: -2px; right: -2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g fill='none' stroke='%23c9a84c' stroke-width='1.5'><path d='M30 30 L14 30 M30 30 L30 14 M30 30 Q20 28 16 20 M30 30 Q28 20 20 16'/><circle cx='30' cy='30' r='1.5' fill='%23e8c97a'/></g></svg>");
}

/* ── Card / glass panel ─────────────────────────────────────── */
.grim-card, .gam-card, .sim-card {
  position: relative;
  background: var(--bg-glass) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(201, 168, 76, 0.25) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 220, 150, 0.08);
  padding: 1.5rem;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.grim-card:hover {
  border-color: rgba(232, 201, 122, 0.55) !important;
  box-shadow:
    0 0 42px rgba(201, 168, 76, 0.2),
    0 0 80px rgba(179, 102, 255, 0.06),
    inset 0 1px 0 rgba(255, 220, 150, 0.12);
}

/* WUBRG glow per color identity */
.glow-W:hover { box-shadow: 0 0 38px rgba(245, 230, 200, 0.35), 0 0 80px rgba(245, 230, 200, 0.12); }
.glow-U:hover { box-shadow: 0 0 38px rgba(78, 193, 255, 0.35), 0 0 80px rgba(78, 193, 255, 0.12); }
.glow-B:hover { box-shadow: 0 0 38px rgba(179, 102, 255, 0.35), 0 0 80px rgba(179, 102, 255, 0.12); }
.glow-R:hover { box-shadow: 0 0 38px rgba(255, 85, 71, 0.35),  0 0 80px rgba(255, 85, 71, 0.12); }
.glow-G:hover { box-shadow: 0 0 38px rgba(74, 219, 122, 0.35), 0 0 80px rgba(74, 219, 122, 0.12); }
.glow-C:hover { box-shadow: 0 0 38px rgba(168, 168, 184, 0.35), 0 0 80px rgba(168, 168, 184, 0.12); }
.glow-multi:hover {
  box-shadow:
    0 0 30px rgba(232, 201, 122, 0.35),
    0 0 60px rgba(179, 102, 255, 0.18),
    0 0 90px rgba(78, 193, 255, 0.12);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-grim, .btn-primary, .btn-arcane {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: linear-gradient(135deg, var(--gold-ornate), var(--gold-faded));
  color: #1a1410 !important;
  border: 1px solid var(--gold-glow);
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.4);
  transition: all 0.25s ease;
}
.btn-grim:hover, .btn-primary:hover, .btn-arcane:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(232, 201, 122, 0.45),
    inset 0 1px 0 rgba(255, 240, 200, 0.5);
}
.btn-grim::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position 0.6s;
}
.btn-grim:hover::before { background-position: -100% 0; }

.btn-ghost-grim {
  background: transparent;
  border: 1px solid var(--gold-faded);
  color: var(--gold-glow) !important;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  cursor: pointer; text-decoration: none;
  transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.btn-ghost-grim:hover {
  background: rgba(201, 168, 76, 0.1);
  border-color: var(--gold-glow);
  box-shadow: 0 0 18px rgba(232, 201, 122, 0.3);
}

/* ── Iconography (line SVG) ─────────────────────────────────── */
.grim-icon {
  width: 20px; height: 20px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
  transition: filter 0.25s;
}
a:hover .grim-icon, button:hover .grim-icon {
  filter: drop-shadow(0 0 6px var(--gold-glow));
}

/* ── Navigation ─────────────────────────────────────────────── */
.navbar, nav.main-nav {
  background: linear-gradient(180deg, rgba(20,16,26,0.96), rgba(10,6,16,0.92)) !important;
  border-bottom: 1px solid rgba(201, 168, 76, 0.25) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navbar a, nav.main-nav a {
  color: var(--text-secondary) !important;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition: color 0.25s, text-shadow 0.25s;
}
.navbar a:hover, nav.main-nav a:hover {
  color: var(--gold-glow) !important;
  text-shadow: 0 0 12px rgba(232, 201, 122, 0.35);
}

/* ── Hero ───────────────────────────────────────────────────── */
.grim-hero {
  position: relative;
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.grim-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: brightness(0.45) saturate(1.1);
}
.grim-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(10, 6, 16, 0.85) 100%),
    linear-gradient(180deg, rgba(10,6,16,0.5) 0%, rgba(10,6,16,0.9) 100%);
}
.grim-hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  margin: 0 0 1rem;
  font-family: 'Cinzel', serif;
}
.grim-hero .subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0 auto 2rem;
}

/* ── Stats strip (no gamification) ──────────────────────────── */
.grim-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 720px) { .grim-stats { grid-template-columns: repeat(2, 1fr); } }
.grim-stat {
  text-align: center;
  padding: 1rem 0.5rem;
  background: var(--bg-glass);
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: 10px;
}
.grim-stat .v {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem;
  color: var(--gold-glow);
  font-weight: 700;
  line-height: 1;
}
.grim-stat .l {
  display: block; margin-top: 0.4rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* ── Loader: book opening ───────────────────────────────────── */
.grim-loader {
  width: 80px; height: 80px;
  margin: 2rem auto;
  position: relative;
}
.grim-loader svg { width: 100%; height: 100%; }
.grim-loader .pageL, .grim-loader .pageR {
  transform-origin: 40px 40px;
  animation: bookOpen 2.4s ease-in-out infinite;
}
.grim-loader .pageR { animation-delay: 0.2s; }
@keyframes bookOpen {
  0%, 100% { transform: rotateY(0); opacity: 1; }
  50%      { transform: rotateY(-150deg); opacity: 0.6; }
}

/* ── Sceau d'invocation badge ───────────────────────────────── */
.invocation-seal {
  display: inline-block;
  width: 24px; height: 24px;
  border: 1.5px solid var(--gold-glow);
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle, rgba(232,201,122,0.2) 0%, transparent 70%);
}
.invocation-seal::before {
  content: '✦';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-glow);
  font-size: 0.85rem;
}

/* ── Page transition ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  main, .page-container, .page-wrap {
    animation: pageEnter 0.5s ease-out both;
  }
  @keyframes pageEnter {
    0%   { opacity: 0; filter: blur(6px); transform: translateY(8px); }
    100% { opacity: 1; filter: blur(0);   transform: none; }
  }
}

/* ── Suppression Gamification UI ────────────────────────────── */
/* All elements that injected XP, levels, achievements, onboarding */
.player-card,
.player-chip,
.player-card-mini,
.xp-bar-container,
.xp-bar-mini,
.level-badge,
.user-level-pill,
.onboarding-card,
.achievements-strip,
.achievements-grid-profile,
#mtg-toast-container,
.mtg-toast,
.levelup-overlay,
.btn-xp-test {
  display: none !important;
}

/* ── Misc utils ─────────────────────────────────────────────── */
.divider-rune {
  text-align: center; margin: 2rem 0;
  color: var(--gold-faded);
  font-family: 'Uncial Antiqua', serif;
  letter-spacing: 0.4em;
}
.divider-rune::before, .divider-rune::after {
  content: '✦';
  margin: 0 1rem;
  color: var(--gold-glow);
}

/* Floating controls — keep but restyle */
.mtg-floating-controls {
  background: var(--bg-glass) !important;
  border: 1px solid rgba(201, 168, 76, 0.3) !important;
  backdrop-filter: blur(10px);
}
.mtg-ctrl-btn {
  color: var(--gold-glow) !important;
  border-color: rgba(201, 168, 76, 0.4) !important;
}
.mtg-ctrl-btn:hover, .mtg-ctrl-btn.active {
  background: rgba(232, 201, 122, 0.15) !important;
  box-shadow: 0 0 12px rgba(232, 201, 122, 0.35);
}

/* Quick actions tile (dashboard) */
.qa-tile {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--bg-glass);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
}
.qa-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold-glow);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 32px rgba(232,201,122,0.18);
}
.qa-tile .grim-icon { width: 36px; height: 36px; color: var(--gold-glow); }
.qa-tile .label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-glow);
}
.qa-tile .desc { font-size: 0.74rem; color: var(--text-muted); }

/* ── Phase 6.1: Atmospheric banners ─────────────────────────── */
.grim-banner {
  position: relative;
  min-height: 200px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  display: flex; align-items: center;
  padding: 1.5rem 2rem;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
  border: 1px solid rgba(201, 168, 76, 0.25);
}
.grim-banner::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(10,6,16,0.55) 0%,
    rgba(10,6,16,0.85) 100%);
}
.grim-banner h1, .grim-banner h2 {
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.85), 0 0 24px rgba(232,201,122,0.25);
}
.grim-banner .flavor {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--text-secondary);
  margin: 0.5rem 0 0;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}
@media (max-width: 600px) {
  .grim-banner { min-height: 140px; padding: 1rem 1.25rem; }
}

/* Auth pages full-bleed background */
.grim-auth-bg {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0.18;
  filter: blur(2px);
}
.grim-auth-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,6,16,0.6), rgba(10,6,16,0.9));
}

/* ── Phase 6.1: Book-opening loader, fullscreen overlay ─────── */
.book-loader-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(10, 6, 16, 0.85);
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.book-loader-overlay.show { display: flex; opacity: 1; }
.book-loader {
  width: 96px; height: 96px;
  perspective: 600px;
}
.book-loader svg { width: 100%; height: 100%; overflow: visible; }
.book-loader .spine {
  fill: var(--gold-faded);
  stroke: var(--gold-glow);
  stroke-width: 1;
}
.book-loader .pageL, .book-loader .pageR {
  fill: #f3e8c8;
  stroke: var(--gold-glow);
  stroke-width: 1.2;
  transform-origin: 50px 50px;
  animation: bookFlap 2.4s ease-in-out infinite;
}
.book-loader .pageR { animation-delay: -1.2s; }
@keyframes bookFlap {
  0%, 100% { transform: rotateY(0deg); }
  50%      { transform: rotateY(-160deg); }
}
.book-loader-text {
  margin-top: 1.25rem;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-glow);
  font-size: 0.85rem;
  text-shadow: 0 0 12px rgba(232,201,122,0.4);
}
.book-loader-text::after {
  content: ''; display: inline-block;
  width: 0.3em; animation: dotted 1.2s steps(4) infinite;
}
@keyframes dotted {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* ════════════════════════════════════════════════════════════════════════
   Phase 8 — Lucide icons (.lic) global styling
   These are <i data-lucide="…" class="lic"> tags that get swapped to <svg>.
   ════════════════════════════════════════════════════════════════════════ */
.lic,
[data-lucide].lic {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.18em;
  stroke-width: 1.6;
  color: currentColor;
}
.lic svg,
[data-lucide].lic > svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
button .lic, a .lic { margin-right: 0.4em; vertical-align: -0.16em; }
.btn-grim .lic, .btn-primary .lic, .btn-secondary .lic { margin-right: 0.45em; }
/* Subtle gold tint inside grimoire buttons */
.btn-grim .lic { color: var(--gold-glow, #c9a84c); }