/* =====================================================================================================
   DA « Obsidienne » : direction artistique tirée du logo R à l'œil rouge.
   Fond presque noir, ivoire pour le texte et les traits, rouge sang pour l'action, or éteint pour les ressources.
   Typo : celle du jeu (Lilita One, Nunito).
   Coins vifs (2 à 6 px) et biseaux à la place des formes arrondies « cartoon ».
   Ce fichier est chargé après style.css et ne fait que surcharger ; le monde du jeu (carte, mobs) ne change pas.
   ===================================================================================================== */
:root {
  --ink: #0a080c;
  --night: #110e16;
  --panel: #1a1620;
  --panel2: #241e29;
  --line: rgba(235, 227, 213, .13);
  --line2: rgba(235, 227, 213, .28);
  --ivory: #ebe3d5;
  --ivory2: #a39b8f;
  --blood: #a61f2b;
  --blood-hi: #c9303d;
  --blood-lo: #6e111a;
  --gold: #d6aa5c;
  --accent: #a61f2b;
  --text: #ebe3d5;
  --bevel: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --bevel-s: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
html, body { background: #0a080c; }
body { background: radial-gradient(circle at 50% 30%, #1d1018, #0a080c 70%); }
#app { background: var(--night); }

/* ---------- Fonds d'écran : noir chaud, lueur rouge venue du haut, grain léger ---------- */
.screen, #pagePlay, #pageDeck, #pageShop {
  background:
    radial-gradient(120% 50% at 50% -8%, rgba(166, 31, 43, .28), transparent 70%),
    radial-gradient(90% 40% at 50% 108%, rgba(214, 170, 92, .07), transparent 70%),
    linear-gradient(#141018, #0d0b10);
}
#pageShop { background: radial-gradient(120% 50% at 50% -8%, rgba(214, 170, 92, .16), transparent 70%), linear-gradient(#15110f, #0d0b10); }
#end { background: rgba(8, 6, 10, .86); }

/* ---------- Titres ---------- */
.ptitle {
  font-family: var(--font); font-weight: 400; font-size: 28px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ivory); position: relative; padding-bottom: 6px;
}
.ptitle::after { content: ''; position: absolute; left: 4px; bottom: 0; width: 36px; height: 2px; background: var(--blood); }
.mtitle, .mm-title, .end h2 {
  font-family: var(--font); font-weight: 400; color: var(--ivory); letter-spacing: .05em; text-transform: uppercase;
  text-shadow: none; -webkit-text-stroke: 0;
}
.end h2 { font-size: 40px; }
label { font-family: var(--font); color: var(--ivory2); letter-spacing: .04em; font-weight: 400; }
.hint { color: var(--ivory2); opacity: 1; }

/* ---------- Emblème (pas de titre texte : le R seul) ---------- */
.logo { display: flex; justify-content: center; margin: 12px 0 12px; font-size: 0; line-height: 0; }
.logo img { height: 64px; width: auto; filter: drop-shadow(0 0 14px rgba(166, 31, 43, .6)); }

/* ---------- Panneaux ---------- */
.panel {
  background: linear-gradient(#1c1822, #15121a); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(235, 227, 213, .06), 0 10px 26px rgba(0, 0, 0, .5);
}
.arena {
  background: linear-gradient(#1c1822, #15121a); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}
.troph { color: var(--gold); text-shadow: 0 2px 0 #000; }
.mtroph, .deckpts, .preview { color: var(--gold); }
.modal { background: rgba(6, 5, 8, .8); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.cardinfo { background: #17131c; border-color: var(--line2); border-radius: 4px; }

/* ---------- Boutons : biseautés, sobres ; l'action principale en rouge sang ---------- */
.btn {
  font-family: var(--font); font-weight: 400; letter-spacing: .05em; color: var(--ivory);
  border: 1px solid var(--line2); border-radius: 3px; text-shadow: 0 1px 0 #000;
  background: linear-gradient(#2c2631, #1d1922);
  box-shadow: inset 0 1px 0 rgba(235, 227, 213, .12), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 3px 0 #000;
}
.btn:active { box-shadow: inset 0 1px 0 rgba(235, 227, 213, .1), 0 0 0 #000; }
.btn.big {
  position: relative; font-size: 28px; letter-spacing: .16em; text-transform: uppercase; color: var(--ivory);
  border: 0; border-radius: 0; clip-path: var(--bevel); padding: 14px 12px;
  background: linear-gradient(var(--blood-hi), var(--blood) 55%, var(--blood-lo));
  box-shadow: inset 0 1px 0 rgba(255, 220, 210, .35), inset 0 -4px 0 rgba(0, 0, 0, .3);
  text-shadow: 0 2px 0 rgba(40, 0, 6, .6);
}
.btn.big::after {   /* liseré ivoire intérieur, comme la bordure du R */
  content: ''; position: absolute; inset: 4px; clip-path: var(--bevel-s); pointer-events: none;
  background: linear-gradient(var(--line2), var(--line2)) top / 100% 1px no-repeat, linear-gradient(var(--line2), var(--line2)) bottom / 100% 1px no-repeat;
}
.btn.big:active { transform: translateY(2px); filter: brightness(.92); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ivory2); }
.btn.red { background: linear-gradient(var(--blood-hi), var(--blood-lo)); border-color: rgba(255, 180, 180, .25); }
.btn.green { background: linear-gradient(#4d7a4a, #2c4a2b); border-color: rgba(200, 240, 190, .22); }
.btn.gold { background: linear-gradient(#e2bb72, #a77a32); color: #1a1208; text-shadow: none; border-color: rgba(255, 240, 200, .4); }
.linkbtn { color: var(--gold); font-family: var(--font); font-weight: 400; letter-spacing: .03em; }
.linkbtn.danger { color: #e0626b; }
select, input[type=text], #realmName {
  font-family: var(--body); font-weight: 800; color: var(--ivory); background: #0f0c13; border: 1px solid var(--line2);
  border-radius: 3px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
select option { background: #15121a; color: var(--ivory); }
.colors button { border: 2px solid #000; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); }
.colors button.on { outline: 2px solid var(--ivory); outline-offset: 2px; }
.soundbtn { background: rgba(235, 227, 213, .05); }

/* ---------- Barre du haut du menu ---------- */
.mtop { background: linear-gradient(rgba(10, 8, 12, .92), rgba(10, 8, 12, 0)); }
.mprofile { font-family: var(--font); font-weight: 400; text-shadow: 0 1px 0 #000; }
.mprofile .lvl {
  border: 1px solid rgba(255, 200, 200, .3); border-radius: 0; clip-path: var(--bevel-s);
  background: linear-gradient(var(--blood-hi), var(--blood-lo)); color: var(--ivory);
}
.mres .pill, .pill { background: rgba(8, 6, 10, .78); border: 1px solid var(--line); font-family: var(--font); font-weight: 400; }
.pill .plus { background: var(--blood); border: 1px solid rgba(255, 200, 200, .3); color: var(--ivory); border-radius: 2px; }
.gear { background: linear-gradient(#2c2631, #1d1922); border: 1px solid var(--line2); border-radius: 3px; box-shadow: none; filter: grayscale(1) brightness(1.3); }

/* ---------- Barre d'onglets ---------- */
.tabbar { background: linear-gradient(#141018, #0a080c); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px rgba(0, 0, 0, .5); }
.tabbar button { color: #7d756c; font-family: var(--font); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; border: 0; border-radius: 0; }
.tabbar .ti { filter: grayscale(1) brightness(.75); }
.tabbar button.on {
  color: var(--ivory); transform: none; border: 0; text-shadow: none;
  background: radial-gradient(80% 90% at 50% 0%, rgba(166, 31, 43, .35), transparent 70%);
  box-shadow: inset 0 2px 0 var(--blood);
}
.tabbar button.on .ti { filter: grayscale(1) brightness(1.6); transform: scale(1.1); }
.menutoast { background: #17131c; border: 1px solid var(--line2); border-radius: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, .6); font-family: var(--font); }

/* ---------- Scène de ligue (accueil) ---------- */
#pagePlay #hero.hero { border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.league-hero .h-sky { background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--lgc) 30%, #2a1016), #170f14 60%, #0b090e); }
.league-hero .h-rays { opacity: .35; }
.h-vignette { box-shadow: inset 0 0 60px rgba(0, 0, 0, .75); }
.h-sparks i { background: #ffb59a; box-shadow: 0 0 8px 2px rgba(201, 48, 61, .7); }
.lg-ribbon { border: 1px solid rgba(0, 0, 0, .6); border-radius: 0; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); box-shadow: none; }
.lg-ribbon b { font-family: var(--font); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Jauges (ligue, deck, territoire, chargement) ---------- */
.lg-prog, .dbar, .bar, .boot-bar { border: 1px solid var(--line); border-radius: 0; background: rgba(0, 0, 0, .55); box-shadow: none; }
.lg-prog i, .dbar i, #landBar, .boot-bar i { background: linear-gradient(var(--blood-hi), var(--blood-lo)); box-shadow: 0 0 10px rgba(201, 48, 61, .5); }

/* ---------- Cartes (deck, main, boutique) ---------- */
.dcard, .card, .offer, .deckmini .mc {
  border: 2px solid #000; border-radius: 4px;
  background: linear-gradient(#3a3240, #1d1822);
  box-shadow: inset 0 0 0 1px rgba(235, 227, 213, .12), 0 3px 0 #000;
}
.card.legend, .dcard.legend { background: linear-gradient(#c98a3c, #6a3410); }
.card.epic, .dcard.epic { background: linear-gradient(#7a3a98, #351746); }
.card.build { background: linear-gradient(#3f6a4a, #1d3324); }
.dcard.on { outline: 2px solid var(--ivory); }
.dcard .nm, .card .cost { font-family: var(--font); font-weight: 400; letter-spacing: .02em; }
.card.sel { outline: 2px solid var(--ivory); box-shadow: 0 0 0 2px #000, 0 0 22px rgba(201, 48, 61, .7); }
.deckmini .mc.empty { background: rgba(0, 0, 0, .35); border: 1px dashed var(--line2); }
.dtab { border-radius: 3px; }

/* ---------- Boutique ---------- */
.pack { border: 1px solid rgba(0, 0, 0, .7); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(235, 227, 213, .14), 0 8px 18px rgba(0, 0, 0, .5); font-family: var(--font); font-weight: 400; }
.pack .price { background: rgba(0, 0, 0, .55); border-radius: 2px; }
.offer .tag { background: var(--blood); border: 1px solid #000; border-radius: 2px; }
.freechest { border-radius: 4px; border: 1px solid var(--line2); }
.freechest b { font-family: var(--font); font-weight: 400; letter-spacing: .03em; }
.freechest .fcbadge { background: var(--blood); color: var(--ivory); border: 1px solid #000; border-radius: 2px; }

/* ---------- Recherche de joueurs ---------- */
.matchmaking { background: radial-gradient(circle at 50% 38%, #2a1016, #0a080c 72%); }
.mm-ring { background: url(../assets/brand/logo-r.png) center / 46% auto no-repeat, radial-gradient(circle, #17131c 56%, transparent 57%); }
.mm-ring span { visibility: hidden; }
.mm-ring::before { border-width: 3px; border-top-color: var(--blood-hi); border-right-color: rgba(201, 48, 61, .35); }
.mm-count { font-family: var(--font); font-weight: 400; color: var(--ivory2); }
.mm-count b { color: var(--ivory); }
.mm-row { border-radius: 2px; }
.mm-row b { color: var(--gold); }
.mm-row.me { background: rgba(166, 31, 43, .18); border: 1px solid var(--blood); }

/* ---------- Interface en partie ---------- */
#topbar { background: linear-gradient(rgba(10, 8, 12, .88), rgba(10, 8, 12, 0)); }
#hudName { font-family: var(--font); font-weight: 400; letter-spacing: .03em; }
#bottom { background: linear-gradient(rgba(10, 8, 12, 0), rgba(12, 10, 15, .94) 25%); }
.ratio b { color: var(--ivory); }
.mtrack { border: 1px solid var(--line); border-radius: 0; }
.mtrack::after { background: repeating-linear-gradient(90deg, transparent 0 calc(var(--mseg, 10%) - 2px), rgba(8, 6, 10, .85) calc(var(--mseg, 10%) - 2px) var(--mseg, 10%)); }
.lbtoggle { background: rgba(10, 8, 12, .8); border: 1px solid var(--line2); border-radius: 3px; box-shadow: none; }
#leaderboard { background: rgba(10, 8, 12, .86); border: 1px solid var(--line); border-radius: 3px; }
#leaderboard li.me { color: var(--ivory); }
.popup, #banner { border-radius: 4px; }

/* ---------- Écran de chargement : le R à l'œil rouge ---------- */
.boot { background: radial-gradient(circle at 50% 40%, #2a1016, #120d14 50%, #0a080c); }
.boot-rays { opacity: .25; }
.boot-crest { width: min(30%, 110px); margin-bottom: 18px; aspect-ratio: 532 / 548; filter: drop-shadow(0 0 28px rgba(166, 31, 43, .55)); animation: bootbreath 3s ease-in-out infinite; }
.boot-crest svg, .boot-icon { display: none; }
.boot-crest img { width: 100%; height: 100%; display: block; }
@keyframes bootbreath { 50% { filter: drop-shadow(0 0 42px rgba(201, 48, 61, .8)); transform: scale(1.02); } }
.boot-pct { font-family: var(--font); font-weight: 400; color: var(--ivory2); text-shadow: none; }
.boot-tip { color: var(--ivory2); }

/* Coffres : couleurs de rareté gardées mais assombries, pour rester dans la nuit du logo */
.pack { background: linear-gradient(color-mix(in srgb, var(--c1) 55%, #17131c), color-mix(in srgb, var(--c2) 40%, #0c0a0f)); }
.freechest, .freechest.ready { background: linear-gradient(#2a1f22, #151116); border-color: var(--line2); }
.freechest.ready { border-color: rgba(201, 48, 61, .7); box-shadow: 0 0 22px rgba(166, 31, 43, .35); }
.offer.mystery { background: linear-gradient(#8a6a34, #3d2a12); }