/* Univers Brawl Stars : violet arcade, contours noirs épais, ombres dures.
   Mêmes jetons que design/maquette-progression.html. */

:root{
  --ink:#0B0619;
  --ground:#150C2E;
  --ground2:#1D1140;
  --surface:#261653;
  --surface2:#2F1C64;
  --line:#3D2685;
  --text:#F2ECFF;
  --muted:#A192CF;
  --gold:#FFC21B;
  --gold-d:#E09A00;
  --cyan:#31D9F2;
  --green:#3BE86B;
  --hot:#FF3D68;
  --violet:#B45CFF;
  --stroke:3px solid var(--ink);
  --pop:0 5px 0 var(--ink);
  --pop-lg:0 7px 0 var(--ink);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -12%, #351F72 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 4%, #4A1C63 0%, transparent 58%),
    var(--ground);
  color:var(--text);
  font-family:Nunito,"Segoe UI",system-ui,sans-serif;
  font-weight:700;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1000px;margin:0 auto;padding:26px 20px 64px}
.num{font-variant-numeric:tabular-nums}

/* ---------- topbar ---------- */
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:var(--stroke);border-radius:22px;box-shadow:var(--pop-lg);
  padding:16px 20px;
}
.avatar{
  width:62px;height:62px;flex:none;border-radius:14px;border:var(--stroke);
  background:linear-gradient(160deg,var(--gold),#FF8A00);
  display:grid;place-items:center;font-family:"Lilita One",sans-serif;font-size:30px;color:var(--ink);
  transform:rotate(-3deg);box-shadow:0 4px 0 var(--ink);
}
.who{display:flex;flex-direction:column;gap:3px;min-width:0}
.who .name{
  font-family:"Lilita One","Arial Black",sans-serif;font-size:29px;line-height:1;
  text-shadow:0 3px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink);
}
.who .sub{color:var(--muted);font-size:13px}
.who .sub b{color:var(--gold)}
.spacer{flex:1 1 40px}

.btn{
  font-family:"Lilita One",sans-serif;font-size:15px;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--gold),var(--gold-d));color:var(--ink);
  border:var(--stroke);border-radius:14px;padding:11px 20px;cursor:pointer;
  box-shadow:0 5px 0 #8B5E00;transition:transform .1s ease,box-shadow .1s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 #8B5E00}
.btn:active{transform:translateY(2px);box-shadow:0 3px 0 #8B5E00}
.btn:disabled{opacity:.55;cursor:progress;transform:none;box-shadow:0 5px 0 #8B5E00}
.btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---------- bandeau de statut ---------- */
.statut{
  display:flex;align-items:center;gap:15px;margin-top:18px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:var(--stroke);border-radius:20px;box-shadow:var(--pop);padding:16px 20px;
}
.pastille{
  width:20px;height:20px;flex:none;border-radius:50%;border:var(--stroke);
  background:var(--muted);
}
.pastille.ok{background:var(--green)}
.pastille.ko{background:var(--hot)}
.statut-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.statut-txt strong{font-family:"Lilita One",sans-serif;font-size:19px;font-weight:400;letter-spacing:.3px}
.statut-txt span{color:var(--muted);font-size:13px}

/* ---------- alertes ---------- */
.alerte{
  margin-top:14px;border:var(--stroke);border-radius:16px;padding:14px 18px;
  background:linear-gradient(180deg,#FF6A8C,#D91E48);color:#fff;box-shadow:var(--pop);
  font-size:14px;line-height:1.5;
}
.alerte.info{background:linear-gradient(180deg,#7FD8FF,#1B87C4);color:var(--ink)}
.alerte b{font-family:"Lilita One",sans-serif;font-weight:400;letter-spacing:.3px}
.alerte code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:rgba(11,6,25,.28);padding:1px 6px;border-radius:5px;
}

/* ---------- titres ---------- */
.head{
  font-family:"Lilita One","Arial Black",sans-serif;font-weight:400;font-size:22px;
  letter-spacing:.4px;margin:32px 2px 14px;text-shadow:0 3px 0 var(--ink);
}

/* ---------- tuiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.tile{
  position:relative;border:var(--stroke);border-radius:20px;padding:18px 20px 17px;
  box-shadow:var(--pop-lg);overflow:hidden;
}
.tile::after{
  content:"";position:absolute;inset:3px 3px auto 3px;height:38%;
  border-radius:14px 14px 60% 60%;background:rgba(255,255,255,.16);
}
.tile.snap{background:linear-gradient(180deg,#C6B0FF,#7C4DE0)}
.tile.matchs{background:linear-gradient(180deg,#5FE6FA,#0FA3C4)}
.tile.cat{background:linear-gradient(180deg,#5BF39A,#12A85A)}
.tile>*{position:relative;z-index:1;color:var(--ink)}
.tile .lbl{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;font-weight:900;opacity:.72}
.tile .val{font-family:"Lilita One",sans-serif;font-size:44px;line-height:1.02;margin-top:2px}
.tile .hint{font-size:12.5px;font-weight:800;opacity:.78;margin-top:3px}

/* ---------- tableau ---------- */
.tablewrap{
  border:var(--stroke);border-radius:20px;box-shadow:var(--pop-lg);
  overflow:hidden;background:var(--ground2);
}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:680px}
thead th{
  background:var(--ink);color:var(--muted);font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;font-weight:900;text-align:left;padding:11px 14px;white-space:nowrap;
}
thead th.r{text-align:right}
tbody tr{border-top:2px solid rgba(11,6,25,.55)}
tbody tr:nth-child(odd){background:rgba(255,255,255,.028)}
td{padding:10px 14px;font-size:13.5px;vertical-align:middle}
td.r{text-align:right}
td.detail{color:var(--muted);font-size:12.5px}

.badge{
  display:inline-block;font-size:11.5px;font-weight:900;padding:4px 10px;
  border-radius:8px;border:2px solid var(--ink);color:var(--ink);
}
.badge.ok{background:#7CF3A8}
.badge.ko{background:#FF87A6}

.vide{padding:22px;text-align:center;color:var(--muted);font-size:13.5px}

.note{
  margin-top:22px;border:2px dashed var(--line);border-radius:14px;
  padding:13px 16px;color:var(--muted);font-size:13px;line-height:1.55;
}
.note b{color:var(--gold)}

/* =========================================================================
   Écran de progression (index.html)
   Repris de design/maquette-progression.html : les styles inline y sont
   interdits par la CSP, d'où une classe par couleur plutôt qu'un style=.
   ========================================================================= */

.wrap.large{max-width:1180px}

.nav{display:flex;gap:10px}
.nav a{
  font-family:"Lilita One",sans-serif;font-size:13.5px;letter-spacing:.4px;text-decoration:none;
  background:var(--ground2);color:var(--muted);border:var(--stroke);border-radius:12px;
  padding:9px 14px;box-shadow:0 4px 0 var(--ink);
}
.nav a:hover{color:var(--text)}
.nav a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ---------- sélecteur d'objectif ---------- */
.goal{display:flex;flex-direction:column;gap:7px}
.goal>span{font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:900}
.seg{display:flex;background:var(--ground2);border:var(--stroke);border-radius:14px;padding:4px;gap:4px;box-shadow:0 4px 0 var(--ink)}
.seg button{
  font-family:"Lilita One",sans-serif;font-size:14px;letter-spacing:.5px;
  background:transparent;color:var(--muted);border:0;border-radius:10px;
  padding:8px 15px;cursor:pointer;transition:background .12s ease,color .12s ease;
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:var(--ink);box-shadow:0 3px 0 #8B5E00}
.seg button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

.goal-note{margin:14px 2px 0;color:var(--muted);font-size:13.5px}
.goal-note b{color:var(--text)}

/* ---------- titres de section ---------- */
.section-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:34px 2px 14px}
.section-head h2{
  font-family:"Lilita One","Arial Black",sans-serif;font-weight:400;font-size:23px;
  letter-spacing:.4px;margin:0;text-shadow:0 3px 0 var(--ink);
}
.section-head p{margin:0;color:var(--muted);font-size:13.5px}

/* ---------- tuiles de ressources ---------- */
.tile.coins{background:linear-gradient(180deg,#FFD34E,#F0A000)}
.tile.pp{background:linear-gradient(180deg,#5FE6FA,#0FA3C4)}
.tile.gems{background:linear-gradient(180deg,#5BF39A,#12A85A)}
.tile.bling{background:linear-gradient(180deg,#FF8FD0,#D62B92)}
.tile .doux{opacity:.7}

/* ---------- anneaux ---------- */
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.ring{
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  border:var(--stroke);border-radius:20px;box-shadow:var(--pop);
  padding:16px 14px 15px;display:flex;flex-direction:column;align-items:center;gap:9px;
  cursor:pointer;transition:transform .13s ease,box-shadow .13s ease;
  font:inherit;color:inherit;text-align:center;
}
.ring:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink)}
.ring:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.ring[aria-pressed="true"]{background:linear-gradient(180deg,#40257F,#331C6B);box-shadow:0 5px 0 var(--ink),inset 0 0 0 3px var(--gold)}
.ring[disabled]{opacity:.5;cursor:default}
.ring[disabled]:hover{transform:none;box-shadow:var(--pop)}
.ring .cap{font-family:"Lilita One",sans-serif;font-size:16px;letter-spacing:.4px}
.ring .gap{font-size:12.5px;font-weight:900;color:var(--muted)}
.ring .gap.done{color:var(--green)}
.ring .gap b{color:var(--hot)}
.donut{position:relative;width:104px;height:104px}
.donut svg{transform:rotate(-90deg);display:block}
.donut .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut .pct{font-family:"Lilita One",sans-serif;font-size:24px;line-height:1}
.donut .frac{font-size:11px;font-weight:900;color:var(--muted);margin-top:1px}
.donut .fond{stroke:var(--ink)}
.donut .arc.lv{stroke:#C8B6FF}
.donut .arc.sp{stroke:var(--gold)}
.donut .arc.gd{stroke:var(--cyan)}
.donut .arc.gr{stroke:#FF9F1C}
.donut .arc.hc{stroke:var(--hot)}
.donut .arc.bf{stroke:var(--green)}

/* ---------- barre de tri ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 2px 14px}
.chipbtn{
  font-family:"Lilita One",sans-serif;font-size:13.5px;letter-spacing:.4px;
  background:var(--ground2);color:var(--muted);border:var(--stroke);border-radius:12px;
  padding:8px 14px;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .1s ease;
}
.chipbtn:hover{color:var(--text);transform:translateY(-1px)}
.chipbtn[aria-pressed="true"]{background:linear-gradient(180deg,var(--violet),#7B2BD1);color:#fff;box-shadow:0 4px 0 #3F0F72}
.chipbtn:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.toolbar .count{margin-left:auto;color:var(--muted);font-size:13px}

/* ---------- tableau par brawler ---------- */
table.progression{min-width:840px}
table.progression tbody tr:hover{background:rgba(180,92,255,.13)}
table.progression td{padding:11px 14px;font-size:14px}

.bname{display:flex;align-items:center;gap:11px;min-width:190px}
.rar{width:8px;height:34px;border-radius:5px;border:2px solid var(--ink);flex:none;background:#B9C4D6}
.rar.rare{background:#5BE86B}
.rar.sup{background:#3BA9FF}
.rar.epic{background:#B45CFF}
.rar.myth{background:#FF4D6D}
.rar.leg{background:#FFC21B}
.rar.ultra{background:#FF2D95}
.bname .t{display:flex;flex-direction:column;line-height:1.15}
.bname .t strong{font-family:"Lilita One",sans-serif;font-size:16px;font-weight:400;letter-spacing:.3px}
.bname .t span{font-size:11px;font-weight:800;color:var(--muted)}

.lvl{
  display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;
  border:var(--stroke);font-family:"Lilita One",sans-serif;font-size:17px;color:var(--ink);
  background:linear-gradient(180deg,#8E7FC4,#6B5AA8);box-shadow:0 3px 0 var(--ink);
}
.lvl.max{background:linear-gradient(180deg,var(--gold),var(--gold-d))}

.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{
  font-size:11.5px;font-weight:900;padding:4px 9px;border-radius:8px;
  border:2px solid var(--ink);white-space:nowrap;color:var(--ink);
}
.chip.lv{background:#C8B6FF}
.chip.sp{background:#FFD34E}
.chip.gd{background:#7FE6FF}
.chip.gr{background:#FFC078}
.chip.hc{background:#FF87A6}
.chip.bf{background:#7CF3A8}
.chip.bl{background:#FFAEDC}

.cost{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.2}
.cost .c{color:var(--gold);font-weight:900}
.cost .p{color:var(--cyan);font-weight:900;font-size:12.5px}
.cost .bl{color:#FF8FD0;font-weight:900;font-size:12.5px}

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

/* =========================================================================
   Écran Catalogue (catalogue.html)
   ========================================================================= */

.visuellement-cache{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.sauvegarde{
  font-size:12px;font-weight:900;color:var(--muted);min-width:96px;text-align:right;
}
.sauvegarde.ok{color:var(--green)}
.sauvegarde.ko{color:var(--hot)}

.tile .val.small{font-size:28px;line-height:1.15;margin-top:6px}

.recherche input{
  font:inherit;font-size:13.5px;font-weight:700;color:var(--text);
  background:var(--ground2);border:var(--stroke);border-radius:12px;
  padding:8px 13px;min-width:190px;box-shadow:0 4px 0 var(--ink);
}
.recherche input::placeholder{color:var(--muted)}
.recherche input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* Case à cocher maison : la case native ne se met pas au diapason des contours
   noirs épais du reste. La vraie <input> reste là, seulement rendue invisible,
   pour garder le clavier et les lecteurs d'écran. */
.coche{display:inline-flex;cursor:pointer;padding:3px}
.coche input{position:absolute;opacity:0;width:0;height:0}
.coche .marque{
  width:28px;height:28px;border-radius:9px;border:var(--stroke);
  background:var(--ground2);box-shadow:0 3px 0 var(--ink);
  display:grid;place-items:center;transition:background .12s ease;
}
.coche .marque::after{
  content:"✔";font-size:16px;color:var(--ink);opacity:0;transform:scale(.6);
  transition:opacity .12s ease,transform .12s ease;
}
.coche input:checked + .marque{background:linear-gradient(180deg,var(--green),#12A85A)}
.coche input:checked + .marque::after{opacity:1;transform:scale(1)}
.coche input:focus-visible + .marque{outline:3px solid var(--cyan);outline-offset:2px}
.coche.off{cursor:not-allowed}
.coche.off .marque{opacity:.32;box-shadow:none}

table.catalogue{min-width:720px}
table.catalogue tbody tr:hover{background:rgba(180,92,255,.13)}
thead th.c,td.c{text-align:center}

/* =========================================================================
   Écran Historique (historique.html)
   ========================================================================= */

.filtres{margin:18px 2px 0;gap:12px}
.lbl-filtre{
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:900;
}
.seg.petit button{font-size:13px;padding:7px 13px}
.choix select{
  font:inherit;font-size:13.5px;font-weight:700;color:var(--text);
  background:var(--ground2);border:var(--stroke);border-radius:12px;
  padding:8px 12px;box-shadow:0 4px 0 var(--ink);cursor:pointer;
}
.choix select:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ---------- courbe de trophées ---------- */
.carte-graph{
  margin:0;border:var(--stroke);border-radius:20px;box-shadow:var(--pop-lg);
  background:var(--ground2);padding:14px 16px 10px;
}
.graph{width:100%}
.graph svg{display:block;width:100%;height:auto}
.graph svg:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:12px}
.graph-vide{padding:26px 6px;text-align:center;color:var(--muted);font-size:13.5px}

/* Grille et axes : un filet plein, un cran au-dessus du fond. Jamais de
   pointillés, qui se lisent comme un seuil ou une projection. */
.graph .grille{stroke:rgba(242,236,255,.09);stroke-width:1}
.graph .tick{fill:var(--muted);font-size:11px;font-weight:900;font-variant-numeric:tabular-nums}
.graph .trace{stroke:var(--gold);stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.graph .aire{fill:rgba(255,194,27,.12);stroke:none}
.graph .bout{fill:var(--gold);stroke:var(--ground2);stroke-width:2}
.graph .bout-txt{fill:var(--text);font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums}
.graph .curseur{stroke:rgba(242,236,255,.34);stroke-width:1}
.graph .marqueur{fill:var(--gold);stroke:var(--ground2);stroke-width:2}
.graph .capteur{fill:transparent}
.graph .infobulle rect{fill:var(--ink);stroke:var(--line);stroke-width:2}
.graph .infobulle .val{fill:var(--text);font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.graph .infobulle .sub{fill:var(--muted);font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums}
.graph .infobulle .sub.gain{fill:var(--green)}
.graph .infobulle .sub.perte{fill:var(--hot)}

.valeurs{margin-top:10px;border-top:2px dashed var(--line);padding-top:8px}
.valeurs summary{
  cursor:pointer;color:var(--muted);font-size:12.5px;font-weight:900;
  padding:4px 2px;list-style-position:inside;
}
.valeurs summary:hover{color:var(--text)}
.valeurs summary:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:8px}
.valeurs table{min-width:320px}
.valeurs .scroll{max-height:280px;overflow:auto}

/* ---------- tableaux de statistiques ---------- */
table.stats{min-width:760px}
table.stats tbody tr:hover{background:rgba(180,92,255,.13)}
.nomstat{font-family:"Lilita One",sans-serif;font-size:15px;font-weight:400;letter-spacing:.3px}

.lienmode{
  font-family:"Lilita One",sans-serif;font-size:15px;font-weight:400;letter-spacing:.3px;
  background:none;border:0;padding:0;color:var(--text);cursor:pointer;
  border-bottom:2px solid transparent;
}
.lienmode:hover{border-bottom-color:var(--gold)}
.lienmode:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

.wr{display:flex;align-items:center;gap:9px;min-width:190px}
.wr .jauge{flex:none;display:block}
.wr .jauge .fond{fill:rgba(11,6,25,.55)}
.wr .jauge .remplissage{fill:var(--cyan)}
.wr .val{font-size:13px;font-weight:900;min-width:52px}
.wr.mince{opacity:.62}
.wr .mince-txt{font-size:11px;font-weight:800;color:var(--muted)}

/* Gain et perte : la couleur double le signe, elle ne le remplace pas. */
.gain{color:var(--green)}
.perte{color:var(--hot)}
.neutre{color:var(--muted)}
.graph .tick.jour{fill:var(--muted);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase}
.note a{color:var(--cyan)}
.note a:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* =========================================================================
   Écran Journal (journal.html)
   ========================================================================= */

/* Une pastille de catégorie de plus que l'écran de progression : le déblocage
   d'un brawler, qui n'a pas d'anneau puisqu'il ne se mesure pas en « il manque ». */
.chip.nb{background:#F2ECFF}

.journal{display:flex;flex-direction:column;gap:22px}

.jour-tete{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;
  margin:0 2px 9px;padding-bottom:7px;border-bottom:2px dashed var(--line);
}
.jour-tete h3{
  margin:0;font-family:"Lilita One",sans-serif;font-size:19px;font-weight:400;
  letter-spacing:.3px;text-transform:capitalize;
}
.jour-bilan{margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:800}

.fil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.evt{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:var(--stroke);border-radius:14px;
  padding:10px 14px;box-shadow:0 4px 0 var(--ink);
}
.evt .heure{color:var(--muted);font-size:12.5px;font-weight:900;flex:none;min-width:44px}
.evt .chip{flex:none;min-width:104px;text-align:center}
.evt-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;flex:1 1 auto}
.evt-txt strong{
  font-family:"Lilita One",sans-serif;font-size:16px;font-weight:400;letter-spacing:.3px;
}
.evt-txt span{font-size:12.5px;font-weight:800;color:var(--muted)}
.evt .cost{flex:none}
.evt .cost .doux{color:var(--muted);font-weight:800}

/* Un retrait — des gears supprimés du jeu, par exemple — n'est pas un gain
   négatif : il se lit d'un coup d'œil comme une ligne annulée, sans coût. */
.evt.retrait{background:var(--ground2);opacity:.72}
.evt.retrait .evt-txt strong{text-decoration:line-through}

/* Les deux ressources gardent la même couleur que sur l'écran de progression. */
td.gold{color:var(--gold);font-weight:900}
td.cyan{color:var(--cyan);font-weight:900}

@media (max-width:640px){
  .evt{flex-wrap:wrap;gap:8px}
  .evt-txt{flex-basis:100%;order:3}
  .evt .cost{margin-left:auto;align-items:flex-end}
}