/* Feuille de style d'Itemyze.
   Sortie de index.html pour pouvoir travailler le visuel sans naviguer dans tout le HTML.
   Ordre des blocs conservé : variables, base, navigation, accueil, modes de jeu, encyclopédies, ambiance de fond. */

/* Polices hébergées sur le site (plus d'appel à Google Fonts) */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/cinzel.woff2") format("woff2"); }
/* Anton (licence libre OFL, Google Fonts) : lettres hautes et serrées du titre « Worlds 26 » */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/anton.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter.woff2") format("woff2"); }

:root {
  --bg: #030312;
  --bg2: #090b29;
  --panel: #0e1031;
  --panel2: #12153c;
  --line: #1d2056;
  --gold: #df5779;
  --gold-hi: #f8d3dc;
  --gold-dim: #8c1432;
  --text: #d9d9e3;
  --muted: #898ba9;
  --blue: #ae28e7;
  --ally: #2f7dd1;
  --enemy: #d13b3b;
  --good: #3fbf6e;
  --ok: #e0a83a;
  --bad: #e0514a;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, #0a0d41 0%, var(--bg) 60%) fixed, var(--bg);
  min-height: 100vh;
}
h1, h2, h3, .title-font { font-family: Cinzel, Georgia, serif; color: var(--gold-hi); letter-spacing: .03em; }
button { font: inherit; cursor: pointer; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }
[hidden] { display: none !important; }

/* Boutons */
.btn {
  background: linear-gradient(180deg, #1d1f3e, #0d0f27);
  color: var(--gold-hi);
  border: 1px solid var(--gold-dim);
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { border-color: var(--gold); box-shadow: 0 0 12px rgba(223,87,121,.25); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #d72f5c, #8f1638); border-color: #ff5c86; }
.btn.primary:hover { box-shadow: 0 0 14px rgba(255, 70, 120, .4); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn.small { padding: 6px 12px; font-size: 13px; }

/* Accueil */
.hero { text-align: center; padding: 40px 0 20px; }
.hero h1 { font-size: clamp(34px, 6vw, 56px); margin: 0; }
.hero .tag { color: var(--gold); letter-spacing: .25em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }
.hero p { color: var(--muted); max-width: 620px; margin: 14px auto 0; line-height: 1.6; }
.home-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 28px 0 10px; }
.best { text-align: center; color: var(--muted); font-size: 13px; }
.best b { color: var(--gold); }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 36px; }
.how div { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px; line-height: 1.5; }
.how b { color: var(--gold-hi); display: block; margin-bottom: 4px; }
.filters { margin-top: 30px; text-align: center; }
.filters h3 { font-size: 14px; margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 6px 12px; border-radius: 20px; font-size: 13px; }
.chip.on { border-color: var(--gold); color: var(--gold-hi); background: #1a1c34; }

/* Barre de jeu */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.progress { flex: 1; min-width: 160px; }
.progress .lbl { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.bar { height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .3s; }
.stat-pill { background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; border-radius: 4px; font-weight: 600; }
.stat-pill b { color: var(--gold); }

/* En-tête de partie */
.match-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px 6px 0 0; padding: 10px 16px; }
.match-head .k { font-family: Cinzel, serif; font-size: 26px; font-weight: 700; }
.match-head .k.ally { color: var(--ally); }
.match-head .k.enemy { color: var(--enemy); text-align: right; }
.match-head .mid { text-align: center; }
.match-head .time { font-size: 20px; font-weight: 700; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.match-head .sub { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.context { background: var(--panel); border: 1px solid var(--line); border-top: none; padding: 12px 16px; line-height: 1.55; display: flex; gap: 12px; align-items: flex-start; }
.context .gold { white-space: nowrap; background: #210c11; border: 1px solid var(--gold-dim); color: var(--gold); padding: 4px 10px; border-radius: 4px; font-weight: 700; }
.context .concept { font-size: 11px; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 2px; }

/* Tableau des scores */
.board { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-top: none; border-radius: 0 0 6px 6px; overflow: hidden; }
.team-lbl { padding: 6px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; display: flex; justify-content: space-between; }
.team-lbl.ally { background: linear-gradient(90deg, rgba(47,125,209,.25), transparent); color: #7fb4ee; }
.team-lbl.enemy { background: linear-gradient(90deg, rgba(209,59,59,.25), transparent); color: #ee8b8b; border-top: 1px solid var(--line); }
.team-lbl span { color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none; }
.scroll-x { overflow-x: auto; scrollbar-color: var(--line) transparent; scrollbar-width: thin; }
table.sb { width: 100%; border-collapse: collapse; min-width: 620px; }
table.sb td { padding: 6px 8px; border-top: 1px solid rgba(29,32,86,.5); vertical-align: middle; }
table.sb tr.you { background: linear-gradient(90deg, rgba(223,87,121,.18), rgba(223,87,121,.04)); box-shadow: inset 3px 0 0 var(--gold); }
.champ { display: flex; align-items: center; gap: 10px; min-width: 150px; }
.portrait { position: relative; width: 40px; height: 40px; flex: none; }
.portrait img, .portrait .fallback { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); object-fit: cover; }
tr.you .portrait img { border-color: var(--gold); }
.portrait .lvl { position: absolute; right: -4px; bottom: -4px; background: #000; border: 1px solid var(--gold-dim); color: var(--gold-hi); font-size: 10px; font-weight: 700; border-radius: 8px; padding: 0 4px; line-height: 14px; }
.fallback { display: grid; place-items: center; background: var(--panel2); color: var(--gold); font-weight: 700; font-size: 12px; }
.cname { font-weight: 600; color: var(--gold-hi); }
.role { font-size: 11px; color: var(--muted); }
.badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle; }
.badge.fed { background: rgba(224,81,74,.2); color: #ff8a7a; border: 1px solid rgba(224,81,74,.5); }
.badge.behind { background: rgba(137,139,169,.15); color: var(--muted); border: 1px solid var(--line); }
.badge.youb { background: rgba(223,87,121,.2); color: var(--gold); border: 1px solid var(--gold-dim); }
.kda { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kda .d { color: #ee8b8b; }
.kda-ratio { font-size: 11px; color: var(--muted); }
.cs { color: var(--muted); font-variant-numeric: tabular-nums; }
.items { display: flex; gap: 3px; }
.slot { width: 30px; height: 30px; border: 1px solid #292c50; background: #06081d; border-radius: 3px; overflow: hidden; flex: none; }
.slot img { width: 100%; height: 100%; display: block; }
.slot .fallback { width: 100%; height: 100%; border: none; border-radius: 0; font-size: 9px; }
.goldv { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Indice */
.hint-row { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 10px; gap: 10px; flex-wrap: wrap; }
.hint-row h2 { margin: 0; font-size: 20px; }
.analysis { background: var(--panel); border: 1px solid var(--blue); border-radius: 6px; padding: 14px 16px; margin-bottom: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.analysis h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.analysis p { margin: 0; line-height: 1.5; }
.split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 6px 0 4px; }
.split .ad { background: #e07a3a; }
.split .ap { background: #6a7cf0; }
.split-lbl { display: flex; justify-content: space-between; font-size: 12px; }
.split-lbl .a { color: #f0a070; } .split-lbl .p { color: #a0acff; }

/* Options */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.opt { position: relative; text-align: left; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 6px; padding: 14px; color: var(--text); display: flex; gap: 12px; align-items: flex-start; transition: border-color .15s, transform .12s, box-shadow .15s; }
.opt:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.opt:disabled { cursor: default; }
.opt .icon { width: 52px; height: 52px; border: 1px solid var(--gold-dim); border-radius: 4px; overflow: hidden; flex: none; }
.opt .icon img, .opt .icon .fallback { width: 100%; height: 100%; }
.opt .nm { font-weight: 700; color: var(--gold-hi); }
.opt .cost { color: var(--gold); font-size: 12px; font-weight: 600; margin: 2px 0 6px; }
.opt .ds { font-size: 12px; color: var(--muted); line-height: 1.45; }
.opt .key { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.opt .why { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--text); border-top: 1px solid var(--line); padding-top: 8px; }
.opt .verdict { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.opt.s100 { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.opt.s100 .verdict { color: var(--good); }
.opt.s50 { border-color: var(--ok); }
.opt.s50 .verdict { color: var(--ok); }
.opt.s0 { opacity: .8; }
.opt.s0 .verdict { color: var(--bad); }
.opt.picked::after { content: "TON CHOIX"; position: absolute; top: -9px; left: 12px; background: var(--gold); color: #1e040a; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 3px; letter-spacing: .06em; }

/* Résultat */
.result { margin-top: 16px; border-radius: 6px; padding: 16px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 10px; }
.result .head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.result .big { font-family: Cinzel, serif; font-size: 22px; font-weight: 700; }
.result.r100 { border-color: var(--good); } .result.r100 .big { color: var(--good); }
.result.r50 { border-color: var(--ok); } .result.r50 .big { color: var(--ok); }
.result.r0 { border-color: var(--bad); } .result.r0 .big { color: var(--bad); }
.lesson { background: #0b1a14; border-left: 3px solid var(--good); padding: 10px 12px; line-height: 1.55; border-radius: 0 4px 4px 0; }
.lesson b { color: var(--good); }

/* Fin */
.end { text-align: center; padding-top: 20px; }
.end .score { font-family: Cinzel, serif; font-size: 64px; color: var(--gold-hi); margin: 6px 0; }
.end .rank { font-size: 20px; color: var(--gold); font-weight: 700; }
.review { text-align: left; margin-top: 28px; display: grid; gap: 8px; }
.rv { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; }
.rv .pts { font-weight: 800; width: 44px; text-align: center; }
.rv .pts.p100 { color: var(--good); } .rv .pts.p50 { color: var(--ok); } .rv .pts.p0 { color: var(--bad); }
.rv .mini { width: 34px; height: 34px; border-radius: 4px; overflow: hidden; flex: none; border: 1px solid var(--line); }
.rv .mini img, .rv .mini .fallback { width: 100%; height: 100%; border-radius: 0; border: none; }
.rv .txt { flex: 1; font-size: 13px; line-height: 1.45; }
.rv .arrow { color: var(--muted); }

/* Guide */
.guide { display: grid; gap: 12px; margin-top: 16px; }
.gcard { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px; }
.gcard h3 { margin: 0 0 6px; font-size: 17px; }
.gcard p { margin: 0 0 10px; line-height: 1.6; color: var(--text); }
.gitems { display: flex; flex-wrap: wrap; gap: 8px; }
.gitem { display: flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px 3px 3px; font-size: 12px; }
.gitem .slot { width: 26px; height: 26px; }

/* Infobulle */
#tip { position: fixed; z-index: 50; pointer-events: none; max-width: 260px; background: #030312; border: 1px solid var(--gold-dim); border-radius: 4px; padding: 8px 10px; font-size: 12px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.6); }
#tip b { color: var(--gold-hi); display: block; }
#tip .c { color: var(--gold); }

/* Description masquée */
.ctx-main { flex: 1; min-width: 0; }
.ctx-hidden { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ctx-hidden .concept { color: var(--gold); }
.no-badges .badge.fed, .no-badges .badge.behind { display: none; }

/* Choix des champions */
.step { font-size: 16px; margin: 22px 0 10px; }
.lanes { display: flex; flex-wrap: wrap; gap: 8px; }
.lane { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 10px 16px; border-radius: 6px; font-weight: 600; }
.lane span { font-size: 18px; }
.lane:hover { border-color: var(--gold-dim); }
.lane.on { border-color: var(--gold); background: #1a1c34; color: var(--gold-hi); box-shadow: 0 0 12px rgba(223,87,121,.2); }
.search { width: 100%; max-width: 320px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); padding: 9px 12px; border-radius: 4px; font: inherit; margin-bottom: 12px; }
.search:focus { outline: none; border-color: var(--gold-dim); }
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.cc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 6px; color: var(--text); transition: border-color .15s, transform .1s; }
.cc:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.cc img, .cc .fallback { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line); object-fit: cover; }
.cc.on { border-color: var(--gold); background: #1a1c34; }
.cc.on img { border-color: var(--gold); }
.cc.on::after { content: ""; position: absolute; top: 8px; right: 8px; width: 11px; height: 6px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.cc-name { font-weight: 600; font-size: 13px; color: var(--gold-hi); text-align: center; }
.cc-arch { font-size: 10px; color: var(--muted); text-align: center; line-height: 1.2; }
.setup-foot { position: sticky; bottom: 0; margin-top: 16px; padding: 12px 14px; background: rgba(9,11,41,.95); border: 1px solid var(--line); border-radius: 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sel-list { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sel { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-hi); }
.sel img, .sel .fallback { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Stats chiffrées et effets des items */
.stats { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.stats .st { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-radius: 3px; padding: 1px 6px 1px 4px; white-space: nowrap; }
.stats .st b { color: var(--gold-hi); font-weight: 700; }
.si { width: 13px; height: 13px; flex: none; }
.fx { display: grid; gap: 5px; }
.fx-line { font-size: 12px; color: var(--muted); line-height: 1.45; }
.fx-k { color: #e0cce8; font-weight: 700; }
.fx-k.act { color: var(--gold); }
#tip { max-width: 320px; }
#tip .stats { margin: 6px 0; }
#tip .fx-line { color: var(--text); }

/* Devine l'item */
.guess-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin-top: 14px; box-shadow: inset 0 1px 0 rgba(223, 87, 121, .14), 0 12px 32px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.guess-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.guess-icon { width: 64px; height: 64px; flex: none; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--gold-dim); border-radius: 6px; font-family: Cinzel, serif; font-size: 30px; color: var(--gold); background: radial-gradient(circle, rgba(223, 87, 121, .15), rgba(0, 0, 0, .4)); }
.guess-icon img { width: 100%; height: 100%; display: block; }
.guess-icon.blur img { filter: blur(6px) grayscale(.3); transform: scale(1.15); }
.guess-icon.revealed { border-color: var(--gold); box-shadow: 0 0 18px rgba(223, 87, 121, .35); }
.guess-title { font-family: Cinzel, serif; font-size: 22px; color: var(--gold-hi); }
.guess-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
#guess-stats .stats { gap: 6px; margin: 0; }
#guess-stats .st { font-size: 14px; padding: 4px 10px 4px 7px; }
#guess-stats .si { width: 17px; height: 17px; }
#guess-fx .fx { gap: 8px; margin-top: 12px; }
#guess-fx .fx-line { font-size: 14px; color: var(--text); background: rgba(0, 0, 0, .22); border-left: 2px solid rgba(174, 40, 231, .5); padding: 8px 10px; border-radius: 0 4px 4px 0; }
.fx-none { color: var(--muted); font-style: italic; margin: 12px 0 0; }
.guess-hints { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-top: 14px; }
.gh { font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; padding: 7px 10px; line-height: 1.45; }
.gh b { color: var(--gold); margin-right: 6px; }
.gh.on { border-style: solid; border-color: var(--gold-dim); color: var(--text); background: rgba(223, 87, 121, .06); }
.guess-input-wrap { position: relative; margin-top: 16px; }
.guess-input-wrap .search { max-width: none; margin: 0; font-size: 15px; padding: 12px 14px; }
.guess-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 320px; overflow-y: auto; background: #05071e; border: 1px solid var(--gold-dim); border-radius: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.gl-item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: var(--text); padding: 6px 10px; text-align: left; }
.gl-item img { width: 28px; height: 28px; border-radius: 3px; }
.gl-item.sel, .gl-item:hover { background: rgba(223, 87, 121, .12); color: var(--gold-hi); }
.gl-empty { padding: 10px 12px; color: var(--muted); }
.guess-wrong { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gw { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #ff9a8a; background: rgba(224, 81, 74, .12); border: 1px solid rgba(224, 81, 74, .4); border-radius: 4px; padding: 2px 8px 2px 2px; text-decoration: line-through; }
.gw img { width: 22px; height: 22px; border-radius: 3px; }
.guess-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.footer { max-width: 760px; margin: 48px auto 0; padding: 14px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .05); text-align: center; color: #494b6c; font-size: 10.5px; line-height: 1.55; }
@media (max-width: 600px) {
  .context { flex-direction: column; }
  .match-head .k { font-size: 20px; }
}

/* ---------- Ambiance ---------- */
:root {
  --panel: rgba(11, 13, 45, .78);
  --panel2: rgba(17, 20, 59, .82);
  --bg2: rgba(5, 7, 32, .86);
}
/* Le fond est sur html : body reste transparent pour laisser voir le splash art et les particules */
html {
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(174, 40, 231, .10), transparent 62%),
    radial-gradient(900px 620px at 92% 6%, rgba(47, 125, 209, .13), transparent 62%),
    radial-gradient(1100px 620px at 50% 112%, rgba(223, 87, 121, .10), transparent 62%),
    linear-gradient(180deg, #050721 0%, #030312 55%, #02020c 100%);
  background-color: #030312;
  background-attachment: fixed;
  min-height: 100%;
}
body { background: transparent; }
.wrap { position: relative; z-index: 1; }

#bg-splash {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background-size: cover; background-position: center 18%;
  opacity: 0; transition: opacity 1.4s ease;
  filter: saturate(.85) brightness(.6);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 40%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 40%, transparent 85%);
}
#bg-splash.on { opacity: .17; }
#bg-hex {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82V66l28 16 28-16v16L28 98z' fill='none' stroke='%23c8aa6e' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
}
#bg-hex::after {
  content: ""; position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .34) 100%);
}
#bg-motes { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#bg-motes span {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 231, 237, .85), rgba(223, 87, 121, 0) 70%);
  box-shadow: 0 0 6px rgba(243, 97, 134, .45);
  animation: mote-rise linear infinite;
}
#bg-motes span.teal {
  background: radial-gradient(circle, rgba(231, 191, 248, .8), rgba(174, 40, 231, 0) 70%);
  box-shadow: 0 0 6px rgba(189, 117, 220, .4);
}
@keyframes mote-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .55; }
  80% { opacity: .35; }
  100% { transform: translate(18px, -108vh); opacity: 0; }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
section:not([hidden]) { animation: fade-up .35s ease; }
/* Les animations de fond restent actives même si le système demande de les réduire (choix assumé) */

/* Titre et séparateur */
.hero h1 {
  background: linear-gradient(180deg, #fde0e7 0%, #f484a0 45%, #c23054 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgba(223, 87, 121, .28));
}
.divider { display: flex; align-items: center; gap: 12px; justify-content: center; max-width: 380px; margin: 14px auto 0; color: var(--gold); font-size: 11px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.divider::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }

/* Panneaux en verre avec liseré doré */
.how div, .gcard, .context, .analysis, .opt, .result, .rv, .cc, .lane, .chip, .stat-pill, .setup-foot, .match-head, .board, .search {
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.how div, .gcard, .result, .analysis, .rv, .setup-foot {
  box-shadow: inset 0 1px 0 rgba(223, 87, 121, .14), 0 12px 32px rgba(0, 0, 0, .35);
}
.how div { border-top: 1px solid rgba(223, 87, 121, .35); }
.match-head {
  background: linear-gradient(90deg, rgba(47, 125, 209, .22), rgba(5, 7, 32, .9) 32%, rgba(5, 7, 32, .9) 68%, rgba(209, 59, 59, .22));
  box-shadow: inset 0 2px 0 rgba(223, 87, 121, .45);
}
.match-head .time { text-shadow: 0 0 14px rgba(223, 87, 121, .35); }
table.sb tr:not(.you):hover { background: rgba(223, 87, 121, .04); }
.opt:hover:not(:disabled) { box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(223, 87, 121, .35), 0 0 22px rgba(223, 87, 121, .12); }
.opt .icon { box-shadow: 0 0 12px rgba(223, 87, 121, .15); }

/* Reflet sur le bouton principal */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn.primary:hover::after { left: 130%; }

/* Emblème de rang (fin de partie) */
/* L'image fait 1280×720 et l'emblème n'occupe que ~20 % au centre : on agrandit l'image dans un cadre qui la recadre */
/* ---------- Emblème de rang : apparition animée, plus stylée quand le rang est haut ---------- */
#end, #guess-end, #cq-end, #lh-end { overflow-x: clip; }
.emblem-stage { position: relative; width: 420px; height: 330px; max-width: 100%; margin: 4px auto 6px; --rc: 200, 170, 110; }
.emblem-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 2; filter: brightness(1) blur(0) drop-shadow(0 0 26px rgba(var(--rc), .45)); }
/* Le PNG officiel fait 1280×720 : l'emblème (ailes du Challenger comprises) tient dans la zone centrale */
.emblem-wrap img { position: absolute; left: 50%; top: 50%; width: 1600px; max-width: none; transform: translate(-50.04%, -47.3%); }
.em-fx, .em-front { position: absolute; inset: 0; pointer-events: none; }
.em-fx { z-index: 1; } .em-front { z-index: 3; }
@media (max-width: 480px) {
  .emblem-stage { width: 300px; height: 240px; }
  .emblem-wrap img { width: 1140px; }
  .em-rays { width: 380px !important; height: 380px !important; margin: -190px !important; }
}

/* Fer, Bronze, Argent : simple apparition */
.play.t-common .emblem-wrap { animation: em-pop .8s cubic-bezier(.2, 1.4, .4, 1) both, em-glow 2.6s ease-in-out .8s infinite; }
@keyframes em-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
/* Or, Platine, Émeraude : tourbillon + halo qui pulse */
.play.t-rare .emblem-wrap { animation: em-spin 1s cubic-bezier(.2, 1.3, .4, 1) both, em-glow 2.4s ease-in-out 1s infinite; }
@keyframes em-spin {
  0% { opacity: 0; transform: scale(.2) rotate(-30deg); filter: brightness(3) blur(4px) drop-shadow(0 0 0 rgba(var(--rc), 0)); }
  60% { opacity: 1; transform: scale(1.12) rotate(4deg); filter: brightness(1.6) blur(0) drop-shadow(0 0 40px rgba(var(--rc), .8)); }
  100% { opacity: 1; transform: none; filter: brightness(1) blur(0) drop-shadow(0 0 26px rgba(var(--rc), .45)); }
}
@keyframes em-glow {
  0%, 100% { filter: brightness(1) blur(0) drop-shadow(0 0 24px rgba(var(--rc), .45)); }
  50% { filter: brightness(1.15) blur(0) drop-shadow(0 0 44px rgba(var(--rc), .8)); }
}
/* Diamant, Maître : chute avec rebond, rayons de lumière */
.play.t-epic .emblem-wrap { animation: em-drop 1s cubic-bezier(.3, 1.5, .5, 1) .15s both, em-glow 2.4s ease-in-out 1.3s infinite; }
@keyframes em-drop {
  0% { opacity: 0; transform: translateY(-140px) scale(.6); filter: brightness(2.5) blur(3px) drop-shadow(0 0 0 rgba(var(--rc), 0)); }
  55% { opacity: 1; transform: translateY(8px) scale(1.08); filter: brightness(1.8) blur(0) drop-shadow(0 0 50px rgba(var(--rc), .9)); }
  100% { opacity: 1; transform: none; filter: brightness(1) blur(0) drop-shadow(0 0 26px rgba(var(--rc), .45)); }
}
/* Grand Maître, Challenger : charge d'énergie, impact, flash, onde de choc */
.play.t-legend .emblem-wrap { animation: em-slam .7s cubic-bezier(.5, 0, .3, 1.4) .85s both, em-glow 2s ease-in-out 1.8s infinite; }
@keyframes em-slam {
  0% { opacity: 0; transform: scale(2.8); filter: brightness(4) blur(8px) drop-shadow(0 0 0 rgba(var(--rc), 0)); }
  60% { opacity: 1; transform: scale(.94); filter: brightness(2) blur(0) drop-shadow(0 0 60px rgba(var(--rc), 1)); }
  100% { opacity: 1; transform: none; filter: brightness(1) blur(0) drop-shadow(0 0 30px rgba(var(--rc), .55)); }
}
.play.t-epic { --land: .15s; } .play.t-legend { --land: .85s; }
.em-charge { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(var(--rc), .9) 40%, transparent 70%); animation: em-charge .95s ease-in both; }
@keyframes em-charge { 0% { transform: scale(.2); opacity: 0; } 70% { transform: scale(1.6); opacity: 1; } 85% { transform: scale(.5); opacity: 1; } 100% { transform: scale(7); opacity: 0; } }
.em-ring { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px; border-radius: 50%; border: 2px solid rgba(var(--rc), .85); box-shadow: 0 0 20px rgba(var(--rc), .6), inset 0 0 20px rgba(var(--rc), .4); opacity: 0; animation: em-ring 1.1s ease-out calc(var(--land, 0s) + .25s + var(--i) * .18s) both; }
@keyframes em-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
.em-rays { position: absolute; left: 50%; top: 50%; width: 540px; height: 540px; margin: -270px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(var(--rc), .32) 0deg 6deg, transparent 6deg 22deg); -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%); mask-image: radial-gradient(circle, #000 12%, transparent 68%); opacity: 0; animation: em-fade-in 1s ease-out calc(var(--land, 0s) + .2s) forwards, em-rotate 26s linear infinite; }
.em-rays.em-rays2 { background: repeating-conic-gradient(from 11deg, rgba(255, 255, 255, .16) 0deg 3deg, transparent 3deg 30deg); animation: em-fade-in 1s ease-out calc(var(--land, 0s) + .4s) forwards, em-rotate 38s linear infinite reverse; }
@keyframes em-fade-in { to { opacity: 1; } }
@keyframes em-rotate { to { transform: rotate(360deg); } }
.em-spark { position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(var(--rc), .9); opacity: 0; animation: em-spark 1s cubic-bezier(.1, .8, .3, 1) calc(var(--land, 0s) + .3s + var(--dl)) both; }
@keyframes em-spark { 0% { transform: rotate(var(--a)) translateX(20px) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(var(--d)) scale(.2); opacity: 0; } }
.em-float { position: absolute; bottom: 12%; left: var(--x); width: 4px; height: 4px; border-radius: 50%; background: #fddee6; box-shadow: 0 0 6px 2px rgba(var(--rc), .8); opacity: 0; animation: em-float var(--du) ease-in calc(var(--land, 0s) + 1s + var(--dl)) infinite; }
@keyframes em-float { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-230px); opacity: 0; } }
.em-flash { position: fixed; inset: 0; z-index: 70; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .85), rgba(var(--rc), .35) 40%, transparent 75%); animation: em-flash .9s ease-out both; }
@keyframes em-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.em-shake { animation: em-shake .45s ease-out; }
@keyframes em-shake { 0%, 100% { transform: none; } 20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 65; overflow: hidden; }
.confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 14px; border-radius: 2px; background: var(--c); animation: confetti var(--du) cubic-bezier(.3, .6, .6, 1) var(--dl) forwards; }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: 0; } }
.end .rank.rank-in { animation: rank-in .6s ease-out var(--rank-delay, 0s) both; }
.end .rank.rank-epic { background: linear-gradient(90deg, var(--gold), #fff6d8, rgb(var(--rc)), var(--gold)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 24px; animation: rank-in .6s ease-out var(--rank-delay, 0s) both, rank-shine 3s linear infinite; }
@keyframes rank-in { from { opacity: 0; transform: translateY(12px); letter-spacing: .25em; } to { opacity: 1; transform: none; } }
@keyframes rank-shine { to { background-position: -300% 0; } }

/* Bouton "langue au chat" avec Yuumi */
.skip-btn { display: inline-flex; align-items: center; gap: 6px; }
.skip-btn .yuumi { width: 40px; height: 40px; margin: -10px -4px -10px 0; object-fit: contain; transition: transform .2s; }
.skip-btn:hover .yuumi { transform: rotate(-10deg) scale(1.35); }

/* ---------- Icônes ---------- */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; }
.ic-btn { display: inline-flex; align-items: center; gap: 7px; }
.ic-btn > .ico { color: var(--gold); }
.btn.primary.ic-btn > .ico { color: inherit; }
.stars { display: inline-flex; gap: 1px; margin-left: 4px; vertical-align: -2px; }
.stars .ico { width: 12px; height: 12px; }
.star-on { color: var(--gold); } .star-off { color: rgba(137, 139, 169, .35); }
.badge.fed .ico { width: 10px; height: 10px; vertical-align: -1px; }
.analysis h4 .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--gold); }
.verdict .ico { width: 13px; height: 13px; vertical-align: -2px; }
.learn-ic .ico { width: 24px; height: 24px; color: var(--gold-hi); }
.gh b .ico { width: 13px; height: 13px; vertical-align: -2px; }
.modal-close { display: grid; place-items: center; }
.modal-close .ico { width: 16px; height: 16px; }
.lane-ic { width: 22px; height: 22px; display: block; margin: 0 auto 4px; }

/* ---------- Maîtrise et succès ---------- */
.crest { position: relative; display: inline-grid; place-items: center; width: 30px; height: 34px; flex: none; }
.crest svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest-n { font-family: Cinzel, serif; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 1.6px; }
.crest .crest-bg { stroke-width: 2; }
.crest.t1 .crest-bg { fill: #3a3f47; stroke: #898ba9; } .crest.t1 .crest-in { fill: #262733; }
.crest.t2 .crest-bg { fill: #1a206d; stroke: #cfa3e2; } .crest.t2 .crest-in { fill: #111652; }
.crest.t3 .crest-bg { fill: #7d0d29; stroke: #f7698c; } .crest.t3 .crest-in { fill: #5a051a; }
.crest.t4 .crest-bg { fill: #3d1f63; stroke: #ffd98a; } .crest.t4 .crest-in { fill: #6a2fa0; }
.crest.t4 { filter: drop-shadow(0 0 6px rgba(255, 217, 138, .6)); }
.m-badge { position: absolute; top: 4px; left: 5px; }
.m-badge .crest { width: 22px; height: 25px; }
.m-badge .crest b { font-size: 10px; }
.home-mastery { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--muted); }
.home-mastery:empty { display: none; }
.home-mastery .hm { display: inline-flex; align-items: center; gap: 4px; }
.home-mastery .crest { width: 20px; height: 23px; } .home-mastery .crest b { font-size: 9px; }
.end-progress { text-align: left; margin-top: 26px; }
.end-progress:empty { display: none; }
.prog-h { display: flex; align-items: center; gap: 8px; font-size: 17px; margin: 18px 0 10px; }
.prog-h .ico { color: var(--gold); }
.mastery-list { display: grid; gap: 8px; }
.mastery-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.mastery-row.up { border-color: var(--gold); box-shadow: 0 0 18px rgba(223, 87, 121, .2); animation: m-up .8s ease; }
@keyframes m-up { 0% { transform: scale(.96); } 50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(223, 87, 121, .5); } 100% { transform: none; } }
.mastery-row > img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gold-dim); }
.mastery-info { flex: 1; min-width: 0; }
.mastery-info b { color: var(--gold-hi); }
.mastery-info em { font-style: normal; color: var(--gold); font-weight: 700; font-size: 12px; margin-left: 8px; }
.mastery-info small, .mcard small { color: var(--muted); font-size: 11px; }
.mastery-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); overflow: hidden; margin: 5px 0 3px; }
.mastery-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.mastery-gain { font-family: Cinzel, serif; font-weight: 700; color: var(--good); font-size: 18px; }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mastery-grid .fx-none { grid-column: 1 / -1; }
.mcard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align: center; }
.mcard-top { position: relative; display: inline-block; margin-bottom: 6px; }
.mcard-top img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold-dim); }
.mcard-top .crest { position: absolute; right: -10px; bottom: -6px; }
.mcard b { display: block; color: var(--gold-hi); font-size: 13px; }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; }
.pstat { background: var(--panel); border: 1px solid var(--line); border-top: 1px solid rgba(223, 87, 121, .35); border-radius: 8px; padding: 14px; text-align: center; }
.pstat b { display: block; font-family: Cinzel, serif; font-size: 26px; color: var(--gold-hi); }
.pstat span { color: var(--muted); font-size: 12px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; opacity: .6; }
.ach.on { opacity: 1; border-color: var(--gold-dim); }
.ach > div { flex: 1; min-width: 0; }
.ach-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--muted); }
.ach.on .ach-ic { color: var(--gold-hi); background: linear-gradient(135deg, rgba(223, 87, 121, .3), rgba(174, 40, 231, .12)); border-color: var(--gold-dim); }
.ach-ic .ico { width: 22px; height: 22px; }
.ach b { display: block; color: var(--gold-hi); font-size: 14px; }
.ach span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.ach small { color: var(--muted); font-size: 11px; }
.ach-pic { position: relative; width: 52px; height: 52px; flex: none; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #090b29; display: grid; place-items: center; }
.ach.on .ach-pic { border-color: var(--gold); box-shadow: 0 0 12px rgba(223, 87, 121, .35); }
.ach-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ach-pic .crest { width: 36px; height: 41px; filter: drop-shadow(0 0 6px rgba(207, 163, 226, .55)); }
.ach-pic:has(.crest) { background: radial-gradient(circle at 50% 45%, #3a2a7a, #120f3a 62%, #090b29); }
.ach-pic:has(.crest)::before, .ach-pic:has(.crest)::after { content: ""; position: absolute; top: 22%; width: 14%; height: 56%; border: 2px solid rgba(207, 163, 226, .55); border-radius: 50%; }
.ach-pic:has(.crest)::before { left: 12%; border-right-color: transparent; border-top-color: transparent; transform: rotate(10deg); }
.ach-pic:has(.crest)::after { right: 12%; border-left-color: transparent; border-top-color: transparent; transform: rotate(-10deg); }
.ach-emblem { width: 100%; height: 100%; background: url("https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/images/ranked-emblem/emblem-challenger.png") no-repeat 50% 45% / 430% auto; }
.ach-pic.locked img, .ach-pic.locked .crest, .ach-pic.locked .ach-emblem, .ach-pic.locked > .ico { filter: grayscale(1) brightness(.45); }
.ach-lock { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .78); display: grid; place-items: center; color: var(--muted); }
.ach-lock .ico { width: 11px; height: 11px; }
.ach-pic .ach-own { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ach-pic > .ico { width: 26px; height: 26px; color: var(--gold-hi); }
.ach-pic img[data-name="img/logo"], .ach-pic img[data-name="img/Maitrise"] { object-fit: contain; padding: 4px; background: #05071d; }
/* Images détourées (fond transparent) : entières, sur le fond de la carte */
.ach-pic img[data-name="img/rammus"], .ach-pic img[data-name="img/worlds-cup"] { object-fit: contain; padding: 2px; background: #090b29; } /* le fond cache l’icône de secours */
.opt .cost-full { opacity: .6; font-size: 11px; }

/* Succès ultime : aura dorée et hextech qui tourne autour de la carte */
@property --aura { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ach.legendary { grid-column: 1 / -1; align-items: center; opacity: 1; padding: 16px 18px; border: 2px solid transparent;
  background: linear-gradient(#0a0c29, #0a0c29) padding-box, conic-gradient(from var(--aura), #df5779, #ae28e7, #f8d3dc, #8c1432, #ae28e7, #df5779) border-box;
  animation: aura-spin 4s linear infinite, aura-pulse 3s ease-in-out infinite; }
.ach.legendary:not(.on) { filter: saturate(.8); }
.ach.legendary .ach-pic { width: 76px; height: 76px; border: 1px solid var(--gold); border-radius: 50%; animation: aura-glow 2.6s ease-in-out infinite; }
.ach.legendary .ach-pic .ico { width: 32px; height: 32px; }
.ach.legendary b { font-family: Cinzel, serif; font-size: 18px; background: linear-gradient(90deg, #f0e6d2, #c8aa6e, #0ac8b9, #f0e6d2); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rank-shine 4s linear infinite; }
@keyframes aura-spin { to { --aura: 360deg; } }
@keyframes aura-pulse { 0%, 100% { box-shadow: 0 0 14px rgba(174, 40, 231, .25), 0 0 28px rgba(223, 87, 121, .15); } 50% { box-shadow: 0 0 26px rgba(174, 40, 231, .55), 0 0 46px rgba(223, 87, 121, .35); } }
@keyframes aura-glow { 0%, 100% { box-shadow: 0 0 10px rgba(223, 87, 121, .4); } 50% { box-shadow: 0 0 24px rgba(174, 40, 231, .8); } }
.toast.legendary { border: 2px solid transparent; background: linear-gradient(#0a0c29, #0a0c29) padding-box, conic-gradient(from var(--aura), #df5779, #ae28e7, #f8d3dc, #df5779) border-box; animation: toast-in .4s cubic-bezier(.2, 1.3, .4, 1), aura-spin 3s linear infinite; }
.toast .ach-pic { width: 46px; height: 46px; border-color: var(--gold); }
.ach-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; margin: 6px 0 2px; }
.ach-bar i { display: block; height: 100%; background: var(--gold-dim); }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; }
.toast { display: flex; gap: 12px; align-items: center; min-width: 260px; max-width: 340px; background: linear-gradient(180deg, #12153b, #090b29); border: 1px solid var(--gold); border-radius: 10px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6), 0 0 20px rgba(223, 87, 121, .25); animation: toast-in .4s cubic-bezier(.2, 1.3, .4, 1); transition: opacity .5s, transform .5s; }
.toast.out { opacity: 0; transform: translateX(30px); }
.toast-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(223, 87, 121, .18); color: var(--gold-hi); }
.toast-ic .ico { width: 22px; height: 22px; }
.toast small { display: block; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.toast b { display: block; color: var(--gold-hi); }
.toast span { display: block; color: var(--muted); font-size: 12px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- Navigation ---------- */
.navbar { position: sticky; top: 0; z-index: 40; background: rgba(3, 3, 18, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(223, 87, 121, .2); }
.topnav { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; }
.topnav .brand { background: none; border: none; padding: 0; font-family: Cinzel, serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; color: var(--gold); flex: none; }
.nav-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.nav-links button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 8px 10px; white-space: nowrap; }
.nav-links button:hover { color: var(--gold-hi); }
.nav-links button.on { color: var(--gold-hi); border-bottom-color: var(--gold); }

/* ---------- Accueil ---------- */
.best.left, .chips.left { text-align: left; justify-content: flex-start; }
.hero-v2 { padding: 38px 0 10px; }
.hero-v2 p { font-size: 15px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.btn.big { padding: 13px 26px; font-size: 15px; border-radius: 6px; }
.btn.ghost-gold { background: rgba(223, 87, 121, .08); border-color: var(--gold-dim); }
.steps { list-style: none; display: flex; gap: 10px 26px; justify-content: center; flex-wrap: wrap; padding: 0; margin: 24px 0 0; color: var(--muted); font-size: 13px; }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold-dim); background: rgba(223, 87, 121, .08); color: var(--gold); font-weight: 700; font-size: 12px; }
.home-h { font-size: 18px; margin: 34px 0 14px; display: flex; align-items: center; gap: 12px; }
.home-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------- Connais tes adversaires ---------- */
.cq-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; margin-top: 12px; }
.cq-head { display: flex; gap: 14px; align-items: center; }
.cq-img img, .cq-img .fallback { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--gold); display: block; }
.cq-name { font-family: Cinzel, serif; font-size: 26px; color: var(--gold-hi); }
.cq-sub { color: var(--muted); font-size: 13px; }
.cq-q { margin: 20px 0 10px; font-size: 16px; }
.cq-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.cq-opt { display: flex; gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.cq-opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(223, 87, 121, .08); }
.cq-opt:disabled { cursor: default; }
.cq-opt.good { border-color: var(--good); background: rgba(63, 191, 110, .14); }
.cq-opt.bad { border-color: var(--bad); background: rgba(224, 81, 74, .14); }
.cq-opt.dim { opacity: .5; }
.cq-item img, .cq-item .fallback { width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--gold-dim); }
.cq-key { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; border: 1px solid var(--gold-dim); color: var(--gold); }
.cq-explain { margin-top: 10px; padding: 12px 14px; border-radius: 8px; background: rgba(223, 87, 121, .07); border-left: 3px solid var(--gold); line-height: 1.55; }
.cq-explain .gitems { margin-top: 10px; }
.cq-counter { margin-top: 8px; }
.cq-ok { color: var(--good); } .cq-ko { color: var(--bad); }
.cq-ok .ico, .cq-ko .ico { width: 14px; height: 14px; vertical-align: -2px; }
.cq-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; cursor: pointer; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .15s, border-color .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 16px 36px rgba(0, 0, 0, .45), 0 0 26px rgba(223, 87, 121, .16); }
.tile-main { border-color: rgba(174, 40, 231, .5); }
.tile-art { position: relative; height: 152px; background-color: #090b29; background-size: cover; background-position: center 14%; transition: filter .2s; }
.tile-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 3, 18, .05) 20%, rgba(11, 13, 45, .97) 100%); }
.tile:hover .tile-art { filter: brightness(1.15); }
.tile-art-items { display: grid; grid-template-columns: repeat(6, 1fr); align-content: center; gap: 6px; padding: 0 16px; background: radial-gradient(circle at 50% 45%, rgba(169, 125, 242, .22), transparent 70%), #090b29; }
.tile-art-items img { width: 100%; aspect-ratio: 1; border-radius: 6px; border: 1px solid rgba(223, 87, 121, .3); filter: blur(2.5px) saturate(.85); }
.tile-art-items .q { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-family: Cinzel, serif; font-size: 52px; color: var(--gold-hi); text-shadow: 0 0 24px rgba(0, 0, 0, .95); }
.tile-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 2px 18px 18px; }
.tile-body h3 { margin: 0; font-size: 20px; }
.tile-body p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.tile-badge { position: absolute; top: -32px; left: 18px; z-index: 3; background: var(--blue); color: #3f0a56; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; }
.tile-mains { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 28px; font-size: 12px; color: var(--muted); }
.tile-mains img, .tile-mains .fallback { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.tile-mains b { color: var(--gold-hi); }
.tile-meta { font-size: 12px; color: var(--muted); }
.tile-meta b { color: var(--gold); }
.tile-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.link-btn { background: none; border: none; padding: 0; color: var(--gold); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--gold-hi); }

.home-options { margin-top: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 18px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home-options summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.home-options summary:hover { color: var(--gold-hi); }
.home-options-body { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; margin-top: 14px; }
@media (max-width: 800px) { .home-options-body { grid-template-columns: 1fr; } }
.home-options h4 { margin: 0 0 8px; font-size: 13px; color: var(--gold-hi); }
.tile-kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.tile-gear { margin-left: auto; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--gold-dim); color: var(--gold); cursor: pointer; transition: transform .35s ease, border-color .15s, color .15s; }
.tile-gear:hover { color: var(--gold-hi); border-color: var(--gold); transform: rotate(60deg); }
.tile-gear .ico { width: 20px; height: 20px; }
.options-box { max-width: 760px; }
.options-box.single { max-width: 460px; }
.options-box.single .home-options-body { grid-template-columns: 1fr; }
.options-box h2 { margin: 0 44px 4px 0; font-size: 20px; }
.options-box h2 .ico { color: var(--gold); }
.options-box h4 { margin: 0 0 8px; font-size: 13px; color: var(--gold-hi); }

.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
.learn-card { text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; color: var(--text); transition: border-color .15s, transform .12s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.learn-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.learn-ic { grid-row: span 2; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, rgba(223, 87, 121, .25), rgba(174, 40, 231, .12)); border: 1px solid var(--gold-dim); }
.learn-card b { color: var(--gold-hi); font-size: 15px; }
.learn-card span:last-child { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ---------- Fiche item ---------- */
.icard { cursor: pointer; transition: border-color .15s, transform .12s; }
.icard:hover, .icard:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.icard-head { position: relative; }
.icard-more { margin-left: auto; align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--gold); opacity: 0; transition: opacity .15s; }
.icard:hover .icard-more { opacity: 1; }
.modal { position: fixed; inset: 0; z-index: 45; display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; overflow-y: auto; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(2, 2, 11, .75); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-box { position: relative; width: 100%; max-width: 900px; background: linear-gradient(180deg, #0c0e2f, #070922); border: 1px solid var(--gold-dim); border-radius: 12px; padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); animation: fade-up .25s ease; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--text); font-size: 16px; }
.modal-close:hover { border-color: var(--gold); color: var(--gold-hi); }
.idt-head { display: flex; gap: 16px; align-items: center; padding-right: 44px; }
.idt-icon { width: 76px; height: 76px; flex: none; overflow: hidden; border: 2px solid var(--gold); border-radius: 10px; box-shadow: 0 0 24px rgba(223, 87, 121, .3); }
.idt-icon img { width: 100%; height: 100%; display: block; }
.idt-head h2 { margin: 0 0 2px; font-size: 26px; }
.idt-prices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.idt-prices span { font-size: 12px; color: var(--muted); background: rgba(223, 87, 121, .07); border: 1px solid rgba(223, 87, 121, .25); border-radius: 4px; padding: 3px 9px; }
.idt-prices b { color: var(--gold-hi); margin-left: 4px; }
.idt-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 20px; }
@media (max-width: 760px) { .idt-grid { grid-template-columns: 1fr; } }
.idt-sec { background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
.idt-sec h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.idt-sec .fx-line { color: var(--text); font-size: 13px; }
.idt-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); line-height: 1.45; }
.idt-sec .fx-none { margin: 0; }
.idt-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.idt-champ { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.idt-champ img, .idt-champ .fallback { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-dim); flex: none; }
.idt-champ b { display: block; color: var(--gold-hi); font-size: 13px; }
.idt-list { display: grid; gap: 6px; }
.rt-kids { margin: 6px 0 0 16px; padding-left: 12px; border-left: 1px dashed var(--gold-dim); display: grid; gap: 6px; }
.rt-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px 4px 4px; color: var(--text); }
button.rt-item:hover { border-color: var(--gold); background: rgba(223, 87, 121, .08); }
.rt-item img, .rt-item .fallback { width: 30px; height: 30px; border-radius: 4px; flex: none; }
.rt-item span { flex: 1; font-size: 13px; }
.rt-item em { font-style: normal; color: var(--gold); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rt-item.root { border-color: var(--gold-dim); background: rgba(223, 87, 121, .08); }
.idt-patch { border-left: 2px solid var(--gold-dim); padding: 2px 0 2px 12px; margin-bottom: 12px; }
.idt-patch h5 { margin: 0 0 4px; color: var(--gold-hi); font-size: 13px; }
.idt-patch ul { margin: 0; padding-left: 16px; font-size: 13px; line-height: 1.55; }
.idt-patch details { margin: 2px 0 4px; }
.idt-patch summary { cursor: pointer; color: var(--gold); font-size: 12px; }
.diff { font-size: 12px; line-height: 1.5; padding: 4px 8px; margin-top: 4px; border-radius: 4px; }
.diff.old { background: rgba(224, 81, 74, .1); color: #f0b1a8; }
.diff.new { background: rgba(63, 191, 110, .1); color: #aee6c1; }

/* ---------- Pages Items et Lexique ---------- */
.page-intro { color: var(--muted); line-height: 1.6; margin: 6px 0 14px; }
.page-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.page-tools .search { margin: 0; max-width: 420px; }
.select { background: var(--bg2); border: 1px solid var(--line); color: var(--text); padding: 9px 12px; border-radius: 4px; font: inherit; }
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.icard { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 8px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scroll-margin-top: 80px; }
.icard-head { display: flex; gap: 12px; align-items: center; }
.icard-head h3 { margin: 0; font-size: 15px; font-family: Inter, sans-serif; letter-spacing: 0; }
.icard-icon { width: 46px; height: 46px; flex: none; border: 1px solid var(--gold-dim); border-radius: 5px; overflow: hidden; }
.icard-icon img { width: 100%; height: 100%; display: block; }
.icard-meta { color: var(--gold); font-size: 12px; font-weight: 600; }
.icard .stats { margin: 0; }
.icard-tree { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 8px; }
.icard-tree > span { font-size: 11px; color: var(--muted); margin-right: 4px; }
.tree-link { width: 28px; height: 28px; padding: 0; border: 1px solid #292c50; border-radius: 4px; overflow: hidden; background: #06081d; }
.tree-link img { width: 100%; height: 100%; display: block; }
.tree-link:hover { border-color: var(--gold); }
.icard.flash { animation: card-flash 1.8s ease; }
@keyframes card-flash { 0%, 40% { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(223, 87, 121, .45); } 100% { box-shadow: none; } }
.lex-group { font-size: 17px; margin: 24px 0 10px; }
.lex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.lex-item { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lex-item h4 { margin: 0 0 4px; color: var(--gold-hi); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.lex-item h4 .si { width: 15px; height: 15px; }
.lex-item p { margin: 0; color: var(--text); line-height: 1.55; font-size: 13px; }

/* Laning */
.tile-wide { grid-column: 1 / -1; }
.tile-wide .tile-art { height: 186px; background-position: center 9%; }
.lh-topstats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.lh-topstats .progress { min-width: 160px; flex: 1; max-width: 320px; }
.lh-bad { color: var(--bad) !important; }
.lh-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.lh-rules > div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 4px; }
.lh-rules [data-icon] { color: var(--gold); }
.lh-rules [data-icon] .ico, .lh-rules [data-icon] svg { width: 22px; height: 22px; }
.lh-rules small { color: var(--muted); line-height: 1.5; }
.lh-h { margin: 18px 0 8px; font-size: 16px; }
#lh-lanes .chip { display: inline-flex; align-items: center; gap: 6px; }
#lh-lanes .lane-ic { width: 16px; height: 16px; margin: 0; }
.lh-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 300px; overflow-y: auto; padding: 2px; }
.lh-champ { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.lh-champ img, .lh-champ .fallback, .lh-rand { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.lh-rand { display: grid; place-items: center; font-family: Cinzel, serif; font-size: 22px; color: var(--gold); background: #090b29; }
.lh-champ:hover { border-color: var(--gold-dim); }
.lh-champ.on { border-color: var(--gold); background: rgba(223,87,121,.1); color: var(--gold-hi); }
#lh-start { margin-top: 10px; }
.lh-arena { position: relative; border: 1px solid var(--gold-dim); border-radius: 10px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
#lh-canvas { display: block; width: min(100%, calc(74vh * 1.5)); margin: 0 auto; aspect-ratio: 960 / 640; touch-action: none; user-select: none; -webkit-user-select: none; }
.lh-hud { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin-top: 10px; align-items: stretch; }
.lh-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; }
.lh-panel-foe { border-color: rgba(224,81,74,.35); }
.lh-panel.flash { animation: lh-flash 1.2s ease-out; }
@keyframes lh-flash { 0% { box-shadow: 0 0 0 2px var(--bad), 0 0 24px rgba(224,81,74,.6); } 100% { box-shadow: none; } }
.lh-p-head { display: flex; gap: 10px; align-items: center; }
.lh-p-head small { display: block; color: var(--muted); font-size: 12px; }
.lh-p-img { position: relative; display: inline-block; }
.lh-p-img img, .lh-p-img .fallback { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #3fa7ff; display: block; }
.lh-lvl { position: absolute; right: -5px; bottom: -5px; min-width: 19px; height: 19px; padding: 0 3px; border-radius: 50%; background: #090b29; border: 1px solid var(--gold); color: var(--gold-hi); font-size: 11px; font-weight: 800; font-style: normal; display: grid; place-items: center; }
.lh-xp { height: 5px; border-radius: 3px; background: #05050c; border: 1px solid var(--line); overflow: hidden; }
.lh-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c162f, #f5c542); transition: width .2s; }
.lh-p-img.foe img, .lh-p-img.foe .fallback { border-color: #ff5a4f; }
.lh-hp { position: relative; height: 16px; background: #05050c; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); }
.lh-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2f9a57, #3fbf6e); transition: width .15s; }
.lh-hp i.low { background: linear-gradient(90deg, #a8322c, #e0514a); }
.lh-hp span { position: relative; display: block; text-align: center; font-size: 11px; line-height: 14px; font-weight: 700; }
.lh-stats, .lh-foe-state { font-size: 12px; color: var(--muted); }
.lh-foe-strength { font-size: 12px; color: var(--gold-hi); }
.lh-foe-strength .ico { width: 13px; height: 13px; vertical-align: -2px; color: var(--gold); }
.lh-slots { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.lh-slot { width: 30px; height: 30px; border-radius: 4px; border: 1px solid var(--line); background: #070816; overflow: hidden; }
.lh-slot img, .lh-slot .fallback { width: 100%; height: 100%; display: block; }
.lh-pots { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--muted); }
.lh-pots img { width: 22px; height: 22px; border-radius: 4px; }
.lh-center { display: grid; gap: 8px; align-content: center; justify-items: center; text-align: center; max-width: 230px; }
.lh-center small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.lh-spell { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.03); }
.lh-spell.ready { color: #fbacc0; border-color: rgba(245,215,110,.6); background: rgba(245,215,110,.1); }
.lh-chart { display: block; width: 100%; height: 150px; border: 1px solid var(--line); border-radius: 8px; background: #0a0c27; }
#lh-recall kbd, .lh-center kbd { font: inherit; font-size: 11px; border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 4px; opacity: .8; }
.lh-vs { position: fixed; inset: 0; z-index: 1001; overflow: hidden; background: radial-gradient(circle at 50% 50%, #0f1239, #030312 70%); cursor: pointer; animation: lh-vs-in .3s ease-out; }
.lh-vs.out { animation: lh-vs-out .38s ease-in forwards; }
@keyframes lh-vs-in { from { opacity: 0; } }
@keyframes lh-vs-out { to { opacity: 0; transform: scale(1.06); } }
.lh-vs-side { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.lh-vs-side.left { clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%); animation: lh-vs-left .7s cubic-bezier(.2,.9,.3,1.1) both; }
.lh-vs-side.right { justify-content: flex-end; clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%); animation: lh-vs-right .7s cubic-bezier(.2,.9,.3,1.1) .12s both; }
@keyframes lh-vs-left { from { transform: translateX(-100%); } }
@keyframes lh-vs-right { from { transform: translateX(100%); } }
.lh-vs-art { position: absolute; top: 0; bottom: 0; width: 58%; background-size: cover; background-position: center 30%; animation: lh-vs-zoom 3.4s ease-out both; }
.lh-vs-side.left .lh-vs-art { left: 0; }
.lh-vs-side.right .lh-vs-art { right: 0; }
.lh-vs-side::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(3,3,18,.9)); }
.lh-vs-side::before { content: ""; position: absolute; inset: 0; z-index: 1; mix-blend-mode: soft-light; }
.lh-vs-side.left::before { background: linear-gradient(90deg, rgba(63,167,255,.45), transparent 55%); }
.lh-vs-side.right::before { background: linear-gradient(270deg, rgba(255,90,79,.45), transparent 55%); }
@keyframes lh-vs-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.lh-vs-line { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.lh-vs-line line { stroke: #f0d58c; stroke-width: 5; filter: drop-shadow(0 0 10px #f0d58c) drop-shadow(0 0 24px rgba(240,213,140,.7)); opacity: 0; animation: lh-vs-draw .45s ease-out .5s forwards; }
@keyframes lh-vs-draw { 0% { opacity: 0; } 40% { opacity: 1; stroke-width: 12; } 100% { opacity: 1; } }
.lh-vs-name { position: relative; z-index: 2; padding: 0 6% 12vh; font-family: Cinzel, Georgia, serif; font-size: clamp(28px, 5vw, 64px); color: var(--gold-hi); text-shadow: 0 4px 24px rgba(0,0,0,.9); animation: lh-vs-name .6s ease-out .55s both; }
.lh-vs-side.right .lh-vs-name { text-align: right; }
.lh-vs-name small { display: block; font-family: Inter, sans-serif; font-size: clamp(11px, 1.3vw, 14px); letter-spacing: .25em; text-transform: uppercase; color: #e3b4f7; }
.lh-vs-side.right .lh-vs-name small { color: #ff8a7a; }
@keyframes lh-vs-name { from { opacity: 0; transform: translateY(20px); } }
.lh-vs-mid { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; }
.lh-vs-mid span { font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: clamp(64px, 12vw, 150px); color: #fddae3; text-shadow: 0 0 30px rgba(223,87,121,.9), 0 0 80px rgba(223,87,121,.6); animation: lh-vs-pop .55s cubic-bezier(.2,1.6,.4,1) .6s both, lh-vs-glow 1.6s ease-in-out 1.2s infinite; }
@keyframes lh-vs-pop { from { opacity: 0; transform: scale(3.2) rotate(-8deg); } }
@keyframes lh-vs-glow { 50% { text-shadow: 0 0 44px rgba(240,213,140,1), 0 0 120px rgba(223,87,121,.8); } }
.lh-vs-lane { position: absolute; z-index: 4; left: 0; right: 0; top: 7vh; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); animation: lh-vs-name .5s ease-out .9s both; }
.lh-vs-lane .lane-ic { width: 20px; height: 20px; margin: 0; }
.lh-vs-skip { position: absolute; z-index: 4; bottom: 3vh; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--muted); animation: lh-vs-name .5s ease-out 1.5s both; }
@media (max-width: 700px) { .lh-vs-art { width: 62%; } .lh-vs-name { padding-bottom: 18vh; } }
.lh-shop { position: fixed; inset: 0; z-index: 1000; background: rgba(2,2,11,.78); display: grid; place-items: center; padding: 16px; }
.lh-shop-box { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #0a0c27; border: 1px solid var(--gold-dim); border-radius: 12px; padding: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lh-shop-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lh-shop-head h2 { margin: 0; font-size: 22px; }
.lh-shop-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.lh-shop-gold { display: flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.lh-shop-gold .ico, .lh-shop-gold svg { width: 22px; height: 22px; }
.lh-shop-foe { display: flex; gap: 10px; align-items: center; margin: 12px 0 8px; padding: 8px 10px; border-radius: 8px; background: rgba(224,81,74,.08); border: 1px solid rgba(224,81,74,.3); font-size: 13px; }
.lh-shop-foe-img img, .lh-shop-foe-img .fallback { width: 38px; height: 38px; border-radius: 50%; border: 2px solid #ff5a4f; display: block; }
.lh-shop-foe-items { display: flex; gap: 4px; margin-top: 4px; }
.lh-shop-foe-items img, .lh-shop-foe-items .fallback { width: 26px; height: 26px; border-radius: 4px; }
.lh-inv { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.lh-inv-lbl { font-size: 12px; color: var(--muted); margin-right: 6px; }
.lh-inv-pots { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); margin-left: 6px; }
.lh-inv-pots img { width: 24px; height: 24px; border-radius: 4px; }
.lh-shop-list h4 { margin: 14px 0 6px; font-size: 13px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.lh-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.lh-item { display: flex; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.lh-item:hover:not(:disabled) { border-color: var(--gold); background: rgba(223,87,121,.08); }
.lh-item.poor { opacity: .55; }
.lh-item.sel { border-color: var(--gold); background: rgba(223,87,121,.14); box-shadow: 0 0 0 1px var(--gold) inset; opacity: 1; }
.lh-sel { position: sticky; top: -18px; z-index: 2; margin: 8px -18px 0; padding: 10px 18px; background: #0c0e2d; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.lh-sel-empty { margin: 0; color: var(--muted); font-size: 12px; }
.lh-sel-main { display: flex; gap: 12px; align-items: center; }
.lh-sel-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lh-sel-info b { color: var(--gold-hi); }
.lh-sel-info small { color: var(--muted); font-size: 12px; }
.lh-sel-info .lh-sel-fx { color: #b8bad0; }
.lh-tree { display: flex; justify-content: center; margin-top: 8px; overflow-x: auto; }
.lh-node { display: flex; flex-direction: column; align-items: center; position: relative; padding: 0 3px; }
.lh-kids { display: flex; gap: 2px; margin-top: 10px; position: relative; padding-top: 8px; border-top: 1px solid var(--gold-dim); }
.lh-kids::before { content: ""; position: absolute; left: 50%; top: -11px; height: 10px; border-left: 1px solid var(--gold-dim); }
.lh-node-btn { display: grid; justify-items: center; gap: 2px; padding: 3px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 6px; color: var(--gold); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.lh-node-btn:hover { border-color: var(--gold); }
.lh-node-btn img, .lh-node-btn .fallback { width: 32px; height: 32px; border-radius: 4px; display: block; }
.lh-node-btn.owned { border-color: var(--good); color: var(--good); }
.lh-node-btn.poor { color: var(--bad); }
.lh-sel-help { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 11px; }
.lh-shop-gold.poor { animation: lh-poor .5s; }
@keyframes lh-poor { 20%, 60% { transform: translateX(-4px); color: var(--bad); } 40%, 80% { transform: translateX(4px); color: var(--bad); } }
.lh-hp.foe i { background: linear-gradient(90deg, #a8322c, #e0514a); }
.lh-item img, .lh-item .fallback { width: 34px; height: 34px; border-radius: 5px; border: 1px solid var(--gold-dim); flex: none; }
.lh-item-txt { flex: 1; min-width: 0; display: grid; }
.lh-item-txt b { font-size: 13px; }
.lh-item-txt small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-cost { display: grid; justify-items: end; font-weight: 700; color: var(--gold); font-size: 13px; white-space: nowrap; }
.lh-cost .ico, .lh-cost svg { width: 12px; height: 12px; display: none; }
.lh-cost.disc { color: var(--good); }
.lh-cost em { font-style: normal; font-weight: 500; font-size: 10px; color: var(--muted); }
.lh-shop-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; position: sticky; bottom: -18px; background: #0a0c27; padding: 10px 0 2px; }
@media (max-width: 760px) {
  .lh-hud { grid-template-columns: 1fr 1fr; }
  .lh-center { grid-column: 1 / -1; grid-row: 1; max-width: none; grid-auto-flow: column; }
  .lh-center small { display: none; }
}

.stat-chip { display: inline-flex; align-items: center; gap: 5px; }
.stat-chip .si { width: 14px; height: 14px; }

/* Quitte ou double */
.arc-hud { display: flex; gap: 8px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.arc-hud-i { display: grid; justify-items: center; min-width: 78px; padding: 5px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.arc-hud-i span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.arc-hud-i b { font-family: Cinzel, serif; font-size: 17px; color: var(--gold-hi); }
.arc-hud-i b.hot { color: #ffb257; text-shadow: 0 0 14px rgba(255, 150, 60, .6); }
.arc-hearts { display: flex; gap: 3px; }
.arc-hearts i { width: 17px; height: 17px; color: rgba(255, 255, 255, .16); }
.arc-hearts i.on { color: #ff6f6a; filter: drop-shadow(0 0 5px rgba(255, 90, 80, .6)); }
.arc-hearts .ico { width: 17px; height: 17px; }
.arc-hero { max-width: 760px; margin: 0 auto; text-align: center; }
.arc-hero h1 { font-size: 40px; margin: 6px 0 4px; }
.arc-best { display: grid; justify-items: center; gap: 2px; margin: 16px auto; padding: 14px 22px; width: fit-content; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--gold-dim); box-shadow: var(--glow-gold); }
.arc-best span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.arc-best b { font-family: Cinzel, serif; font-size: 30px; color: var(--gold-hi); }
.arc-best em { font-style: normal; font-size: 12px; color: var(--muted); }
.arc-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 18px 0; text-align: left; }
.arc-rules div { padding: 11px 13px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.arc-rules b { display: block; color: var(--gold-hi); font-size: 13px; margin-bottom: 2px; }
.arc-rules span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.arc-runs { list-style: none; padding: 0; margin: 10px auto 0; max-width: 460px; display: grid; gap: 6px; }
.arc-runs li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.arc-runs li b { font-family: Cinzel, serif; color: var(--gold-hi); }
.arc-runs li span { flex: 1; color: var(--muted); font-size: 12px; text-align: left; }
.arc-runs li em { font-style: normal; color: var(--muted); font-size: 11px; }

.arc-timer { max-width: 720px; margin: 0 auto 12px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); overflow: hidden; }
.arc-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ae28e7, #e3b4f7); transition: width .05s linear; }
.arc-timer.hurry i { background: linear-gradient(90deg, #a5352c, #ff6a5c); }
.arc-card { position: relative; max-width: 720px; margin: 0 auto; padding: 20px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.arc-card.bet { border-color: var(--gold); box-shadow: var(--glow-gold); }
.arc-tags { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; white-space: nowrap; }
.arc-tag { padding: 3px 14px; border-radius: 999px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: linear-gradient(180deg, #1a1d51, #11143f); color: var(--gold-hi); border: 1px solid var(--gold-dim); }
.arc-tag.bet { background: linear-gradient(180deg, #e25074, #a0193b); color: #1f0209; border-color: #f8829f; }
.arc-tag.allin { background: linear-gradient(180deg, #d8392c, #7d1d16); color: #fff2ef; border-color: #ff8a7a; animation: arc-tag-pulse 1.1s ease-in-out infinite; }
@keyframes arc-tag-pulse { 50% { box-shadow: 0 0 18px rgba(255, 90, 72, .75); } }

/* Mise à tapis : la carte se met sous tension */
.arc-card.allin { border-color: #ff5a48; animation: arc-tension 1.5s ease-in-out infinite; }
@keyframes arc-tension {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 90, 72, .45), 0 0 22px rgba(224, 81, 74, .3); transform: translate(0, 0); }
  25% { transform: translate(-1.5px, .5px); }
  50% { box-shadow: 0 0 0 2px rgba(255, 90, 72, .95), 0 0 48px rgba(224, 81, 74, .55); transform: translate(1.5px, -.5px); }
  75% { transform: translate(.5px, 1.5px); }
}
/* Mise à tapis gagnée : bordure arc-en-ciel */
.arc-card.jackpot { border-color: transparent; box-shadow: 0 0 46px rgba(255, 215, 130, .45); animation: arc-jackpot .5s cubic-bezier(.2, 1.4, .4, 1); }
.arc-card.jackpot::before {
  content: ""; position: absolute; inset: -3px; border-radius: 15px; padding: 3px; pointer-events: none;
  background: linear-gradient(90deg, #ff4d4d, #ffb347, #ffe66d, #6bff9e, #d796f3, #b57bff, #ff4d4d);
  background-size: 400% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: arc-rainbow 1.1s linear infinite;
}
@keyframes arc-rainbow { to { background-position: 400% 0; } }
@keyframes arc-jackpot { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
.arc-jackpot-txt { display: block; font-family: Cinzel, serif; font-size: 22px; letter-spacing: .18em; background: linear-gradient(90deg, #ff4d4d, #ffb347, #ffe66d, #6bff9e, #d796f3, #b57bff, #ff4d4d); background-size: 400% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: arc-rainbow 1.1s linear infinite; }
.arc-media { display: grid; place-items: center; margin-bottom: 10px; }
.arc-media img, .arc-media .fallback { width: 74px; height: 74px; border-radius: 12px; border: 1px solid var(--gold-dim); }
.arc-media .arc-champ img, .arc-media .arc-champ .fallback { border-radius: 50%; }
.arc-q { text-align: center; font-size: 17px; line-height: 1.5; margin-bottom: 16px; }
.arc-q b { color: var(--gold-hi); }
.arc-fx { display: inline-block; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13.5px; color: var(--text); font-style: italic; }
.arc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
@media (max-width: 560px) { .arc-opts { grid-template-columns: 1fr; } }
.arc-opt { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); color: var(--text); text-align: left; font: inherit; transition: border-color .15s, background .15s, transform .12s; }
.arc-opt:hover:not(:disabled) { border-color: var(--gold); background: rgba(223, 87, 121, .1); transform: translateY(-1px); }
.arc-opt:disabled { cursor: default; }
.arc-key { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, .06); }
.arc-opt-img img, .arc-opt-img .fallback { width: 34px; height: 34px; border-radius: 8px; display: block; }
.arc-opt-txt { flex: 1; font-size: 13.5px; }
.arc-opt.good { border-color: var(--good); background: rgba(58, 190, 140, .16); animation: arc-pop .3s ease; }
.arc-opt.wrong { border-color: var(--bad); background: rgba(224, 81, 74, .16); animation: arc-nope .35s ease; }
@keyframes arc-pop { 50% { transform: scale(1.03); } }
@keyframes arc-nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.arc-fb { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); animation: fade-up .25s ease; }
.arc-fb-line { font-size: 15px; margin-bottom: 4px; }
.arc-fb-line b.win { color: var(--good); font-family: Cinzel, serif; font-size: 19px; }
.arc-fb-line b.lose { color: var(--bad); font-family: Cinzel, serif; font-size: 19px; }
.arc-fb-line span { color: var(--muted); font-size: 12.5px; }
.arc-won { color: var(--gold-hi) !important; font-weight: 700; }
.arc-fb p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.arc-betbox { text-align: center; }
.arc-betbox h2 { margin: 0 0 4px; }
.arc-bet-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.arc-bet-btn { display: grid; gap: 2px; padding: 14px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(223, 87, 121, .16), rgba(223, 87, 121, .05)); border: 1px solid var(--gold-dim); color: var(--text); font: inherit; transition: transform .14s, box-shadow .14s, border-color .14s; }
.arc-bet-btn:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--glow-gold); }
.arc-bet-btn b { font-family: Cinzel, serif; font-size: 19px; color: var(--gold-hi); }
.arc-bet-btn span { font-size: 12px; color: var(--text); }
.arc-bet-btn em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.arc-bet-btn.safe { background: rgba(255, 255, 255, .04); border-color: var(--line); }
.arc-bet-btn.safe b { color: var(--text); }
.arc-bet-btn.all { background: linear-gradient(180deg, rgba(224, 81, 74, .3), rgba(224, 81, 74, .08)); border-color: #ff6a5c; animation: arc-allin 1.6s ease-in-out infinite; }
.arc-bet-btn.all b { color: #ff9d90; }
@keyframes arc-allin { 50% { box-shadow: 0 0 22px rgba(224, 81, 74, .45); } }
.arc-end-score { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin: 14px 0 6px; }
.arc-rank { display: grid; justify-items: center; padding: 10px 20px; border-radius: 14px; border: 1px solid var(--rk); box-shadow: 0 0 26px color-mix(in srgb, var(--rk) 35%, transparent); }
.arc-rank span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.arc-rank b { font-family: Cinzel, serif; font-size: 28px; color: var(--rk); }
.arc-final { display: grid; justify-items: center; }
.arc-final span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.arc-final b { font-family: Cinzel, serif; font-size: 38px; color: var(--gold-hi); }
.arc-final em { font-style: normal; font-size: 12px; color: var(--muted); }
.arc-final em.rec { color: var(--good); font-weight: 700; }
.arc-next { color: var(--muted); font-size: 13px; }
.arc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.arc-stat { display: grid; gap: 2px; padding: 10px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.arc-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.arc-stat b { font-family: Cinzel, serif; font-size: 20px; color: var(--gold-hi); }

#arc-shop-box { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
#arc-shop-box h3 { margin: 0 0 4px; }
.arc-bank { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(180deg, rgba(223, 87, 121, .2), rgba(223, 87, 121, .06)); border: 1px solid var(--gold-dim); margin-bottom: 14px; }
.arc-bank .ico { width: 18px; height: 18px; color: var(--gold-hi); }
.arc-bank span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.arc-bank b { font-family: Cinzel, serif; font-size: 19px; color: var(--gold-hi); }
.arc-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; text-align: left; }
.arc-up { display: grid; gap: 4px; padding: 13px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.arc-up.owned { border-color: var(--good); background: linear-gradient(180deg, rgba(58, 190, 140, .12), var(--panel)); }
.arc-up-ic { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: rgba(223, 87, 121, .14); border: 1px solid var(--gold-dim); color: var(--gold-hi); }
.arc-up-ic .ico { width: 18px; height: 18px; }
.arc-up b { color: var(--gold-hi); font-size: 13.5px; }
.arc-up-txt { color: var(--muted); font-size: 12px; line-height: 1.45; min-height: 34px; }
.arc-up .btn { justify-self: start; }
.arc-up-ok { font-style: normal; font-size: 12px; color: var(--good); display: flex; align-items: center; gap: 5px; }
.arc-up-ok .ico { width: 14px; height: 14px; }
.arc-joker { margin-top: 12px; }
.arc-opt.gone { opacity: .22; filter: grayscale(1); }
.arc-bank-line { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.arc-bank-line b { color: var(--gold-hi); }
.arc-bank-line .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--gold); }
#arc-end-next b.rec { color: var(--good); }

/* Pluie de pièces quand une mise est gagnée */
#arc-coins { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#arc-coins i {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; margin: -9px 0 0 -9px;
  background: radial-gradient(circle at 34% 30%, #fdd2dd 0%, #f0c95a 42%, #c40e3b 100%);
  box-shadow: 0 0 12px rgba(240, 200, 90, .8), inset 0 0 0 2px rgba(252, 207, 218, .55);
  animation: arc-coin 1.5s cubic-bezier(.25, .8, .5, 1) forwards;
}
@keyframes arc-coin {
  0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .6), var(--dy)) scale(1) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(var(--dx), 60vh) scale(.9) rotate(var(--rot)); opacity: 0; }
}
.arc-coin-txt {
  position: absolute; transform: translate(-50%, -50%); font-family: Cinzel, serif; font-size: 40px; color: var(--gold-hi);
  text-shadow: 0 0 26px rgba(240, 200, 90, .9), 0 4px 12px rgba(0, 0, 0, .8); white-space: nowrap;
  animation: arc-coin-txt 1.8s ease-out forwards;
}
@keyframes arc-coin-txt {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30% { transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}

@media (max-width: 620px) {
  .arc-hud { width: 100%; justify-content: space-between; gap: 5px; }
  .arc-hud-i { min-width: 0; flex: 1; padding: 4px 6px; }
  .arc-hud-i b { font-size: 15px; }
  .arc-hearts i, .arc-hearts .ico { width: 14px; height: 14px; }
  .arc-hero h1 { font-size: 30px; }
  .arc-q { font-size: 15.5px; }
  .dr-timer { width: 100%; }
}

/* Simulateur de draft */
.dr-grid { display: grid; grid-template-columns: 210px 1fr 210px; gap: 14px; align-items: start; }
.dr-side h3 { margin: 0 0 8px; font-size: 14px; }
.dr-side.blue h3 { color: #e3b4f7; }
.dr-side.red h3 { color: #ff8a7a; }
.dr-bans { display: flex; gap: 4px; margin-bottom: 10px; }
.dr-ban { width: 30px; height: 30px; border-radius: 6px; border: 1px dashed var(--line); overflow: hidden; }
.dr-ban.full { border-style: solid; border-color: var(--bad); position: relative; }
.dr-ban.full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 45%, var(--bad) 45%, var(--bad) 55%, transparent 55%); opacity: .8; }
.dr-ban.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(223,87,121,.5); }
.dr-ban img, .dr-ban .fallback { width: 100%; height: 100%; display: block; filter: grayscale(1); }
.dr-picks { display: grid; gap: 6px; }
.dr-slot { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.dr-slot span { color: var(--muted); font-size: 12px; padding-left: 6px; }
.dr-slot.active { border-color: var(--gold); box-shadow: 0 0 14px rgba(223,87,121,.25); }
.dr-slot.full { background: rgba(255,255,255,.04); }
.dr-slot img, .dr-slot .fallback { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.dr-slot b { font-size: 13px; color: var(--gold-hi); display: block; }
.dr-slot small { font-size: 11px; color: var(--muted); }
.dr-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.dr-champ { display: grid; justify-items: center; gap: 3px; padding: 5px 2px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 10.5px; cursor: pointer; }
.dr-champ img, .dr-champ .fallback { width: 42px; height: 42px; border-radius: 50%; }
.dr-champ:hover:not(.taken) { border-color: var(--gold); }
.dr-champ.sel { border-color: var(--gold); background: rgba(223,87,121,.16); box-shadow: 0 0 12px rgba(223,87,121,.3); }
.dr-champ.taken { opacity: .25; filter: grayscale(1); cursor: not-allowed; }
#draft-lock { width: 100%; margin-top: 10px; transition: background .2s, border-color .2s, box-shadow .2s; }
#draft-lock.ban { background: linear-gradient(180deg, #a5352c, #5c1a15); border-color: #ff6a5c; box-shadow: 0 6px 18px rgba(224, 81, 74, .28); }
#draft-lock.ban:hover:not(:disabled) { background: linear-gradient(180deg, #c04136, #6d201a); box-shadow: 0 0 16px rgba(224, 81, 74, .45); }
#draft-lock.pick { background: linear-gradient(180deg, #1c5fa8, #0c1157); border-color: #4fb0ff; box-shadow: 0 6px 18px rgba(63, 167, 255, .28); }
#draft-lock.pick:hover:not(:disabled) { background: linear-gradient(180deg, #2273c7, #0f1569); box-shadow: 0 0 16px rgba(63, 167, 255, .45); }
.dr-syn { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 6px; }
.dr-syn-line b { display: block; font-size: 12px; color: var(--good); }
.dr-syn-line small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.dr-syn-line.none { font-size: 12px; color: var(--muted); }
.dr-syn-line .ico { width: 12px; height: 12px; vertical-align: -2px; }
/* Chrono du tour */
.dr-timer { display: flex; align-items: center; gap: 10px; min-width: 230px; flex: 0 1 300px; }
.dr-timer-num { font-family: Cinzel, serif; font-size: 26px; line-height: 1; color: var(--gold-hi); min-width: 34px; text-align: right; text-shadow: 0 0 16px rgba(223, 87, 121, .35); }
.dr-timer-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); overflow: hidden; box-shadow: inset 0 1px 4px rgba(0, 0, 0, .5); }
.dr-timer-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f7dd1, #e3b4f7); box-shadow: 0 0 14px rgba(63, 167, 255, .55); transition: width .1s linear; }
.dr-timer.ban .dr-timer-bar i { background: linear-gradient(90deg, #a5352c, #ff8a7a); box-shadow: 0 0 14px rgba(224, 81, 74, .55); }
.dr-timer.warn .dr-timer-bar i { background: linear-gradient(90deg, #cc0b3b, #f0c04a); }
.dr-timer.warn .dr-timer-num { color: #f0c04a; }
.dr-timer.hurry .dr-timer-bar i { background: linear-gradient(90deg, #a5352c, #ff5a48); }
.dr-timer.hurry .dr-timer-num { color: #ff7a68; animation: dr-blink .5s steps(2) infinite; }
.dr-timer.mine.hurry { animation: dr-shake .45s ease-in-out infinite; }
@keyframes dr-blink { to { opacity: .35; } }
@keyframes dr-shake { 0%, 100% { transform: none; } 50% { transform: translateX(2px); } }
.dr-ban.skip { border-style: solid; border-color: var(--line); background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 4px, transparent 4px 8px); }

/* Animation de bannissement : le champion s'affiche en grand, barré */
#draft-ban-fx {
  position: fixed; inset: 0; z-index: 1002; display: grid; place-items: center;
  background: radial-gradient(circle at center, rgba(3, 4, 18, .62), rgba(2, 2, 12, .92));
  pointer-events: none; animation: dbf-in .25s ease;
}
#draft-ban-fx[hidden] { display: none; }
.dbf-card { position: relative; width: min(420px, 74vw); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 2px solid var(--bad); box-shadow: 0 0 60px rgba(224, 81, 74, .45); animation: dbf-pop .45s cubic-bezier(.2, 1.4, .4, 1); }
#draft-ban-fx.blue .dbf-card { border-color: #e3b4f7; box-shadow: 0 0 60px rgba(63, 167, 255, .4); }
.dbf-art { position: absolute; inset: 0; background-size: cover; background-position: center 22%; filter: grayscale(1) contrast(1.15) brightness(.72); animation: dbf-zoom 1.8s ease-out both; }
.dbf-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(4, 5, 18, .95) 100%); }
.dbf-slash { position: absolute; inset: 0; z-index: 2; }
.dbf-slash::before, .dbf-slash::after {
  content: ""; position: absolute; left: 6%; top: 50%; width: 88%; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--bad) 18%, #ff9d90 50%, var(--bad) 82%, transparent);
  box-shadow: 0 0 22px rgba(224, 81, 74, .9);
  transform-origin: center; transform: rotate(-24deg) scaleX(0);
  animation: dbf-slash .45s .18s cubic-bezier(.2, .9, .3, 1) forwards;
}
.dbf-slash::after { transform: rotate(24deg) scaleX(0); animation-name: dbf-slash2; animation-delay: .34s; }
.dbf-label { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: grid; justify-items: center; gap: 2px; text-align: center; animation: dbf-up .4s .3s both; }
.dbf-label span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dbf-label b { font-family: Cinzel, serif; font-size: 30px; letter-spacing: .22em; color: #ff8a7a; text-shadow: 0 0 26px rgba(224, 81, 74, .8); }
.dbf-label em { font-style: normal; font-size: 15px; color: var(--gold-hi); }
@keyframes dbf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dbf-pop { 0% { opacity: 0; transform: scale(.82) rotate(-2deg); } 100% { opacity: 1; transform: none; } }
@keyframes dbf-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes dbf-slash { to { transform: rotate(-24deg) scaleX(1); } }
@keyframes dbf-slash2 { to { transform: rotate(24deg) scaleX(1); } }
@keyframes dbf-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

#draft-phase b.blue { color: #e3b4f7; }
#draft-phase b.red { color: #ff8a7a; }
#draft-phase span { color: var(--muted); }
.dr-scores { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0; }
.dr-score { display: grid; justify-items: center; }
.dr-score span { font-size: 12px; color: var(--muted); }
.dr-score b { font-family: Cinzel, serif; font-size: 44px; }
.dr-score.blue b { color: #e3b4f7; }
.dr-score.red b { color: #ff8a7a; }
.dr-vs { font-family: Cinzel, serif; color: var(--gold); font-size: 20px; }
.dr-verdict { color: var(--gold-hi); font-size: 15px; margin: 0 0 6px; }
.dr-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.dr-team { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.dr-team.blue { border-top: 2px solid #3fa7ff; }
.dr-team.red { border-top: 2px solid #ff5a4f; }
.dr-team h4 { margin: 0 0 8px; font-size: 13px; }
.dr-line { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.dr-line img, .dr-line .fallback { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.dr-line b { font-size: 13px; color: var(--gold-hi); display: block; }
.dr-line small { font-size: 11px; color: var(--muted); }
.dr-crits { display: grid; gap: 8px; }
.dr-crit { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dr-crit-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.dr-crit-h b { color: var(--gold-hi); font-size: 13px; }
.dr-crit-h span { color: var(--muted); font-size: 11.5px; text-align: right; }
.dr-crit-bars { display: grid; gap: 4px; }
.dr-bar { position: relative; height: 14px; border-radius: 4px; background: rgba(255,255,255,.05); overflow: hidden; }
.dr-bar i { position: absolute; inset: 0 auto 0 0; }
.dr-bar.blue i { background: linear-gradient(90deg, #1a228d, #3fa7ff); }
.dr-bar.red i { background: linear-gradient(90deg, #8a221c, #ff5a4f); }
.dr-bar em { position: absolute; right: 6px; top: 0; font-style: normal; font-size: 10px; line-height: 14px; font-weight: 800; color: var(--gold-hi); }
@media (max-width: 900px) { .dr-grid { grid-template-columns: 1fr; } .dr-teams { grid-template-columns: 1fr; } }

/* Atelier de build */
.lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lab-col { display: grid; gap: 14px; }
.lab-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.lab-h { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--blue); }
.lab-head { display: flex; gap: 12px; align-items: center; }
.lab-head b { color: var(--gold-hi); font-size: 18px; display: block; }
.lab-head small { color: var(--muted); font-size: 12px; }
.lab-head > div { flex: 1; min-width: 0; }
.lab-portrait img, .lab-portrait .fallback { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--gold); display: block; }
.lab-level { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.lab-level label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.lab-level b { color: var(--gold-hi); font-size: 15px; }
.lab-level input { flex: 1; accent-color: var(--gold); }
.lab-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.lab-slot { aspect-ratio: 1; border-radius: 8px; border: 1px dashed var(--line); background: rgba(255,255,255,.02); display: grid; place-items: center; position: relative; padding: 0; }
.lab-slot.full { border: 1px solid var(--gold-dim); border-style: solid; cursor: pointer; overflow: hidden; }
.lab-slot.full:hover { border-color: var(--bad); }
.lab-slot img, .lab-slot .fallback { width: 100%; height: 100%; display: block; border-radius: 7px; }
.lab-slot em { position: absolute; right: 2px; bottom: 1px; font-style: normal; font-size: 9px; font-weight: 800; color: var(--gold); background: rgba(3,3,18,.85); border-radius: 3px; padding: 0 3px; }
.lab-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lab-gold { flex: 1; font-size: 13px; font-weight: 700; color: var(--gold); }
.lab-msg { margin: 8px 0 0; font-size: 12px; color: var(--bad); }
.lab-items { display: grid; gap: 5px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.lab-item { display: flex; gap: 9px; align-items: center; text-align: left; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.lab-item:hover { border-color: var(--gold); background: rgba(223,87,121,.08); }
.lab-item img, .lab-item .fallback { width: 32px; height: 32px; border-radius: 6px; flex: none; }
.lab-item span { flex: 1; min-width: 0; display: grid; }
.lab-item b { font-size: 13px; }
.lab-item small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-item em { font-style: normal; font-weight: 700; color: var(--gold); font-size: 12px; }
.lab-stats, .lab-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lab-stat { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; display: grid; }
.lab-stat span { font-size: 11px; color: var(--muted); }
.lab-stat b { color: var(--gold-hi); font-size: 17px; line-height: 1.2; }
.lab-stat em { font-style: normal; font-size: 10.5px; color: var(--good); }
.lab-targets { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.lab-champ-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-height: 60vh; overflow-y: auto; margin-top: 12px; }
.lab-champ-opt { display: grid; justify-items: center; gap: 4px; padding: 7px 4px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.lab-champ-opt img, .lab-champ-opt .fallback { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.lab-champ-opt:hover, .lab-champ-opt.on { border-color: var(--gold); background: rgba(223,87,121,.1); }
@media (max-width: 900px) { .lab-grid { grid-template-columns: 1fr; } }

/* Encyclopédie des champions */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.dex-card { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, transform .12s; }
.dex-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.dex-art img, .dex-art .fallback { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold-dim); display: block; }
.dex-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dex-info b { color: var(--gold-hi); font-size: 15px; }
.dex-info small { color: var(--muted); font-size: 12px; }
.dex-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.dex-tags em, .dex-head-tags em { font-style: normal; font-size: 10.5px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.dex-tags .lane-ic, .dex-head-tags .lane-ic { width: 13px; height: 13px; margin: 0; }
.dex-dmg.AD { color: #e98f3c; border-color: rgba(233,143,60,.5); }
.dex-dmg.AP { color: #a97df2; border-color: rgba(169,125,242,.5); }
.dex-strength { font-size: 11.5px; color: var(--gold); margin-top: 2px; }
.dex-strength .ico { width: 12px; height: 12px; vertical-align: -2px; }
.dex-strength.big { font-size: 14px; color: var(--gold-hi); margin-bottom: 6px; }
.dex-pick { display: grid; justify-items: center; font-weight: 800; color: var(--gold); font-size: 13px; }
.dex-pick em { font-style: normal; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dex-head { display: flex; gap: 16px; align-items: center; background-size: cover; background-position: center 22%; border-radius: 10px; padding: 18px; margin: -4px 0 12px; padding-right: 44px; }
.dex-head-img img, .dex-head-img .fallback { width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--gold); display: block; box-shadow: 0 0 24px rgba(0,0,0,.6); }
.dex-head h2 { margin: 0; font-size: 28px; }
.dex-head p { margin: 2px 0 8px; color: var(--gold); font-size: 13px; }
.dex-head-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dex-head-tags em { background: rgba(3,3,18,.6); }
.dex-lore { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.dex-p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; }
.dex-p.muted { color: var(--muted); }
.dex-items, .dex-build-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dex-item { padding: 0; background: none; border: none; cursor: pointer; line-height: 0; }
.dex-item img, .dex-item .fallback { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--gold-dim); }
.dex-item:hover img { border-color: var(--gold); }
.dex-spells { display: grid; gap: 8px; }
.dex-spell { display: flex; gap: 10px; }
.dex-key { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--gold-hi); background: rgba(223,87,121,.14); border: 1px solid var(--gold-dim); }
.dex-spell b { font-size: 13px; }
.dex-spell small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 1px; }
.dex-play { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 20px; background: rgba(223,87,121,.1); border: 1px solid var(--gold-dim); color: var(--gold); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; vertical-align: 1px; }
.dex-play:hover, .dex-play.on { border-color: var(--gold); color: var(--gold-hi); background: rgba(223,87,121,.2); }
.dex-play .ico { width: 11px; height: 11px; }
.dex-video { margin-top: 7px; border-radius: 8px; overflow: hidden; border: 1px solid var(--gold-dim); background: #05050c; }
.dex-video video { display: block; width: 100%; max-width: 420px; }
.dex-video.failed { padding: 8px 10px; font-size: 12px; color: var(--muted); border-color: var(--line); }
.dex-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dex-stat { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; display: grid; }
.dex-stat span { font-size: 11px; color: var(--muted); }
.dex-stat b { color: var(--gold-hi); font-size: 14px; }
.dex-stat em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.dex-bars { display: grid; gap: 4px; margin-top: 10px; }
.dex-bars > div { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.dex-dots { display: inline-flex; gap: 3px; }
.dex-dots i { width: 9px; height: 9px; border-radius: 2px; background: rgba(255,255,255,.12); }
.dex-dots i.on { background: var(--gold); }
.dex-build { margin-bottom: 12px; }
.dex-build h5 { margin: 0 0 6px; font-size: 12px; color: var(--gold-hi); display: flex; align-items: center; gap: 6px; }
.dex-build h5 .lane-ic { width: 15px; height: 15px; margin: 0; }
.dex-build-row { margin-bottom: 5px; font-size: 11px; color: var(--muted); }
.dex-build-row > span:first-child { min-width: 78px; }
.dex-slot { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 6px; background: rgba(255,255,255,.03); }
.dex-slot em { font-style: normal; font-size: 10px; color: var(--gold-dim); margin-right: 2px; }
@media (max-width: 700px) { .dex-head { flex-direction: column; text-align: center; } .dex-head-tags { justify-content: center; } }

/* Runes */
.rune-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.rune-steps > div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 4px; align-content: start; }
.rune-steps [data-icon] { color: var(--gold); }
.rune-steps [data-icon] .ico, .rune-steps [data-icon] svg { width: 20px; height: 20px; }
.rune-steps small { color: var(--muted); line-height: 1.5; }
.rune-steps b { color: var(--gold-hi); }
.rune-chip { display: inline-flex; align-items: center; gap: 6px; }
.rune-chip img { width: 20px; height: 20px; }
.rune-chip.on { border-color: var(--rune); color: var(--gold-hi); background: color-mix(in srgb, var(--rune) 14%, transparent); }
.rune-path-head { display: flex; gap: 14px; align-items: center; margin: 14px 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--rune); }
.rune-path-head img { width: 52px; height: 52px; flex: none; }
.rune-path-head b { color: var(--rune); }
.rune-path-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.rune-h { margin: 18px 0 8px; font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.rune-h small { text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; margin-left: 8px; }
.rune-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.rune-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.rune-card.keystone { background: color-mix(in srgb, var(--rune) 8%, rgba(255,255,255,.03)); border-color: color-mix(in srgb, var(--rune) 45%, var(--line)); }
.rune-card img { width: 44px; height: 44px; flex: none; }
.rune-card.keystone img { width: 54px; height: 54px; }
.rune-card b { color: var(--gold-hi); font-size: 14px; }
.rune-card small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.rune-card em { display: block; font-style: normal; margin-top: 6px; font-size: 12.5px; color: var(--rune); line-height: 1.5; }
.rune-card em .ico, .rune-card em svg { width: 13px; height: 13px; vertical-align: -2px; }
.rune-shard-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rune-shard-row > b { color: var(--gold); min-width: 100px; font-size: 13px; }
.rune-shard-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; flex: 1; }
.rune-shard { display: flex; gap: 8px; align-items: flex-start; }
.rune-shard img { width: 30px; height: 30px; flex: none; }
.rune-shard b { font-size: 13px; }
.rune-shard small { display: block; color: var(--muted); font-size: 12px; }
.rune-shard em { display: block; font-style: normal; color: var(--gold-dim); font-size: 12px; margin-top: 2px; }
.rune-mini { display: grid; place-items: center; border-color: var(--rune) !important; background: color-mix(in srgb, var(--rune) 12%, transparent); }
.rune-mini img { width: 26px; height: 26px; }
.rune-page { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.rune-page h3 { margin: 0 0 10px; font-size: 17px; }
.rune-page-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rune-col { display: grid; gap: 6px; align-content: start; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-top: 2px solid var(--rune); }
.rune-col-h { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--rune); }
.rune-col-h img { width: 16px; height: 16px; }
.rune-slot { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.rune-slot img { width: 30px; height: 30px; }
.rune-slot.key img { width: 42px; height: 42px; }
.rune-slot.key span { color: var(--gold-hi); font-weight: 700; }
.rune-frags { display: flex; gap: 6px; }
.rune-frags img { width: 24px; height: 24px; }
.rune-why { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 700px) { .rune-page-cols { grid-template-columns: 1fr; } }

/* Grandes cartes « Apprendre » */
.learn-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.learn-hero { position: relative; display: block; text-align: left; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow); transition: border-color .18s, transform .18s, box-shadow .18s; }
.learn-hero:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--glow-gold); }
.learn-hero-art { position: absolute; inset: 0; background-size: cover; background-position: center 20%; opacity: .55; transition: transform .4s ease, opacity .3s; }
.learn-hero:hover .learn-hero-art { transform: scale(1.06); opacity: .7; }
.learn-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 22, .35) 0%, rgba(6, 7, 26, .92) 62%, rgba(6, 7, 26, .98) 100%); }
.learn-hero-body { position: relative; z-index: 1; display: grid; gap: 4px; padding: 88px 16px 16px; }
.learn-hero-body em { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(223, 87, 121, .3), rgba(174, 40, 231, .14)); border: 1px solid var(--gold-dim); margin-bottom: 4px; }
.learn-hero-body em .ico, .learn-hero-body em svg { width: 20px; height: 20px; color: var(--gold-hi); }
.learn-hero-body b { font-family: Cinzel, serif; font-size: 17px; color: var(--gold-hi); }
.learn-hero-body > span { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.learn-hero-body i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--gold); margin-top: 4px; }

/* Bandeau de progression sur l'accueil */
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 18px 0 4px; }
.home-stat { position: relative; display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.home-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.home-stat b { font-family: Cinzel, serif; font-size: 24px; color: var(--gold-hi); }
.home-stat em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.home-stat .ico { position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; color: var(--gold-dim); }
.home-sub { margin: -6px 0 12px; color: var(--muted); font-size: 13px; }

/* Poussière d'étoiles : deux couches qui défilent à des vitesses différentes */
#bg-stars { position: fixed; inset: -50% -10%; z-index: -3; pointer-events: none; opacity: .42; }
#bg-stars::before, #bg-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(254, 231, 237, 1), transparent),
    radial-gradient(1.6px 1.6px at 38% 8%, rgba(205, 225, 255, .95), transparent),
    radial-gradient(2.2px 2.2px at 62% 31%, rgba(253, 222, 230, .9), transparent),
    radial-gradient(1.5px 1.5px at 81% 14%, rgba(229, 195, 243, .95), transparent),
    radial-gradient(1.9px 1.9px at 27% 47%, rgba(254, 231, 237, .9), transparent),
    radial-gradient(1.4px 1.4px at 71% 55%, rgba(205, 225, 255, .85), transparent),
    radial-gradient(2.1px 2.1px at 48% 68%, rgba(253, 212, 222, .9), transparent),
    radial-gradient(1.6px 1.6px at 90% 73%, rgba(229, 195, 243, .8), transparent),
    radial-gradient(1.7px 1.7px at 6% 84%, rgba(254, 231, 237, .85), transparent),
    radial-gradient(1.4px 1.4px at 33% 93%, rgba(205, 225, 255, .8), transparent),
    radial-gradient(2px 2px at 57% 80%, rgba(253, 212, 222, .85), transparent),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(229, 195, 243, .8), transparent);
  background-size: 300px 300px;
}
#bg-stars::before { animation: stars-a 190s linear infinite, twinkle 11s ease-in-out infinite alternate; }
#bg-stars::after { background-size: 470px 470px; transform: scale(1.4) rotate(12deg); opacity: .5; animation: stars-b 260s linear infinite, twinkle 15s ease-in-out infinite alternate-reverse; }
@keyframes stars-a { to { transform: translate3d(-10%, -14%, 0); } }
@keyframes stars-b { to { transform: scale(1.4) rotate(12deg) translate3d(12%, 16%, 0); } }
@keyframes twinkle { from { opacity: .5; } to { opacity: .85; } }

/* La lueur du titre respire doucement */
.hero h1 { animation: title-glow 7s ease-in-out infinite alternate; }
@keyframes title-glow {
  from { filter: drop-shadow(0 0 16px rgba(223, 87, 121, .16)); }
  to { filter: drop-shadow(0 0 26px rgba(223, 87, 121, .3)); }
}

/* Ambiance de fond : halos qui dérivent, cercle runique, poussières dorées */
#bg-aura { position: fixed; inset: -20%; z-index: -3; pointer-events: none; opacity: .5; }
#bg-aura::before, #bg-aura::after {
  content: ""; position: absolute; width: 65vw; height: 65vw; border-radius: 50%; filter: blur(60px);
}
#bg-aura::before { left: -10vw; top: -10vh; background: radial-gradient(circle, rgba(177, 49, 232, .18), transparent 65%); animation: aura-a 48s ease-in-out infinite alternate; }
#bg-aura::after { right: -15vw; top: 10vh; background: radial-gradient(circle, rgba(234, 86, 123, .18), transparent 65%); animation: aura-b 62s ease-in-out infinite alternate; }
@keyframes aura-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(10vw, 12vh, 0) scale(1.15); } }
@keyframes aura-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-12vw, 8vh, 0) scale(1); } }
#bg-rune {
  position: fixed; top: -14vh; left: 50%; width: 76vh; height: 76vh; margin-left: -38vh; z-index: -2; pointer-events: none;
  border-radius: 50%; border: 1px dashed rgba(223, 87, 121, .2);
  box-shadow: inset 0 0 120px rgba(223, 87, 121, .08);
  animation: rune-spin 120s linear infinite;
}
#bg-rune::before, #bg-rune::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(223, 87, 121, .08); }
#bg-rune::before { inset: 9%; border-style: dotted; }
#bg-rune::after { inset: 22%; border-color: rgba(174, 40, 231, .07); }
@keyframes rune-spin { to { transform: rotate(360deg); } }
#bg-hex { animation: hex-drift 90s linear infinite; }
@keyframes hex-drift { to { background-position: 56px 98px; } }
@media (max-width: 700px) { #bg-rune { display: none; } #bg-aura { opacity: .35; } }

/* Menus déroulants de la navigation */
.nav-links { overflow: visible; }
@media (max-width: 900px) { .nav-links { overflow-x: auto; } }
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--muted); font-weight: 600; font-size: 13px; padding: 10px 11px; border-radius: 8px; }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: var(--gold-hi); background: rgba(255, 255, 255, .05); }
.nav-drop.on .nav-drop-btn { color: var(--gold-hi); background: rgba(223, 87, 121, .1); }
.nav-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .8; transition: transform .2s; }
.nav-drop.open .nav-caret { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px; display: none; flex-direction: column; padding: 6px; gap: 2px; background: linear-gradient(180deg, #13163d, #0b0d2c); border: 1px solid var(--gold-dim); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); z-index: 60; }
.nav-drop.open .nav-menu { display: flex; animation: page-in .16s ease-out both; }
.nav-menu button { text-align: left; background: none; border: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 7px; white-space: nowrap; }
.nav-menu button:hover { background: rgba(223, 87, 121, .12); color: var(--gold-hi); }
.nav-menu button.on { color: var(--gold-hi); background: rgba(223, 87, 121, .18); }
.nav-menu button.on::after { display: none; }
@media (max-width: 900px) { .nav-menu { position: fixed; left: 8px; right: 8px; min-width: 0; } }

/* ====== Finitions visuelles (ajoutées en dernier) ====== */
:root {
  --panel: #0f1234;
  --panel2: #151840;
  --line: #1f2461;
  --radius: 12px;
  --shadow: 0 14px 34px rgba(0, 0, 0, .38);
  --glow-gold: 0 0 0 1px rgba(223, 87, 121, .35), 0 8px 26px rgba(223, 87, 121, .14);
}
html {
  background:
    radial-gradient(900px 480px at 12% -6%, rgba(174, 40, 231, .10), transparent 65%),
    radial-gradient(1100px 620px at 88% 0%, rgba(223, 87, 121, .10), transparent 60%),
    radial-gradient(1200px 700px at 50% -10%, #0a0d41 0%, var(--bg) 62%) fixed,
    var(--bg);
}
/* Indispensable : un fond opaque sur <body> masquerait toutes les couches d'ambiance */
body { background: transparent !important; }
::selection { background: rgba(223, 87, 121, .3); color: #fff; }
/* Barres de défilement discrètes, aux couleurs du site */
* { scrollbar-width: thin; scrollbar-color: rgba(223, 87, 121, .45) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(255, 255, 255, .03); border-radius: 8px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(223, 87, 121, .55), rgba(140, 20, 50, .55)); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-dim)); }

/* Barre de navigation */
.navbar { box-shadow: 0 8px 26px rgba(0, 0, 0, .35); }
.nav-links button { position: relative; border-bottom: none; padding: 10px 11px; border-radius: 8px; transition: color .15s, background .15s; }
.nav-links button::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transform: scaleX(0); transition: transform .2s ease; }
.nav-links button:hover { background: rgba(255, 255, 255, .04); }
.nav-links button.on { background: rgba(223, 87, 121, .08); }
.nav-links button.on::after { transform: scaleX(1); }
.brand { letter-spacing: .04em; text-shadow: 0 0 22px rgba(223, 87, 121, .35); }

/* Titres de page et de section */
section > h1 { position: relative; padding-bottom: 10px; }
section > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 72px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--gold), transparent); }
.page-intro { max-width: 78ch; line-height: 1.65; }

/* Cartes et panneaux : coins plus doux, lumière en haut, ombre portée */
.tile, .learn-card, .lab-box, .dr-team, .dr-crit, .rune-page, .icard, .rv, .lh-panel, .cq-card, .modal-box, .dex-card {
  border-radius: var(--radius);
}
.tile, .learn-card, .lab-box, .dr-team, .dr-crit, .rune-page, .cq-card, .lh-panel {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
}
.tile::before, .learn-card::before, .lab-box::before, .cq-card::before, .rune-page::before {
  content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.learn-card, .lab-box, .cq-card, .rune-page, .dr-crit { position: relative; }
.learn-card:hover, .dex-card:hover, .icard:hover { box-shadow: var(--glow-gold); }

/* Boutons */
.btn { border-radius: 8px; letter-spacing: .01em; }
/* bouton principal : le cramoisi de la plume de Itemyze, avec son cœur lumineux */
.btn.primary { background: linear-gradient(180deg, #e0375f, #9a173c); border-color: rgba(255, 102, 140, .85); box-shadow: 0 6px 18px rgba(255, 60, 110, .22), inset 0 1px 0 rgba(255, 200, 170, .35); }
.btn.primary:hover { background: linear-gradient(180deg, #ec4069, #a81a42); }
.btn.ghost:hover { color: var(--gold-hi); border-color: var(--gold-dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Chips, champs de recherche et listes déroulantes */
.chip { border-radius: 20px; transition: border-color .15s, background .15s, color .15s, transform .1s; }
.chip:hover { transform: translateY(-1px); }
.chip.on { box-shadow: inset 0 0 0 1px rgba(223, 87, 121, .45); }
.search, .select { border-radius: 9px; transition: border-color .15s, box-shadow .15s; }
.search:focus, .select:focus, input:focus-visible, button:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 87, 121, .18); }

/* Apparition douce du contenu à chaque changement de page */
section:not([hidden]) { animation: page-in .28s ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Barres de progression et blocs de statistiques */
.bar { border-radius: 20px; overflow: hidden; }
.bar span { box-shadow: 0 0 12px rgba(223, 87, 121, .45); }
.stat-pill { border-radius: 20px; }

/* Fiches d'items et de champions */
.idt-sec { border-radius: 10px; background: rgba(0, 0, 0, .28); }
.modal-box { box-shadow: 0 30px 70px rgba(0, 0, 0, .75); }

/* Images plus nettes et sans bord blanc au chargement */
img { -webkit-user-drag: none; }

.tile:hover .tile-art { transform: scale(1.02); }
.tile-art { transition: filter .2s, transform .3s ease; }

/* ====== Accueil v4 : tableau de bord du joueur, modes en affiches, lumière au survol ====== */
@keyframes hh-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* En-tête : titre, message d'accueil et bouton principal */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; padding: 40px 0 26px; }
.dash-title h1 { font-size: clamp(46px, 5.8vw, 72px); line-height: .95; margin: 0; letter-spacing: .015em; animation: hh-rise .9s cubic-bezier(.16, 1, .3, 1) both, title-glow 7s ease-in-out 1s infinite alternate; }
.dash-title p { margin: 12px 0 0; max-width: 56ch; color: #a6a8c3; font-size: 15.5px; line-height: 1.6; animation: hh-rise .9s .08s cubic-bezier(.16, 1, .3, 1) both; }
.dash-head > .btn { animation: hh-rise .9s .16s cubic-bezier(.16, 1, .3, 1) both; }

/* Grille du tableau de bord : profil à gauche, Mes champions et défi du jour à droite */
.dash { display: grid; grid-template-columns: 336px minmax(0, 1fr); grid-template-areas: "side resume" "side daily"; gap: 16px; align-items: start; }
.dash > * { animation: hh-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.dash > :nth-child(2) { animation-delay: .1s; }
.dash > :nth-child(3) { animation-delay: .2s; }
.dash-side, .dash-daily { position: relative; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); box-shadow: var(--shadow); }
.dash-side::before, .dash-daily::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); }

/* Colonne profil */
.dash-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; padding: 18px; align-self: stretch; }
.dash-rank { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 4px; text-align: left; color: var(--text); border-radius: 14px; border: 1px solid rgba(var(--rc), .35); background: radial-gradient(circle at 22% 50%, rgba(var(--rc), .2), transparent 62%), rgba(1, 10, 19, .35); transition: border-color .25s, background .25s; }
.dash-rank:hover { border-color: rgba(var(--rc), .75); }
.dr-emblem { position: relative; flex: none; width: 112px; height: 88px; overflow: hidden; }
.dr-emblem img { position: absolute; left: 50%; top: 50%; width: 427px; max-width: none; transform: translate(-50.04%, -47.3%); filter: drop-shadow(0 0 14px rgba(var(--rc), .5)); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.dash-rank:hover .dr-emblem img { transform: translate(-50.04%, -47.3%) scale(1.08); }
.dash-rank.unranked .dr-emblem img { filter: grayscale(1) brightness(.55); }
.dr-info { display: grid; gap: 5px; min-width: 0; }
.dr-info small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dr-info b { font-family: Cinzel, Georgia, serif; font-size: 24px; line-height: 1.1; color: rgb(var(--rc)); }
.dash-rank.unranked .dr-info b { color: var(--gold-hi); }
.dr-info em { font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.dr-bar, .da-bar { display: block; height: 5px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .08); }
.dr-bar i, .da-bar i { display: block; height: 100%; border-radius: inherit; }
.dr-bar i { background: linear-gradient(90deg, rgba(var(--rc), .6), rgb(var(--rc))); box-shadow: 0 0 10px rgba(var(--rc), .5); }
.da-bar i { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

.dash-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dn { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(3, 3, 18, .35); }
.dn .ico { width: 15px; height: 15px; color: var(--gold-dim); margin-bottom: 4px; }
.dn b { font-family: Cinzel, Georgia, serif; font-size: 22px; line-height: 1.1; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.dn b i { font-style: normal; font-size: 13px; color: var(--muted); }
.dn small { font-size: 11.5px; color: var(--muted); }

.dash-sub-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.dash-sub-h h3 { margin: 0; font-size: 16px; }
.da-row { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border: none; border-top: 1px solid rgba(255, 255, 255, .06); background: none; color: var(--text); text-align: left; }
.da-row .ach-pic { width: 44px; height: 44px; }
.da-row:hover b { color: var(--gold); }
.da-txt { display: grid; gap: 3px; min-width: 0; }
.da-txt b { font-size: 13.5px; color: var(--gold-hi); transition: color .2s; }
.da-txt small { font-size: 12px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.da-txt .da-bar { margin-top: 3px; height: 4px; }
.da-num { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Reprendre : Mes champions en grand */
#home .dash-resume { grid-area: resume; min-height: 300px; justify-content: center; }
#home .dash-resume .tile-art { background-position: 75% 18%; }
#home .dash-resume .tile-art::after { background: linear-gradient(90deg, rgba(6, 8, 30, .97) 0%, rgba(6, 8, 30, .82) 42%, rgba(6, 8, 30, .05) 85%); }
.dash-resume-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 24px; max-width: 580px; }
.dash-resume-body h2 { margin: 0; font-size: 32px; line-height: 1.1; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.dash-resume .tile-gear { margin-left: 4px; }
.dm-empty { margin: 0; max-width: 46ch; color: #adafcc; font-size: 14px; line-height: 1.6; }
.dm-lane { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dm-lane .lane-ic { width: 16px; height: 16px; margin: 0; }
.dm-list { display: flex; flex-wrap: wrap; gap: 10px; }
.dm-champ { display: flex; align-items: center; gap: 12px; min-width: 176px; padding: 8px 14px 8px 8px; border-radius: 12px; border: 1px solid rgba(223, 87, 121, .25); background: rgba(3, 3, 18, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dm-pic { position: relative; flex: none; }
.dm-pic img { display: block; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.dm-pic .crest { position: absolute; right: -8px; bottom: -8px; width: 22px; height: 25px; }
.dm-pic .crest b { font-size: 10px; }
.dm-txt { display: grid; gap: 3px; flex: 1; }
.dm-txt b { font-size: 14px; color: var(--gold-hi); }
.dm-txt small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Défi du jour */
.dash-daily { grid-area: daily; padding: 20px 22px 22px; }
.dd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dd-head h3 { margin: 0 0 4px; font-size: 20px; }
.dd-date { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--muted); }
.dd-date .stars, .dd-date svg { vertical-align: middle; }
.dd-streak { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.dd-streak .ico { width: 16px; height: 16px; }
.dd-streak b { font-family: Cinzel, Georgia, serif; font-size: 16px; color: var(--gold-hi); }
.dd-streak.on { border-color: rgba(224, 168, 58, .5); background: rgba(224, 168, 58, .1); }
.dd-streak.on .ico { color: var(--ok); }
.dd-board { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .06); background: rgba(3, 3, 18, .4); }
.dd-you { display: flex; align-items: center; gap: 10px; }
.dd-you img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--blue); box-shadow: 0 0 14px rgba(174, 40, 231, .3); }
.dd-you b { display: block; font-size: 14px; color: var(--gold-hi); }
.dd-you small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dd-foes { margin-left: auto; display: flex; gap: 8px; }
.dd-foe { display: grid; justify-items: center; gap: 3px; }
.dd-foe img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(209, 59, 59, .7); }
.dd-foe small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dd-ctx { margin: 14px 0 0; max-width: 75ch; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.dd-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.dd-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; transition: transform .25s cubic-bezier(.16, 1, .3, 1), border-color .2s, background .2s; }
.dd-opt img { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--gold-dim); transition: box-shadow .25s; }
.dd-opt:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--gold); background: rgba(223, 87, 121, .07); }
.dd-opt:hover:not(:disabled) img { box-shadow: 0 0 16px rgba(223, 87, 121, .4); }
.dd-opt:disabled { cursor: default; opacity: .4; }
.dd-opt.good, .dd-opt.mid, .dd-opt.bad { opacity: 1; }
.dd-opt.good { border-color: var(--good); background: rgba(63, 191, 110, .12); }
.dd-opt.good img { border-color: var(--good); box-shadow: 0 0 16px rgba(63, 191, 110, .45); }
.dd-opt.mid { border-color: var(--ok); background: rgba(224, 168, 58, .1); }
.dd-opt.bad { border-color: var(--bad); background: rgba(224, 81, 74, .1); }
.dd-result { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid; animation: hh-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
.dd-result.s100 { border-color: rgba(63, 191, 110, .4); background: rgba(63, 191, 110, .07); }
.dd-result.s50 { border-color: rgba(224, 168, 58, .4); background: rgba(224, 168, 58, .07); }
.dd-result.s0 { border-color: rgba(224, 81, 74, .4); background: rgba(224, 81, 74, .07); }
.dd-result > b { font-size: 14px; }
.dd-result.s100 > b { color: var(--good); }
.dd-result.s50 > b { color: var(--ok); }
.dd-result.s0 > b { color: var(--bad); }
.dd-result p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: #b7b9d1; }
.dd-result .dd-lesson { display: flex; gap: 8px; color: var(--gold-hi); }
.dd-lesson .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--gold); }
.dd-next { display: block; margin-top: 10px; font-size: 12px; color: var(--muted); }

/* Titres de section : plus d'air au-dessus qu'en dessous */
#home .home-h { margin: 56px 0 16px; font-size: 20px; scroll-margin-top: 80px; }

/* Modes de jeu : six affiches, texte posé sur l'illustration */
.home-grid { display: grid; gap: 16px; }
.hg-modes { grid-template-columns: repeat(3, 1fr); }
#home .tile { justify-content: flex-end; min-height: 300px; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .35s; }
#home .tile:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: rgba(223, 87, 121, .75); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(223, 87, 121, .12); }
#home .tile-main { border-color: rgba(174, 40, 231, .45); }
#home .tile-main:hover { transform: none; border-color: rgba(174, 40, 231, .85); box-shadow: 0 24px 50px rgba(0, 0, 0, .5), 0 0 34px rgba(174, 40, 231, .16); }
#home .tile::before { z-index: 3; }
#home .tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgba(248, 211, 220, .11), transparent 45%); opacity: 0; transition: opacity .35s; }
#home .tile:hover::after { opacity: 1; }
#home .tile-art { position: absolute; inset: 0; height: auto; background-position: center 18%; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), filter .4s; }
#home .tile:hover .tile-art { transform: scale(1.05); filter: brightness(1.12) saturate(1.08); }
#home .tile-art::after { background: linear-gradient(180deg, rgba(3, 3, 18, 0) 22%, rgba(6, 8, 30, .74) 55%, rgba(6, 8, 30, .97) 100%); }
#home .tile-body { position: relative; z-index: 2; flex: none; gap: 8px; padding: 20px; }
#home .tile-body h3 { font-size: 21px; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
#home .tile-body p { color: #adafcc; font-size: 13.5px; max-width: 52ch; }
#home .tile-actions { padding-top: 8px; }
#home .hg-guess .tile-art-items { inset: 0 0 auto 0; height: 46%; padding: 0 20px; background: radial-gradient(circle at 50% 50%, rgba(169, 125, 242, .2), transparent 70%), #090b29; }

/* Étiquette de mode posée sur l'illustration */
.tile-mode { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); background: rgba(3, 3, 18, .6); border: 1px solid rgba(223, 87, 121, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tile-mode .ico { width: 13px; height: 13px; color: var(--gold); }
.tile-main .tile-mode { border-color: rgba(174, 40, 231, .55); }
.tile-main .tile-mode .ico { color: var(--blue); }

/* Apprendre : bases de données en affiches, outils en liste */
#home .learn-big { gap: 16px; }
#home .learn-hero { min-height: 240px; display: flex; align-items: flex-end; transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .35s; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
#home .learn-hero:hover { transform: perspective(1000px) translateY(-4px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
#home .learn-hero-art { transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), opacity .4s; }
#home .learn-hero-body { z-index: 2; width: 100%; padding: 100px 20px 20px; }
#home .learn-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(248, 211, 220, .1), transparent 45%); opacity: 0; transition: opacity .35s; }
#home .learn-hero:hover::before { opacity: 1; }
.learn-hero .arrow { display: inline-block; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.learn-hero:hover .arrow { transform: translateX(5px); }
.tool-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.tool-row { display: flex; align-items: center; gap: 16px; padding: 18px 20px; text-align: left; border: none; color: var(--text); background: linear-gradient(180deg, var(--panel2), var(--panel)); transition: background .25s; }
.tool-row:hover { background: linear-gradient(180deg, #1a1d51, #11143b); }
.tool-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(223, 87, 121, .55) !important; }
.tool-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(223, 87, 121, .22), rgba(174, 40, 231, .1)); border: 1px solid var(--gold-dim); transition: border-color .25s, box-shadow .25s; }
.tool-ic .ico { width: 22px; height: 22px; color: var(--gold-hi); }
.tool-row:hover .tool-ic { border-color: var(--gold); box-shadow: 0 0 16px rgba(223, 87, 121, .25); }
.tool-txt { display: grid; gap: 3px; }
.tool-txt b { color: var(--gold-hi); font-size: 15px; }
.tool-txt span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.tool-go { margin-left: auto; padding-left: 8px; color: var(--gold-dim); font-size: 18px; transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .2s; }
.tool-row:hover .tool-go { color: var(--gold); transform: translateX(4px); }

/* Tablettes : le profil passe sous Mes champions et le défi */
@media (max-width: 1000px) {
  .dash { grid-template-columns: 1fr; grid-template-areas: "resume" "daily" "side"; }
  .dash-side { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .dash-side .dash-ach { grid-column: 1 / -1; }
  .hg-modes { grid-template-columns: 1fr 1fr; }
}
/* Téléphones */
@media (max-width: 700px) {
  .dash-head { padding-top: 28px; }
  .dash-head > .btn { flex: 1 1 100%; justify-content: center; }
  .dash-side { display: flex; }
  .dash-resume-body h2 { font-size: 27px; }
  #home .dash-resume .tile-art::after { background: linear-gradient(180deg, rgba(6, 8, 30, .2) 0%, rgba(6, 8, 30, .85) 45%, rgba(6, 8, 30, .98) 100%); }
  #home .dash-resume .dash-resume-body { margin-top: 110px; }
  .dm-champ { flex: 1 1 100%; }
  .dash-daily { padding: 16px; }
  .dd-board { flex-wrap: wrap; }
  .dd-foes { margin-left: 0; width: 100%; justify-content: space-between; }
  .dd-opts { grid-template-columns: 1fr 1fr; }
  .hg-modes { grid-template-columns: 1fr; }
  #home .tile { min-height: 0; }
  #home .tile-body { margin-top: 150px; }
  #home .hg-guess .tile-art-items { height: 130px; }
  #home .hg-guess .tile-body { margin-top: 118px; }
  #home .home-h { margin-top: 44px; }
  .tool-list { grid-template-columns: 1fr; }
}

/* ====== Ambiance de l'accueil : aurore hextech, réseau d'énergie (canvas), grain et vignette ====== */
/* Les anciennes couches s'effacent en fondu sur l'accueil et reviennent sur les autres pages */
#bg-aura, #bg-stars, #bg-rune, #bg-hex, #bg-motes { transition: opacity 1s ease; }
body.hx #bg-aura, body.hx #bg-stars, body.hx #bg-rune, body.hx #bg-hex, body.hx #bg-motes, body.home-bg #bg-splash { opacity: 0 !important; }
/* Hors accueil, le splash du champion reste en fond, plus discret, fondu dans l'aurore */
body.hx #bg-splash { z-index: -2; }
body.hx:not(.home-bg) #bg-splash.on { opacity: .12; }
#bg-home, #bg-hextech { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
body.hx #bg-home, body.hx #bg-hextech { opacity: 1; }
body.hx-still #bg-hextech { opacity: 0; }
#bg-hextech { z-index: -2; width: 100%; height: 100%; }
#bg-home {
  z-index: -3; overflow: hidden;
  background:
    radial-gradient(1400px 520px at 50% -12%, rgba(174, 40, 231, .13), transparent 70%),
    linear-gradient(180deg, #04061c 0%, #030413 55%, #02030d 100%);
}
/* Deux nappes de lumière qui dérivent lentement : turquoise hextech et violet du Néant */
#bg-home::before, #bg-home::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
#bg-home::before { width: 62vw; height: 48vw; left: -14vw; top: -18vw; background: radial-gradient(circle, rgba(174, 40, 231, .22), transparent 68%); animation: home-aurora-a 34s ease-in-out infinite alternate; }
#bg-home::after { width: 58vw; height: 44vw; right: -16vw; top: 4vw; background: radial-gradient(circle, rgba(118, 84, 230, .16), rgba(223, 87, 121, .06) 45%, transparent 70%); animation: home-aurora-b 42s ease-in-out infinite alternate; }
@keyframes home-aurora-a { to { transform: translate3d(22vw, 10vw, 0) scale(1.15); } }
@keyframes home-aurora-b { to { transform: translate3d(-18vw, 14vw, 0) scale(.9); } }
/* Grain très léger et vignette : la profondeur sans décor */
#bg-grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, .5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
body.hx #bg-grain { opacity: .5; }
/* Une ligne de lumière sous la barre de navigation, comme l'horizon du client */
body.hx .navbar { background: rgba(3, 4, 19, .62); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
body.hx .navbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(174, 40, 231, .55) 30%, rgba(240, 205, 130, .6) 70%, transparent); animation: home-horizon 9s ease-in-out infinite alternate; }
@keyframes home-horizon { from { opacity: .45; } to { opacity: 1; } }
/* Panneaux du tableau de bord : verre sombre pour laisser passer la lumière du fond */
#home .dash-side, #home .dash-daily, #home .tool-list { background: linear-gradient(180deg, rgba(21, 24, 64, .72), rgba(11, 13, 42, .78)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#home .tool-row { background: rgba(13, 15, 47, .7); }
#home .tool-row:hover { background: rgba(26, 29, 81, .85); }

/* ====== Adapte ton build v2 : barre de jeu vitrée, pastilles, cartes d'items en 2 × 2, résultat collé en bas ====== */
/* Hors accueil, le réseau hextech reste en retrait pour ne pas gêner la lecture */
body.hx:not(.home-bg) #bg-hextech { opacity: .45; }

/* Barre de jeu : toujours visible sous la navigation */
#game .topbar { position: sticky; top: var(--nav-h, 52px); z-index: 20; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(223, 87, 121, .18); background: rgba(5, 7, 28, .78); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
#game .progress .lbl { font-weight: 600; color: #a6a8c3; }
.pips { display: flex; gap: 4px; }
.pips i { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); transition: background .4s; }
.pips i.p100 { background: var(--good); box-shadow: 0 0 8px rgba(63, 191, 110, .45); }
.pips i.p50 { background: var(--ok); }
.pips i.p0 { background: var(--bad); }
.pips i.cur { background: var(--gold); animation: pip-pulse 1.6s ease-in-out infinite; }
@keyframes pip-pulse { 50% { box-shadow: 0 0 10px rgba(223, 87, 121, .7); opacity: .65; } }
#game .stat-pill { position: relative; padding: 7px 14px; background: rgba(3, 3, 18, .5); font-variant-numeric: tabular-nums; }
#score-pill.bump b { display: inline-block; animation: score-bump .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes score-bump { 40% { transform: scale(1.35); color: var(--gold-hi); } }
.score-pop { position: absolute; right: 10px; top: -2px; font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 17px; pointer-events: none; animation: score-pop 1.2s cubic-bezier(.16, 1, .3, 1) forwards; }
.score-pop.p100 { color: var(--good); text-shadow: 0 0 12px rgba(63, 191, 110, .7); }
.score-pop.p50 { color: var(--ok); }
.score-pop.p0 { color: var(--muted); }
@keyframes score-pop { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 20% { opacity: 1; transform: translateY(-14px) scale(1.1); } 100% { opacity: 0; transform: translateY(-34px); } }
#streak-pill { transition: border-color .3s, box-shadow .3s; }
#streak-pill.hot { border-color: rgba(240, 140, 60, .7); box-shadow: 0 0 16px rgba(240, 140, 60, .3); }
#streak-pill.hot .ico { color: #ff9b4a; animation: flame-flicker .9s ease-in-out infinite alternate; }
@keyframes flame-flicker { from { transform: scale(1) rotate(-4deg); filter: drop-shadow(0 0 3px #ff9b4a); } to { transform: scale(1.18) rotate(4deg); filter: drop-shadow(0 0 8px #ffb347); } }

/* En-tête du tableau : kills, chrono et écart d'or */
#game .match-head { border-radius: 14px 14px 0 0; row-gap: 8px; background: linear-gradient(90deg, rgba(47, 125, 209, .16), rgba(9, 11, 37, .95) 30%, rgba(9, 11, 37, .95) 70%, rgba(209, 59, 59, .16)); }
#game .match-head .k.ally { text-shadow: 0 0 18px rgba(47, 125, 209, .6); }
#game .match-head .k.enemy { text-shadow: 0 0 18px rgba(209, 59, 59, .6); }
.gold-split { grid-column: 1 / -1; display: flex; gap: 2px; height: 4px; border-radius: 4px; overflow: hidden; }
.gold-split i { display: block; height: 100%; transition: width .8s cubic-bezier(.16, 1, .3, 1); }
.gold-split .a { background: linear-gradient(90deg, #1d5fa8, var(--ally)); }
.gold-split .e { background: linear-gradient(90deg, var(--enemy), #8c2323); }
#game .context { background: #0d1031; }
#game .context .gold { padding: 6px 12px; border-radius: 10px; font-size: 15px; background: rgba(223, 87, 121, .1); box-shadow: 0 0 16px rgba(223, 87, 121, .12); }
#game .board { border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #0c0e2f, #090b27); }
#game table.sb tr.you { box-shadow: none; background: linear-gradient(90deg, rgba(223, 87, 121, .2), rgba(223, 87, 121, .03) 60%); }
#game table.sb tr.you td:first-child { position: relative; }
#game table.sb tr.you td:first-child::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* Cartes d'items : 2 par ligne, effets coupés à 4 lignes */
#game .hint-row { margin: 26px 0 12px; }
#game .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#game .opt { padding: 16px 18px; gap: 16px; border-radius: 14px; transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .3s, opacity .3s; }
#game .opt:hover:not(:disabled) { transform: translateY(-3px); }
#game .opt .icon { width: 60px; height: 60px; border-radius: 10px; }
#game .opt .nm { font-size: 15.5px; padding-right: 26px; }
#game .opt .key { top: 12px; right: 12px; border-radius: 6px; padding: 1px 7px; font-weight: 700; background: rgba(3, 3, 18, .5); }
#game .opt .fx { max-height: 6.2em; overflow: hidden; }
#game .opt .fx.clipped { -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
#game .options.answered .opt .fx { max-height: none; -webkit-mask-image: none; mask-image: none; }
#game .opt.s100 { animation: opt-win .6s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 0 0 1px var(--good) inset, 0 0 28px rgba(63, 191, 110, .22); }
#game .opt.picked.s0 { animation: hd-shake .4s ease-out; border-color: var(--bad); }
#game .opt.picked.s50 { animation: hd-shake .4s ease-out; }
#game .opt.s0:not(.picked), #game .opt.s50:not(.picked) { opacity: .55; }
@keyframes opt-win { 40% { transform: scale(1.025); } }
@keyframes hd-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
#game .opt.picked::after { top: -10px; border-radius: 20px; padding: 2px 9px; }

/* Résultat : panneau vitré collé en bas de l'écran, bouton « suivante » toujours à portée */
#game .result { position: sticky; bottom: 14px; z-index: 15; margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: rgba(7, 9, 33, .88); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); animation: result-in .55s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes result-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
#game .result.r100 { box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(63, 191, 110, .15); }
#game .result .big { font-size: 24px; }
#game .lesson { border: 1px solid rgba(63, 191, 110, .28); border-radius: 10px; background: rgba(63, 191, 110, .07); }
#game .analysis { border-radius: 14px; }

@media (max-width: 700px) {
  #game .topbar { top: var(--nav-h, 52px); padding: 8px 10px; border-radius: 12px; }
  #game .options { grid-template-columns: 1fr; }
  #game .result { bottom: 8px; padding: 12px 14px; }
  #game .result .big { font-size: 19px; }
}

/* ====== Choix des champions v2 : portraits en pied, voies en contrôle segmenté, barre de sélection vitrée ====== */
#setup > h1 { font-size: clamp(32px, 4vw, 44px); }
#setup .step { margin: 28px 0 12px; font-size: 17px; }
#setup .lanes { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(5, 7, 28, .7); }
#setup .lane { border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 9px 16px; transition: background .25s, color .25s, border-color .25s; }
#setup .lane:hover { background: rgba(255, 255, 255, .05); }
#setup .lane.on { background: linear-gradient(180deg, rgba(223, 87, 121, .22), rgba(223, 87, 121, .08)); border-color: rgba(223, 87, 121, .55); box-shadow: 0 0 18px rgba(223, 87, 121, .15); }
#setup .search { max-width: 360px; border-radius: 12px; padding: 11px 14px; background: rgba(5, 7, 28, .7); }
#setup .champ-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
#setup .cc { justify-content: flex-end; padding: 0; aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #090b29; transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .3s, opacity .3s, filter .3s; }
#setup .cc .cc-art { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 0; object-fit: cover; object-position: center 12%; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
#setup .cc::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(3, 3, 18, 0) 45%, rgba(3, 4, 21, .92) 88%); }
#setup .cc:hover { transform: translateY(-4px); border-color: rgba(223, 87, 121, .7); box-shadow: 0 14px 30px rgba(0, 0, 0, .5); }
#setup .cc:hover .cc-art { transform: scale(1.07); }
#setup .cc-txt { position: relative; z-index: 2; display: grid; gap: 1px; width: 100%; padding: 8px 8px 10px; }
#setup .cc-name { font-size: 13.5px; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
#setup .cc-arch { color: #adafcc; }
#setup .cc .m-badge { z-index: 2; }
#setup .cc.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px rgba(223, 87, 121, .35); }
#setup .cc.on::after { z-index: 3; top: 8px; right: 8px; width: 24px; height: 24px; border: none; border-radius: 50%; transform: none; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140f05' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 2px 10px rgba(0, 0, 0, .5); animation: cc-check .4s cubic-bezier(.16, 1, .3, 1); }
@keyframes cc-check { from { transform: scale(0); } }
#setup .cc.dim { opacity: .4; filter: grayscale(.6); }
#setup .cc.dim:hover { opacity: .7; }
#setup .setup-foot { bottom: 14px; margin-top: 20px; padding: 12px 16px; border-radius: 16px; border-color: rgba(223, 87, 121, .25); background: rgba(5, 7, 28, .82); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
#setup .sel img, #setup .sel .fallback { width: 34px; height: 34px; border-color: var(--gold); box-shadow: 0 0 10px rgba(223, 87, 121, .3); }

/* Écran de fin : le score respire */
#end .end .score { font-size: clamp(64px, 9vw, 96px); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(223, 87, 121, .3); }
#end .rv { border-radius: 12px; background: rgba(11, 13, 42, .85); }
#end .end-progress > * { border-radius: 14px; }
@media (max-width: 700px) {
  #setup .champ-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  #setup .lanes { display: flex; }
  #setup .lane { flex: 1; justify-content: center; padding: 8px 6px; font-size: 12.5px; }
}

/* ====== Retours des joueurs : bouton flottant et fenêtre d'envoi ====== */
.fb-fab { position: fixed; left: 16px; bottom: 16px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 30px; border: 1px solid rgba(223, 87, 121, .4); background: rgba(5, 7, 28, .8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--gold-hi); font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: border-color .25s, transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.fb-fab .ico { width: 18px; height: 18px; color: var(--gold); }
.fb-fab:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 18px rgba(223, 87, 121, .2); }
body.hx-still .fb-fab, body:has(#game:not([hidden])) .fb-fab { display: none; }
.fb-box { max-width: 580px; }
.fb-box h2 { margin: 0 44px 6px 0; font-size: 22px; }
.fb-intro { margin: 0 0 16px; color: #adafcc; line-height: 1.55; }
.fb-label { display: block; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--gold-hi); }
.fb-label span { font-weight: 400; color: var(--muted); }
.fb-box textarea { width: 100%; resize: vertical; min-height: 110px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 7, 28, .7); color: var(--text); font: inherit; line-height: 1.55; transition: border-color .15s, box-shadow .15s; }
.fb-box textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 87, 121, .18); }
.fb-box textarea::placeholder, .fb-box input::placeholder { color: #6e7090; }
.fb-box .search { max-width: none; margin: 0; border-radius: 12px; }
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-attach { margin-top: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(3, 3, 18, .4); }
.fb-attach-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.fb-attach-head b { color: var(--gold); font-weight: 600; }
.fb-attach pre { margin: 8px 0 0; max-height: 110px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 Inter, system-ui, sans-serif; color: #adafcc; }
.fb-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.fb-check input { accent-color: var(--gold); width: 16px; height: 16px; }
.fb-error { margin: 12px 0 0; color: #ff8a84; font-size: 13px; }
.fb-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.fb-done { text-align: center; padding: 16px 0 6px; }
.fb-done h2 { margin: 12px 0 6px; }
.fb-done p { color: #adafcc; margin: 0 0 20px; }
.fb-done-ic { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(63, 191, 110, .14); border: 1px solid rgba(63, 191, 110, .5); color: var(--good); animation: cc-check .5s cubic-bezier(.16, 1, .3, 1); }
.fb-done-ic .ico { width: 28px; height: 28px; }
#game .fb-report { justify-self: start; font-size: 12.5px; color: var(--muted); }
#game .fb-report:hover { color: var(--gold); }
@media (max-width: 700px) {
  .fb-fab { left: 12px; bottom: 12px; padding: 11px; }
  .fb-fab span { display: none; }
}

/* ====== Cristal hextech 3D de l'accueil (home3d.js) ====== */
.dash-head { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 12px 24px; padding: 20px 0 18px; }
.dash-title > .btn { margin-top: 24px; animation: hh-rise .9s .16s cubic-bezier(.16, 1, .3, 1) both; }
.hx-crystal { position: relative; height: 320px; margin: -24px 0 -44px 0; cursor: pointer; animation: hh-rise 1.2s .25s cubic-bezier(.16, 1, .3, 1) both; }
.hx-crystal canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.hx-crystal.ready canvas { opacity: 1; }
/* Lueur de secours, visible tant que la 3D n'est pas prête (ou si l'appareil n'a pas WebGL) */
.hx-crystal::before { content: ""; position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 215, .55), rgba(230, 40, 90, .24) 38%, transparent 70%); filter: blur(4px); animation: hx-orb 3.2s ease-in-out infinite alternate; transition: opacity 1s; }
.hx-crystal.ready::before { opacity: 0; }
@keyframes hx-orb { to { transform: scale(1.15); opacity: .75; } }
@media (max-width: 700px) {
  .dash-head { grid-template-columns: minmax(0, 1fr) 118px; gap: 8px; }
  .dash-title > .btn { width: 100%; justify-content: center; }
  .dash-head .dash-title { grid-column: 1 / -1; grid-row: 1; }
  .hx-crystal { grid-column: 2; grid-row: 1; align-self: start; height: 150px; margin: -8px 0 0 0; }
  .hx-crystal::before { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
  .dash-title h1, .dash-title p { max-width: calc(100% - 110px); }
}

/* ====== Accueil v5 : haut de page scénique, navigation flottante, modes en bento, apparition au défilement ====== */
/* Barre de navigation : pilule vitrée détachée du haut de l'écran */
body.hx { --nav-h: 74px; }
body.hx .navbar { top: 10px; width: calc(100% - 24px); max-width: 1160px; margin: 10px auto 0; border: 1px solid rgba(223, 87, 121, .22); border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); }
body.hx .navbar::after { left: 22px; right: 22px; }
body.hx .topnav { padding: 6px 12px 6px 18px; }

/* Haut de page scénique */
.hero-stage { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: min(780px, calc(100vh - 90px)); padding: 30px 0 70px; }
.hero-stage h1 { font-size: clamp(64px, 9.4vw, 128px); line-height: .88; letter-spacing: .01em; }
.dash-title .hero-lead { margin: 20px 0 0; font-family: Cinzel, Georgia, serif; font-size: clamp(22px, 2.6vw, 34px); color: var(--gold); letter-spacing: .02em; animation: hh-rise .9s .06s cubic-bezier(.16, 1, .3, 1) both; }
.hero-stage #dash-greet { margin-top: 14px; max-width: 46ch; font-size: 16px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; animation: hh-rise .9s .18s cubic-bezier(.16, 1, .3, 1) both; }
.hero-cta .btn { margin: 0; animation: none; }
.hero-cta .btn.ghost { color: var(--gold-hi); border-color: rgba(223, 87, 121, .4); background: rgba(3, 3, 18, .4); }
.hero-cta .btn.ghost .ico { color: #ff9b4a; }
.hero-cta .btn.ghost:hover { border-color: var(--gold); background: rgba(223, 87, 121, .08); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 34px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid rgba(223, 87, 121, .16); color: var(--muted); font-size: 13px; animation: hh-rise .9s .3s cubic-bezier(.16, 1, .3, 1) both; }
.hero-facts b { font-family: Cinzel, Georgia, serif; font-size: 19px; color: var(--gold-hi); margin-right: 4px; font-variant-numeric: tabular-nums; }
.hero-stage .hx-crystal { height: clamp(420px, 64vh, 620px); margin: -30px 0 -50px; }
/* Lueur au sol sous le Nexus */
.hero-stage .hx-crystal::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 8%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 50, 100, .26), transparent 70%); filter: blur(10px); pointer-events: none; }
.hero-scroll { position: absolute; left: 50%; bottom: 14px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; border: 1px solid rgba(223, 87, 121, .35); background: rgba(3, 3, 18, .4); animation: hero-bob 2.4s ease-in-out infinite; }
.hero-scroll::before { content: ""; position: absolute; left: 50%; top: 42%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.hero-scroll:hover { border-color: var(--gold); }
@keyframes hero-bob { 50% { transform: translateY(6px); } }
#home #home-dash { margin-top: 10px; }

/* Modes de jeu en bento : Partie rapide en grande affiche verticale, Draft en bandeau */
.hg-modes { grid-template-columns: 1.3fr 1fr 1fr; grid-template-areas: "a b c" "a d e" "f f f"; }
.hg-modes > :nth-child(1) { grid-area: a; }
.hg-modes > :nth-child(2) { grid-area: b; }
.hg-modes > :nth-child(3) { grid-area: c; }
.hg-modes > :nth-child(4) { grid-area: d; }
.hg-modes > :nth-child(5) { grid-area: e; }
.hg-modes > :nth-child(6) { grid-area: f; min-height: 230px; justify-content: center; }
#home .hg-modes > :nth-child(1) .tile-body h3 { font-size: 30px; }
#home .hg-modes > :nth-child(1) .tile-art { background-position: 40% 20%; }
#home .hg-modes > :nth-child(6) .tile-art { background-position: 70% 25%; }
#home .hg-modes > :nth-child(6) .tile-art::after { background: linear-gradient(90deg, rgba(6, 8, 30, .97) 0%, rgba(6, 8, 30, .8) 40%, rgba(6, 8, 30, 0) 80%); }
#home .hg-modes > :nth-child(6) .tile-body { max-width: 480px; }


@media (max-width: 1000px) {
  .hero-stage { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); min-height: 0; }
  .hg-modes { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "a c" "d e" "f f"; }
}
@media (max-width: 700px) {
  body.hx { --nav-h: 66px; }
  body.hx .navbar { width: calc(100% - 16px); top: 6px; margin-top: 6px; border-radius: 14px; }
  .hero-stage { grid-template-columns: 1fr; padding: 8px 0 30px; }
  .hero-stage .hx-crystal { grid-column: 1; grid-row: 1; height: 240px; margin: 0 0 -10px; }
  .hero-stage .dash-title { grid-row: 2; }
  .hero-stage .dash-title h1, .hero-stage .dash-title p { max-width: none; }
  .hero-stage h1 { font-size: 58px; text-align: center; }
  .hero-lead, .hero-stage #dash-greet { text-align: center; margin-left: auto; margin-right: auto; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .hero-facts { justify-content: center; }
  .hero-scroll { display: none; }
  .hg-modes { grid-template-columns: 1fr; grid-template-areas: none; }
  .hg-modes > * { grid-area: auto !important; }
}

/* Cibles des boutons de défilement : sous la navigation flottante */
#home .home-h, #dash-daily { scroll-margin-top: 96px; }

/* ====== Apparition au défilement : « matérialisation hextech » (home-reveal.js) ====== */
.rv-wait { position: relative; }
/* En attente : caché, et les anciennes animations d'entrée sont neutralisées */
.rv-wait:not(.rv-in) { animation: none !important; opacity: 0; }
.rv-done { animation: none !important; }
.rv-wait.rv-in { animation: rv-materialize 1.15s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms) both; }
@keyframes rv-materialize {
  0% { opacity: 0; clip-path: inset(0 0 100% 0 round 16px); translate: 0 28px; filter: blur(8px) brightness(1.9) saturate(.3); }
  25% { opacity: 1; }
  70% { filter: blur(0) brightness(1.15) saturate(1); }
  100% { opacity: 1; clip-path: inset(0 0 0 0 round 16px); translate: 0 0; filter: none; }
}
/* La ligne de lumière qui balaie le bloc pendant qu'il apparaît */
.rv-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 20; pointer-events: none; border-radius: 2px; background: linear-gradient(90deg, transparent, #e4bbf6 18%, #fff 50%, #f0cf88 82%, transparent); box-shadow: 0 0 16px 3px rgba(174, 40, 231, .55), 0 0 40px 6px rgba(174, 40, 231, .25); opacity: 0; animation: rv-scan 1.15s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms) both; }
.rv-scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 70px; background: linear-gradient(0deg, rgba(174, 40, 231, .22), transparent); }
@keyframes rv-scan { 0% { top: 0; opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
/* Titres : le trait doré se dessine pendant que le texte se décode */
.home-h.rv-wait::after { transform: scaleX(0); transform-origin: left; }
.home-h.rv-in::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms); }
.home-h.rv-wait:not(.rv-in) { opacity: 1; color: transparent; }

/* ====== Itemdle : carte du tableau de bord ====== */
.dash { grid-template-areas: "side resume" "side daily" "side dle"; }
.dash-dle { grid-area: dle; position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; cursor: pointer; border: 1px solid rgba(223, 87, 121, .3); background: radial-gradient(circle at 8% 50%, rgba(223, 87, 121, .16), transparent 45%), linear-gradient(180deg, rgba(21, 24, 64, .8), rgba(11, 13, 42, .85)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: border-color .25s, transform .35s cubic-bezier(.16, 1, .3, 1); }
.dash-dle:hover { border-color: var(--gold); transform: translateY(-2px); }
.ddl-icon { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; border: 1px solid var(--gold); background: radial-gradient(circle, rgba(223, 87, 121, .25), rgba(3, 3, 18, .6)); box-shadow: 0 0 18px rgba(223, 87, 121, .25); overflow: hidden; }
.ddl-icon span { font-family: Cinzel, Georgia, serif; font-size: 30px; font-weight: 700; color: var(--gold-hi); animation: ddl-pulse 2.4s ease-in-out infinite; }
.ddl-icon img { width: 100%; height: 100%; }
@keyframes ddl-pulse { 50% { text-shadow: 0 0 16px rgba(240, 205, 130, .9); transform: scale(1.08); } }
.ddl-txt { flex: 1; min-width: 0; }
.ddl-txt h3 { margin: 0 0 3px; font-size: 18px; }
.ddl-txt h3 span { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--gold); letter-spacing: .04em; margin-left: 6px; }
.ddl-txt p { margin: 0; font-size: 13.5px; color: #adafcc; line-height: 1.5; }
.ddl-txt b { color: var(--gold-hi); font-variant-numeric: tabular-nums; }

/* ====== Itemdle : page du jeu ====== */
#itemdle { max-width: 980px; margin: 0 auto; }
.dle-top { display: flex; gap: 8px; }
.dle-head { display: flex; align-items: center; gap: 22px; margin: 10px 0 6px; }
.dle-head h1 { margin: 0; font-size: clamp(34px, 4.5vw, 48px); }
.dle-head .page-intro { margin: 6px 0 10px; }
.dle-mystery { position: relative; flex: none; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 22px; border: 1px solid var(--gold); background: radial-gradient(circle, rgba(223, 87, 121, .22), rgba(3, 3, 18, .7) 70%); box-shadow: 0 0 30px rgba(223, 87, 121, .25), inset 0 0 24px rgba(223, 87, 121, .15); overflow: hidden; }
.dle-mystery::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(240, 205, 130, .5) 80%, transparent 90%); animation: dle-spin 4s linear infinite; }
.dle-mystery::after { content: ""; position: absolute; inset: 2px; border-radius: 20px; background: radial-gradient(circle, #12153b, #06081d); }
.dle-mystery > * { position: relative; z-index: 1; }
.dle-mystery > span:not(.blur) { font-family: Cinzel, Georgia, serif; font-size: 56px; font-weight: 700; color: var(--gold-hi); text-shadow: 0 0 22px rgba(240, 205, 130, .6); }
.dle-mystery img { display: block; width: 84px; height: 84px; border-radius: 12px; }
.dle-mystery .blur img { filter: blur(6px) saturate(.8); }
.dle-mystery.solved { border-color: var(--good); box-shadow: 0 0 34px rgba(63, 191, 110, .35); }
@keyframes dle-spin { to { transform: rotate(360deg); } }
.dle-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--muted); }
.dle-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dle-legend span:not(.arr)::before { content: ""; width: 12px; height: 12px; border-radius: 4px; }
.dle-legend .ok::before { background: var(--good); }
.dle-legend .part::before { background: var(--ok); }
.dle-legend .no::before { background: var(--bad); }
.dle-hints { margin-top: 14px; }
.dle-hints .gh { border-radius: 10px; }
#dle-input-wrap .search { border-radius: 14px; padding: 14px 16px; font-size: 16px; background: rgba(5, 7, 28, .75); }
.dle-rows { display: grid; gap: 8px; margin-top: 16px; }
.dle-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(6, minmax(0, 1fr)); gap: 6px; }
.dle-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(11, 13, 42, .85); font-size: 13px; font-weight: 600; color: var(--gold-hi); }
.dle-item img { width: 36px; height: 36px; border-radius: 8px; flex: none; }
.dle-cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 58px; padding: 6px 8px; border-radius: 12px; font-size: 11.5px; line-height: 1.3; color: #fff; text-align: center; overflow: hidden; }
.dle-cell small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.dle-cell span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.dle-cell.ok { background: linear-gradient(180deg, #2f9c5a, #1f6e40); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.dle-cell.part { background: linear-gradient(180deg, #e10c41, #8d5f14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.dle-cell.no { background: linear-gradient(180deg, #a23a35, #6e2320); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.dle-arrow { display: inline-block; width: 0; height: 0; margin: 2px auto 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.dle-arrow.up { border-bottom: 8px solid currentColor; }
.dle-arrow.down { border-top: 8px solid currentColor; }
.dle-legend .dle-arrow { margin: 0; color: var(--gold); }
/* Le dernier essai se retourne case par case */
.dle-row.fresh .dle-item { animation: dle-in .4s cubic-bezier(.16, 1, .3, 1) both; }
.dle-row.fresh .dle-cell { animation: dle-flip .55s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * 120ms + 120ms) both; }
@keyframes dle-flip { 0% { transform: perspective(400px) rotateX(90deg); filter: brightness(2); } 100% { transform: none; filter: none; } }
@keyframes dle-in { from { opacity: 0; transform: translateX(-12px); } }
.dle-row.win .dle-item { border-color: var(--good); box-shadow: 0 0 18px rgba(63, 191, 110, .3); }
.dle-empty { margin: 16px 0 0; color: var(--muted); font-size: 13.5px; }
.dle-actions { margin-top: 16px; }
/* Fin de partie */
.dle-win { margin-top: 16px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--good); background: radial-gradient(circle at 10% 0%, rgba(63, 191, 110, .18), transparent 50%), linear-gradient(180deg, rgba(22, 40, 63, .9), rgba(12, 25, 41, .92)); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 30px rgba(63, 191, 110, .15); animation: result-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.dle-win.lost { border-color: var(--gold-dim); background: linear-gradient(180deg, rgba(21, 24, 64, .9), rgba(11, 13, 42, .92)); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.dle-win-head { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.dle-win-icon img { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--gold); display: block; }
.dle-win-head small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--good); }
.dle-win.lost .dle-win-head small { color: var(--muted); }
.dle-win-head h2 { margin: 2px 0; font-size: 26px; }
.dle-win-cost { font-size: 13px; color: var(--gold); }
.dle-win-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dle-next small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dle-next b { font-family: Cinzel, Georgia, serif; font-size: 26px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.dle-win-streak { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #adafcc; }
.dle-win-streak .ico { width: 18px; height: 18px; color: #ff9b4a; }
.dle-win-streak b { color: var(--gold-hi); }
.dle-win-foot .btn { margin-left: auto; }
.dle-share-msg { margin: 12px 0 0; white-space: pre-wrap; font-size: 13px; color: var(--good); }

@media (max-width: 1000px) {
  .dash { grid-template-areas: "resume" "daily" "dle" "side"; }
}
@media (max-width: 700px) {
  .dash-dle { flex-wrap: wrap; padding: 14px 16px; }
  .dash-dle .btn { flex: 1 1 100%; }
  .dle-head { gap: 14px; }
  .dle-mystery { width: 80px; height: 80px; border-radius: 18px; }
  .dle-mystery > span:not(.blur) { font-size: 40px; }
  .dle-mystery img { width: 60px; height: 60px; }
  .dle-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dle-item { grid-column: 1 / -1; }
  .dle-cell { min-height: 52px; }
  .dle-win-foot .btn { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}

/* ====== Accueil v6 : catégories claires, barre des catégories, grilles par section ====== */
/* Barre des catégories : collée sous la navigation, elle suit le défilement */
.home-cats { position: sticky; top: calc(var(--nav-h, 64px) + 2px); z-index: 25; display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 6px auto 0; padding: 5px; border-radius: 16px; border: 1px solid rgba(223, 87, 121, .22); background: rgba(5, 7, 28, .8); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 12px 32px rgba(0, 0, 0, .4); overflow-x: auto; scrollbar-width: none; }
.home-cats::-webkit-scrollbar { display: none; }
.home-cats button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; transition: color .2s, background .25s, border-color .25s; }
.home-cats button .ico { width: 16px; height: 16px; }
.home-cats button:hover { color: var(--gold-hi); background: rgba(255, 255, 255, .05); }
.home-cats button.on { color: var(--gold-hi); border-color: rgba(223, 87, 121, .45); background: linear-gradient(180deg, rgba(223, 87, 121, .2), rgba(223, 87, 121, .06)); }
.home-cats button.on .ico { color: var(--gold); }

/* Sections : en-tête avec icône, titre et phrase d'explication */
.home-sec { margin-top: 70px; scroll-margin-top: calc(var(--nav-h, 64px) + 70px); }
.home-sec:first-of-type { margin-top: 44px; }
.sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sec-head > div { flex: 1; min-width: 0; }
.sec-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; border: 1px solid rgba(223, 87, 121, .5); background: radial-gradient(circle at 30% 25%, rgba(240, 205, 130, .3), rgba(174, 40, 231, .08) 70%), rgba(5, 7, 28, .7); box-shadow: 0 0 22px rgba(223, 87, 121, .18); }
.sec-ic .ico { width: 24px; height: 24px; color: var(--gold-hi); }
#home .sec-head .home-h { margin: 0; font-size: 24px; }
.sec-head p { margin: 4px 0 0; color: #a6a8c3; font-size: 14px; line-height: 1.5; }
/* Apparition de l'en-tête : icône qui surgit, trait doré qui se dessine, texte qui se décode */
.sec-head.rv-wait:not(.rv-in) { opacity: 1; }
.sec-head.rv-wait:not(.rv-in) > * { opacity: 0; }
.sec-head.rv-wait .home-h::after { transform: scaleX(0); transform-origin: left; }
.sec-head.rv-in .home-h::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms); }
.sec-head.rv-in .sec-ic { animation: sec-ic-in .7s cubic-bezier(.34, 1.56, .64, 1) var(--rv-d, 0ms) both; }
.sec-head.rv-in p { animation: hh-rise .8s cubic-bezier(.16, 1, .3, 1) calc(var(--rv-d, 0ms) + 250ms) both; }
@keyframes sec-ic-in { from { opacity: 0; transform: scale(.4) rotate(-25deg); } }

.sec-grid { display: grid; gap: 16px; }
/* Aujourd'hui : défi du jour + carte Itemdle en colonne */
.sg-today { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "daily dle"; align-items: stretch; }
.sg-today .dash-dle { flex-direction: column; justify-content: center; text-align: center; gap: 14px; padding: 26px 22px; background: radial-gradient(circle at 50% 18%, rgba(223, 87, 121, .2), transparent 55%), linear-gradient(180deg, rgba(21, 24, 64, .82), rgba(11, 13, 42, .88)); }
.sg-today .ddl-icon { width: 92px; height: 92px; border-radius: 22px; }
.sg-today .ddl-icon span { font-size: 46px; }
.sg-today .ddl-txt h3 { font-size: 22px; }
.sg-today .ddl-txt h3 span { display: block; margin: 4px 0 0; }
.sg-today .dash-dle .btn { width: 100%; justify-content: center; }
/* S'entraîner : Mes champions en grand, deux cartes à droite, un bandeau dessous */
.sg-train { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "resume quick" "resume guess" "champs champs"; }
.sg-train > :nth-child(2) { grid-area: quick; }
.sg-train > :nth-child(3) { grid-area: guess; }
.sg-train > :nth-child(4) { grid-area: champs; min-height: 220px; justify-content: center; }
#home .sg-train > :nth-child(4) .tile-art { background-position: 70% 22%; }
#home .sg-train > :nth-child(4) .tile-art::after { background: linear-gradient(90deg, rgba(6, 8, 30, .97) 0%, rgba(6, 8, 30, .82) 40%, rgba(6, 8, 30, 0) 80%); }
#home .sg-train > :nth-child(4) .tile-body { max-width: 480px; }
#home .sg-train .tile:not(.dash-resume) { min-height: 240px; }
/* Mini-jeux : quatre affiches de même taille */
.sg-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#home .sg-mini .tile { min-height: 330px; }
#home .sg-mini .tile-body h3 { font-size: 20px; }
/* Progression : rang et chiffres, puis succès */
.sg-prog { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.prog-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 24, 64, .72), rgba(11, 13, 42, .78)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
#home .learn-big + .tool-list { margin-top: 16px; }

@media (max-width: 1000px) {
  .sg-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sg-prog { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sg-today { grid-template-columns: 1fr; grid-template-areas: "daily" "dle"; }
  .sg-train { grid-template-columns: 1fr; grid-template-areas: "resume" "quick" "guess" "champs"; }
  #home .sg-train > :nth-child(4) .tile-art::after { background: linear-gradient(180deg, rgba(3, 3, 18, 0) 20%, rgba(6, 8, 30, .82) 55%, rgba(6, 8, 30, .98) 100%); }
  .sg-train > :nth-child(4) { justify-content: flex-end; }
  .sg-mini { grid-template-columns: 1fr; }
  #home .sg-mini .tile, #home .sg-train .tile:not(.dash-resume) { min-height: 0; }
  .home-cats { width: 100%; margin-top: 0; }
  .home-cats button { padding: 8px 11px; }
  .home-sec { margin-top: 52px; }
  .sec-head { gap: 12px; }
  .sec-ic { width: 44px; height: 44px; border-radius: 13px; }
  #home .sec-head .home-h { font-size: 20px; }
}

/* ====== Mode Châtiment ====== */
#smite { max-width: 920px; margin: 0 auto; }
body:has(#smite:not([hidden])) .fb-fab { display: none; }
.smite-intro { text-align: center; padding: 30px 0 10px; }
.smite-intro-ic { width: 76px; height: 76px; border-radius: 18px; border: 1px solid var(--gold); box-shadow: 0 0 30px rgba(240, 160, 60, .35); }
.smite-intro h1 { margin: 14px 0 6px; font-size: clamp(38px, 5vw, 56px); }
.smite-intro .page-intro { max-width: 62ch; margin: 0 auto; }
.smite-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px; margin: 26px 0 8px; text-align: left; }
.smite-opts h4 { margin: 0 0 8px; font-size: 13px; color: var(--gold-hi); }
.smite-opts kbd, .smite-btn kbd { font: 700 13px Inter, system-ui, sans-serif; }
.smite-help { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.smite-opts .smite-help { max-width: 34ch; }
.smite-best { margin: 14px 0 20px; color: var(--muted); font-size: 14px; min-height: 1em; }
.smite-best b { color: var(--gold-hi); }
.smite-best .ico { width: 16px; height: 16px; color: var(--gold); vertical-align: -3px; }

.smite-arena { padding-top: 6px; }
.smite-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; justify-content: center; font-size: 14px; }
.smite-top b { font-family: Cinzel, Georgia, serif; font-size: 22px; color: var(--gold-hi); }
.smite-dmg, .smite-foe { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line); background: rgba(5, 7, 28, .6); color: #adafcc; }
.smite-dmg .ico { width: 15px; height: 15px; color: #ffb35c; }
.smite-dmg b { color: #ffd08a; }
.smite-foe .ico { width: 15px; height: 15px; }
.smite-foe.on { border-color: rgba(224, 81, 74, .6); color: #ff9c96; background: rgba(224, 81, 74, .1); animation: foe-pulse 1.4s ease-in-out infinite; }
@keyframes foe-pulse { 50% { box-shadow: 0 0 14px rgba(224, 81, 74, .4); } }

.smite-stage { position: relative; display: grid; place-items: center; height: 300px; margin-top: 10px; }
.smite-aura { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rc), .45), rgba(var(--rc), .1) 45%, transparent 70%); filter: blur(6px); animation: aura-breathe 2.6s ease-in-out infinite; }
@keyframes aura-breathe { 50% { transform: scale(1.12); opacity: .75; } }
.smite-monster { position: relative; z-index: 1; padding: 0; border: none; background: none; border-radius: 26px; cursor: crosshair; transition: transform .2s, filter .4s, opacity .5s; }
.smite-monster img { display: block; width: 180px; height: 180px; border-radius: 26px; border: 2px solid rgba(var(--rc), .9); box-shadow: 0 0 40px rgba(var(--rc), .45), 0 20px 40px rgba(0, 0, 0, .6); }
.smite-monster:hover img { box-shadow: 0 0 50px rgba(var(--rc), .65), 0 20px 40px rgba(0, 0, 0, .6); }
.smite-monster.hurt { animation: monster-hurt .28s ease-out; }
@keyframes monster-hurt { 25% { transform: translate(-5px, 2px) scale(.97); filter: brightness(1.6); } 60% { transform: translate(4px, -2px); } }
.smite-stage.dead .smite-monster { opacity: .25; filter: grayscale(1); transform: scale(.9); }
.smite-floats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.smite-num { position: absolute; top: 34%; font: 700 17px Inter, system-ui, sans-serif; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); animation: num-up .9s ease-out forwards; }
.smite-num.big { font-size: 24px; color: #ffcf6e; }
.smite-num.smite { left: 50% !important; top: 30%; font-family: Cinzel, Georgia, serif; font-size: 40px; color: #fdd8e1; text-shadow: 0 0 20px rgba(255, 170, 60, .9), 0 2px 6px rgba(0, 0, 0, .9); translate: -50% 0; }
@keyframes num-up { from { opacity: 1; transform: translateY(0) scale(1.15); } to { opacity: 0; transform: translateY(-60px) scale(.9); } }
.smite-count { position: absolute; z-index: 3; font-family: Cinzel, Georgia, serif; font-size: 90px; font-weight: 700; color: var(--gold-hi); text-shadow: 0 0 30px rgba(240, 205, 130, .7); pointer-events: none; }
.smite-count.pop { animation: count-pop .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes count-pop { from { opacity: 0; transform: scale(1.8); } }
/* Éclair du Châtiment (doré), vol adverse (rouge), Châtiment gâché (orange) */
.smite-flash { position: absolute; inset: -20px 0; z-index: 2; pointer-events: none; border-radius: 30px; opacity: 0; }
.smite-flash.go { background: radial-gradient(circle, rgba(252, 207, 218, .95), rgba(255, 170, 50, .5) 30%, transparent 65%); animation: smite-flash .7s ease-out; }
.smite-flash.steal { background: radial-gradient(circle, rgba(255, 120, 110, .9), rgba(200, 30, 40, .45) 35%, transparent 65%); animation: smite-flash .7s ease-out; }
.smite-flash.early { background: radial-gradient(circle, rgba(255, 190, 90, .6), transparent 60%); animation: smite-flash .5s ease-out; }
@keyframes smite-flash { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.3); } }

/* Barre de vie façon jeu : traits tous les 1000 PV, traînée blanche des PV perdus, repère du seuil */
.smite-bar { position: relative; height: 26px; margin: 8px auto 0; max-width: 620px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .8); box-shadow: 0 0 0 1px rgba(223, 87, 121, .4), 0 8px 20px rgba(0, 0, 0, .5); background: #1a0f12; }
.smite-bar-fill, .smite-bar-lag { position: absolute; left: 0; top: 0; bottom: 0; }
.smite-bar-fill { z-index: 1; background: linear-gradient(180deg, #e4574c, #a62626); transition: width .08s linear; }
.smite-bar::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--tick, 10%) - 1px), rgba(0, 0, 0, .5) calc(var(--tick, 10%) - 1px) var(--tick, 10%)); }
.smite-bar-lag { background: rgba(254, 227, 233, .8); transition: width .5s ease-out .15s; }
.smite-bar.low .smite-bar-fill { background: linear-gradient(180deg, #ffb357, #d8731f); box-shadow: 0 0 16px rgba(255, 170, 60, .6); }
.smite-mark { position: absolute; z-index: 2; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; background: #fbacc0; box-shadow: 0 0 10px #ffc86b; }
.smite-hp { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; font: 700 13px Inter, system-ui, sans-serif; color: #fff; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.smite-ctrl { display: flex; justify-content: center; margin-top: 18px; }
.smite-btn { position: relative; padding: 0; border: 2px solid var(--gold); border-radius: 16px; background: #090b29; box-shadow: 0 0 22px rgba(240, 160, 60, .3); transition: transform .1s, box-shadow .2s; }
.smite-btn img { display: block; width: 72px; height: 72px; border-radius: 14px; }
.smite-btn kbd { position: absolute; right: -8px; bottom: -8px; min-width: 26px; padding: 3px 7px; border-radius: 8px; border: 1px solid var(--gold); background: #0a0c27; color: var(--gold-hi); }
.smite-btn:hover { box-shadow: 0 0 32px rgba(240, 160, 60, .55); }
.smite-btn:active { transform: scale(.94); }
.smite-result { display: grid; gap: 4px; max-width: 620px; margin: 18px auto 0; padding: 12px 16px; border-radius: 14px; text-align: center; border: 1px solid var(--line); background: rgba(7, 9, 33, .85); animation: result-in .4s cubic-bezier(.16, 1, .3, 1) both; }
.smite-result b { font-family: Cinzel, Georgia, serif; font-size: 22px; }
.smite-result span { color: #b7b9d1; font-size: 13.5px; }
.smite-result.ok { border-color: rgba(63, 191, 110, .5); }
.smite-result.ok b { color: var(--good); }
.smite-result.stolen, .smite-result.early { border-color: rgba(224, 81, 74, .5); }
.smite-result.stolen b, .smite-result.early b { color: var(--bad); }
.smite-result.teamkill b { color: var(--ok); }
.smite-recap { display: grid; gap: 6px; max-width: 520px; margin: 18px auto 0; text-align: left; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(11, 13, 42, .85); border: 1px solid var(--line); font-size: 13.5px; }
.sr-row span { flex: 1; }
.sr-row b { font-variant-numeric: tabular-nums; }
.sr-row em { width: 54px; text-align: right; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-row.ok b { color: var(--good); }
.sr-row.stolen b, .sr-row.early b { color: var(--bad); }
.sr-row.teamkill b { color: var(--ok); }
@media (max-width: 700px) {
  .smite-stage { height: 240px; }
  .smite-monster img { width: 140px; height: 140px; }
  .smite-aura { width: 220px; height: 220px; }
}

/* Carte Itemdle en colonne (Aujourd'hui) : pas de retour à la ligne, bouton sur toute la largeur */
.sg-today .dash-dle { flex-wrap: nowrap; }
.sg-today .dash-dle .btn { flex: none; width: 100%; }

/* ====== Châtiment v2 : compagnon, paliers, drake 3D, son ====== */
.smite-pets-box { margin: 18px auto 0; max-width: 640px; }
.smite-pets-box h4 { margin: 0 0 8px; font-size: 13px; color: var(--gold-hi); }
.pet-chip { display: inline-flex; align-items: center; gap: 8px; }
.pet-chip img { width: 22px; height: 22px; border-radius: 6px; }
.smite-tiers { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.smite-tier { display: grid; justify-items: center; gap: 2px; }
.smite-tier img { width: 46px; height: 46px; border-radius: 10px; border: 1px solid var(--gold-dim); box-shadow: 0 0 14px rgba(240, 160, 60, .25); }
.smite-tier b { font-family: Cinzel, Georgia, serif; color: var(--gold-hi); }
.smite-tier small { font-size: 11px; color: var(--muted); }
.smite-tier-arrow { font-style: normal; color: var(--gold-dim); }
.smite-sound { margin-top: 8px; }
.smite-sound.off { opacity: .6; text-decoration: line-through; }
#smite-topbar .smite-sound { margin: 0; }
.smite-dmg img { width: 20px; height: 20px; border-radius: 5px; }
.smite-dmg em { font-style: normal; font-weight: 700; color: #ffe08a; }
.smite-btn.evolve { animation: smite-evolve 1.2s cubic-bezier(.16, 1, .3, 1); }
@keyframes smite-evolve { 0% { transform: scale(1); } 20% { transform: scale(1.35) rotate(-6deg); box-shadow: 0 0 60px rgba(255, 220, 140, .9); } 100% { transform: none; } }
/* Scène 3D du drake */
.smite-stage.is3d { height: 400px; }
.smite-stage.is3d .smite-monster, .smite-stage.is3d .smite-aura { display: none; }
.drake3d { position: absolute; inset: -10px 0 0; z-index: 1; cursor: crosshair; }
.drake3d canvas { display: block; width: 100%; height: 100%; }
.smite-stage:not(.is3d) .drake3d { display: none; }
@media (max-width: 700px) { .smite-stage.is3d { height: 300px; } }

/* ====== Titres de section : apparition épurée ======
   Le texte monte depuis sa ligne de base derrière un masque, le trait doré se dessine, la phrase suit en fondu. */
.rv-mask { display: inline-block; overflow: hidden; padding: .14em 0 .08em; margin: -.14em 0 -.08em; vertical-align: bottom; }
.rv-txt { display: inline-block; }
.sec-head.rv-wait:not(.rv-in) > * { opacity: 1; }
.sec-head.rv-wait:not(.rv-in) .rv-txt { transform: translateY(110%); }
.sec-head.rv-wait:not(.rv-in) p, .sec-head.rv-wait:not(.rv-in) .sec-ic { opacity: 0; }
.sec-head.rv-in .rv-txt { animation: rv-rise .9s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms) both; }
.sec-head.rv-in .sec-ic { animation: rv-soft .8s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms) both; }
.sec-head.rv-in p { animation: rv-soft .8s cubic-bezier(.16, 1, .3, 1) calc(var(--rv-d, 0ms) + 180ms) both; }
@keyframes rv-rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes rv-soft { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Le titre garde son animation de fondu du bloc : on ne la joue pas une deuxième fois */
.sec-head.rv-wait.rv-in { animation: none; }

/* ====== Smite : scène 3D des monstres (vrais modèles du jeu) ====== */
.smite-stage.is3d { height: 420px; }
.smite-stage.is3d .smite-count { z-index: 4; }
@media (max-width: 700px) { .smite-stage.is3d { height: 320px; } }

/* Éclairs du Smite : halo rond qui s'estompe avant les bords (plus de rectangle) */
.smite-flash.go { background: radial-gradient(closest-side, rgba(252, 207, 218, .9), rgba(255, 170, 50, .45) 40%, transparent); }
.smite-flash.steal { background: radial-gradient(closest-side, rgba(255, 120, 110, .85), rgba(200, 30, 40, .4) 45%, transparent); }
.smite-flash.early { background: radial-gradient(closest-side, rgba(255, 190, 90, .55), transparent); }

/* ---------- Défi du jour : situation de la partie (KDA, score des kills) ---------- */
.dd-board { gap: 18px; }
.dd-you { min-width: 0; }
.dd-portrait { position: relative; flex: none; display: block; }
.dd-portrait .lvl { position: absolute; right: -4px; bottom: -3px; background: #000; border: 1px solid var(--gold-dim); color: var(--gold-hi); font-size: 10px; font-weight: 700; border-radius: 8px; padding: 0 4px; line-height: 14px; }
.dd-you b { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.dd-kda { display: flex; align-items: baseline; gap: 4px; margin: 1px 0 2px; font-family: Cinzel, Georgia, serif; font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dd-kda i { font-style: normal; color: var(--bad); }
.dd-kda em { margin-left: 6px; font-family: Inter, system-ui, sans-serif; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.dd-score { flex: none; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.dd-score b { font-family: Cinzel, Georgia, serif; font-size: 20px; font-variant-numeric: tabular-nums; }
.dd-score .a { color: #e1b0f6; }
.dd-score .e { color: #ff8a7a; }
.dd-score span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dd-foe.fed img { border-color: #ff6a5a; box-shadow: 0 0 12px rgba(255, 90, 70, .55); }
.dd-foe.fed small { color: #ff8a7a; font-weight: 700; }
.dd-foe.behind img { filter: saturate(.55) brightness(.8); }
@media (max-width: 700px) {
  .dd-board { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .dd-foes { grid-column: 1 / -1; }
  .dd-score { padding: 6px 10px; }
}

/* ---------- Mini-jeux : 4 colonnes sur 2 rangées, Duel 1v1 et Shop Rush en grand ----------
   rangée 1 : Duel 1v1 (2 cases) · Quitte ou double · Smite
   rangée 2 : Shop Rush (2 cases) · Laning · Draft */
.sg-mini { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#home .sg-mini .tile-duel, #home .sg-mini .tile-rush { grid-column: span 2; }
#home .sg-mini .tile-rush .tile-art { background-position: center 22%; }
#home .sg-mini .tile-duel .tile-art { background-position: center 18%; }
#home .sg-mini .tile-duel { border-color: rgba(223, 87, 121, .45); box-shadow: var(--shadow), 0 0 28px rgba(223, 87, 121, .14); }
@media (max-width: 1000px) {
  .sg-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sg-mini { grid-template-columns: 1fr; }
  #home .sg-mini .tile-duel, #home .sg-mini .tile-rush { grid-column: auto; }
}

/* ---------- Shop Rush ---------- */
.rush-intro { text-align: center; padding: 26px 0 10px; max-width: 820px; margin: 0 auto; }
.rush-intro h1 { margin: 14px 0 6px; font-size: clamp(38px, 5vw, 56px); }
.rush-intro .page-intro { max-width: 62ch; margin: 0 auto; }
.rush-intro .smite-sound { margin: 0 auto 14px; display: inline-flex; }
.rush-intro #rush-start { display: flex; margin: 0 auto; }
.rush-fan { position: relative; width: 150px; height: 84px; margin: 0 auto; }
.rush-fan img { position: absolute; top: 8px; left: 50%; width: 64px; height: 64px; margin-left: -32px; border-radius: 12px; border: 1px solid var(--gold); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.rush-fan img:nth-child(1) { transform: translateX(-46px) rotate(-14deg); opacity: .85; }
.rush-fan img:nth-child(3) { transform: translateX(46px) rotate(14deg); opacity: .85; }
.rush-fan img:nth-child(2) { z-index: 1; top: 0; width: 72px; height: 72px; margin-left: -36px; box-shadow: 0 0 30px rgba(223, 87, 121, .45), 0 12px 30px rgba(0, 0, 0, .55); }

.rush-play { max-width: 860px; margin: 0 auto; }
.rush-timebar { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.rush-time { min-width: 52px; text-align: right; font-family: Cinzel, Georgia, serif; font-size: 24px; font-weight: 700; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.rush-timer.hurry + .rush-time { color: #ff7a6a; text-shadow: 0 0 12px rgba(255, 90, 70, .5); }
.rush-timer { flex: 1; position: relative; height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); overflow: hidden; }
.rush-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #df5779, #f0d68a); box-shadow: 0 0 16px rgba(240, 214, 138, .45); transition: width .05s linear; }
.rush-timer.bonus { border-color: rgba(240, 214, 138, .7); box-shadow: 0 0 14px rgba(240, 214, 138, .45); }
.rush-timer.bonus i { background: linear-gradient(90deg, #f0d68a, #fff4c8); }
.rush-timer.hurry i { background: linear-gradient(90deg, #a5352c, #ff6a5c); box-shadow: 0 0 16px rgba(255, 90, 70, .5); animation: rush-hurry .6s ease-in-out infinite alternate; }
@keyframes rush-hurry { to { filter: brightness(1.35); } }

.rush-stage { position: relative; }
.rush-order { display: grid; justify-items: center; gap: 12px; padding: 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(18, 21, 60, .92), rgba(11, 13, 42, .92)); border: 1px solid var(--gold-dim); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(248, 211, 220, .06); transition: transform .2s; }
.rush-order.built { animation: rush-built .38s cubic-bezier(.2, 1.4, .4, 1); border-color: var(--gold); }
@keyframes rush-built { 0% { transform: scale(1); box-shadow: 0 0 0 rgba(240, 214, 138, 0); } 45% { transform: scale(1.03); box-shadow: 0 0 46px rgba(240, 214, 138, .55); } 100% { transform: scale(1); } }
.ro-head { display: flex; align-items: center; gap: 14px; }
.ro-img img, .ro-img .fallback { width: 68px; height: 68px; border-radius: 12px; border: 1px solid var(--gold); box-shadow: 0 0 22px rgba(223, 87, 121, .35); display: block; }
.ro-txt { display: grid; gap: 2px; text-align: left; }
.ro-txt small { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ro-txt b { font-family: Cinzel, Georgia, serif; font-size: 22px; color: var(--gold-hi); line-height: 1.15; }
.ro-txt span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--gold); font-variant-numeric: tabular-nums; }
.ro-txt .ico { width: 15px; height: 15px; }
.rush-order .stats { justify-content: center; margin: 0; }
.ro-slots { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.ro-plus { font-style: normal; font-weight: 700; color: var(--muted); }
.ro-slot { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; border: 1px dashed rgba(223, 87, 121, .45); background: rgba(3, 3, 18, .5); }
.ro-slot i { font-style: normal; font-family: Cinzel, Georgia, serif; font-size: 22px; color: rgba(223, 87, 121, .55); }
.ro-slot img, .ro-slot .fallback { width: 50px; height: 50px; border-radius: 10px; display: block; }
.ro-slot.got { border: 1px solid var(--good); box-shadow: 0 0 16px rgba(63, 191, 110, .35); animation: rush-pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.ro-slot.hint { border-style: solid; border-color: var(--ok); }
.ro-slot.hint img { opacity: .38; filter: grayscale(.4); }
@keyframes rush-pop { from { transform: scale(.6); } to { transform: scale(1); } }

.rush-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rush-float { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 22px; white-space: nowrap; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); animation: rush-float 1.1s ease-out forwards; }
.rush-float.gold { color: #f0d68a; }
.rush-float.time { top: 54%; font-size: 15px; color: #e1b0f6; }
.rush-float.bad { top: 54%; font-size: 17px; color: #ff7a6a; }
@keyframes rush-float { from { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -46px); } }
.rush-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: Cinzel, Georgia, serif; font-size: 90px; color: var(--gold-hi); text-shadow: 0 0 30px rgba(223, 87, 121, .6); }
.rush-count.go { animation: rush-count .7s ease-out both; }
@keyframes rush-count { from { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.9); } }
.rush-play.waiting .rush-shelf { opacity: .45; pointer-events: none; }
.rush-play.waiting .rush-order { filter: blur(1px) brightness(.8); }

.rush-shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 2px 8px; }
.rush-shelf-head span { font-family: Cinzel, Georgia, serif; font-size: 15px; color: var(--gold-hi); letter-spacing: .06em; }
.rush-shelf-head small { font-size: 12px; color: var(--muted); }
.rush-shelf { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 8px; }
.rush-item { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 10px 6px 9px; border-radius: 12px; border: 1px solid var(--line); background: rgba(11, 13, 42, .85); color: var(--text); font: inherit; cursor: pointer; touch-action: manipulation; user-select: none; transition: transform .12s, border-color .15s, background .15s, opacity .2s; }
.rush-item:hover { transform: translateY(-2px); border-color: var(--gold); background: rgba(223, 87, 121, .08); }
.rush-item:active { transform: translateY(0) scale(.97); }
.rush-item img, .rush-item .fallback { width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--gold-dim); display: block; }
.rush-item b { font-size: 11.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.rush-item small { font-size: 10.5px; color: var(--gold); font-variant-numeric: tabular-nums; }
.rush-item .rk { position: absolute; top: 5px; left: 6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: rgba(3, 3, 18, .8); border: 1px solid var(--line); font-size: 10px; line-height: 14px; color: var(--muted); }
.rush-item.used { opacity: .35; }
.rush-item.nope { border-color: var(--bad); background: rgba(224, 81, 74, .14); animation: rush-nope .35s; }
@keyframes rush-nope { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }

.rush-bag { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 620px; margin: 10px auto 0; }
.rush-bag span img, .rush-bag span .fallback { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); display: block; }
.rush-bag span.perfect img { border-color: var(--gold); box-shadow: 0 0 10px rgba(223, 87, 121, .45); }
.rush-end h3 { margin: 18px 0 0; font-size: 16px; }
#rush-end-next b.rec { color: var(--good); }
@media (max-width: 700px) {
  .rush-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .rush-time { font-size: 20px; min-width: 42px; }
  .rush-order { padding: 16px 12px; }
  .ro-txt b { font-size: 18px; }
  .ro-slot { width: 48px; height: 48px; }
  .ro-slot img, .ro-slot .fallback { width: 44px; height: 44px; }
  .rush-shelf-head small { display: none; }
}

/* ---------- Quitte ou double : éditions et définitions ---------- */
.arc-editions { margin: 6px 0 8px; }
.arc-def { display: block; max-width: 60ch; margin: 10px auto 0; font-size: 14.5px; font-style: italic; line-height: 1.55; color: #b7b9d1; }
.arc-worlds-logo { display: block; width: min(320px, 70%); height: auto; margin: 6px auto 2px; filter: drop-shadow(0 0 18px rgba(174, 40, 231, .35)); }
.arc-worlds-logo[hidden] { display: none; }
#arc-intro.worlds .arc-hero h1 { font-size: 26px; color: var(--gold); }
#arc-intro.worlds .arc-best { border-color: rgba(174, 40, 231, .5); box-shadow: 0 0 30px rgba(174, 40, 231, .18); }

/* ---------- Succès d'événement ---------- */
.ach-ev { display: inline-block; margin: 2px 0 3px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); border: 1px solid rgba(174, 40, 231, .45); background: rgba(174, 40, 231, .08); }
.nav-menu .nav-event { color: var(--blue); }

/* ---------- Événement Worlds 2026 : pastille du haut de page et bandeau ---------- */
.hero-event { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; white-space: nowrap; margin: 0 0 14px; padding: 6px 14px 6px 10px; border-radius: 999px; border: 1px solid rgba(174, 40, 231, .45); background: rgba(7, 10, 51, .65); backdrop-filter: blur(8px); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.hero-event[hidden] { display: none; }
.hero-event:hover { border-color: var(--blue); background: rgba(11, 15, 71, .8); transform: translateY(-1px); }
.hero-event b { color: var(--blue); letter-spacing: .04em; }
.hero-event span { color: var(--muted); }
.hero-event .ico { width: 13px; height: 13px; color: var(--blue); }
.he-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px var(--blue); }
.he-dot.live { background: #ff5a48; box-shadow: 0 0 10px #ff5a48; animation: he-live 1.2s ease-in-out infinite; }
@keyframes he-live { 50% { opacity: .35; } }

.worlds-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 16px; padding: 22px 24px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(174, 40, 231, .35); background: radial-gradient(120% 140% at 85% 50%, rgba(174, 40, 231, .12), transparent 55%), linear-gradient(180deg, rgba(21, 24, 64, .78), rgba(11, 13, 42, .86)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(248, 211, 220, .06); }
.worlds-banner[hidden] { display: none; }
.wb-art { position: absolute; right: 2%; top: 50%; width: 300px; height: 300px; transform: translateY(-50%); opacity: .14; pointer-events: none; filter: drop-shadow(0 0 30px rgba(174, 40, 231, .4)); }
.wb-main, .wb-steps { position: relative; }
.wb-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.wb-kicker .ico { width: 14px; height: 14px; }
.worlds-banner .wb-logo { margin: 10px 0 8px; line-height: 0; }
.wb-logo img { width: min(300px, 80%); height: auto; filter: drop-shadow(0 0 14px rgba(174, 40, 231, .3)); }
/* Titre « Worlds 2026 » en texte (le logo officiel des Worlds est une marque de Riot) */
/* Lettres en métal chromé (reflet clair en haut, ligne d'horizon plus sombre au milieu, bas lumineux), fin liseré, halo
   violet ; un éclat traverse le titre toutes les 7 s. Entre les deux mots, un petit cristal à nous (pas l'emblème des Worlds). */
.wtitle { position: relative; display: inline-flex; align-items: center; font: 400 clamp(42px, 6.2vw, 66px)/1 Anton, Impact, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: .5px rgba(255, 255, 255, .35);
  background: linear-gradient(105deg, transparent 44%, rgba(255, 236, 200, .9) 48%, #fff 50%, rgba(255, 190, 215, .9) 52%, transparent 56%) -150% 0 / 250% 100% no-repeat,
              linear-gradient(180deg, #ffffff 0%, #e4e0f0 34%, #a39bbd 49%, #746c92 53%, #c9c2de 74%, #f6f4fb 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(20, 8, 50, .6)) drop-shadow(0 0 14px rgba(174, 40, 231, .38));
  animation: wt-shine 7s ease-in-out 1.2s infinite; }
.wtitle b { font-weight: 400; }
.wt-gem { flex: none; width: .3em; height: .3em; margin: 0 .3em 0 .34em; transform: rotate(45deg); border-radius: 2px;
  background: linear-gradient(135deg, #ffd0dc, #ff4f7d 45%, #ae28e7); box-shadow: 0 0 10px rgba(255, 79, 125, .8), 0 0 22px rgba(174, 40, 231, .5), inset 0 0 0 1px rgba(255, 255, 255, .35); }
@keyframes wt-shine { 0%, 62% { background-position: -150% 0, 0 0; } 100% { background-position: 250% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .wtitle { animation: none; } }
.worlds-banner .wb-logo.wtitle { line-height: 1; }
p.arc-worlds-logo.wtitle { display: flex; justify-content: center; width: fit-content; margin-left: auto; margin-right: auto; font-size: clamp(38px, 7vw, 56px); }
p.arc-worlds-logo.wtitle[hidden] { display: none; }
.wb-main p { margin: 0; max-width: 58ch; font-size: 14px; line-height: 1.6; color: #b7b9d1; }
.wb-status { display: grid; gap: 1px; margin: 14px 0 0; padding-left: 12px; border-left: 2px solid var(--blue); }
.wb-status.live { border-color: #ff5a48; }
.wb-status b { font-size: 15px; color: var(--gold-hi); }
.wb-status span { font-size: 12.5px; color: var(--muted); }
.wb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.wb-actions .ico { width: 15px; height: 15px; }
.wb-best { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.wb-best b { color: var(--gold-hi); }
.wb-best .ico { color: var(--gold); }
.wb-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wb-steps li { position: relative; display: grid; grid-template-columns: 16px 1fr auto; column-gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; }
.wb-steps li i { grid-row: 1 / span 2; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(137, 139, 169, .6); }
.wb-steps b { font-size: 13.5px; color: var(--text); }
.wb-steps span { grid-column: 3; grid-row: 1; font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.wb-steps em { grid-column: 2 / span 2; font-style: normal; font-size: 11.5px; color: var(--muted); }
.wb-steps li.done { opacity: .55; }
.wb-steps li.done i { background: var(--gold); border-color: var(--gold); }
.wb-steps li.now { background: rgba(174, 40, 231, .08); border-color: rgba(174, 40, 231, .3); }
.wb-steps li.now i { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 10px var(--blue); }
@media (max-width: 860px) {
  .worlds-banner { grid-template-columns: 1fr; padding: 18px 16px; }
  .wb-art { width: 220px; height: 220px; right: -30px; top: 30%; }
}

/* ---------- Apprendre : les 4 outils en cartes séparées, chacune avec sa couleur ---------- */
#home .tool-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; background: none; border: none; border-radius: 0; overflow: visible; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#home .tool-row { --tool: #f6507a; --tool-glow: rgba(246, 80, 122, .22); position: relative; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 200px; padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(21, 24, 64, .74), rgba(11, 13, 42, .84)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .3s; }
#home .tool-row:nth-child(2) { --tool: #ae28e7; --tool-glow: rgba(174, 40, 231, .2); }
#home .tool-row:nth-child(3) { --tool: #b49bff; --tool-glow: rgba(180, 155, 255, .2); }
#home .tool-row:nth-child(4) { --tool: #ffb257; --tool-glow: rgba(255, 178, 87, .2); }
#home .tool-row::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, var(--tool), transparent); opacity: .65; }
#home .tool-row::after { content: ""; position: absolute; right: -50px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, var(--tool-glow), transparent 70%); pointer-events: none; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
#home .tool-row:hover { transform: translateY(-4px); border-color: var(--tool); background: linear-gradient(180deg, rgba(26, 29, 81, .82), rgba(13, 15, 47, .88)); box-shadow: 0 22px 44px rgba(0, 0, 0, .5), 0 0 26px var(--tool-glow); }
#home .tool-row:hover::after { transform: scale(1.25); }
#home .tool-ic { width: 52px; height: 52px; border-radius: 14px; border-color: var(--tool); background: radial-gradient(circle at 30% 25%, var(--tool-glow), rgba(3, 3, 18, .55)); }
#home .tool-ic .ico { width: 24px; height: 24px; color: var(--tool); }
#home .tool-row:hover .tool-ic { border-color: var(--tool); box-shadow: 0 0 18px var(--tool-glow); }
#home .tool-txt { gap: 6px; }
#home .tool-txt b { font-family: Cinzel, Georgia, serif; font-size: 17px; letter-spacing: .02em; }
#home .tool-txt span { font-size: 13px; line-height: 1.5; }
#home .tool-go { margin: auto 0 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--tool); }
#home .tool-go::before { content: "Ouvrir "; }
#home .tool-row:hover .tool-go { color: var(--tool); }
@media (max-width: 1000px) { #home .tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #home .tool-list { grid-template-columns: 1fr; gap: 10px; }
  #home .tool-row { min-height: 0; flex-direction: row; align-items: center; padding: 16px; }
  #home .tool-go { margin: 0 0 0 auto; }
  #home .tool-go::before { content: ""; }
}

/* Encyclopédie des items : l'échoppe du marchand (recadrée sur le marchand) */
.learn-hero-art.art-shop { background-size: 170%; background-position: 40% 62%; opacity: .85; filter: brightness(1.15) saturate(1.1); }
#home .learn-hero:hover .learn-hero-art.art-shop { opacity: 1; }

/* ---------- Musique de fond : bouton de la barre de navigation ---------- */
.nav-links .nav-music { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; margin-left: 6px; border: none; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #15184b, #070920 70%); color: var(--gold-hi); transition: transform .2s, box-shadow .3s; }
.nav-links .nav-music:hover { transform: scale(1.06); box-shadow: 0 0 16px rgba(223, 87, 121, .35); }
/* Anneau hextech : fin cercle doré, qui s'allume (sans bouger) quand la musique joue */
.nm-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nm-track { fill: none; stroke: rgba(223, 87, 121, .45); stroke-width: 1.4; transition: stroke .3s; }
.nav-music.playing .nm-track { stroke: #f87697; stroke-width: 1.6; filter: drop-shadow(0 0 2.5px rgba(243, 214, 143, .7)); }
.nav-music.playing { box-shadow: 0 0 14px rgba(223, 87, 121, .22); }
.nm-note { position: relative; display: grid; place-items: center; }
.nm-note .ico { width: 16px; height: 16px; }
.nav-music.playing .nm-note { animation: nm-bob 1.6s ease-in-out infinite alternate; }
@keyframes nm-bob { from { transform: translateY(.5px) rotate(-4deg); } to { transform: translateY(-1px) rotate(4deg); } }
/* Musique coupée : anneau éteint, note grise barrée */
.nav-music.off { color: var(--muted); background: radial-gradient(circle at 50% 35%, #10122a, #070818 70%); }
.nav-music.off .nm-track { stroke: rgba(137, 139, 169, .35); }
.nav-music.off::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; margin: -1px 0 0 -11px; border-radius: 2px; background: var(--muted); box-shadow: 0 0 0 2px #070920; transform: rotate(-45deg); }

/* ---------- Pied de page et mentions légales ---------- */
.footer p { margin: 2px 0; }
.legal-box { max-width: 720px; }
.legal-box h2 { margin: 0 44px 10px 0; font-size: 22px; }
.legal-box h3 { margin: 20px 0 6px; font-size: 15px; color: var(--gold); }
.legal-box p, .legal-box li { font-size: 13.5px; line-height: 1.65; color: #b7b9d1; }
.legal-box p { margin: 0 0 8px; }
.legal-box ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.legal-box a { color: var(--blue); }
.legal-quote { padding: 8px 12px; border-left: 2px solid var(--gold-dim); background: rgba(255, 255, 255, .03); font-style: italic; }
#legal-wipe { color: var(--bad); }

/* ---------- Ta progression : les rangs des modes défilent ---------- */
.dash-rank.swap .dr-emblem { animation: dr-swap-emblem .6s cubic-bezier(.16, 1, .3, 1) both; }
.dash-rank.swap .dr-info > * { animation: dr-swap .5s cubic-bezier(.16, 1, .3, 1) both; }
.dash-rank.swap .dr-info > :nth-child(2) { animation-delay: .05s; }
.dash-rank.swap .dr-info > :nth-child(3) { animation-delay: .1s; }
.dash-rank.swap .dr-info > :nth-child(4) { animation-delay: .15s; }
@keyframes dr-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dr-swap-emblem { from { opacity: 0; transform: scale(.82) rotate(-6deg); } to { opacity: 1; transform: none; } }
.dr-dots { display: flex; gap: 5px; margin-top: 8px; }
.dr-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .18); transition: background .3s, transform .3s; }
.dr-dots i.on { background: rgb(var(--rc)); transform: scale(1.3); }

/* ---------- Laning : mode en test ---------- */
.tile-mode.tile-beta { background: rgba(224, 168, 58, .16); border-color: rgba(224, 168, 58, .55); color: #f3c870; }
.nav-beta { margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #f3c870; border: 1px solid rgba(224, 168, 58, .5); vertical-align: 1px; }
.beta-badge { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: #f3c870; border: 1px solid rgba(224, 168, 58, .55); background: rgba(224, 168, 58, .12); }
.beta-note { margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid #e0a83a; background: rgba(224, 168, 58, .07); color: #f799b1; font-size: 13px; line-height: 1.5; }

/* ---------- Comptes : bouton de la barre, connexion, édition du profil ---------- */
.nav-links .nav-acct { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; margin-left: 6px; border-radius: 999px; border: 1px solid rgba(174, 40, 231, .45); background: rgba(174, 40, 231, .08); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.nav-links .nav-acct[hidden] { display: none; }
.nav-links .nav-acct:hover { border-color: var(--blue); background: rgba(174, 40, 231, .16); }
.nav-acct .ico { width: 15px; height: 15px; color: var(--blue); }
.nav-acct.in { padding-left: 3px; border-color: rgba(223, 87, 121, .45); background: rgba(223, 87, 121, .08); }
.nav-acct.in img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); }
.nav-acct span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.acct-box { max-width: 520px; }
.acct-box h2 { margin: 0 44px 8px 0; font-size: 22px; }
.acct-intro { margin: 0 0 16px; color: #b7b9d1; font-size: 14px; line-height: 1.6; }
.acct-providers { display: grid; gap: 10px; }
.acct-prov { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .15s, filter .2s; }
.acct-prov svg { width: 22px; height: 22px; }
.acct-prov:hover { transform: translateY(-1px); filter: brightness(1.08); }
.acct-prov.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.acct-prov.google { background: #fff; color: #1f1f1f; }
.acct-small { margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.acct-small a { color: var(--blue); }
.ae-box { max-width: 640px; }
.fb-input { width: 100%; }
.ae-av-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.ae-preview { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gold-hi); }
.ae-preview img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold); }
#ae-search { margin-top: 6px; }
.ae-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; max-height: 200px; overflow-y: auto; margin-top: 8px; padding: 6px; border-radius: 10px; background: rgba(3, 3, 18, .5); border: 1px solid var(--line); }
.ae-av { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.ae-av img { width: 100%; height: 100%; display: block; }
.ae-av:hover { border-color: var(--gold-dim); }
.ae-av.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(223, 87, 121, .5); }
.ae-help { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.ae-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; margin-top: 8px; }
.ae-ach { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.ae-ach .ach-pic { width: 34px; height: 34px; }
.ae-ach.on { border-color: var(--gold); background: rgba(223, 87, 121, .1); }
.ae-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* ---------- Classements ---------- */
.rk-hint { color: var(--muted); font-size: 13px; margin: 12px 0; text-align: center; }
.rk-list { list-style: none; max-width: 640px; margin: 0 auto; padding: 0; display: grid; gap: 6px; }
.rk-row { display: grid; grid-template-columns: 44px 40px 1fr auto; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 24, 64, .7), rgba(11, 13, 42, .8)); }
.rk-place { font-family: Cinzel, Georgia, serif; font-size: 18px; font-weight: 700; color: var(--muted); text-align: center; }
.rk-av { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.rk-name { justify-self: start; padding: 0; border: none; background: none; color: var(--gold-hi); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.rk-name:hover { text-decoration: underline; }
.rk-score { font-family: Cinzel, Georgia, serif; font-size: 16px; color: var(--gold); font-variant-numeric: tabular-nums; }
.rk-row.top1 { border-color: rgba(255, 215, 120, .7); box-shadow: 0 0 22px rgba(255, 215, 120, .18); }
.rk-row.top1 .rk-place { color: #ffd778; }
.rk-row.top2 .rk-place { color: #d9e2ec; }
.rk-row.top3 .rk-place { color: #e0a070; }
.rk-row.me { border-color: var(--blue); background: linear-gradient(180deg, rgba(174, 40, 231, .14), rgba(11, 13, 42, .8)); }
.rk-empty, .rk-gap { text-align: center; color: var(--muted); padding: 18px; list-style: none; }
.rk-gap { padding: 2px; }

/* ---------- Profil public ---------- */
.pl-head { position: relative; display: flex; align-items: center; gap: 18px; padding: 28px 24px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(223, 87, 121, .4); background: linear-gradient(90deg, rgba(6, 8, 30, .96) 30%, rgba(6, 8, 30, .55)), var(--art) center 25% / cover; box-shadow: var(--shadow); }
.pl-av { width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 24px rgba(223, 87, 121, .45); flex: none; }
.pl-id { flex: 1; min-width: 0; }
.pl-id h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); overflow-wrap: anywhere; }
.pl-title { display: inline-block; margin: 6px 0 4px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f0209; background: linear-gradient(90deg, #f3d68f, #df5779); }
.pl-id small { display: block; color: var(--muted); font-size: 13px; }
.pl-actions { display: flex; flex-direction: column; gap: 8px; }
.pl-block { margin-top: 22px; }
.pl-block h3 { margin: 0 0 10px; font-size: 16px; }
.pl-titles { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gold-dim); color: var(--gold-hi); font-size: 12.5px; }
.pl-chip.on { border-color: var(--gold); background: rgba(223, 87, 121, .14); }
.pl-achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pl-ach { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 24, 64, .7), rgba(11, 13, 42, .8)); text-align: center; }
.pl-ach .ach-pic { width: 64px; height: 64px; }
.pl-ach b { font-size: 13.5px; color: var(--gold-hi); }
.pl-ach small { font-size: 12px; color: var(--blue); }
.pl-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pl-rank { display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 14px; border: 1px solid rgba(var(--rc), .45); background: rgba(12, 25, 41, .8); text-align: center; }
.pl-emb { position: relative; width: 96px; height: 70px; overflow: hidden; }
.pl-emb img { position: absolute; left: 50%; top: 50%; width: 340px; max-width: none; transform: translate(-50%, -47%); }
.pl-rank b { color: rgb(var(--rc)); font-family: Cinzel, Georgia, serif; }
.pl-rank small { color: var(--muted); font-size: 12px; }
.pl-places { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-place { display: grid; gap: 1px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(11, 13, 42, .8); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pl-place b { font-family: Cinzel, Georgia, serif; font-size: 18px; color: var(--gold-hi); }
.pl-place span { font-size: 13px; }
.pl-place small { color: var(--muted); font-size: 12px; }
.pl-own { margin-top: 26px; text-align: center; font-size: 13px; color: var(--muted); }
.link-btn.danger { color: var(--bad); }
@media (max-width: 700px) {
  .pl-head { flex-direction: column; text-align: center; }
  .pl-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .nav-acct span { display: none; }
  .nav-links .nav-acct { padding: 0 9px; }
  .nav-links .nav-acct.in { padding: 0 3px; }
}
.acct-box .fb-input { display: block; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5, 7, 28, .7); color: var(--text); font: inherit; transition: border-color .15s, box-shadow .15s; }
.acct-box .fb-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(223, 87, 121, .18); }
.acct-box select.fb-input option { background: #0c0e2f; }

/* ---------- Classements : période ---------- */
.rk-periods { display: flex; width: fit-content; margin: 14px auto 0; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(3, 3, 18, .6); }
.rk-periods button { padding: 7px 16px; border: none; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rk-periods button.on { background: linear-gradient(180deg, #1a1d51, #11143f); color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-dim); }
.rk-reset { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------- Titres : voir le bloc « Titres v2 » en fin de fichier ---------- */
.pl-title-row { margin: 8px 0 6px; }


/* ---------- Pied de page discret ---------- */
.footer p { margin: 0; }
.ft-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px !important; }
.ft-link { padding: 0; border: none; background: none; color: #6a6d90; font: inherit; font-size: 10.5px; text-decoration: none; cursor: pointer; transition: color .15s; }
.ft-link:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
/* Pendant une partie, le pied de page disparaît (il reste sur l'accueil et les pages d'information) */
body:has(#game:not([hidden])) .footer, body:has(#end:not([hidden])) .footer, body:has(#setup:not([hidden])) .footer,
body:has(#smite:not([hidden])) .footer, body:has(#rush:not([hidden])) .footer, body:has(#lasthit:not([hidden])) .footer,
body:has(#arcade:not([hidden])) .footer, body:has(#guess:not([hidden])) .footer, body:has(#champs:not([hidden])) .footer,
body:has(#draft:not([hidden])) .footer, body:has(#itemdle:not([hidden])) .footer { display: none; }

/* ---------- Classements sur l'accueil : semaine et depuis toujours côte à côte ---------- */
#sec-rank .sec-head .btn { flex: none; }
.hr-hint { margin: -6px 0 14px; color: var(--muted); font-size: 13px; }
.hr-hint b { color: var(--gold-hi); }
/* Carrousel : la piste glisse d'une carte à la fois (--i = première carte visible, --per = cartes visibles) */
.hr-viewport { overflow: hidden; margin: -12px; padding: 12px; touch-action: pan-y; }
.hr-track { --per: 2; display: flex; gap: 14px; transform: translateX(calc(var(--i, 0) * -1 * (100% + 14px) / var(--per))); transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.hr-track.still { transition: none; }
.hr-track > .hr-card { flex: 0 0 calc((100% - 14px * (var(--per) - 1)) / var(--per)); min-width: 0; }
.hr-track > .rk-empty { flex: 1; }
@media (max-width: 760px) { .hr-track { --per: 1; } }
.hr-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.hr-arrow { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(3, 3, 18, .55); color: var(--gold); cursor: pointer; transition: border-color .2s, color .2s, transform .2s; }
.hr-arrow:hover { border-color: var(--gold); color: var(--gold-hi); transform: scale(1.06); }
.hr-arrow svg { width: 16px; height: 16px; }
.hr-dots { display: flex; gap: 6px; }
.hr-dots button { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, .18); cursor: pointer; transition: background .3s, transform .3s; }
.hr-dots button.on { background: var(--gold); transform: scale(1.35); box-shadow: 0 0 8px rgba(223, 87, 121, .6); }
/* Carte d'un classement : illustration du mode en tête, cadre doré aux coins comme le client du jeu */
.hr-card { position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border-radius: 18px; border: 1px solid rgba(223, 87, 121, .28); background: linear-gradient(180deg, rgba(9, 11, 37, .92), rgba(5, 6, 22, .96)); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .3s, box-shadow .3s; }
.hr-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 140px; z-index: -1; background: radial-gradient(90% 100% at 50% -10%, rgba(223, 87, 121, .16), transparent 70%); transition: opacity .4s; }
.hr-card::after { content: ""; position: absolute; inset: 6px; border-radius: 13px; pointer-events: none;
  background:
    linear-gradient(var(--gold), var(--gold)) top left / 16px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 1px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) top right / 16px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) top right / 1px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom left / 16px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--gold), var(--gold)) bottom right / 16px 1px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 1px 16px no-repeat;
  opacity: .55; }
.hr-card:hover { border-color: rgba(223, 87, 121, .55); box-shadow: var(--shadow), 0 0 26px rgba(223, 87, 121, .12); }
.hr-card:hover::before { opacity: 1.6; }
.hr-head { display: flex; align-items: center; gap: 12px; padding: 22px 18px 14px; }
.hr-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: radial-gradient(circle at 50% 30%, rgba(223, 87, 121, .28), rgba(5, 7, 28, .85)); border: 1px solid rgba(223, 87, 121, .5); color: var(--gold-hi); box-shadow: 0 0 16px rgba(223, 87, 121, .2); }
.hr-ic .ico { width: 20px; height: 20px; }
.hr-title { flex: 1; min-width: 0; }
.hr-title small { display: block; color: #dbb4eb; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.hr-title h3 { margin: 2px 0 0; font-family: Cinzel, Georgia, serif; font-size: 19px; color: var(--gold-hi); text-shadow: 0 2px 10px rgba(0, 0, 0, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-play { flex: none; }
.hr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px; margin-bottom: 8px; }
.hr-col { position: relative; min-width: 0; padding: 10px 8px 8px; border-radius: 12px; background: rgba(2, 3, 15, .62); border: 1px solid rgba(255, 255, 255, .05); }
.hr-col::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); }
.hr-col.wk { --acc: #ae28e7; }
.hr-col.at { --acc: #f3d68f; background: linear-gradient(180deg, rgba(223, 87, 121, .08), rgba(2, 3, 15, .62)); border-color: rgba(223, 87, 121, .14); }
.hr-col h4 { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hr-col h4 .ico { width: 12px; height: 12px; }
.hr-col.wk h4 { color: #dbb4eb; }
.hr-col.at h4 { color: #f3d68f; }
.hr-cols.one { grid-template-columns: 1fr; }
.hr-col ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.hr-row { display: grid; grid-template-columns: 18px 24px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 4px 6px; border-radius: 9px; transition: background .2s; }
.hr-row:hover { background: rgba(255, 255, 255, .04); }
.hr-row.p1 { padding: 6px; background: linear-gradient(90deg, rgba(255, 210, 110, .16), rgba(255, 210, 110, .02)); box-shadow: inset 0 0 0 1px rgba(255, 215, 120, .25); }
.hr-row.me { background: rgba(174, 40, 231, .12); box-shadow: inset 0 0 0 1px rgba(174, 40, 231, .4); }
.hr-pl { font-family: Cinzel, Georgia, serif; font-size: 13px; font-weight: 700; color: var(--muted); text-align: center; }
.hr-row.p1 .hr-pl { color: #ffd778; text-shadow: 0 0 8px rgba(255, 215, 120, .6); }
.hr-row.p2 .hr-pl { color: #d9e2ec; }
.hr-row.p3 .hr-pl { color: #e0a070; }
.hr-av { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gold-dim); }
.hr-row.p1 .hr-av { width: 28px; height: 28px; margin: -2px; border: 2px solid #ffd778; box-shadow: 0 0 10px rgba(255, 215, 120, .55); }
.hr-name { min-width: 0; padding: 0; border: none; background: none; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.hr-row.p1 .hr-name { color: var(--gold-hi); font-weight: 700; }
.hr-name:hover { color: var(--gold-hi); text-decoration: underline; }
.hr-sc { font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Personne classé : un trône libre plutôt qu'une case vide */
.hr-empty { display: grid; justify-items: center; gap: 2px; padding: 12px 6px 10px; color: var(--muted); font-size: 11.5px; text-align: center; line-height: 1.35; }
.hr-empty b { color: var(--gold); font-family: Cinzel, Georgia, serif; font-size: 13px; letter-spacing: .04em; }
.hr-throne { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; border: 1px dashed rgba(223, 87, 121, .45); color: rgba(243, 214, 143, .7); background: radial-gradient(circle, rgba(223, 87, 121, .12), transparent 70%); }
.hr-throne .ico { width: 17px; height: 17px; }
.hr-gap { text-align: center; color: var(--muted); font-size: 11px; line-height: .8; }
.hr-more { align-self: center; margin: auto 0 14px; padding: 4px 12px; border: none; border-radius: 999px; background: none; color: var(--gold); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: color .2s, background .2s; }
.hr-more:hover { color: var(--gold-hi); background: rgba(223, 87, 121, .1); }
.hr-hint { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(223, 87, 121, .18); background: rgba(5, 7, 28, .6); }
@media (max-width: 420px) {
  .hr-cols { grid-template-columns: 1fr; }
  .hr-head { padding: 18px 14px 12px; }
}

/* ---------- Photo Discord / Google comme avatar ---------- */
.ae-av.photo { position: relative; border-color: rgba(174, 40, 231, .5); }
.ae-av.photo img { object-fit: cover; }
.ae-av.photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0; background: rgba(3, 3, 18, .78); color: #dbb4eb; font-size: 8.5px; font-weight: 700; letter-spacing: .04em; }
.ae-av.photo.on { border-color: var(--gold); }
.ae-preview img, .nav-acct img, .rk-av, .pl-av { object-fit: cover; }
.pl-head { isolation: isolate; }
.pl-head.photo { background: linear-gradient(90deg, rgba(6, 8, 30, .96) 30%, rgba(6, 8, 30, .7)); }
.pl-head.photo::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: var(--art) center / cover; filter: blur(28px) saturate(1.3); opacity: .4; }

/* ---------- Choix du titre ---------- */
.ae-titles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .5); max-height: 220px; overflow-y: auto; }
.ae-ttl { padding: 3px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.ae-ttl:first-child { padding: 4px 12px; border-color: var(--line); }
.ae-ttl:hover { border-color: var(--gold-dim); }
.ae-ttl.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(223, 87, 121, .35); color: var(--gold-hi); }
.ae-ttl-h { flex-basis: 100%; margin: 6px 0 0 4px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rk-titles { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Titres v2 ----------
   Légende (classement depuis toujours, top 10) : fond sombre, bordure dégradée qui tourne, texte doré, très lumineux.
   Hebdo (top 10 final d'une semaine) : petite plaque de métal plate, sans animation.
   Plus la place est haute, plus le titre est décoré. */
@property --tt-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.ttl { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .03em; line-height: 1.5; white-space: nowrap; vertical-align: middle; }
.ttl svg { width: 13px; height: 13px; flex: none; }
.ttl b { font-weight: 800; }
.ttl i { font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.pl-title-row .ttl { font-size: 13px; padding: 4px 13px; }

/* Succès */
.ttl.ach { border: 1px solid rgba(174, 40, 231, .45); color: #dbb4eb; background: rgba(174, 40, 231, .08); }


/* ---------- Rang obtenu pendant la partie, à côté du pseudo ---------- */
.rk-who, .hr-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hr-who { gap: 3px; }
.rk-who .rk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-rank { display: inline-flex; align-items: center; gap: 3px; flex: none; color: rgb(var(--rc)); font-size: 11.5px; }
.lb-rank b { font-weight: 700; letter-spacing: .02em; }
.lb-emb { position: relative; display: block; flex: none; width: 34px; height: 26px; overflow: hidden; }
.lb-emb img { position: absolute; left: 50%; top: 50%; width: 120px; max-width: none; transform: translate(-50%, -47%); }
.hr-row .lb-emb { width: 22px; height: 18px; }
.hr-row .lb-emb img { width: 80px; }
@media (max-width: 520px) { .rk-who .lb-rank b { display: none; } }


/* ---------- Titres de classement : pastilles épurées, couleur selon la place (or, argent, bronze, saphir, émeraude, acier) ----------
   Hebdo (.ttl.wk) : fine pastille au liseré teinté, sans animation. All-time (.ttl.lgd) : liseré à la couleur de la place,
   traversé par un reflet nacré qui fait le tour ; voile irisé très léger sur la face ; place dans une pièce de métal ;
   étiquette ALL-TIME nacrée. Au survol : la pastille se soulève, un éclat suit le curseur et la pièce fait un tour. */
.t-gold { --c: 245, 196, 81; --c1: #ffe9ad; --c2: #c2902f; }
.t-silver { --c: 205, 215, 227; --c1: #ffffff; --c2: #8d9aab; }
.t-bronze { --c: 226, 152, 94; --c1: #ffd3a8; --c2: #a65e2c; }
.t-sapphire { --c: 98, 166, 255; --c1: #c6e2ff; --c2: #2f6bd4; }
.t-emerald { --c: 82, 214, 156; --c1: #c2f6dc; --c2: #1f9a62; }
.t-steel { --c: 156, 169, 183; --c1: #dde4eb; --c2: #6b7785; }
.ttl.wk, .ttl.lgd { margin: 3px 4px; font-family: Inter, system-ui, sans-serif; letter-spacing: 0; line-height: 1; white-space: nowrap; }

/* Hebdo */
.ttl.wk { gap: 8px; height: 26px; padding: 0 12px; border: 1px solid rgba(var(--c), .3); border-radius: 999px; background: linear-gradient(90deg, rgba(var(--c), .12), rgba(var(--c), .02) 65%), rgba(8, 9, 26, .72); color: #e8e8f3; }
.ttl.wk .wk-n { color: rgb(var(--c)); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ttl.wk b { font-size: 12px; font-weight: 600; }
.ttl.wk .wk-x { margin-right: -3px; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.ttl.wk i { padding: 0 0 0 8px; border-left: 1px solid rgba(var(--c), .25); border-radius: 0; color: rgba(var(--c), .85); font-size: 9px; font-weight: 700; letter-spacing: .12em; }

/* All-time */
.ttl.lgd { --mx: 30%; --my: 0%; gap: 9px; height: 30px; padding: 0 14px 0 4px; border-radius: 999px; overflow: hidden; isolation: isolate; background: none; color: #f4f4fb; box-shadow: 0 8px 24px -10px rgba(var(--c), .65); cursor: default; transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
/* liseré : la couleur de la place, traversée par un reflet nacré qui fait le tour (dégradé conique qui tourne derrière la face) */
.ttl.lgd::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: 320px; height: 320px; margin: -160px 0 0 -160px; background: conic-gradient(from 0deg, rgba(var(--c), .5) 0 50%, #ff9ad5 60%, #ffe08a 66%, #fff 71%, #9effd0 76%, #8fd3ff 82%, #c4a8ff 87%, rgba(var(--c), .5) 96%); transition: filter .3s ease; animation: ttl-spin 6s linear infinite; }
.ttl.lgd::after { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: radial-gradient(120% 200% at 0% 50%, rgba(var(--c), .22), transparent 60%), linear-gradient(180deg, #141631, #0a0b1b); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
/* voile irisé très léger qui dérive sur la face ; au survol, un éclat de lumière suit le curseur */
.lgd-shine { position: absolute; inset: 1px; z-index: 0; padding: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgba(255, 154, 213, .09) 38%, rgba(255, 224, 138, .09) 46%, rgba(158, 255, 208, .09) 54%, rgba(143, 211, 255, .09) 62%, transparent 75%) 0 0 / 300% 100%; animation: ttl-drift 9s ease-in-out infinite alternate; }
.lgd-shine::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .22), transparent 55%); opacity: 0; transition: opacity .3s ease; }
.lgd-n { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--c1), var(--c2) 78%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 -2px 3px rgba(0, 0, 0, .22), 0 0 0 3px rgba(var(--c), .13), 0 2px 6px rgba(0, 0, 0, .35); color: #10111f; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.ttl.lgd .lgd-name { position: relative; z-index: 1; font-size: 12.5px; font-weight: 600; }
/* étiquette ALL-TIME nacrée, après un fin séparateur */
.ttl.lgd .lgd-tag { position: relative; z-index: 1; padding: 0 0 0 9px; border-left: 1px solid rgba(255, 255, 255, .12); border-radius: 0; background: linear-gradient(90deg, #ffb3dd, #fa9fb6, #b3ffd9, #a8dcff, #d4bfff, #ffb3dd) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 9px; font-weight: 800; letter-spacing: .14em; animation: ttl-iris 6s linear infinite; }
/* le 1er brille un peu plus ; les 6e à 10e ont un liseré plus discret */
.ttl.lgd.p1 { box-shadow: 0 0 0 1px rgba(var(--c), .18), 0 8px 28px -8px rgba(var(--c), .8); }
.ttl.lgd.p6::before { opacity: .55; }
/* survol */
.ttl.lgd:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 32px -10px rgba(var(--c), .95); }
.ttl.lgd:hover::before { filter: brightness(1.35) saturate(1.3); }
.ttl.lgd:hover .lgd-shine::before { opacity: 1; }
.ttl.lgd:hover .lgd-n { animation: ttl-flip .7s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes ttl-spin { to { transform: rotate(360deg); } }
@keyframes ttl-drift { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@keyframes ttl-iris { to { background-position: 200% 0; } }
@keyframes ttl-flip { from { transform: perspective(90px) rotateY(0deg); } to { transform: perspective(90px) rotateY(360deg); } }

/* ---------- Maîtrise des champions sur le profil public, et son choix dans « Modifier mon profil » ---------- */
.pl-mast { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.pl-mast .mcard { border-radius: 14px; background: linear-gradient(180deg, rgba(21, 24, 64, .7), rgba(11, 13, 42, .8)); }
.ae-mast .ae-ach img { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-dim); }
.ae-mast .ae-ach small { display: block; color: var(--muted); font-size: 11px; }
.ae-check { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--muted); font-size: 12.5px; cursor: pointer; }
.ae-check input { accent-color: var(--gold); }

/* ---------- Classement du mode sur l'écran de fin de partie ---------- */
.lb-end { width: 100%; max-width: 620px; margin: 18px auto 0; padding: 12px 0 6px; border-radius: 16px; border: 1px solid rgba(223, 87, 121, .18); background: linear-gradient(180deg, rgba(15, 17, 49, .75), rgba(8, 9, 28, .8)); text-align: left; }
.lb-end-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 10px; }
.lb-end-head b { display: flex; align-items: center; gap: 7px; color: var(--gold-hi); font-family: Cinzel, Georgia, serif; font-size: 14px; }
.lb-end-head b .ico { width: 15px; height: 15px; color: var(--gold); }
.lb-end-head .link-btn { font-size: 12.5px; }
.lb-end-hint { margin: 4px 14px 4px; color: var(--muted); font-size: 12.5px; }
#dle-lb, #lb-end-dle { margin-top: 14px; }

/* ---------- Annonce d'un nouveau titre ---------- */
.ttl-pop { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(2, 2, 11, .72); backdrop-filter: blur(4px); animation: ttp-fade .35s ease both; }
.ttl-pop-box { position: relative; width: min(420px, 100%); padding: 30px 24px 22px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(223, 87, 121, .35); background: radial-gradient(120% 90% at 50% 0%, rgba(223, 87, 121, .16), transparent 60%), linear-gradient(180deg, #12153b, #090b23); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); text-align: center; animation: ttp-pop .55s cubic-bezier(.2, 1.3, .4, 1) both; }
.ttl-pop-box.all { border-color: rgba(255, 210, 140, .45); }
/* rayons qui tournent derrière le titre */
.ttl-pop-rays { position: absolute; left: 50%; top: 52%; width: 520px; height: 520px; margin: -260px 0 0 -260px; background: repeating-conic-gradient(from 0deg, rgba(240, 200, 120, .1) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); mask: radial-gradient(closest-side, #000 20%, transparent 75%); animation: ttl-spin 22s linear infinite; pointer-events: none; }
.ttl-pop-box.all .ttl-pop-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 154, 213, .1) 0 5deg, rgba(158, 255, 208, .08) 5deg 10deg, transparent 10deg 18deg); }
.ttl-pop-box > :not(.ttl-pop-rays) { position: relative; }
.ttl-pop-box small { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ttl-pop-box h2 { margin: 6px 0 16px; font-family: Cinzel, Georgia, serif; font-size: 26px; color: var(--gold-hi); }
.ttl-pop-title { display: flex; justify-content: center; margin: 4px 0 16px; animation: ttp-title .9s .25s cubic-bezier(.2, 1.4, .4, 1) both; }
.ttl-pop-title .ttl { zoom: 1.35; }
.ttl-pop-box p { margin: 0 0 20px; color: var(--text); font-size: 14px; line-height: 1.5; }
.ttl-pop-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
@keyframes ttp-fade { from { opacity: 0; } }
@keyframes ttp-pop { from { opacity: 0; transform: translateY(18px) scale(.92); } }
@keyframes ttp-title { from { opacity: 0; transform: scale(.4); filter: blur(6px) brightness(2); } 60% { filter: blur(0) brightness(1.6); } }

/* ---------- Pick'Ems des Worlds 2026 ---------- */
.wp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 4px; }
.wp-total { display: flex; align-items: baseline; gap: 6px; padding: 10px 18px; border-radius: 14px; border: 1px solid rgba(223, 87, 121, .35); background: linear-gradient(180deg, rgba(223, 87, 121, .14), rgba(14, 16, 49, .7)); }
.wp-total b { color: var(--gold-hi); font-family: Cinzel, Georgia, serif; font-size: 28px; }
.wp-total span { color: var(--muted); font-size: 13px; }
.wp-hint { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.wp-step { margin-top: 22px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(18, 21, 60, .75), rgba(9, 11, 41, .8)); }
.wp-step-head { display: flex; align-items: center; gap: 12px; }
.wp-step-head h2 { margin: 0; font-size: 18px; }
.wp-step-head small { color: var(--muted); font-size: 12px; }
.wp-n { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #e0375f, #9a173c); color: #fff; font-weight: 800; }
.wp-pts { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(223, 87, 121, .16); color: var(--gold-hi); font-size: 13px; }
.wp-help { margin: 10px 0 12px; color: var(--text); font-size: 13.5px; }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
/* carte d'équipe : logo, région, nom */
.wp-team { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .5); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.wp-team:not([disabled]):hover { border-color: rgba(223, 87, 121, .6); transform: translateY(-1px); }
.wp-team[disabled] { cursor: default; }
.wp-logo { flex: none; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.wp-logo.none { display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--line); color: var(--muted); font-size: 9px; font-weight: 800; }
.wp-tx { display: grid; gap: 1px; min-width: 0; }
.wp-team b { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.wp-team small { color: var(--muted); font-size: 11px; }
.wp-reg { color: #c58bf0; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wp-team.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(223, 87, 121, .22), rgba(223, 87, 121, .06)); box-shadow: 0 0 0 1px rgba(223, 87, 121, .4); }
.wp-team.right, .wp-sw.right .wp-team { border-color: var(--good); background: rgba(63, 191, 110, .14); }
.wp-team.half, .wp-sw.half .wp-team { border-color: var(--ok); background: rgba(224, 168, 58, .1); }
.wp-team.wrong, .wp-sw.wrong .wp-team { border-color: var(--bad); background: rgba(224, 81, 74, .1); opacity: .8; }
.wp-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.wp-counts span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.wp-counts span.full.q { border-color: rgba(223, 87, 121, .6); color: var(--gold-hi); }
.wp-counts span.full.e { border-color: rgba(174, 40, 231, .6); color: #e2c4fa; }
.wp-sw { display: grid; gap: 6px; }
.wp-sw .wp-team { cursor: default; }
.wp-sw.in.q .wp-team { border-color: var(--gold); }
.wp-sw.in.e .wp-team { border-color: rgba(174, 40, 231, .7); }
/* boutons de bilan : une ligne « Qualifiée », une ligne « Éliminée » */
.wp-sw-btns { display: grid; grid-template-columns: 62px repeat(3, 1fr); gap: 4px; align-items: center; }
.wp-sw-btns span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.wp-sw-btns button { padding: 5px 0; border-radius: 8px; border: 1px solid var(--line); background: rgba(3, 3, 18, .45); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.wp-sw-btns button:not([disabled]):hover { color: var(--gold-hi); border-color: rgba(223, 87, 121, .5); }
.wp-sw-btns button.on.q { background: linear-gradient(180deg, #e0375f, #9a173c); border-color: transparent; color: #fff; }
.wp-sw-btns button.on.e { background: linear-gradient(180deg, #8e2bc4, #5a1680); border-color: transparent; color: #fff; }
.wp-sw-btns button[disabled] { cursor: default; opacity: .55; }
.wp-sw-btns button.on[disabled] { opacity: 1; }
.wp-real { color: var(--muted); font-size: 11.5px; }
.wp-bracket { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; }
.wp-col h3 { margin: 0 0 8px; color: var(--gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.wp-match { display: grid; gap: 4px; margin-bottom: 12px; padding: 8px; border-radius: 12px; background: rgba(3, 3, 18, .35); }
.wp-match i { color: var(--muted); font-size: 11px; font-style: normal; text-align: center; }
.wp-tbd { padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
/* Play-in : tableau à double élimination, une colonne par jour */
/* Arbre du play-in : défile à l'intérieur de son cadre sur petit écran */
.dle-solved { color: #9ff0bd; }
.dle-solved b { color: #c9f7d9; }
.dle-solved svg { width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; }
.wp-tree { max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.wp-tree-in { position: relative; display: grid; min-width: 820px; grid-template-columns: repeat(3, minmax(190px, 1fr)) minmax(170px, .9fr); column-gap: 46px; row-gap: 12px; align-items: center;
  grid-template-areas: "tup tup . ." "u1 uf gf q" "u2 uf gf q" "tlo tlo gf q" "l1 lf gf q"; }
.wp-tl { margin: 4px 0 0; color: var(--gold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.wp-tl.up { grid-area: tup; }
.wp-tl.lo { grid-area: tlo; margin-top: 14px; color: #c77dff; }
.wp-tree .wp-pm { position: relative; z-index: 1; }
.pm-u1 { grid-area: u1; } .pm-u2 { grid-area: u2; } .pm-uf { grid-area: uf; } .pm-l1 { grid-area: l1; } .pm-lf { grid-area: lf; } .pm-gf { grid-area: gf; } .pm-q { grid-area: q; }
.wp-pm.qual { border-color: rgba(63, 191, 110, .35); }
.wp-pm.qual .wp-pm-t { cursor: default; }
.wp-lines { position: absolute; top: 0; left: 0; z-index: 0; overflow: visible; pointer-events: none; }
.wp-lines path { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2; }
.wp-lines path.on { stroke: var(--good); filter: drop-shadow(0 0 4px rgba(63, 191, 110, .6)); }
.wp-pm-w { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #04130a; font-style: normal; }
.wp-pm-w svg { width: 12px; height: 12px; }
.wp-pm { display: grid; gap: 4px; padding: 8px; border-radius: 12px; background: rgba(3, 3, 18, .35); border: 1px solid rgba(255, 255, 255, .06); }
.wp-pm.lower { border-color: rgba(174, 40, 231, .25); }
.wp-pm.final { border-color: rgba(223, 87, 121, .5); box-shadow: 0 0 18px rgba(223, 87, 121, .15); }
.wp-pm-h { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.wp-pm-h .ok { color: var(--good); }
.wp-pm-h .ko { color: var(--bad); }
.wp-pm-t { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(3, 3, 18, .5); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.wp-pm-t:not([disabled]):not(.tbd):hover { border-color: rgba(63, 191, 110, .7); }
.wp-pm-t[disabled] { cursor: default; }
.wp-pm-t .wp-logo { width: 24px; height: 24px; }
.wp-pm-t b { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.wp-pm-n { min-width: 14px; color: var(--muted); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.wp-pm-t.on { border-color: var(--good); background: linear-gradient(180deg, rgba(63, 191, 110, .24), rgba(63, 191, 110, .07)); }
.wp-pm-t.on .wp-pm-n { color: #9ff0bd; }
.wp-pm-t.lose { opacity: .55; }
.wp-pm-t.right { border-color: #7fe0a4; background: rgba(63, 191, 110, .3); box-shadow: 0 0 12px rgba(63, 191, 110, .35); }
.wp-pm-t.wrong { border-color: var(--bad); background: rgba(224, 81, 74, .1); }
.wp-pm-t.tbd { justify-content: center; min-height: 38px; border-style: dashed; color: var(--muted); font-size: 12px; text-align: center; cursor: default; }
.wp-pm-sc { display: flex; gap: 4px; }
.wp-pm-sc button { flex: 1; padding: 4px 0; border-radius: 7px; border: 1px solid var(--line); background: rgba(3, 3, 18, .45); color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.wp-pm-sc button.on { background: linear-gradient(180deg, #3fbf6e, #23824a); border-color: transparent; color: #fff; }
.wp-pm-sc button[disabled] { cursor: default; }
.wp-pm-res { color: var(--muted); font-size: 11.5px; }
@media (max-width: 760px) { .wp-bracket { grid-template-columns: 1fr; } }

/* Plume de Itemyze à côté du nom, dans la barre de navigation */
.brand { display: inline-flex; align-items: center; gap: 7px; }
.brand-logo { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 60, 110, .45)); transition: transform .3s ease; }
.brand:hover .brand-logo { transform: rotate(-12deg) scale(1.08); }

/* ---------- Bouton « Signaler » des modes de jeu ---------- */
.fb-mini { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); border-color: rgba(255, 255, 255, .1); }
.fb-mini .ico { width: 14px; height: 14px; color: var(--gold); }
.fb-mini:hover { color: var(--gold-hi); border-color: var(--gold-dim); }
@media (max-width: 700px) { .fb-mini span { display: none; } .fb-mini { padding: 0 9px; } }
.fb-end { margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.fb-end .link-btn { font-size: 12.5px; color: var(--muted); text-decoration-color: rgba(255, 255, 255, .25); }
.fb-end .link-btn:hover { color: var(--gold); }

/* ---------- Itemdle : indice prêt, révélé seulement si le joueur le demande ---------- */
.dle-hints .gh.ready { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-style: solid; border-color: rgba(174, 40, 231, .45); background: rgba(174, 40, 231, .06); color: var(--text); }
.dle-hints .gh.ready .btn { flex: none; padding: 4px 12px; font-size: 12px; border-color: rgba(174, 40, 231, .5); color: #dbb4eb; }
.dle-hints .gh.ready .btn:hover { border-color: #ae28e7; color: #fff; box-shadow: 0 0 12px rgba(174, 40, 231, .35); }

/* ---------- Aujourd'hui : trois défis (Itemdle et Devine le champion empilés à droite) ---------- */
.sg-today { grid-template-areas: "daily dle" "daily cdle"; }
.dash-cdle { grid-area: cdle; }
.sg-today .dash-dle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic tx tx" "ic st bt"; align-items: center; gap: 10px 16px; padding: 18px 20px; text-align: left; }
.sg-today .ddl-icon { grid-area: ic; width: 78px; height: 78px; border-radius: 18px; }
.sg-today .ddl-icon span { font-size: 38px; }
.sg-today .ddl-txt { grid-area: tx; }
.sg-today .ddl-txt h3 { font-size: 19px; }
.sg-today .ddl-txt h3 span { display: block; margin: 2px 0 0; }
.sg-today .dash-dle .dd-streak { grid-area: st; justify-self: start; }
.sg-today .dash-dle .btn { grid-area: bt; width: auto; }
.sg-today .dash-cdle { border-color: rgba(174, 40, 231, .32); background: radial-gradient(circle at 8% 50%, rgba(174, 40, 231, .2), transparent 50%), linear-gradient(180deg, rgba(21, 24, 64, .82), rgba(11, 13, 42, .88)); }
.sg-today .dash-cdle:hover { border-color: #c77dff; }
.dash-cdle .ddl-icon { border-color: #b067ec; background: radial-gradient(circle, rgba(174, 40, 231, .28), rgba(3, 3, 18, .6)); box-shadow: 0 0 18px rgba(174, 40, 231, .3); }
.dash-cdle .ddl-txt h3 span { color: #d3a4f7; }

/* ---------- Devine le champion ---------- */
.dle-cell.part { background: linear-gradient(180deg, #c98a1e, #8d5f14); }
.cdle-row { grid-template-columns: minmax(140px, 1.2fr) repeat(7, minmax(0, 1fr)); }
.cdle-mystery::before { background: conic-gradient(from 0deg, transparent 0 70%, rgba(199, 125, 255, .55) 80%, transparent 90%); }
.cdle-mystery > span:not(.blur) { color: #e6c9fb; text-shadow: 0 0 22px rgba(199, 125, 255, .6); }
.cdle-mystery img { border-radius: 50%; }
.cdle-splash-hint { overflow: hidden; }
.cdle-splash { display: block; height: 96px; margin-top: 6px; border-radius: 10px; background-size: cover; background-position: center 22%; }
.cdle-splash.blur { filter: blur(7px) saturate(.75); transform: scale(1.08); }
.cdle-win { position: relative; overflow: hidden; }
.cdle-win::before { content: ""; position: absolute; inset: 0; background: var(--splash) center 18% / cover no-repeat; opacity: .2; -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 75%); mask-image: linear-gradient(90deg, transparent 10%, #000 75%); pointer-events: none; }
.cdle-win > * { position: relative; }
.cdle-win .dle-win-icon img { border-radius: 50%; }
.cdle-lore { max-width: 640px; margin: 4px 0 0; color: #c9cbe4; font-size: 13.5px; line-height: 1.6; }
@media (max-width: 760px) {
  .sg-today { grid-template-areas: "daily" "dle" "cdle"; }
  .cdle-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Duel 1v1 ---------- */
.nav-new { color: #ffb3c6; border-color: rgba(223, 87, 121, .55); }
.duel-round { margin-left: auto; color: var(--muted); font-size: 14px; }
.duel-round b { color: var(--gold-hi); font-family: Cinzel, Georgia, serif; font-size: 17px; }
.duel-round em { margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(224, 81, 74, .18); color: #ff9d90; font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.duel-av { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold-dim); object-fit: cover; }

/* bandeau des deux joueurs */
.duel-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; max-width: 720px; margin: 4px auto 14px; }
.duel-pl { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); transition: border-color .25s, box-shadow .25s; }
.duel-pl.opp { flex-direction: row-reverse; text-align: right; }
.duel-pl.me { border-color: rgba(223, 87, 121, .45); }
.duel-pl-txt { display: grid; min-width: 0; }
.duel-pl-txt b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.duel-pl-txt span { color: var(--muted); font-size: 11.5px; }
.duel-pl strong { margin-left: auto; font-family: Cinzel, Georgia, serif; font-size: 26px; color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.duel-pl.opp strong { margin: 0 auto 0 0; }
.duel-pl strong.pop { animation: duel-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.duel-pl.answered { border-color: var(--good); box-shadow: 0 0 0 1px rgba(63, 191, 110, .35), 0 0 18px rgba(63, 191, 110, .2); }
.duel-pl.answered::after { content: "✓"; position: absolute; top: -8px; right: 12px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #06150c; font-size: 12px; font-weight: 900; }
.duel-pl.opp.answered::after { right: auto; left: 12px; }
.duel-vs { font-family: Cinzel, Georgia, serif; font-size: 22px; font-weight: 700; color: var(--gold); text-shadow: 0 0 16px rgba(223, 87, 121, .6); }
@keyframes duel-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: #fff; } 100% { transform: scale(1); } }

/* accueil du mode */
.duel-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.duel-kicker { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(223, 87, 121, .5); color: var(--gold-hi); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.duel-intro h1 { margin: 10px 0 4px; font-size: clamp(36px, 5vw, 54px); }
.duel-me { display: flex; align-items: center; gap: 14px; max-width: 520px; margin: 18px auto 0; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); text-align: left; }
.duel-me .duel-av { width: 54px; height: 54px; }
.duel-me-txt { display: grid; flex: 1; min-width: 0; }
.duel-me-txt b { font-size: 16px; }
.duel-me-txt span { color: var(--muted); font-size: 12.5px; }
.duel-elo { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(var(--rc), .1); border: 1px solid rgba(var(--rc), .4); }
.duel-elo img { width: 42px; height: 42px; object-fit: contain; }
.duel-elo div { display: grid; }
.duel-elo b { font-family: Cinzel, Georgia, serif; font-size: 20px; color: rgb(var(--rc)); line-height: 1.1; }
.duel-elo span { color: var(--muted); font-size: 11px; }
.duel-guest { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.duel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.duel-join { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.duel-join input { width: 170px; text-align: center; letter-spacing: .2em; text-transform: uppercase; }
.duel-lobby-msg { margin: 14px auto 0; max-width: 520px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(224, 81, 74, .45); background: rgba(224, 81, 74, .1); color: #ffb4ad; font-size: 13.5px; }
.duel-rules { display: grid; gap: 8px; max-width: 600px; margin: 26px auto 0; padding: 0; list-style: none; text-align: left; }
.duel-rules li { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .35); color: var(--text); font-size: 13.5px; line-height: 1.5; }
.duel-rules b { color: var(--gold-hi); }

/* recherche / attente */
.duel-wait { max-width: 560px; margin: 30px auto 0; text-align: center; }
.duel-wait h2 { margin: 18px 0 4px; }
.duel-wait p { color: var(--muted); }
.duel-radar { position: relative; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle, rgba(223, 87, 121, .35), rgba(223, 87, 121, .05) 60%, transparent 70%); }
.duel-radar::after { content: ""; position: absolute; inset: 42px; border-radius: 50%; background: radial-gradient(circle, #fff3f6, var(--gold)); box-shadow: 0 0 22px rgba(223, 87, 121, .8); }
.duel-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(223, 87, 121, .7); animation: duel-ping 2.4s cubic-bezier(.2, .6, .4, 1) infinite; }
.duel-radar i:nth-child(2) { animation-delay: .8s; }
.duel-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes duel-ping { 0% { transform: scale(.35); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.duel-code { display: grid; justify-items: center; gap: 8px; margin: 18px auto; padding: 16px; border-radius: 16px; border: 1px dashed rgba(223, 87, 121, .55); background: rgba(223, 87, 121, .08); }
.duel-code small { color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.duel-code b { font-family: Cinzel, Georgia, serif; font-size: 40px; letter-spacing: .3em; color: var(--gold-hi); padding-left: .3em; }
.duel-code span { color: var(--muted); font-size: 12.5px; word-break: break-all; }
.duel-wait-info { min-height: 20px; font-size: 13px; }

/* partie */
.duel-count { display: grid; justify-items: center; gap: 4px; margin: 40px auto; text-align: center; }
.duel-count small { color: var(--muted); font-size: 14px; }
.duel-count b { font-family: Cinzel, Georgia, serif; font-size: 96px; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 40px rgba(223, 87, 121, .7); animation: duel-count 1s ease-out; }
@keyframes duel-count { 0% { transform: scale(1.8); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); opacity: .85; } }
.arc-opt { position: relative; }
.arc-opt.picked { border-color: var(--gold); background: rgba(223, 87, 121, .14); }
.arc-opt.picked.good { border-color: var(--good); background: rgba(58, 190, 140, .16); }
.arc-opt.picked.wrong { border-color: var(--bad); background: rgba(224, 81, 74, .16); }
.duel-opp-pick { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
.duel-opp-pick img { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #c77dff; box-shadow: 0 0 10px rgba(174, 40, 231, .6); }
.duel-wait-opp { margin: 12px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.duel-fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duel-fb-p { display: grid; justify-items: center; gap: 2px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .35); }
.duel-fb-p span { color: var(--muted); font-size: 12px; }
.duel-fb-p b { font-family: Cinzel, Georgia, serif; font-size: 22px; }
.duel-fb-p b.win { color: #7fe0a4; }
.duel-fb-p b.lose { color: #ff8f86; }
.duel-fb-p em { color: var(--text); font-size: 12px; font-style: normal; }
.duel-fb-p.ok { border-color: rgba(63, 191, 110, .45); }
.duel-fb-p.ko { border-color: rgba(224, 81, 74, .35); }
.duel-bet { max-width: 720px; margin: 0 auto; text-align: center; }
.duel-bet .arc-timer { margin-top: 10px; }
.arc-bet-btn { cursor: pointer; }
.arc-bet-btn[disabled] { cursor: default; opacity: .45; transform: none; }
.arc-bet-btn.picked { opacity: 1; border-color: var(--gold); box-shadow: var(--glow-gold); }
.duel-bet-msg { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; min-height: 22px; margin: 14px 0 0; color: var(--muted); font-size: 13px; }
.duel-bet-opp { opacity: 0; transition: opacity .3s; color: #d3a4f7; }
.duel-bet-opp.on { opacity: 1; }

/* fin du duel */
.duel-result h2 { margin: 6px 0 2px; font-family: Cinzel, Georgia, serif; font-size: clamp(40px, 6vw, 60px); }
.duel-result.win h2 { color: var(--gold-hi); text-shadow: 0 0 30px rgba(223, 87, 121, .6); }
.duel-result.lose h2 { color: #c9cbe4; }
.duel-result.draw h2 { color: #d3a4f7; }
.duel-end-sub { margin: 0; color: var(--muted); }
.duel-end-score { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 22px 0 10px; }
.duel-end-score i { color: var(--muted); font-size: 13px; font-style: normal; }
.duel-es { display: grid; justify-items: center; gap: 4px; min-width: 130px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.duel-es .duel-av { width: 58px; height: 58px; }
.duel-es span { max-width: 140px; overflow: hidden; color: var(--text); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.duel-es b { font-family: Cinzel, Georgia, serif; font-size: 30px; color: var(--gold-hi); }
.duel-es.best { border-color: var(--gold); box-shadow: var(--glow-gold); }
.duel-end-elo { display: inline-flex; align-items: center; gap: 12px; margin: 6px 0 18px; padding: 10px 18px 10px 10px; border-radius: 16px; border: 1px solid var(--line); background: rgba(3, 3, 18, .4); text-align: left; }
.duel-end-elo img { width: 54px; height: 54px; object-fit: contain; }
.duel-end-elo div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 10px; }
.duel-end-elo span, .duel-end-elo small { grid-column: 1 / -1; color: var(--muted); font-size: 11.5px; }
.duel-end-elo b { font-family: Cinzel, Georgia, serif; font-size: 22px; color: var(--text); }
.duel-end-elo em { font-style: normal; font-weight: 800; }
.duel-end-elo em.up { color: #7fe0a4; }
.duel-end-elo em.down { color: #ff8f86; }
.duel-rematch-msg { min-height: 20px; margin: 10px 0 0; color: var(--gold-hi); font-size: 13.5px; }
#duel-rematch.pulse { animation: duel-pulse 1.2s ease-in-out infinite; }
@keyframes duel-pulse { 50% { box-shadow: 0 0 0 6px rgba(223, 87, 121, .25), 0 0 26px rgba(223, 87, 121, .55); } }
@media (max-width: 560px) {
  .duel-hud { gap: 6px; }
  .duel-pl { padding: 8px; gap: 6px; }
  .duel-pl .duel-av { width: 34px; height: 34px; }
  .duel-pl-txt span { display: none; }
  .duel-pl strong { font-size: 20px; }
  .duel-vs { font-size: 15px; }
  .duel-end-score { gap: 8px; }
  .duel-es { min-width: 0; flex: 1; }
}
#cdle-hints { align-items: start; }

/* ---------- Mini-jeux (v53) : six cartes identiques sur 3 colonnes ----------
   Illustration en bandeau, puis titre sur une ligne, description sur deux lignes, info, bouton : tout est aligné d'une carte à l'autre.
   Ordre : Duel 1v1 · Quitte ou double · Smite / Shop Rush · Laning · Simulateur de draft */
.sg-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#home .sg-mini .tile, #home .sg-mini .tile-duel, #home .sg-mini .tile-rush { grid-column: auto; min-height: 0; justify-content: flex-start; }
#home .sg-mini .tile-art { position: relative; inset: auto; flex: none; height: 170px; background-position: center 20%; }
#home .sg-mini .tile-art::after { background: linear-gradient(180deg, rgba(3, 3, 18, 0) 40%, rgba(10, 12, 40, .96) 100%); }
#home .sg-mini .tile:hover .tile-art { transform: none; }
#home .sg-mini .tile-body { position: static; flex: 1; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 12px 18px 18px; }
#home .sg-mini .tile-body h3 { overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
#home .sg-mini .tile-body p { display: -webkit-box; min-height: 3em; overflow: hidden; font-size: 13px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#home .sg-mini .tile-meta { min-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home .sg-mini .tile-actions { margin-top: auto; padding-top: 8px; }
#home .sg-mini .tile-mode { position: absolute; top: 12px; left: 12px; z-index: 3; }
#home .sg-mini .tile-duel { border-color: rgba(223, 87, 121, .5); }
#home .sg-mini .tile-duel .tile-art { background-position: center 15%; }
@media (max-width: 1000px) {
  .sg-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sg-mini { grid-template-columns: 1fr; }
  #home .sg-mini .tile-art { height: 140px; }
}

/* ---------- Amis (v54) ---------- */
.nav-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: linear-gradient(180deg, #e0375f, #9a173c); color: #fff; font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
#fr-body { max-width: 760px; margin-top: 18px; }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; max-width: 340px; }
.fr-add-msg { min-height: 20px; margin: 8px 0 0; font-size: 13px; }
.fr-add-msg.ok { color: #7fe0a4; }
.fr-add-msg.ko { color: #ff9d90; }
.fr-mycode { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.fr-mycode b { color: var(--text); }
.fr-found:empty { display: none; }
.fr-found { margin-top: 6px; }
.fr-code, .pl-code { margin-left: 4px; color: var(--muted); font-weight: 600; font-size: .78em; letter-spacing: .04em; }
.pl-code { font-family: Inter, sans-serif; font-size: .5em; }
.fr-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 16px; }
.fr-h span { padding: 1px 8px; border-radius: 999px; background: rgba(223, 87, 121, .16); color: var(--gold-hi); font-size: 12px; }
.fr-h em { margin-left: auto; color: #7fe0a4; font-size: 12.5px; font-style: normal; font-weight: 600; }
.fr-list { display: grid; gap: 8px; }
.fr-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.fr-card.on { border-color: rgba(63, 191, 110, .35); }
.fr-who { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.fr-who:hover b { color: var(--gold-hi); }
.fr-av { position: relative; flex: none; }
.fr-av img { display: block; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold-dim); object-fit: cover; }
.fr-av i { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #0b0d2a; background: #5c5f7a; }
.fr-card.on .fr-av i { background: #3fbf6e; box-shadow: 0 0 8px rgba(63, 191, 110, .7); }
.fr-id { display: grid; min-width: 0; }
.fr-id b { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.fr-id small { color: var(--muted); font-size: 12px; }
.fr-card.on .fr-id small { color: #7fe0a4; }
.fr-acts { display: flex; flex: none; align-items: center; gap: 6px; }
.fr-acts .btn[disabled] { opacity: .4; cursor: default; }
.fr-x { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
.fr-x:hover { border-color: var(--bad); color: #ff9d90; }
.fr-none, .fr-empty p { color: var(--muted); }
.fr-empty { padding: 22px; border-radius: 16px; border: 1px dashed var(--line); text-align: center; }
.fr-cmp { margin: -2px 0 6px; padding: 12px 14px; border-radius: 0 0 14px 14px; border: 1px solid var(--line); border-top: 0; background: rgba(3, 3, 18, .4); }
.fr-cmp-sum { margin: 0 0 8px; color: var(--muted); font-size: 13px; text-align: center; }
.fr-cmp-sum b { color: var(--gold-hi); font-family: Cinzel, Georgia, serif; font-size: 18px; }
.fr-cmp table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fr-cmp th, .fr-cmp td { padding: 7px 8px; border-top: 1px solid rgba(255, 255, 255, .06); text-align: left; }
.fr-cmp thead th { border-top: 0; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.fr-cmp tbody th { color: var(--text); font-weight: 600; }
.fr-cmp td b { display: block; }
.fr-cmp td small, .fr-cmp td span { color: var(--muted); font-size: 11px; }
.fr-cmp td.best b { color: #7fe0a4; }
.fr-tag { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(63, 191, 110, .45); color: #7fe0a4; font-size: 12px; font-weight: 700; }
.pl-friend { display: inline-flex; align-items: center; gap: 6px; }
/* invitation reçue */
.fr-pop { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; width: min(340px, calc(100vw - 32px)); padding: 14px 16px 16px; border-radius: 16px; border: 1px solid rgba(223, 87, 121, .6); background: linear-gradient(180deg, rgba(30, 20, 60, .97), rgba(12, 12, 40, .97)); box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 30px rgba(223, 87, 121, .25); overflow: hidden; animation: fr-in .45s cubic-bezier(.16, 1, .3, 1); }
.fr-pop.out { opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; }
.fr-pop-av { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; }
.fr-pop-txt small { display: block; color: var(--gold); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fr-pop-txt b { font-size: 15px; }
.fr-pop-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.fr-pop-btns .btn { flex: 1; justify-content: center; }
.fr-pop-time { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #e0375f, #ff8fb0); transform-origin: left; animation: fr-time 60s linear forwards; }
@keyframes fr-in { from { opacity: 0; transform: translateY(30px) scale(.96); } }
@keyframes fr-time { to { transform: scaleX(0); } }
/* amis en ligne dans l'accueil du Duel */
.duel-friends { max-width: 520px; margin: 18px auto 0; text-align: left; }
.duel-friends h3 { margin: 0 0 8px; color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.duel-fr { display: flex; flex-wrap: wrap; gap: 8px; }
.duel-fr-b { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid rgba(63, 191, 110, .4); background: rgba(63, 191, 110, .08); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.duel-fr-b img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.duel-fr-b b { color: var(--gold-hi); font-size: 12px; }
.duel-fr-b:hover { border-color: var(--gold); }
@media (max-width: 560px) {
  .fr-card { flex-wrap: wrap; }
  .fr-acts { width: 100%; justify-content: flex-end; }
}

/* ---------- Laning v55 : barre des sorts, annonces, aperçu des sorts ---------- */
.lh-center { max-width: 290px; }
.lh-abil { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; }
.lh-ab { position: relative; width: 52px; height: 52px; margin: 0; padding: 0; overflow: hidden; border-radius: 10px; border: 2px solid #6b5530; background: #0a1628; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .45); transition: transform .12s, border-color .2s, box-shadow .2s; }
.lh-ab:hover { transform: translateY(-2px); }
.lh-ab img { display: block; width: 100%; height: 100%; }
.lh-ab-cd { position: absolute; inset: 0; background: conic-gradient(rgba(3, 6, 18, .8) calc(var(--p, 0) * 360deg), transparent 0); }
.lh-ab-t { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 800 17px Inter, "Segoe UI", sans-serif; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.lh-ab kbd { position: absolute; left: 2px; bottom: 2px; margin: 0; padding: 0 4px; border: 0; border-radius: 4px; background: rgba(3, 6, 18, .85); color: #f0e6d2; font: 700 10px Inter, "Segoe UI", sans-serif; opacity: 1; }
.lh-ab em { position: absolute; right: 2px; top: 2px; padding: 0 3px; border-radius: 4px; background: rgba(16, 52, 130, .9); color: #d6e6ff; font: 700 9.5px Inter, "Segoe UI", sans-serif; font-style: normal; }
.lh-ab[data-lhab="p"] em { background: rgba(3, 6, 18, .85); color: #9be8a9; }
.lh-ab.off img { filter: grayscale(1) brightness(.5); }
.lh-ab:not(.cool):not(.off) { border-color: #e9c97a; box-shadow: 0 0 14px rgba(233, 201, 122, .35), 0 4px 12px rgba(0, 0, 0, .45); }
.lh-mana { position: relative; width: 100%; height: 13px; overflow: hidden; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .1); background: #06090d; }
.lh-mana i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 55%, #fff), var(--mc)); transition: width .15s linear; }
.lh-mana span { position: relative; display: block; color: #fff; font: 700 9.5px/13px Inter, "Segoe UI", sans-serif; text-align: center; text-shadow: 0 1px 2px #000; }
/* annonce d'élimination */
.lh-kill { position: absolute; left: 50%; top: 58px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 8px 26px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(3, 6, 18, 0), rgba(3, 6, 18, .9) 18%, rgba(3, 6, 18, .9) 82%, rgba(3, 6, 18, 0)); color: #f0e6d2; font: 700 18px Cinzel, Georgia, serif; letter-spacing: .04em; white-space: nowrap; pointer-events: none; opacity: 0; }
.lh-kill.show { animation: lh-kill-in 2.7s ease both; }
.lh-kill-av img { display: block; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #3fa7ff; box-shadow: 0 0 12px rgba(63, 167, 255, .5); }
.lh-kill-av.b img { border-color: #ff5a4f; box-shadow: 0 0 12px rgba(255, 90, 79, .5); filter: grayscale(.7); }
.lh-kill.lose .lh-kill-av.a img { border-color: #ff5a4f; box-shadow: 0 0 12px rgba(255, 90, 79, .5); filter: none; }
.lh-kill.lose .lh-kill-av.b img { border-color: #3fa7ff; box-shadow: 0 0 12px rgba(63, 167, 255, .5); }
.lh-kill.win b { color: #ffd27a; text-shadow: 0 0 14px rgba(255, 190, 90, .5); }
.lh-kill.lose b { color: #ff8f86; }
.lh-kill-av:empty { display: none; }
@keyframes lh-kill-in { 0% { opacity: 0; transform: translate(-50%, -14px) scale(1.25); } 9% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 0) scale(1); } }
/* sorts dans l'intro VS et aperçu dans la préparation */
.lh-vs-kit { display: flex; gap: 6px; margin-top: 8px; }
.lh-vs-side.right .lh-vs-kit { justify-content: flex-end; }
.lh-vs-kit img { width: 34px; height: 34px; border-radius: 7px; border: 1px solid rgba(240, 213, 140, .6); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.lh-kit { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.lh-kit p { margin: 0; color: var(--muted); font-size: 13px; }
.lh-kit-s { display: flex; flex: 1 1 240px; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .4); }
.lh-kit-s img { flex: none; width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--gold-dim); }
.lh-kit-s.res > span { flex: none; width: 44px; height: 12px; border-radius: 6px; background: var(--mc); box-shadow: 0 0 10px var(--mc); }
.lh-kit-s b { display: block; font-size: 13.5px; }
.lh-kit-s small { color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) {
  .lh-center { max-width: none; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .lh-abil { grid-column: 1 / -1; flex-wrap: nowrap; }
}

/* ---------- Esquive (3D) : scène, préparation posée sur la scène, interface de jeu façon LoL ---------- */
.dg-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 150px); min-height: 440px; overflow: hidden; border-radius: 14px; border: 1px solid rgba(200, 170, 110, .45); background: #0a160c; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); user-select: none; -webkit-user-select: none; touch-action: none; }
.dg-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dg-loading, .dg-nogl { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 14px; color: #c9cbe4; font-size: 14px; text-align: center; background: radial-gradient(circle at 50% 45%, rgba(223, 87, 121, .14), transparent 60%), #0a0b24; }
.dg-nogl { padding: 30px; }
.dg-spin { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(223, 87, 121, .2); border-top-color: var(--gold); animation: dg-spin 0.9s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
/* préparation */
.dg-setup { position: absolute; left: 18px; top: 18px; bottom: 18px; z-index: 3; display: flex; flex-direction: column; width: min(380px, calc(100% - 36px)); overflow: hidden; border-radius: 16px; border: 1px solid rgba(223, 87, 121, .35); background: linear-gradient(180deg, rgba(12, 13, 44, .86), rgba(8, 9, 30, .92)); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dg-kicker { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(223, 87, 121, .5); color: var(--gold-hi); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dg-setup h1 { margin: 8px 0 4px; font-size: clamp(32px, 4vw, 44px); }
.dg-intro { margin: 0; color: #c9cbe4; font-size: 13.5px; line-height: 1.55; }
.dg-setup h3 { margin: 16px 0 8px; color: var(--gold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.dg-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dg-champ { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .5); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.dg-champ:hover { transform: translateY(-2px); border-color: rgba(223, 87, 121, .55); }
.dg-champ img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--gold-dim); }
.dg-champ span { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.dg-champ.on { border-color: var(--gold); background: rgba(223, 87, 121, .16); }
.dg-champ.on img { border-color: var(--gold-hi); box-shadow: 0 0 14px rgba(223, 87, 121, .6); }
.dg-setup .chips { justify-content: flex-start; }
.dg-help { min-height: 38px; margin: 8px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.dg-record { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(3, 3, 18, .45); }
.dg-record span { color: var(--muted); font-size: 12px; }
.dg-record b { font-family: Cinzel, Georgia, serif; font-size: 20px; color: var(--gold-hi); }
.dg-record em { margin-left: auto; color: var(--muted); font-size: 12px; font-style: normal; }
.dg-setup-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 20px 14px; }
.dg-setup-foot { flex: none; padding: 14px 20px 18px; border-top: 1px solid rgba(223, 87, 121, .22); background: rgba(6, 7, 24, .55); }
#dg-start { width: 100%; justify-content: center; }
.dg-flashrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; }
.dg-flashrow > span { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#dg-start[disabled] { opacity: .6; cursor: wait; }
.dg-keys { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.dg-keys kbd { padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: var(--text); font: 700 11px Inter, "Segoe UI", sans-serif; }
/* interface de jeu */
.dg-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dg-lives { position: absolute; left: 14px; top: 12px; display: flex; gap: 5px; }
.dg-lives i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(3, 6, 18, .72); color: #4e5370; }
.dg-lives i .ico { width: 16px; height: 16px; }
.dg-lives i.on { border-color: rgba(255, 90, 106, .6); color: #ff5a6a; box-shadow: 0 0 10px rgba(255, 90, 106, .35); }
.dg-lives i.lost { animation: dg-lost .7s ease; }
@keyframes dg-lost { 0% { transform: scale(1.5); background: rgba(255, 60, 60, .8); } 100% { transform: scale(1); } }
.dg-clock { position: absolute; left: 50%; top: 0; display: grid; justify-items: center; min-width: 120px; padding: 6px 20px 7px; transform: translateX(-50%); border-radius: 0 0 14px 14px; border: 1px solid rgba(200, 170, 110, .4); border-top: 0; background: linear-gradient(180deg, rgba(3, 6, 18, .9), rgba(3, 6, 18, .65)); }
.dg-clock b { font-family: Cinzel, Georgia, serif; font-size: 28px; line-height: 1.05; color: #f0e6d2; font-variant-numeric: tabular-nums; }
.dg-clock span { color: #c8aa6e; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dg-clock em { min-height: 14px; color: #7fe0a4; font-size: 11px; font-style: normal; font-weight: 800; }
.dg-feed { position: absolute; right: 12px; top: 12px; display: grid; gap: 5px; width: 236px; }
.dg-fd { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 10px; border: 1px solid rgba(255, 90, 79, .3); background: rgba(3, 6, 18, .74); opacity: .78; }
.dg-fd.new { opacity: 1; border-color: rgba(255, 90, 79, .85); box-shadow: 0 0 14px rgba(255, 90, 79, .25); }
.dg-fd-c img { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ff5a4f; }
.dg-fd-s { flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(200, 170, 110, .6); }
.dg-fd-t { display: grid; min-width: 0; }
.dg-fd-t b { overflow: hidden; color: #f0e6d2; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dg-fd-t small { color: #9aa4b2; font-size: 10.5px; }
.dg-bar { position: absolute; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; transform: translateX(-50%); border-radius: 40px; border: 1px solid rgba(200, 170, 110, .5); background: linear-gradient(180deg, rgba(3, 6, 18, .78), rgba(3, 6, 18, .92)); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); pointer-events: auto; }
.dg-portrait img { display: block; width: 52px; height: 52px; border-radius: 50%; border: 2px solid #c8aa6e; }
.dg-ab { width: 48px; height: 48px; }
.dg-cc { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); color: #ffb0a0; font-size: 15px; font-weight: 800; text-shadow: 0 2px 6px #000; }
.dg-floats, .dg-arrows { position: absolute; inset: 0; overflow: hidden; }
.dg-fl { position: absolute; left: 0; top: 0; color: #fff; font-size: 15px; font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px #000, 0 0 2px #000; will-change: transform; }
.dg-fl.near { color: #7fe0a4; }
.dg-fl.hit { color: #ff8f86; font-size: 16px; }
.dg-arrow { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #ff5a4f; background: rgba(120, 10, 10, .85); box-shadow: 0 0 18px rgba(255, 90, 79, .75); }
.dg-arrow img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.dg-arrow i { position: absolute; left: 50%; top: 50%; width: 38px; height: 0; transform-origin: 0 0; }
.dg-arrow i::after { content: ""; position: absolute; right: -14px; top: -8px; border-left: 14px solid #ff5a4f; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.dg-center { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); color: #f0e6d2; font-family: Cinzel, Georgia, serif; font-weight: 700; text-shadow: 0 4px 22px rgba(0, 0, 0, .85); white-space: nowrap; pointer-events: none; }
.dg-center.count { font-size: 96px; }
.dg-center.go { font-size: 54px; color: #ffd27a; }
.dg-center.dead { font-size: 52px; color: #ff8f86; }
.dg-center.pause { font-size: 46px; }
.dg-center.show { animation: dg-pop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes dg-pop { 0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.dg-hitfx { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(255, 30, 30, .6)); }
.dg-hitfx.on { animation: dg-hit .6s ease; }
@keyframes dg-hit { 0% { opacity: 1; } 100% { opacity: 0; } }
.dg-review { display: grid; gap: 10px; max-width: 760px; margin: 34px auto 0; text-align: left; }
#dg-end .end { padding-bottom: 30px; }
#dg-end .arc-stats { margin-top: 26px; }
#dg-end .end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 38px auto 34px; padding-top: 30px; max-width: 760px; border-top: 1px solid rgba(200, 170, 110, .16); }
#dg-progress { max-width: 760px; margin: 0 auto; }
#dg-progress .mastery-list + * { margin-top: 18px; }
#dg-end .lb-end { margin-top: 34px; }
#dg-end .fb-end { margin-top: 26px; }
.dg-review h3 { margin: 0 0 4px; font-size: 16px; text-align: center; }
.dg-review .rv { align-items: flex-start; gap: 14px; padding: 12px 14px; border-radius: 12px; }
.dg-review .rv .mini.dg-rv-ic { width: 44px; height: 44px; border-radius: 10px; border-color: rgba(200, 170, 110, .55); }
.dg-rv-ic img { display: block; width: 100%; height: 100%; }
.dg-rv-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.dg-rv-h b { color: var(--text); font-size: 14px; }
.dg-rv-h span { color: var(--muted); font-size: 12px; }
.dg-review .rv p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; }
/* plein écran */
.dg-full { position: absolute; right: 12px; bottom: 14px; z-index: 5; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; border: 1px solid rgba(200, 170, 110, .5); background: rgba(3, 6, 18, .72); color: #f0e6d2; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.dg-full:hover { background: rgba(3, 6, 18, .92); border-color: #c8aa6e; transform: scale(1.06); }
.dg-full:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.dg-full svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dg-full .dg-full-out, #dodge.dg-fs .dg-full .dg-full-in { display: none; }
#dodge.dg-fs .dg-full .dg-full-out { display: inline; }
#dodge.dg-fs { position: fixed; inset: 0; z-index: 900; width: auto; max-width: none; margin: 0; padding: 0; overflow-y: auto; background: #050616; }
#dodge.dg-fs:not(.dg-ended) > .topbar { display: none; }
#dodge.dg-fs > .topbar { margin: 0; padding: 12px 16px 0; }
#dodge.dg-fs .dg-stage { width: 100%; height: 100vh; height: 100dvh; max-height: none; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
#dodge.dg-fs #dg-end { padding: 6px 16px 40px; }
body.dg-noscroll { overflow: hidden; }
@media (max-width: 760px) {
  .dg-stage { aspect-ratio: auto; height: calc(100vh - 140px); min-height: 500px; max-height: none; }
  .dg-setup { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 62%; }
  .dg-setup-body { padding: 14px 14px 10px; }
  .dg-setup-foot { padding: 10px 14px 12px; }
  .dg-setup h1 { font-size: 30px; }
  .dg-intro { display: none; }
  .dg-feed { width: 150px; }
  .dg-fd-t small { display: none; }
  .dg-clock b { font-size: 22px; }
  .dg-lives i { width: 26px; height: 26px; }
}
.dg-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; border: 1px solid rgba(255, 90, 79, .75); background: rgba(56, 8, 10, .85); box-shadow: 0 4px 10px rgba(0, 0, 0, .45); color: #ffe2da; font-size: 11.5px; font-weight: 700; white-space: nowrap; will-change: transform; }
.dg-tag img { width: 20px; height: 20px; border-radius: 50%; }
@media (max-width: 760px) {
  .dg-feed { top: 74px; width: 150px; }
  .dg-fd:nth-child(n+3) { display: none; }
  .dg-full { top: 10px; right: 10px; bottom: auto; width: 36px; height: 36px; }
}

/* ---------- Bordures d'avatar (v57) : anneau métallique à la couleur du rang, ailes à partir de Maître ---------- */
@property --fa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cf { --fw: 3px; --f1: #e8e8f0; --f2: #6a6a7a; --fg: 220, 220, 235; position: relative; display: inline-grid; flex: none; place-items: center; border-radius: 50%; isolation: isolate; vertical-align: middle; }
.cf > img { position: relative; z-index: 1; display: block; }
/* v72 : la bordure est un SVG (.cf-art) plus grand que l'avatar, centré dessus : anneau biseauté, ornements, ailes, couronne */
.cf-art { position: absolute; z-index: 2; left: 50%; top: 50%; width: 220%; height: 170%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(var(--fg), .45)) drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.cf-art.back { z-index: 0; }
.cf.has-wings .cf-art { filter: drop-shadow(0 0 5px rgba(var(--fg), .6)) drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.nav-acct .cf-art.back { display: none; }
.cf-iron { --f1: #c2c6cd; --f2: #45484f; --fg: 175, 180, 190; }
.cf-bronze { --f1: #f0b585; --f2: #6a3a1a; --fg: 230, 160, 110; }
.cf-silver { --f1: #f4f7fb; --f2: #7d8796; --fg: 215, 225, 240; }
.cf-gold { --f1: #ffe7a0; --f2: #a8701a; --fg: 255, 210, 110; }
.cf-platinum { --f1: #a6f6ea; --f2: #1d7a72; --fg: 120, 230, 215; }
.cf-emerald { --f1: #95f6b8; --f2: #127a44; --fg: 100, 230, 150; }
.cf-diamond { --f1: #d0dcff; --f2: #3b52c8; --fg: 150, 180, 255; }
.cf-master { --f1: #ecc2ff; --f2: #6a24b0; --fg: 210, 140, 255; }
.cf-grandmaster { --f1: #ffb0b0; --f2: #8a1424; --fg: 255, 110, 110; }
.cf-challenger { --f1: #fff2c0; --f2: #3a9cff; --fg: 255, 225, 150; }
.cf-fidele { --f1: #ffc4d4; --f2: #9a173c; --fg: 255, 120, 160; }
.cf-duel { --f1: #ff8a7a; --f2: #3a0a10; --fg: 255, 90, 79; }
.cf-danse { --f1: #c8f6ff; --f2: #2a6aff; --fg: 130, 200, 255; }
.cf-maitrise { --f1: #ffe08a; --f2: #6a24b0; --fg: 240, 190, 120; }
.cf-collection { --f1: #ffe2cc; --f2: #b0607a; --fg: 255, 190, 170; }
.cf-worlds { --f1: #ffd98a; --f2: #0d2a6a; --fg: 255, 210, 120; }
.cf-legende { --f1: #ffe0f4; --f2: #8fd8ff; --fg: 255, 225, 250; }
/* épaisseur selon la taille de l'avatar */
.pl-head .cf { --fw: 5px; }
.nav-acct .cf { --fw: 2px; margin: 2px; }
.fr-av .cf, .duel-pl .cf, .duel-es .cf { --fw: 3px; }
.cosm-av { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ---------- Bannières de profil : étendard suspendu à une tringle, emblème au centre ---------- */
/* v72 : bannière = étendard SVG (cosmBannerHtml) ; couleurs --b1 / --b2 (tissu) et --bt (broderie, tringle, franges) */
.bn { --bw: 120px; --bh: 200px; --b1: #2a1f6e; --b2: #0b0c2c; --bt: #e0375f; position: relative; width: var(--bw); height: var(--bh); transform-origin: 50% 0; animation: bn-sway 7s ease-in-out infinite;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5)); }
.bn > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bn.mini { --bw: 52px; --bh: 87px; animation: none; }
@keyframes bn-sway { 50% { transform: rotate(1.1deg); } }
.bn-faille { --b1: #2e2173; --b2: #0b0c2c; --bt: #e0375f; }
.bn-demacia { --b1: #e9eef7; --b2: #3a5b9a; --bt: #d8b46a; }
.bn-noxus { --b1: #a11c22; --b2: #1a0507; --bt: #9aa0a8; }
.bn-ionia { --b1: #f4b6d2; --b2: #6a2a5c; --bt: #e8c070; }
.bn-freljord { --b1: #d6f2ff; --b2: #2f5f94; --bt: #eef8ff; }
.bn-piltover { --b1: #f2c46a; --b2: #6e3c12; --bt: #fff0b8; }
.bn-zaun { --b1: #7af08a; --b2: #0f2e18; --bt: #c08a4a; }
.bn-shurima { --b1: #ffd877; --b2: #8a5a12; --bt: #3ad0c0; }
.bn-targon { --b1: #7a6aff; --b2: #120f33; --bt: #c8d8ff; }
.bn-iles { --b1: #5fffd8; --b2: #062a24; --bt: #6aa89a; }
.bn-bilgewater { --b1: #3ab8b0; --b2: #0a2a32; --bt: #d8a050; }
.bn-ixtal { --b1: #5ae07a; --b2: #0b3a2a; --bt: #e8c860; }
.bn-neant { --b1: #b46aff; --b2: #1c0636; --bt: #ff5ad8; }
.bn-smite { --b1: #ffb04a; --b2: #5a2306; --bt: #ffe6a0; }
.bn-casino { --b1: #e0c060; --b2: #3a1240; --bt: #ff5a8a; }
.bn-forge { --b1: #ff7a3a; --b2: #2a0a06; --bt: #ffd27a; }
.bn-esquive { --b1: #ffe58a; --b2: #262a6a; --bt: #fff6c8; }
.bn-arene { --b1: #ff6a6a; --b2: #2a0610; --bt: #e0e4ea; }
.bn-jour { --b1: #8fd0ff; --b2: #1a2c6a; --bt: #f0c060; }
.bn-worlds { --b1: #1e3a8a; --b2: #060f2a; --bt: #ffd27a; }
.bn-legende { --b1: #ffd6f0; --b2: #3a2a8a; --bt: #ffffff; }


/* ---------- Profil public : bannière suspendue derrière l'avatar ---------- */
.pl-crest { position: relative; flex: none; display: grid; justify-items: center; align-items: start; width: 130px; height: 150px; }
.pl-crest .bn { position: absolute; top: -30px; left: 50%; margin-left: -60px; }
.pl-av-wrap { position: relative; z-index: 2; margin-top: 12px; }
.pl-head .cf .pl-av { border: 0; box-shadow: none; }
@media (max-width: 640px) { .pl-crest { height: 140px; } }

/* ---------- Collection de la page Succès ---------- */
.cosm-me { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); }
.cosm-me p { flex: 1; min-width: 220px; margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cosm-me-art { position: relative; display: grid; justify-items: center; width: 130px; height: 170px; padding-top: 18px; }
.cosm-me-art .bn { position: absolute; top: 0; left: 50%; margin-left: -60px; }
.cosm-me-av { position: relative; z-index: 2; margin-top: 8px; }
.cosm-me-av .cosm-av { width: 76px; height: 76px; }
.cosm-me-av .cf { --fw: 4px; }
.cosm-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; font-size: 16px; }
.cosm-h span { padding: 1px 8px; border-radius: 999px; background: rgba(223, 87, 121, .16); color: var(--gold-hi); font-size: 12px; }
.cosm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.cosm-it { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(3, 3, 18, .45); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: border-color .2s, transform .15s, background .2s; }
.cosm-it:not([disabled]):hover { transform: translateY(-2px); border-color: rgba(223, 87, 121, .6); }
.cosm-it b { font-size: 13px; }
.cosm-it small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.cosm-it.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(223, 87, 121, .2), rgba(223, 87, 121, .05)); }
.cosm-it.on small { color: var(--gold-hi); font-weight: 700; }
.cosm-it.locked { position: relative; cursor: default; }
.cosm-it.locked .cosm-prev { opacity: .55; filter: saturate(.45) brightness(.8); }
.cosm-it.locked b { color: var(--muted); }
.cosm-it.locked::after { content: ""; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; opacity: .7;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9cbe4' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.cosm-prev { display: grid; place-items: center; height: 98px; }
.cosm-grid:not(.banners) .cosm-prev { height: 78px; }
.cosm-toast-prev { display: grid; flex: none; place-items: center; width: 52px; }
.cosm-toast-prev img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.cosm-toast-prev .bn.mini { --bw: 36px; --bh: 60px; }
.pl-crest { height: 178px; }
.pl-crest .bn { --bh: 238px; }
.cosm-me-art .bn { --bh: 238px; }
.cosm-me-art { height: 200px; }

/* ---------- Collection de cartes (cards.js) ---------- */
/* Carte façon « carte à collectionner » : illustration en haut, panneau coloré ondulé en bas. Les tailles de texte suivent la
   largeur de la carte (unités cqw) : la même carte sert dans la grille, la pile du déballage, la rangée et l'agrandissement. */
.tc { --p1: #eef1f7; --p2: #b7c0d1; --tg: #7d8aa3; --ink: #1a2133; --glow: transparent; --rc: 154, 164, 181;
  position: relative; aspect-ratio: 5 / 7; border-radius: 8% / 5.7%; container-type: inline-size; cursor: pointer; perspective: 900px; transition: transform .2s; }
.tc-r { --p1: #d3efff; --p2: #6cb8ff; --tg: #2f86e8; --ink: #0e2340; --glow: rgba(61, 155, 255, .35); --rc: 61, 155, 255; }
.tc-e { --p1: #fde0ff; --p2: #d88cff; --tg: #a748e0; --ink: #33103f; --glow: rgba(182, 92, 255, .45); --rc: 182, 92, 255; }
.tc-l { --p1: #ffe9a8; --p2: #f39a2c; --tg: #c96a0c; --ink: #3a1d00; --glow: rgba(255, 170, 50, .55); --rc: 255, 180, 60; }
.tc-s { --ink: #fff; --glow: rgba(255, 120, 220, .5); --rc: 255, 140, 230; --s1: #fff; --s2: #f6c; --s3: #36c; }
.tc-in { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: #0a0c22;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 16px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, .25);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s, box-shadow .2s; }
.tc:hover { transform: translateY(-4px); }
.tc:hover .tc-in { box-shadow: 0 12px 26px rgba(0, 0, 0, .55), 0 0 24px var(--glow), inset 0 0 0 1px rgba(255, 255, 255, .35); }
.tc-art { position: absolute; left: 0; right: 0; top: 0; height: 57%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #1c2050, #090a20); }
.tc-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; }
.tc-k-beast .tc-art img { object-position: center; }
.tc-q { display: grid; place-items: center; height: 100%; font: 700 26cqw Cinzel, serif; color: rgba(255, 255, 255, .14);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 6cqw, transparent 6cqw 12cqw); }
/* Panneau : dégradé de la rareté sous des ondes en relief */
.tc-body { position: absolute; left: 0; right: 0; top: 57%; bottom: 0; display: flex; flex-direction: column; padding: 5.5cqw 6.5cqw 5cqw; color: var(--ink);
  background: repeating-radial-gradient(circle at -10% 115%, rgba(255, 255, 255, .26) 0 2.4cqw, rgba(255, 255, 255, 0) 2.4cqw 6.5cqw),
    repeating-radial-gradient(circle at 115% -20%, rgba(255, 255, 255, .16) 0 1.8cqw, rgba(255, 255, 255, 0) 1.8cqw 5.5cqw),
    linear-gradient(165deg, var(--p1), var(--p2)); }
.tc-name { font: 800 8.6cqw/1.12 Inter, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-sub { margin-top: 1.5cqw; font-size: 6.6cqw; line-height: 1.25; opacity: .82; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-foot { display: flex; justify-content: space-between; align-items: center; gap: 4cqw; margin-top: auto; padding-top: 3cqw; border-top: 1px solid rgba(0, 0, 0, .14);
  font-size: 6.2cqw; font-weight: 700; opacity: .85; white-space: nowrap; }
.tc-foot span { display: inline-flex; align-items: center; gap: 2cqw; overflow: hidden; text-overflow: ellipsis; }
.tc-foot .ico { width: 7.5cqw; height: 7.5cqw; flex: none; }
.tc-tag { position: absolute; top: 5cqw; left: 5cqw; display: grid; place-items: center; min-width: 14cqw; height: 13cqw; padding: 0 3cqw; border-radius: 3.5cqw;
  background: var(--tg); color: #fff; font: 800 7.6cqw Inter, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.tc-n { position: absolute; top: 5cqw; right: 5cqw; padding: 1cqw 3.5cqw; border-radius: 99px; background: rgba(4, 5, 18, .78); color: #fff; font: 800 7cqw Inter, sans-serif; }
.tc-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
/* Épique : reflet nacré qui passe ; Légendaire : panneau doré métallisé */
.tc-e .tc-shine, .tc-l .tc-shine { opacity: 1; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .7) 45%, transparent 60%) 0 0 / 250% 250%; animation: tc-sweep 4.5s ease-in-out infinite; }
.tc-l .tc-body { background: repeating-radial-gradient(circle at -10% 115%, rgba(255, 250, 220, .3) 0 2.4cqw, rgba(255, 255, 255, 0) 2.4cqw 6.5cqw),
    linear-gradient(115deg, #f7cf6c, #fff2c2 20%, #e9a13a 42%, #ffd46e 60%, #c97d1c 82%, #f7cf6c) 0 0 / 220% 100%; animation: tc-gold 6s linear infinite; }
.tc-l .tc-art { box-shadow: inset 0 -2px 0 #ffd77a; }
.tc-l .tc-in { box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 22px var(--glow), inset 0 0 0 2px #ffd77a; }
@keyframes tc-gold { to { background-position: 0 0, 220% 0; } }
@keyframes tc-sweep { 0%, 100% { background-position: 100% 100%; } 50% { background-position: 0 0; } }
/* Secrète : illustration plein cadre, bordure aux couleurs de la carte qui tourne, verre irisé, décor propre à la carte */
.tc-s .tc-art { height: 100%; }
.tc-s .tc-body { top: auto; height: 46%; background: linear-gradient(transparent, rgba(6, 4, 22, .55) 26%, rgba(6, 4, 22, .9)); text-shadow: 0 1px 3px #000; }
.tc-s .tc-foot { border-top-color: rgba(255, 255, 255, .25); }
.tc-s .tc-tag { background: linear-gradient(135deg, var(--s1), var(--s2) 45%, var(--s3)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.tc-s .tc-in { border: 3px solid transparent; background: linear-gradient(#0a0c22, #0a0c22) padding-box, conic-gradient(from var(--aura), var(--s1), var(--s2), var(--s3), var(--s2), var(--s1)) border-box;
  animation: aura-spin 3.5s linear infinite; box-shadow: 0 6px 20px rgba(0, 0, 0, .55), 0 0 26px color-mix(in srgb, var(--s2) 55%, transparent); }
.tc-s .tc-in::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .5; }
.tc-p-grid .tc-in::before { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--s2) 60%, transparent) 0 1px, transparent 1px 9cqw), repeating-linear-gradient(90deg, color-mix(in srgb, var(--s2) 60%, transparent) 0 1px, transparent 1px 9cqw); -webkit-mask: linear-gradient(transparent 30%, #000); mask: linear-gradient(transparent 30%, #000); }
.tc-p-petals .tc-in::before { background: radial-gradient(circle at 18% 22%, var(--s2) 0 3cqw, transparent 3.4cqw), radial-gradient(circle at 80% 14%, var(--s1) 0 2cqw, transparent 2.4cqw), radial-gradient(circle at 72% 48%, var(--s2) 0 2.4cqw, transparent 2.8cqw), radial-gradient(circle at 12% 62%, var(--s1) 0 1.6cqw, transparent 2cqw), radial-gradient(circle at 88% 78%, var(--s2) 0 3cqw, transparent 3.4cqw); animation: tc-drift 7s ease-in-out infinite alternate; }
.tc-p-stars .tc-in::before { background: radial-gradient(circle, #fff 0 .7cqw, transparent 1cqw) 0 0 / 17cqw 19cqw, radial-gradient(circle, var(--s2) 0 .9cqw, transparent 1.3cqw) 8cqw 9cqw / 23cqw 21cqw; animation: tc-twinkle 2.6s ease-in-out infinite; }
.tc-p-rays .tc-in::before { background: repeating-conic-gradient(from 0deg at 50% 30%, color-mix(in srgb, var(--s2) 55%, transparent) 0 4deg, transparent 4deg 16deg); -webkit-mask: radial-gradient(circle at 50% 30%, transparent 18%, #000 60%); mask: radial-gradient(circle at 50% 30%, transparent 18%, #000 60%); opacity: .4; }
.tc-p-waves .tc-in::before { background: repeating-radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--s2) 50%, transparent) 0 1.2cqw, transparent 1.2cqw 6cqw); }
.tc-p-circuit .tc-in::before { background: linear-gradient(90deg, color-mix(in srgb, var(--s2) 70%, transparent) 0 1px, transparent 1px) 0 0 / 14cqw 100%, radial-gradient(circle, var(--s2) 0 1cqw, transparent 1.3cqw) 7cqw 6cqw / 14cqw 16cqw; -webkit-mask: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000); mask: linear-gradient(90deg, #000, transparent 22%, transparent 78%, #000); }
.tc-s .tc-shine { z-index: 2; opacity: 1; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 20%, rgba(255, 80, 200, .35) 32%, rgba(80, 220, 255, .35) 44%, rgba(255, 240, 120, .35) 56%, transparent 70%) 0 0 / 260% 260%; animation: tc-sweep 3.6s ease-in-out infinite; }
.tc-s .tc-body, .tc-s .tc-tag, .tc-s .tc-n { z-index: 3; }
@keyframes tc-drift { to { transform: translateY(-4cqw) rotate(4deg); } }
@keyframes tc-twinkle { 50% { opacity: .25; } }
/* Secrète : un peu plus de vie, en douceur. L'illustration respire, des paillettes montent lentement, le nom scintille de temps en temps. */
.tc-s .tc-art img { transform-origin: 50% 30%; animation: tc-breathe 14s ease-in-out infinite alternate; }
@keyframes tc-breathe { from { transform: scale(calc(var(--z, 1) * 1.02)); } to { transform: scale(calc(var(--z, 1) * 1.09)) translateY(-1.5%); } }
.tc-s .tc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .6;
  background: radial-gradient(circle, #fff 0 .5cqw, transparent .8cqw) 0 0 / 15cqw 18cqw, radial-gradient(circle, var(--s1) 0 .7cqw, transparent 1.1cqw) 7cqw 9cqw / 21cqw 24cqw;
  -webkit-mask: linear-gradient(transparent 5%, #000 35%, #000 65%, transparent 95%); mask: linear-gradient(transparent 5%, #000 35%, #000 65%, transparent 95%);
  animation: tc-rise-s 10s linear infinite, tc-twinkle 2.4s ease-in-out infinite; }
@keyframes tc-rise-s { to { background-position: 0 -36cqw, 7cqw -39cqw; } }
.tc-s .tc-name { background: linear-gradient(100deg, #fff 42%, var(--s1) 47%, #fff 50%, var(--s2) 53%, #fff 58%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .9)); animation: tc-name 7s ease-in-out infinite; }
@keyframes tc-name { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.tc-s .tc-tag { animation: tc-tagglow 3s ease-in-out infinite; }
@keyframes tc-tagglow { 50% { box-shadow: 0 0 3.5cqw var(--s2), 0 1px 4px rgba(0, 0, 0, .35); } }

/* Or : la carte la plus rare, en pleine illustration comme les Secrètes. Cadre en or lisse, illustration virée à l'or sur toute la carte,
   nom, phrase, région et numéro posés en bas sur un fondu sombre ; aucun effet (seulement le reflet de la souris sur la carte agrandie) */
.tc-g { --ink: #fff1c8; --glow: rgba(230, 175, 60, .45); --rc: 255, 200, 70; }
.tc-g .tc-in { border: 2.4cqw solid transparent;
  background: linear-gradient(#2a1a04, #2a1a04) padding-box, linear-gradient(150deg, #f8e3a2, #d3a64c 45%, #f2d488 75%, #c4943c) border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 16px var(--glow); }
.tc-g .tc-art { height: 100%; }
.tc-g .tc-art img { filter: grayscale(1) contrast(1.25) brightness(1.04); }
.tc-g .tc-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: color; background: linear-gradient(160deg, #f3d687, #c99637 60%, #9c6a1c); }
.tc-g .tc-body { top: auto; height: 46%; z-index: 3; color: #fff1c8; background: linear-gradient(transparent, rgba(30, 18, 2, .55) 26%, rgba(22, 13, 1, .9)); text-shadow: 0 1px 3px #000; }
.tc-g .tc-name { font-family: Cinzel, serif; letter-spacing: .03em; color: #f8e3a2; }
.tc-g .tc-foot { border-top-color: rgba(248, 227, 162, .3); }
.tc-g .tc-tag, .tc-g .tc-n { z-index: 3; }
.tc-g .tc-tag { background: linear-gradient(135deg, #f8e3a2, #c99637); color: #2a1a04; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); letter-spacing: .08em; }
.tc-g .tc-shine { opacity: 0; }
.tc-big.tc-g .tc-shine { z-index: 2; opacity: 1; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), transparent 45%); }
.tc-miss.tc-g .tc-art::before { display: none; }

/* Summoner : carte sombre à la couleur du sort, cercle runique qui tourne, dessin vectoriel qui flotte, poussière lumineuse qui monte,
   icône du jeu en pastille */
.tc-u { --ink: #fff; --glow: color-mix(in srgb, var(--s2) 50%, transparent); --rc: 46, 232, 230; }
.tc-u .tc-in { border: 2px solid color-mix(in srgb, var(--s2) 70%, #fff); background: #05060f;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 18px var(--glow), inset 0 0 0 1px rgba(0, 0, 0, .6); }
.tc-u .tc-art { height: 62%; background: radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--s2) 50%, transparent), transparent 56%), radial-gradient(circle at 50% 50%, var(--s3), #04050c 88%); }
.tc-rune { position: absolute; left: 11cqw; top: calc(50% - 39cqw); width: 78cqw; height: 78cqw; color: color-mix(in srgb, var(--s2) 65%, #fff); opacity: .5; animation: tc-turn 26s linear infinite; }
.tc-glyph { position: absolute; left: 25cqw; top: calc(50% - 25cqw); width: 50cqw; height: 50cqw; overflow: visible;
  filter: drop-shadow(0 0 2.5cqw var(--s2)) drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .6)); animation: tc-float 4.2s ease-in-out infinite; }
.tc-g-spin { transform-box: view-box; transform-origin: 50% 50%; animation: tc-turn 7s linear infinite; }
.tc-g-spin.rev { animation-direction: reverse; animation-duration: 5s; }
.tc-motes { position: absolute; inset: 0; opacity: .65; mix-blend-mode: screen;
  background: radial-gradient(circle, var(--s1) 0 .6cqw, transparent .9cqw) 0 0 / 13cqw 15cqw, radial-gradient(circle, #fff 0 .4cqw, transparent .7cqw) 6cqw 7cqw / 19cqw 17cqw;
  -webkit-mask: linear-gradient(transparent, #000 35%, #000 70%, transparent); mask: linear-gradient(transparent, #000 35%, #000 70%, transparent); animation: tc-rise-u 8s linear infinite; }
@keyframes tc-rise-u { to { background-position: 0 -30cqw, 6cqw -27cqw; } }
@keyframes tc-turn { to { transform: rotate(360deg); } }
@keyframes tc-float { 50% { transform: translateY(-2.5cqw) scale(1.04); } }
.tc-u .tc-body { top: 62%; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--s3) 85%, #000), #06070f);
  border-top: 1px solid color-mix(in srgb, var(--s2) 70%, transparent); box-shadow: 0 -1px 14px color-mix(in srgb, var(--s2) 40%, transparent); }
.tc-u .tc-name { text-shadow: 0 0 3cqw color-mix(in srgb, var(--s2) 70%, transparent); -webkit-line-clamp: 1; }
.tc-u .tc-sub { color: var(--s1); }
.tc-u .tc-foot { border-top-color: rgba(255, 255, 255, .14); }
.tc-u .tc-tag { width: 15cqw; height: 15cqw; min-width: 0; padding: 0; overflow: hidden; border-radius: 50%; background: #000;
  border: .8cqw solid var(--s2); box-shadow: 0 0 3cqw var(--s2); }
.tc-u .tc-tag img { display: block; width: 100%; height: 100%; }
.tc-u .tc-shine { opacity: 1; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--s1) 30%, transparent) 48%, transparent 60%) 0 0 / 250% 250%;
  animation: tc-sweep 5s ease-in-out infinite; }

/* Classic : bandeau sur l'illustration d'origine, légère patine */
.tc-k-classic .tc-art img { filter: sepia(.12) contrast(1.04); }
.tc-k-classic .tc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 8cqw rgba(40, 20, 0, .45); }
.tc-ribbon { position: absolute; right: 4cqw; bottom: 4cqw; z-index: 1; padding: 1.2cqw 3.6cqw; border-radius: 1.5cqw; font: 700 6cqw Cinzel, serif; letter-spacing: .12em;
  text-transform: uppercase; color: #3a2408; background: linear-gradient(180deg, #f6e2b0, #c9a463); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .5), inset 0 0 0 .5cqw rgba(90, 60, 20, .45); }

.tc-ribbon.w { color: #f3d27a; background: linear-gradient(180deg, #1b2c5a, #0c1530); box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .5), inset 0 0 0 .5cqw rgba(243, 210, 122, .6); letter-spacing: .08em; }
.cz-worlds { display: inline-flex; align-items: center; gap: 6px; color: #f3d27a !important; font-weight: 600; }
.cz-worlds .ico { width: 16px; height: 16px; }

/* Créature en rendu 3D détouré (Drake hextech, sans illustration officielle) : posée sur une illustration hextech */
.tc-art.tc-render { background: radial-gradient(ellipse at 50% 60%, rgba(46, 232, 230, .25), transparent 60%), linear-gradient(rgba(8, 10, 30, .2), rgba(6, 6, 20, .55)), url(img/cards/bg-hextech.jpg) 50% 50% / cover; }
.tc-art.tc-render img { position: relative; z-index: 1; object-fit: contain; object-position: 50% 75%; padding: 7% 6% 4%; filter: drop-shadow(0 2cqw 2cqw rgba(0, 0, 0, .6)); }
.tc-art.tc-render::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 4%; height: 10%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%); }

/* Carte manquante, carte agrandie */
.tc-miss .tc-body { filter: grayscale(.9); opacity: .75; }
.tc-miss .tc-shine, .tc-miss .tc-in::before, .tc-miss.tc-s .tc-art::after { display: none; }
.tc-miss.tc-s .tc-name, .tc-miss.tc-s .tc-tag { animation: none; }
.tc-miss.tc-s .tc-in, .tc-miss.tc-l .tc-body { animation: none; }
.tc-big .tc-shine { animation: none; opacity: 1; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), transparent 45%); }
.tc-big.tc-s .tc-shine { mix-blend-mode: color-dodge; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .35), transparent 40%), linear-gradient(115deg, transparent 25%, rgba(255, 80, 200, .3), rgba(80, 220, 255, .3), rgba(255, 240, 120, .3), transparent 75%); }

/* Clic sur une Secrète ou une Or agrandie : un tour sur elle-même, éclat de lumière */
/* La carte tourne en entier (perspective sur .cz-card) : la face (.tc-in) se cache entre 90° et 270°, le dos (.tc-back, logo de LoL)
   prend sa place. Les visibilités suivent les mêmes étapes que la rotation, ce qui évite que les calques animés de la face transparaissent. */
.cz-card { perspective: 1200px; }
.tc-back { display: grid; place-items: center; visibility: hidden; transform: rotateY(180deg); pointer-events: none; }
.tc-spin { transform-style: preserve-3d; perspective: none; animation: tc-inspect 1.1s linear; }
.tc-spin .tc-in { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tc-spin.tc-g .tc-in { animation: tc-face 1.1s step-end; }
.tc-spin.tc-s .tc-in { animation: aura-spin 3.5s linear infinite, tc-face 1.1s step-end; }
.tc-spin .tc-back { animation: tc-backf 1.1s step-end; }
@keyframes tc-inspect {
  0% { transform: rotateY(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  25% { transform: rotateY(90deg) scale(1.06); animation-timing-function: linear; }
  50% { transform: rotateY(180deg) scale(1.1); animation-timing-function: linear; }
  75% { transform: rotateY(270deg) scale(1.06); animation-timing-function: cubic-bezier(0, 0, .4, 1); }
  100% { transform: rotateY(360deg) scale(1); }
}
@keyframes tc-face { 0% { visibility: visible; } 25% { visibility: hidden; } 75% { visibility: visible; } }
@keyframes tc-backf { 0% { visibility: hidden; } 25% { visibility: visible; } 75% { visibility: hidden; } }
.tc-spin::after { content: ""; position: absolute; inset: -8%; z-index: 5; pointer-events: none; border-radius: 14%; animation: co-flash .8s .8s ease-out both;
  background: radial-gradient(circle, rgba(255, 240, 200, .7), transparent 65%); }
.tc-spin.tc-s::after { background: radial-gradient(circle, color-mix(in srgb, var(--s2) 60%, transparent), transparent 65%); }

/* Couleurs des pastilles de rareté (page, agrandissement) */
.cd-r, .cz-rar { --rc: 154, 164, 181; }
.cd-r-r { --rc: 61, 155, 255; }
.cd-r-e { --rc: 182, 92, 255; }
.cd-r-l { --rc: 255, 180, 60; }
.cd-r-s { --rc: 255, 120, 220; }
.cd-r-u { --rc: 46, 232, 230; }
.cd-r-g { --rc: 255, 200, 70; }
.cd-r i, .cz-rar i { width: 8px; height: 8px; transform: rotate(45deg); background: rgb(var(--rc)); box-shadow: 0 0 6px rgb(var(--rc)); }
.cd-r-s i, .cz-rar.cd-r-s i { background: linear-gradient(135deg, #ffd76e, #ff5fd2, #46e0d6); }
.cd-r-g i, .cz-rar.cd-r-g i { background: linear-gradient(135deg, #fff3b0, #d9a234, #a8701c); }
.cd-r-u i, .cz-rar.cd-r-u i { background: linear-gradient(135deg, #2ee8e6, #f0c57a); }

/* Page */
.cd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.cd-head .page-intro { max-width: 560px; margin-bottom: 0; }
.cd-progress { min-width: min(100%, 360px); }
.cd-count b { font: 800 34px Cinzel, serif; color: var(--gold-hi); }
.cd-count span { color: var(--muted); margin-left: 6px; }
.cd-bar { height: 8px; margin: 6px 0 10px; border-radius: 999px; background: #15183f; overflow: hidden; }
.cd-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-hi)); border-radius: inherit; }
.cd-rars { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.cd-r { display: inline-flex; align-items: center; gap: 6px; }
.cd-r b { color: var(--text); }
.cd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; margin-bottom: 22px; }
.cd-packs, .cd-missions { display: flex; gap: 18px; align-items: center; padding: 18px; border-radius: 14px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); }
.cd-missions { display: block; }
.cd-packs-txt h3, .cd-mh h3 { margin: 0 0 4px; font-size: 17px; }
.cd-packs-txt p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.cd-pk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cd-shards { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.cd-shards b { color: #9fd6ff; }
.cd-shards .ico { width: 15px; height: 15px; color: #9fd6ff; }
.cd-mh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.cd-mh span { font-size: 12px; color: var(--muted); }
.cd-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cd-mlist li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); }
.cd-mlist li.done { border-color: rgba(63, 191, 110, .35); background: rgba(63, 191, 110, .07); }
.cd-mic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #181b47; color: var(--gold); }
.cd-mlist li.done .cd-mic { background: rgba(63, 191, 110, .2); color: var(--good); }
.cd-mtxt { flex: 1; min-width: 0; }
.cd-mtxt b { display: block; font-size: 13px; font-weight: 600; }
.cd-mbar { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: #1a1d4a; overflow: hidden; }
.cd-mbar i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
.cd-mlist li.done .cd-mbar i { background: var(--good); }
.cd-mlist em { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--good); }
.cd-mlist .btn { flex: none; }
.cd-filters { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.cd-fg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cd-search { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); min-width: 170px; }
.cd-champ { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; max-width: 220px; cursor: pointer; }
.cd-champ.on { border-color: var(--gold); color: var(--gold-hi); }
.cd-champ option { background: #0f1236; color: var(--text); }
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cd-empty { color: var(--muted); }

/* Paquet : un vrai sachet (découpe #pkClip : soudures crantées en haut et en bas, flancs bombés). Feuille bleu nuit, soudures dorées
   striées, gemmes aux couleurs des raretés semées sur la feuille, logo de LoL au centre, ombrage de sachet gonflé et reflet qui passe.
   L'ombre portée est un filtre sur le bouton (la découpe couperait une box-shadow). */
.pk-box { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.pk-box:disabled { cursor: default; filter: grayscale(.7) brightness(.7); }
.pk { position: relative; display: block; width: 116px; aspect-ratio: 5 / 7.6; overflow: hidden; container-type: inline-size; clip-path: url(#pkClip);
  background: radial-gradient(ellipse 60% 40% at 50% 48%, rgba(46, 232, 230, .12), transparent 70%),
    linear-gradient(90deg, #071419, #12333d 14%, #1b4c57 32%, #133a44 50%, #1b4c57 68%, #12333d 86%, #071419);
  transition: transform .2s; }
.pk::after { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(115deg, transparent 32%, rgba(255, 245, 215, .22) 45%, transparent 56%) 0 0 / 260% 260%; animation: tc-sweep 4s ease-in-out infinite; mix-blend-mode: screen; pointer-events: none; }
/* Logo dans un fin cercle doré */
/* v72 : halo hextech derrière le médaillon, double cercle doré, petite mention « 5 cartes » en bas */
.pk-halo { position: absolute; left: 50%; top: 50%; width: 86cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(46, 232, 230, .2), rgba(46, 232, 230, .06) 45%, transparent 70%); }
.pk-medal::after { content: ""; position: absolute; inset: -4.5cqw; border-radius: 50%; border: .35cqw solid rgba(240, 197, 122, .45); }
.pk-sub { position: absolute; bottom: 14%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 2.5cqw; font: 600 5cqw Inter, sans-serif; letter-spacing: .3em; color: rgba(240, 197, 122, .75); text-transform: uppercase; }
.pk-sub::before, .pk-sub::after { content: ""; width: 3cqw; height: 3cqw; rotate: 45deg; background: rgba(240, 197, 122, .7); }
.pk-logo::after { content: ""; display: block; width: 18cqw; height: 1px; margin: 2.2cqw auto 0; background: linear-gradient(90deg, transparent, rgba(240, 197, 122, .8), transparent); }
.pk-medal { position: absolute; left: 50%; top: 50%; width: 52cqw; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%;
  border: .7cqw solid rgba(240, 197, 122, .8); background: rgba(5, 14, 17, .35); }
.pk-medal .pk-lol { position: static; width: 64%; height: auto; margin-top: 4%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.pk-logo { position: absolute; top: 15%; left: 0; right: 0; text-align: center; font: 700 7.2cqw Cinzel, serif; letter-spacing: .28em; color: #f0c57a; text-transform: uppercase; }
/* Soudures : bande dorée striée verticalement, liseré sombre côté feuille */
.pk-crimp { position: absolute; left: 0; right: 0; top: 0; height: 8.5%; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, rgba(0, 0, 0, .28) 1px 2px, transparent 2px 4px), linear-gradient(180deg, #7d5820, #f3cf86 45%, #b48436 70%, #6a4a18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .55), 0 2px 5px rgba(0, 0, 0, .45); }
.pk-crimp.bot { top: auto; bottom: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .35) 0 1px, rgba(0, 0, 0, .28) 1px 2px, transparent 2px 4px), linear-gradient(0deg, #7d5820, #f3cf86 45%, #b48436 70%, #6a4a18);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .55), 0 -2px 5px rgba(0, 0, 0, .45); }
/* Sachet gonflé : bords qui fuient dans l'ombre, bombé clair au centre */
.pk-shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 13%, rgba(255, 255, 255, .07) 30%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, .6)),
    linear-gradient(180deg, transparent 8%, rgba(0, 0, 0, .4) 9%, transparent 17%, transparent 83%, rgba(0, 0, 0, .4) 91%, transparent 92%); }
.pk-n { position: absolute; top: -8px; right: -8px; z-index: 1; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px;
  background: linear-gradient(180deg, #ffcf6b, #e08a1e); color: #2a1300; font-weight: 800; font-size: 13px; box-shadow: 0 0 12px rgba(255, 180, 60, .6); }
.pk-box:not(:disabled):hover .pk { transform: translateY(-3px) rotate(-2deg); }
.pk-box.small .pk { width: 84px; }

/* Accueil : bloc du paquet du jour et des missions */
.dash-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-top: 16px; padding: 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(223, 87, 121, .1), rgba(46, 232, 230, .06)), var(--panel); border: 1px solid var(--line); }
.dc-pack { display: flex; gap: 16px; align-items: center; }
.dc-txt h3 { margin: 4px 0; font-size: 18px; }
.dc-txt p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.dc-txt .tile-mode .ico { width: 13px; height: 13px; color: var(--gold); }

/* Déballage : pile de cartes, la carte du dessus brille de sa rareté, rangée des cartes révélées en bas */
.cd-open { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(900px 600px at 50% 42%, rgba(20, 60, 70, .55), rgba(3, 3, 14, .96)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.co-stage { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(1100px, 100%); padding: 16px; }
.co-hint { margin: 0; min-height: 1.4em; font: 600 16px Cinzel, serif; color: var(--gold-hi); letter-spacing: .04em; }
.co-center { position: relative; display: grid; place-items: center; min-height: min(56vh, 420px); }
.co-pack { padding: 0; border: 0; background: none; cursor: pointer; animation: co-float 2.6s ease-in-out infinite; }
.co-pack .pk { width: min(210px, 52vw); }
.co-pack { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .6)); }
.co-pack:hover { filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(46, 232, 230, .45)); }
/* Déchirure : deux morceaux du même paquet (bande du haut / reste), ligne de lumière qui court de gauche à droite, la bande s'arrache
   et s'envole, la lumière jaillit de l'ouverture, puis le paquet glisse vers le bas pendant que les cartes en sortent */
.co-pack { position: relative; }
.co-pk-body, .co-pk-top { display: block; }
.co-pk-top { position: absolute; inset: 0; transform-origin: 100% 12%; }
.co-pk-cut { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; z-index: 6; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 240, 200, .2), #fff6d8 85%, #fff); box-shadow: 0 0 8px #ffe7a6, 0 0 16px rgba(46, 232, 230, .8); }
.co-pk-light { position: absolute; left: 8%; right: 8%; height: 46%; translate: 0 -100%; z-index: 5; opacity: 0; pointer-events: none; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 244, 210, .95), rgba(46, 232, 230, .45) 40%, transparent 72%), repeating-conic-gradient(from -60deg at 50% 100%, rgba(255, 240, 200, .5) 0 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 100%, #000 40%, transparent 75%); mask: radial-gradient(ellipse 60% 100% at 50% 100%, #000 40%, transparent 75%); }
.co-pack.tearing { animation: co-hold .47s ease-in-out; cursor: default; }
.co-pack.tearing .co-pk-cut { animation: co-cut .45s cubic-bezier(.5, 0, .9, .6) forwards; }
.co-pack.torn .co-pk-cut { animation: none; transform: scaleX(1); opacity: 0; transition: opacity .2s; }
.co-pack.torn .co-pk-top { animation: co-strip .6s cubic-bezier(.3, .1, .6, 1) forwards; }
.co-pack.torn .co-pk-light { animation: co-beam .9s ease-out forwards; }
.co-pack.out { animation: co-drop .5s ease-in forwards; }
@keyframes co-hold { 0% { transform: rotate(0); } 30% { transform: rotate(-1.5deg) scale(1.02); } 60% { transform: rotate(1deg) scale(1.03); } 100% { transform: rotate(0) scale(1.03); } }
@keyframes co-cut { to { transform: scaleX(1); } }
@keyframes co-strip { 0% { transform: none; } 25% { transform: translate(2%, -4%) rotate(-6deg); } 100% { transform: translate(55%, -150%) rotate(-38deg); opacity: 0; } }
@keyframes co-beam { 0% { opacity: 0; transform: scaleY(.3); } 30% { opacity: 1; transform: scaleY(1.1); } 100% { opacity: 0; transform: scaleY(1.4); } }
@keyframes co-drop { to { transform: translateY(45%) scale(.92); opacity: 0; } }
.co-center > * { grid-area: 1 / 1; }
@keyframes co-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes co-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg) scale(1.04); } 40% { transform: rotate(6deg) scale(1.07); } 60% { transform: rotate(-8deg) scale(1.1); } 80% { transform: rotate(8deg) scale(1.13); } }
@keyframes co-burst { to { transform: scale(1.6); opacity: 0; filter: brightness(3); } }
.co-pile { position: relative; width: min(250px, 58vw, 36vh); aspect-ratio: 5 / 7; perspective: 1200px; }
.co-card { position: absolute; inset: 0; z-index: var(--z); padding: 0; border: 0; background: none; pointer-events: none;
  transform: translate(calc(var(--i) * 4px), calc(var(--i) * -4px)) rotate(calc((var(--i) - 2) * 1.6deg)); transition: transform .3s;
  animation: co-deal .5s calc(var(--i) * .06s) cubic-bezier(.2, 1.2, .4, 1) both; }
@keyframes co-deal { from { transform: translateY(80px) scale(.6); opacity: 0; } }
.co-card.top { pointer-events: auto; cursor: pointer; transform: none; }
.co-card { perspective: 1100px; }
.co-flip { position: absolute; inset: 0; transform-style: preserve-3d; }
/* La carte se décolle par un bord, monte en tournant, penche un peu, retombe avec un léger rebond ; son ombre s'éloigne et s'adoucit
   pendant qu'elle est en l'air, et la lumière glisse sur ses faces */
.co-card.on .co-flip { transform: rotateY(180deg); animation: co-flip .9s linear both; }
@keyframes co-flip {
  0% { transform: translateY(0) rotateX(0) rotateY(0) rotateZ(0) scale(1); animation-timing-function: cubic-bezier(.4, 0, .7, .4); }
  18% { transform: translateY(-4%) rotateX(12deg) rotateY(22deg) rotateZ(-2deg) scale(1.03); animation-timing-function: linear; }
  50% { transform: translateY(-15%) rotateX(9deg) rotateY(96deg) rotateZ(-4deg) scale(1.1); animation-timing-function: cubic-bezier(.2, .5, .4, 1); }
  80% { transform: translateY(-1%) rotateX(-3deg) rotateY(178deg) rotateZ(.8deg) scale(1.01); animation-timing-function: ease-out; }
  88% { transform: translateY(1.2%) rotateX(1deg) rotateY(182deg) rotateZ(0) scale(.99); animation-timing-function: ease-in-out; }
  100% { transform: translateY(0) rotateX(0) rotateY(180deg) rotateZ(0) scale(1); }
}
.co-card::before { content: ""; position: absolute; inset: 4% 3% -1%; z-index: -1; border-radius: 8% / 5.7%; background: rgba(0, 0, 0, .55); filter: blur(6px); pointer-events: none; }
.co-card.on::before { animation: co-shadow .9s linear both; }
@keyframes co-shadow { 0%, 100% { transform: none; opacity: 1; filter: blur(6px); } 50% { transform: translate(6%, 14%) scale(.86); opacity: .45; filter: blur(16px); } 80% { transform: translate(1%, 3%) scale(.97); opacity: .85; filter: blur(8px); } }
.co-back::after, .co-front::after { content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; opacity: 0; }
.co-card.on .co-back::after { background: linear-gradient(90deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .25)); animation: co-dim .9s linear both; }
.co-card.on .co-front::after { background: linear-gradient(100deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .25) 60%, rgba(255, 255, 255, 0)); animation: co-lit .9s linear both; }
@keyframes co-dim { 0% { opacity: 0; } 48% { opacity: 1; } 100% { opacity: 1; } }
@keyframes co-lit { 0%, 48% { opacity: 1; } 82% { opacity: .35; } 100% { opacity: 0; } }
.co-back, .co-front { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 8% / 5.7%; }
.co-front { transform: rotateY(180deg); }
.co-front .tc { position: absolute; inset: 0; cursor: default; }
.co-front .tc:hover { transform: none; }
/* Face cachée : la face est masquée. Les éléments animés ou filtrés d'une carte forment des calques que Chrome dessine à travers le dos
   de la carte et les cartes du dessus (on devinerait la carte). Elle apparaît quand la carte a tourné d'un quart. */
.co-card:not(.on) .co-front { visibility: hidden; }
.co-card:not(.on) .co-front * { animation: none !important; }
.co-card.on .co-front { transition: visibility 0s .42s; }
/* Dos de carte : bleu nuit et or, logo de LoL ; sa lueur trahit la rareté de la carte du dessus */
.co-back { display: grid; place-items: center; --rc: 0, 0, 0;
  background: repeating-linear-gradient(60deg, rgba(232, 184, 96, .06) 0 1px, transparent 1px 14px), repeating-linear-gradient(-60deg, rgba(232, 184, 96, .06) 0 1px, transparent 1px 14px),
    radial-gradient(circle at 50% 45%, #1d4d55, #102227 55%, #091315);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 0 0 3px rgba(232, 184, 96, .85), inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(232, 184, 96, .35); }
.co-crest { width: 34%; }
.co-crest .pk-lol { position: static; width: 100%; }
.co-card.top.co-r .co-back { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 28px rgba(61, 155, 255, .8), inset 0 0 0 3px rgba(232, 184, 96, .85), inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(232, 184, 96, .35); }
.co-card.top.co-e .co-back { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 36px rgba(182, 92, 255, .9), inset 0 0 0 3px rgba(232, 184, 96, .85), inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(232, 184, 96, .35); animation: co-pulse 1.3s ease-in-out infinite; }
.co-card.top.co-l .co-back { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 180, 60, 1), inset 0 0 0 3px rgba(255, 214, 140, 1), inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(232, 184, 96, .5); animation: co-pulse .9s ease-in-out infinite; }
.co-card.top.co-s .co-back { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 54px rgba(255, 110, 220, 1), 0 0 90px rgba(80, 220, 255, .6), inset 0 0 0 3px #fff, inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(255, 140, 230, .6); animation: co-pulse .7s ease-in-out infinite, co-hue 2.5s linear infinite; }
.co-card.top.co-u .co-back { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 46px rgba(46, 232, 230, 1), 0 0 80px rgba(240, 197, 122, .45), inset 0 0 0 3px #bff, inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(46, 232, 230, .6); animation: co-pulse .8s ease-in-out infinite; }
.co-card.top.co-g .co-back { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 200, 60, 1), 0 0 110px rgba(255, 230, 140, .7), inset 0 0 0 3px #fff3b0, inset 0 0 0 9px rgba(8, 16, 18, .8), inset 0 0 0 10px rgba(255, 210, 100, .7); animation: co-pulse .6s ease-in-out infinite; }
@keyframes co-pulse { 50% { filter: brightness(1.35); } }
@keyframes co-hue { to { filter: hue-rotate(360deg); } }
/* La dernière carte, quand elle est rare, tremble avant d'être retournée */
.co-card.tease { animation: co-tease .45s ease-in-out infinite; }
@keyframes co-tease { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-2.5deg) translateY(-3px); } 75% { transform: rotate(2.5deg) translateY(-3px); } }
.co-card.leave { animation: co-leave .38s ease-in forwards; pointer-events: none; }
@keyframes co-leave { to { transform: translateY(75%) scale(.35); opacity: 0; } }
.co-card.stay { pointer-events: none; }
.co-new, .co-dup { position: absolute; left: 50%; bottom: -14px; z-index: 5; transform: translateX(-50%); padding: 4px 11px; border-radius: 999px; font-style: normal; font-size: 12px; font-weight: 800; white-space: nowrap; animation: co-chip .35s .85s both; }
.co-new { background: linear-gradient(180deg, #ffcf6b, #e08a1e); color: #2a1300; }
.co-dup { background: #14204a; color: #9fd6ff; border: 1px solid #2f4b8a; }
@keyframes co-chip { from { opacity: 0; transform: translate(-50%, 6px); } }
.co-card.on.co-l .co-front, .co-card.on.co-s .co-front, .co-card.on.co-u .co-front, .co-card.on.co-g .co-front { animation: co-legend-card 1.2s .76s ease-out backwards; }
@keyframes co-legend-card { 0% { filter: brightness(3); transform: rotateY(180deg) scale(1.15); } 100% { filter: none; transform: rotateY(180deg) scale(1); } }
.co-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 104px; }
.co-mini { position: relative; width: 74px; animation: co-pop .35s cubic-bezier(.2, 1.3, .4, 1); }
.co-mini .tc { cursor: default; }
.co-mini .tc:hover { transform: none; }
.co-mini .co-new { bottom: -8px; padding: 2px 7px; font-size: 9.5px; animation: none; }
@keyframes co-pop { from { transform: translateY(-30px) scale(1.4); opacity: 0; } }
.co-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 40px; }
/* Étincelles, onde de choc, éclair doré (Légendaire) ou arc-en-ciel (Secrète) et secousse */
.co-spark { --rc: 154, 164, 181; position: fixed; z-index: 6; width: 8px; height: 8px; margin: -4px; border-radius: 50%; pointer-events: none;
  background: rgb(var(--rc)); box-shadow: 0 0 10px rgb(var(--rc)), 0 0 3px #fff; animation: co-spark 1.1s ease-out forwards; }
.co-ring { --rc: 154, 164, 181; position: fixed; z-index: 5; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none; border: 3px solid rgb(var(--rc)); box-shadow: 0 0 20px rgb(var(--rc)); animation: co-ring .8s ease-out forwards; }
.co-s-r { --rc: 61, 155, 255; }
.co-s-e { --rc: 182, 92, 255; }
.co-s-l { --rc: 255, 180, 60; }
.co-s-g { --rc: 255, 210, 90; }
.co-spark.co-s-s { background: hsl(var(--h, 300) 100% 70%); box-shadow: 0 0 12px hsl(var(--h, 300) 100% 65%), 0 0 3px #fff; }
.co-ring.co-s-s { border-color: #fff; box-shadow: 0 0 20px #ff6fd8, 0 0 40px #46e0d6; }
.co-spark.co-s-u { background: var(--sc, #2ee8e6); box-shadow: 0 0 12px var(--sc, #2ee8e6), 0 0 3px #fff; }
.co-ring.co-s-u { border-color: var(--sc, #2ee8e6); box-shadow: 0 0 22px var(--sc, #2ee8e6), 0 0 44px var(--sc, #2ee8e6); }
@keyframes co-spark { from { transform: translate(0, 0) scale(var(--s)); opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(0); opacity: 0; } }
@keyframes co-ring { to { transform: scale(9); opacity: 0; } }
.cd-open.co-legend, .cd-open.co-secret { animation: co-quake .6s ease-out; }
.cd-open.co-legend::after, .cd-open.co-secret::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: co-flash 1.2s ease-out forwards;
  background: radial-gradient(circle, rgba(255, 220, 140, .65), rgba(255, 150, 40, .15) 45%, transparent 70%); }
.cd-open.co-secret::after { background: conic-gradient(from 0deg, rgba(255, 90, 200, .45), rgba(80, 220, 255, .45), rgba(255, 240, 120, .45), rgba(160, 110, 255, .45), rgba(255, 90, 200, .45)); -webkit-mask: radial-gradient(circle, #000, transparent 70%); mask: radial-gradient(circle, #000, transparent 70%); animation: co-flash 1.6s ease-out forwards; }
/* Or : rayons dorés qui tournent et s'éteignent */
.cd-open.co-gold { animation: co-quake .7s ease-out; }
.cd-open.co-gold::after { content: ""; position: absolute; inset: -20%; pointer-events: none; animation: co-rays 2.4s ease-out forwards;
  background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 215, 100, .55) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle at 50% 45%, #000, transparent 60%); mask: radial-gradient(circle at 50% 45%, #000, transparent 60%); }
@keyframes co-rays { from { opacity: 1; transform: rotate(0) scale(.8); } to { opacity: 0; transform: rotate(35deg) scale(1.25); } }
/* Summoner : éclair à la couleur du sort */
.cd-open.co-summ { animation: co-quake .5s ease-out; }
.cd-open.co-summ::after { content: ""; position: absolute; inset: 0; pointer-events: none; animation: co-flash 1.3s ease-out forwards;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc, #2ee8e6) 60%, transparent), transparent 65%); }
@keyframes co-quake { 10%, 50%, 90% { transform: translate(-6px, 3px); } 30%, 70% { transform: translate(6px, -3px); } }
@keyframes co-flash { from { opacity: 1; } to { opacity: 0; } }
body.cd-noscroll { overflow: hidden; }

/* Carte agrandie */
.cd-zoom { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 16px; background: rgba(3, 3, 14, .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cz-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; max-width: 760px; }
.cz-card { width: min(300px, 70vw); }
.cz-card .tc { cursor: default; }
.cz-card .tc:hover { transform: none; }
.cz-info { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 340px; }
.cz-info h2 { margin: 0; font-size: 26px; }
.cz-info p { margin: 0; color: var(--muted); }
.cz-rar { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--rc)); }
.cz-own { color: var(--good) !important; font-weight: 600; }
.cz-own.miss { color: var(--muted) !important; }
.cz-hint { color: var(--muted); }

/* Vitrine : 5 cartes mises en avant sur le profil public */
.cd-vitrine { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(255, 200, 80, .06), rgba(182, 92, 255, .06)), var(--panel); border: 1px solid var(--line); }
.cv-head h3 { margin: 0 0 2px; font-size: 16px; }
.cv-head small { color: var(--muted); font-size: 13px; }
.cv-row { display: grid; grid-template-columns: repeat(5, minmax(0, 120px)); gap: 12px; margin-top: 12px; }
.cv-slot.auto { opacity: .8; }
.cv-slot.empty { display: grid; place-items: center; aspect-ratio: 5 / 7; border-radius: 8% / 5.7%; border: 2px dashed rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .25); font-size: 28px; }
.pl-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 140px)); gap: 12px; }
.pl-cd { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 600; font-family: Inter, sans-serif; letter-spacing: 0; text-transform: none; }
@media (max-width: 760px) { .cv-row, .pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Échanges entre amis (cards.js) : bandeau sur la page Collection, fenêtre avec propositions reçues, envoyées, et composition */
.cd-trade { margin: -6px 0 20px; }
.ctr-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(46, 232, 230, .08), rgba(223, 87, 121, .06)), var(--panel); border: 1px solid var(--line); }
.ctr-bar.hot { border-color: rgba(255, 200, 80, .55); box-shadow: 0 0 18px rgba(255, 190, 60, .18); }
.ctr-bar > div { flex: 1; min-width: 0; }
.ctr-bar b { display: block; font-size: 15px; }
.ctr-bar em { font-style: normal; color: #ffd27a; }
.ctr-bar small { color: var(--muted); font-size: 13px; }
.ctr-bar-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #15284a; color: #7fe9ff; }
.ctr-bar-ic .ico { width: 20px; height: 20px; }
.cd-tradebox { position: fixed; inset: 0; z-index: 86; display: grid; place-items: center; padding: 16px; background: rgba(3, 3, 14, .85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ctr-box { position: relative; width: min(1000px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 20px 20px; border-radius: 16px; background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.ctr-head { position: sticky; top: -18px; z-index: 3; display: flex; align-items: center; gap: 12px; margin: -18px -20px 10px; padding: 14px 20px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.ctr-head h2 { flex: 1; margin: 0; font-size: 20px; }
.ctr-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; }
.ctr-note { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .35); color: #ffb3b3; font-size: 14px; }
.ctr-note.ok { background: rgba(63, 191, 110, .1); border-color: rgba(63, 191, 110, .4); color: #9fe8b8; }
.ctr-empty { padding: 18px 4px; color: var(--muted); }
.ctr-empty p { margin: 0 0 12px; }
.ctr-h { margin: 18px 0 10px; font-size: 15px; color: var(--gold-hi); }
.ctr-offer { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-bottom: 10px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.ctr-who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.ctr-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctr-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.ctr-sides { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctr-sides > div { min-width: 0; }
.ctr-sides small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; }
.ctr-arrow { font-size: 20px; color: var(--gold); }
.ctr-minis { display: flex; flex-wrap: wrap; gap: 6px; }
.ctr-mini { width: 54px; padding: 0; border: 0; background: none; }
.ctr-mini .tc { cursor: default; }
.ctr-mini .tc:hover { transform: none; }
.ctr-minis.rm .ctr-mini { cursor: pointer; }
.ctr-minis.rm .ctr-mini .tc { cursor: pointer; }
.ctr-minis.rm .ctr-mini:hover { filter: brightness(.6); }
.ctr-none { margin: 0; color: var(--muted); font-size: 13px; }
.ctr-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ctr-acts small { color: var(--muted); font-size: 12px; }
.ctr-warn { color: #ffcf7a !important; font-size: 12px; }
.ctr-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ctr-friend { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.ctr-friend:hover { border-color: var(--gold); transform: translateY(-2px); }
.ctr-friend small { color: var(--muted); font-size: 12px; }
.ctr-hist { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.ctr-hist b { color: var(--text); }
.st-accepted { color: var(--good); }
.st-declined, .st-cancelled { color: #ff9a9a; }
/* Onglets « Entre amis » / « Place du marché » */
.ctr-mk-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 4px; }
.ctr-mk-top p { margin: 0; color: var(--muted); font-size: 13.5px; }
.ctr-mk-f { margin-bottom: 10px; }
.ctr-mk-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #15284a; color: #7fe9ff; }
.ctr-mk-ic .ico { width: 16px; height: 16px; }
.ctr-offer.useful { border-color: rgba(255, 210, 122, .35); }
.ctr-tools { margin-bottom: 12px; }
.ctr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ctr-cols section { min-width: 0; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); }
.ctr-colh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.ctr-colh h3 { margin: 0; font-size: 16px; }
.ctr-colh h3 small { color: var(--muted); font-weight: 600; margin-left: 4px; }
.ctr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; max-height: 46vh; overflow: auto; padding: 4px 4px 4px 2px; }
.ctr-pick { position: relative; padding: 0 0 18px; border: 0; background: none; color: var(--text); cursor: pointer; border-radius: 8px; }
.ctr-pick .tc { cursor: pointer; }
.ctr-pick.full:not(.on) { opacity: .45; }
.ctr-pick.on .tc { outline: 2px solid #ffd27a; outline-offset: 2px; border-radius: 8% / 5.7%; }
.ctr-qty { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctr-pick.on .ctr-qty { color: #ffd27a; font-weight: 700; }
.ctr-sum { position: sticky; bottom: -20px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 14px -20px -20px; padding: 14px 20px; background: var(--panel2); border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .ctr-offer { grid-template-columns: 1fr; }
  .ctr-acts { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ctr-cols { grid-template-columns: 1fr; }
  .ctr-grid { max-height: 34vh; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
  .ctr-bar { flex-wrap: wrap; }
}

/* Message de mission accomplie : un petit paquet à la place de l'image du succès */
.card-toast .ct-pack { flex: none; width: 34px; height: 48px; border-radius: 4px; background: radial-gradient(circle at 50% 40%, #1d4d55, #0a1416); box-shadow: inset 0 0 0 2px rgba(232, 184, 96, .85), 0 0 14px rgba(46, 232, 230, .35); }

@media (max-width: 760px) {
  .cd-top, .dash-cards { grid-template-columns: 1fr; }
  .cd-packs { flex-direction: column; align-items: flex-start; }
  .cd-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .co-mini { width: 58px; }
  .co-center { min-height: 48vh; }
}

/* Collection : échanges entre amis et place du marché côte à côte ; page « Place du marché » */
.ctr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctr-bar.mk { background: linear-gradient(90deg, rgba(174, 40, 231, .12), rgba(223, 87, 121, .05)), var(--panel); }
.ctr-bar.mk .ctr-bar-ic { color: #c77dff; }
.ctr-mk-link { margin: 14px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.mk-page { padding: 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.mk-page .ctr-mk-top { justify-content: flex-end; margin-top: 0; }
.mk-page .ctr-mk-top p { display: none; }
.mk-compose .ctr-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mk-compose .ctr-head h2 { margin: 0; font-size: 20px; }
#market .cd-head { align-items: flex-start; }
@media (max-width: 760px) { .ctr-duo { grid-template-columns: 1fr; } .mk-page { padding: 12px; } }

/* ---------- Pause Poro (poro.js) ---------- */
.po-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.po-stats img { width: 16px; height: 16px; margin-right: 4px; border-radius: 4px; vertical-align: -3px; }
.po-head h1 { margin: 6px 0 0; }
.po-stage { position: relative; height: 470px; margin-top: 8px; overflow: hidden; border-radius: 22px; border: 1px solid rgba(160, 200, 255, .22); cursor: crosshair; touch-action: manipulation; user-select: none;
  background:
    radial-gradient(120% 60% at 50% 108%, #e9f2ff 0 34%, #b9cde8 35%, transparent 36%),
    radial-gradient(70% 50% at 50% 30%, rgba(120, 170, 255, .25), transparent 70%),
    linear-gradient(180deg, #1a2a52, #101a38 60%, #0b1430); }
/* neige qui tombe doucement */
.po-stage::before, .po-stage::after { content: ""; position: absolute; inset: -200px 0 0; pointer-events: none;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 90px 120px, #fff, transparent), radial-gradient(1.5px 1.5px at 150px 60px, #fff, transparent), radial-gradient(2.5px 2.5px at 200px 160px, rgba(255, 255, 255, .8), transparent), radial-gradient(1.5px 1.5px at 260px 20px, #fff, transparent);
  background-size: 300px 200px; opacity: .55; animation: po-snow 14s linear infinite; }
.po-stage::after { background-size: 220px 170px; opacity: .3; animation-duration: 22s; }
@keyframes po-snow { to { transform: translateY(200px); } }
.po-msg { position: absolute; top: 18px; left: 50%; z-index: 3; width: min(560px, calc(100% - 32px)); margin: 0; padding: 10px 16px; border-radius: 14px; background: rgba(8, 14, 34, .55); border: 1px solid rgba(255, 255, 255, .1); color: #e8f0ff; font-size: 15px; font-weight: 600; text-align: center; transform: translateX(-50%); pointer-events: none; backdrop-filter: blur(4px); }
.po-msg.show { animation: po-msg .5s ease; }
@keyframes po-msg { from { opacity: 0; transform: translate(-50%, -8px); } }
.po-wrap { --s: 1; position: absolute; bottom: 34px; left: 50%; z-index: 2; width: 170px; margin-left: -85px; transform: scale(var(--s)); transform-origin: 50% 94%; transition: transform .4s cubic-bezier(.3, 1.7, .5, 1); }
.po-svg { display: block; width: 100%; overflow: visible; }
.po-shadow { fill: rgba(30, 50, 90, .25); }
.po-horn { fill: url(#poHorn); stroke: #9c7148; stroke-width: 2; }
.po-body { transform-origin: 110px 200px; animation: po-idle 2.6s ease-in-out infinite; cursor: pointer; }
@keyframes po-idle { 50% { transform: scale(1.035, .965); } }
.po-eye { transform-box: fill-box; transform-origin: center; animation: po-blink 4.5s infinite; }
@keyframes po-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.po-happy, .po-open { opacity: 0; }
.po-wrap.happy .po-eyes { opacity: 0; }
.po-wrap.happy .po-happy { opacity: 1; }
.po-wrap.open .po-open { opacity: 1; }
.po-wrap.open .po-closed, .po-wrap.open .po-tongue { opacity: 0; }
.po-wrap.chomp .po-body { animation: po-chomp .3s ease; }
@keyframes po-chomp { 30% { transform: scale(1.1, .88); } 60% { transform: scale(.95, 1.06); } }
.po-cheeks { transform-box: fill-box; transform-origin: center; transition: transform .3s; }
.po-wrap.full .po-cheeks { transform: scale(1.5); }
.po-wrap.full .po-body { animation: po-wobble .5s ease-in-out infinite; }
@keyframes po-wobble { 25% { transform: rotate(-2.5deg) scale(1.02, .98); } 75% { transform: rotate(2.5deg) scale(1.02, .98); } }
.po-wrap.shake .po-body { animation: po-shake .07s linear infinite; }
@keyframes po-shake { 25% { transform: translate(-3px, 1px) scale(1.06); } 75% { transform: translate(3px, -1px) scale(1.1); } }
.po-wrap.gone { transform: scale(0); transition: transform .12s ease-in; }
.po-wrap.arrive .po-body { animation: po-arrive .65s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes po-arrive { 0% { transform: translateY(-260px) scale(.6); } 60% { transform: translateY(0) scale(1.15, .85); } }
.po-snax { position: absolute; top: 0; left: 0; z-index: 4; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); pointer-events: none; }
.po-heart { position: absolute; z-index: 4; color: #ff7fa6; font-size: 20px; pointer-events: none; text-shadow: 0 0 10px rgba(255, 120, 170, .6); animation: po-heart 1.4s ease-out forwards; }
.po-heart.big { font-size: 28px; }
@keyframes po-heart { from { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--dx), -120px) scale(1.2); } }
.po-conf { position: absolute; z-index: 5; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; }
.po-conf.fluff { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #dfe8f5); }
.po-meter { position: absolute; bottom: 12px; left: 50%; z-index: 3; width: min(260px, 60%); height: 6px; border-radius: 99px; background: rgba(10, 20, 50, .35); transform: translateX(-50%); overflow: hidden; }
.po-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7fe0ff, #ff7fa6); transition: width .3s; }
.po-actions { display: flex; justify-content: center; margin-top: 14px; }
.po-feed img { width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; vertical-align: -5px; }
.po-tilt { margin: 6px 0 0; text-align: center; font-size: 13px; }
.ft-tilt { margin: 0 0 6px; }
.ft-tilt .ft-link { color: #8f93c4; font-size: 12px; }
@media (max-width: 640px) { .po-stage { height: 380px; } .po-wrap { width: 128px; margin-left: -64px; bottom: 28px; } .po-msg { font-size: 13.5px; } }

.po-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.po-stage.po-3d .po-wrap { visibility: hidden; }
/* Bouton « Pause Poro » de la barre du haut : visible, mais à part des modes de jeu */
.nav-links .nav-poro { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 5px; margin-left: 6px; border-radius: 999px; border: 1px solid rgba(127, 224, 255, .4); background: linear-gradient(90deg, rgba(127, 224, 255, .12), rgba(255, 127, 166, .08)); color: #dff6ff; font-size: 13px; font-weight: 600; white-space: nowrap; transition: transform .2s, box-shadow .3s; }
.nav-links .nav-poro img { width: 24px; height: 24px; border-radius: 50%; }
.nav-links .nav-poro:hover { transform: translateY(-1px); box-shadow: 0 0 14px rgba(127, 224, 255, .35); }
.nav-links .nav-poro:hover img { animation: po-nav .5s ease; }
.nav-links .nav-poro.on { border-color: #7fe0ff; box-shadow: 0 0 12px rgba(127, 224, 255, .3); }
@keyframes po-nav { 40% { transform: rotate(-14deg) scale(1.15); } 70% { transform: rotate(10deg); } }
@media (max-width: 1180px) { .nav-links .nav-poro span { display: none; } .nav-links .nav-poro { padding: 0 5px; } }

/* Runes principales : même carte que les Summoners (rareté Mystique), avec l'icône de la rune qui flotte */
.tc-keystone { position: absolute; left: 19cqw; top: calc(50% - 31cqw); width: 62cqw; height: 62cqw; object-fit: contain;
  filter: drop-shadow(0 0 3cqw var(--s2)) drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .6)); animation: tc-float 4.2s ease-in-out infinite; }
/* Légendes de l'esport : grande illustration, bandeau et liseré aux couleurs de l'équipe, poste en ruban */
.tc-k-esport .tc-art img, .tc-k-moment .tc-art img { object-position: 50% 30%; }
.tc-k-esport .tc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--s1) 55%, transparent)); box-shadow: inset 0 -1.2cqw 0 var(--s1); }
.tc-k-esport .tc-name { font-family: Cinzel, Georgia, serif; letter-spacing: .04em; }
.tc-k-esport .tc-sub { color: color-mix(in srgb, var(--s1) 70%, currentColor); font-weight: 700; }
/* Moments légendaires : photo pleine (sans bandes noires), léger fondu en bas pour lire l'année en grand */
.tc-k-moment .tc-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.tc-year { position: absolute; right: 5cqw; bottom: 9cqw; z-index: 2; color: #fff; font: 700 13cqw/1 Cinzel, Georgia, serif; letter-spacing: .04em; text-shadow: 0 0 3cqw rgba(0, 0, 0, .9), 0 .5cqw 1cqw #000; }

/* Photos des Légendes et des Moments ; crédit de la photo sur la carte agrandie */
.cz-credit { display: block; margin: -4px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.4; }
/* Légendes et Moments en rareté Secrète (pleine image) : année et poste remontés en haut à droite */
.tc-s .tc-year { top: 5cqw; bottom: auto; font-size: 11cqw; }
.tc-s.tc-k-esport .tc-art::after, .tc-s.tc-k-moment .tc-art::after { background: none; box-shadow: none; }
/* Poste des Légendes : icône officielle du poste dans une pastille aux couleurs de l'équipe, nom en capitales */
.tc-role { position: absolute; right: 4cqw; bottom: 4cqw; z-index: 2; display: flex; align-items: center; gap: 1.8cqw; padding: 1cqw 3.4cqw 1cqw 1cqw; border-radius: 99px;
  background: linear-gradient(180deg, rgba(14, 14, 30, .82), rgba(6, 6, 16, .9)); border: .5cqw solid color-mix(in srgb, var(--s1) 75%, transparent);
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .55), 0 0 3.5cqw color-mix(in srgb, var(--s1) 45%, transparent), inset 0 .4cqw 0 rgba(255, 255, 255, .08); }
.tc-role i { display: grid; place-items: center; width: 8.5cqw; height: 8.5cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--s1) 70%, #fff), var(--s1) 55%, color-mix(in srgb, var(--s1) 55%, #000)); box-shadow: 0 0 2cqw color-mix(in srgb, var(--s1) 60%, transparent); }
.tc-role i .lane-ic { width: 5.6cqw; height: 5.6cqw; margin: 0; filter: brightness(0) invert(1) drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .5)); }
.tc-role b { color: #fff; font: 800 4.8cqw/1 Inter, system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .6); }
.tc-s .tc-role { top: 5cqw; bottom: auto; }

/* Main qui remplace le curseur dans Pause Poro (souris uniquement) : elle lance, caresse et tapote */
@media (hover: hover) and (pointer: fine) { .po-stage { cursor: none; } }
.po-hand { position: absolute; top: 0; left: 0; z-index: 6; width: 0; height: 0; pointer-events: none; }
.po-hand i { position: absolute; left: -30px; top: -26px; display: block; width: 60px; height: 60px; transform-origin: 50% 70%; transform: rotate(-16deg); transition: transform .18s ease, filter .18s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.po-hand svg { display: block; width: 100%; height: 100%; }
.po-hand.over i { transform: rotate(-4deg) scale(1.12); animation: po-hand-pet .9s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 8px rgba(255, 170, 200, .55)); }
@keyframes po-hand-pet { 50% { transform: rotate(6deg) scale(1.12) translate(4px, 2px); } }
.po-hand.flick i { animation: po-hand-flick .3s ease-out; }
@keyframes po-hand-flick { 35% { transform: rotate(-38deg) translateY(-6px); } }
.po-hand.pat i { animation: po-hand-pat .45s ease-out; }
@keyframes po-hand-pat { 30% { transform: rotate(-4deg) scale(1.05) translateY(8px); } 60% { transform: rotate(-4deg) scale(1.14) translateY(-3px); } }

/* ---------- Page profil : chiffres clés, deux colonnes, vitrine de cartes mise en scène, liste des rangs ---------- */
.pl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pl-stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(223, 87, 121, .1), rgba(174, 40, 231, .06) 60%, transparent), var(--panel); }
.pl-stat > div { min-width: 0; }
.pl-stat small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pl-stat b { display: block; color: var(--text); font-family: Cinzel, Georgia, serif; font-size: 22px; line-height: 1.15; white-space: nowrap; }
.pl-stat b span { color: var(--muted); font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; }
.pl-stat em { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.pl-stat-ic { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(223, 87, 121, .14); color: var(--gold-hi); }
.pl-stat-ic svg { width: 22px; height: 22px; }
.pl-stat.rank { border-color: rgba(var(--rc), .5); background: radial-gradient(120% 140% at 0% 50%, rgba(var(--rc), .2), transparent 60%), var(--panel); }
.pl-stat.rank b { color: rgb(var(--rc)); }
.pl-stat-emb { position: relative; flex: none; width: 54px; height: 46px; overflow: hidden; }
.pl-stat-emb img { position: absolute; left: 50%; top: 50%; width: 190px; max-width: none; transform: translate(-50%, -47%); }
.pl-bar { display: block; height: 5px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold), #f0d68a); }
/* une seule colonne : la vitrine, les succès et la maîtrise, puis les rangs, les titres et les classements */
.pl-grid { display: block; }
.pl-panel { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.pl-side .pl-block:first-child { margin-top: 22px; }
.pl-rlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pl-rrow { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 4px; border-radius: 12px;
  border: 1px solid rgba(var(--rc), .35); background: linear-gradient(90deg, rgba(var(--rc), .14), rgba(12, 25, 41, .6)); }
.pl-rrow small { display: block; overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.pl-rrow b { color: rgb(var(--rc)); font-family: Cinzel, Georgia, serif; font-size: 15px; }
.pl-rrow em { color: var(--text); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.pl-remb { position: relative; display: grid; place-items: center; width: 46px; height: 40px; overflow: hidden; }
.pl-remb img { position: absolute; left: 50%; top: 50%; width: 160px; max-width: none; transform: translate(-50%, -47%); }
.pl-rrow.off { --rc: 120, 125, 160; opacity: .55; border-style: dashed; background: rgba(12, 25, 41, .4); }
.pl-rrow.off .pl-remb svg { width: 18px; height: 18px; color: var(--muted); }
.pl-rrow.off b { font-family: Inter, sans-serif; font-size: 13px; font-weight: 600; }
.pl-vitrine { position: relative; padding: 18px; border-radius: 18px; border: 1px solid rgba(223, 87, 121, .3);
  background: radial-gradient(70% 90% at 50% 100%, rgba(223, 87, 121, .18), transparent 70%), radial-gradient(60% 70% at 50% 0%, rgba(174, 40, 231, .14), transparent 70%), var(--panel); }
.pl-vitrine .pl-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pl-vitrine .pl-cards .tc { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); transition: transform .2s; }
.pl-vitrine .pl-cards .tc:hover { transform: translateY(-6px); }
.pl-rare { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 12px; font-size: 12.5px; }
.pl-vit-hint { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
@media (max-width: 640px) { .pl-vitrine .pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pl-vitrine { padding: 12px; } .pl-stat { padding: 12px; } .pl-stat b { font-size: 18px; } }

/* Sélecteur de vitrine (Collection et profil) */
.cv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
button.cv-slot.empty { width: 100%; background: none; font: inherit; cursor: pointer; transition: border-color .15s, color .15s; }
button.cv-slot.empty:hover { border-color: var(--gold); color: var(--gold-hi); }
.cd-pick { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(3, 3, 14, .72); backdrop-filter: blur(4px); }
.cd-pick[hidden] { display: none; }
.cpk-box { display: flex; flex-direction: column; width: min(980px, 100%); max-height: calc(100vh - 32px); border-radius: 18px; border: 1px solid var(--line); background: var(--panel-solid, #0d0f2c); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.cpk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; }
.cpk-head h2 { margin: 0; font-size: 20px; }
.cpk-head small { color: var(--muted); font-size: 13px; }
.cpk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 18px 10px; }
.cpk-tools .cd-search { flex: 1; min-width: 180px; }
.cpk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 6px 18px 18px; overflow-y: auto; }
.cpk-card { position: relative; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; transition: transform .15s; }
.cpk-card:hover { transform: translateY(-3px); }
.cpk-card.on { outline: 3px solid var(--gold); outline-offset: 3px; }
.cpk-card.full { opacity: .45; }
.cpk-n { position: absolute; top: -8px; right: -8px; z-index: 5; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: #1f0209; font-weight: 800; font-size: 13px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.cpk-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }

/* Mode léger (perf.js, ordinateur qui peine) : pas de flou d'arrière-plan, recalculé à chaque image au-dessus du fond
   animé ; la barre du haut devient un peu plus opaque à la place */
body.lite *, body.lite *::before, body.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.lite .navbar, body.lite.hx .navbar { background: rgba(3, 4, 19, .93); }