/* ---------- encyclopédie : sobre, la curiosité vient des « ? » et des barres de progression */
.card.mystery { box-shadow:0 0 0 1.5px color-mix(in srgb, var(--t) 55%, var(--line)) }
.card.mystery .art { display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--t) 20%, var(--surface2)), var(--surface2) 72%) }
.q { font:700 52px/1 Georgia, serif; color:color-mix(in srgb, var(--t) 55%, var(--muted)); transition:transform .25s;
  user-select:none }
@media (hover:hover) { .card.mystery:hover .q { transform:scale(1.12) rotate(-4deg) } }
.card.mystery .kind { font-style:italic }
.bigcard.mystery .art { display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--t) 24%, var(--surface2)), var(--surface2) 75%) }
.bigcard.mystery .q { font-size:110px }
.bigcard.mystery .text { color:var(--muted); font-style:italic }
.prog { height:4px; border-radius:2px; background:var(--surface2); overflow:hidden }
.prog i { display:block; height:100%; background:var(--accent); border-radius:2px }
.prog.big { height:8px; border-radius:4px }
.done .prog i, .prog.done i { background:var(--good) }

.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px }

.ctile { display:flex; flex-direction:column; gap:7px; padding:12px; border-radius:12px; background:var(--surface);
  border:1px solid var(--line); color:inherit; text-decoration:none; min-height:92px; transition:border-color .15s }
.ctile:hover { border-color:var(--accent) }
.ctile .cn { font-weight:650; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden }
.ctile .cm { margin-top:auto; display:flex; justify-content:space-between; gap:6px; font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums }
.ctile .ok { color:var(--good); font-weight:700 }
.ctile .kd { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
.section-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:24px 0 10px }
.section-head h2 { margin:0 }
.section-head a { font-size:13.5px; text-decoration:none }

.gchip { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:13px; color:inherit; text-decoration:none; white-space:nowrap }
.gchip:hover { border-color:var(--accent) }
.gchip small { color:var(--muted); font-variant-numeric:tabular-nums }
.gchip .kd { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.wrapchips { display:flex; flex-wrap:wrap; gap:6px }
.eprog { display:grid; gap:6px; margin:10px 0 4px; max-width:560px }

/* ---------- accueil de l'encyclopédie : chaleureux, visuel, personnel */

.minirow { display:grid; grid-auto-flow:column; grid-auto-columns:118px; gap:10px; overflow-x:auto; padding:3px 3px 8px;
  scrollbar-width:none }
.minirow::-webkit-scrollbar { display:none }
.minirow .card .name { font-size:12px }
.minirow .card .kind { font-size:10.5px }

.dtiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px }
.dtile { position:relative; overflow:hidden; border-radius:14px; min-height:112px; padding:12px; display:flex; flex-direction:column;
  justify-content:flex-end; gap:2px; color:#fff; text-decoration:none; isolation:isolate;
  background:linear-gradient(145deg, color-mix(in srgb, var(--dc) 85%, #fff 5%), color-mix(in srgb, var(--dc) 55%, #000)) }
.dtile .bgimg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 25%;
  opacity:.55; transition:transform .4s }
.dtile::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--dc) 45%, rgba(0,0,0,.75)) 100%) }
.dtile:hover .bgimg { transform:scale(1.06) }
.dtile .ic { color:#fff; position:absolute; top:10px; left:12px; font-size:24px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) }
.dtile .dn { font-weight:750; font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,.4) }
.dtile .dc { font-size:12px; opacity:.9 }
.eprog .row { justify-content:space-between; font-size:13.5px }
/* ---------- accueil de l'encyclopédie, version épurée : un en-tête, trois sections */
.ehead { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:18px 28px; align-items:end; margin:6px 0 26px }
.ehead .hi { font-size:13.5px; color:var(--muted); margin-bottom:4px }
.ehead h1 { margin:0 0 14px; font-size:28px; letter-spacing:-.02em; line-height:1.15 }
.ehead h1 span { font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:6px }
.esearch { position:relative; max-width:620px }
.esearch .ico-svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none }
.esearch .field { padding-left:42px; min-height:48px; font-size:15px; border-radius:14px }
.emyst { display:grid; grid-template-columns:64px auto; gap:12px; align-items:center; padding:10px 14px 10px 10px; border-radius:14px;
  background:var(--surface); border:1px solid color-mix(in srgb, var(--legendary) 35%, var(--line)); cursor:pointer; max-width:300px }
.emyst .card { width:64px; font-size:0 } .emyst .card .body { display:none }
.emyst .card .art { aspect-ratio:3/4 } .emyst .card .q { font-size:26px }
.emyst .k { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--legendary) }
.emyst .t { font-weight:700; font-size:14.5px; line-height:1.25; margin:3px 0 2px }
.emyst .d { font-size:12px; color:var(--muted) }
.esec { margin-top:30px } .esec:first-of-type { margin-top:0 }
.rrows { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:10px }
.rrow { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:14px; align-items:center; padding:12px 14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line); cursor:pointer; transition:border-color .15s }
.rrow:hover { border-color:var(--accent) }
.rthumbs { display:flex; width:78px }
.rthumbs > * { width:36px; aspect-ratio:3/4; border-radius:6px; overflow:hidden; flex:none; background:var(--surface2);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3px color-mix(in srgb, var(--t) 70%, transparent) }
.rthumbs > * + * { margin-left:-15px }
.rthumbs img { width:100%; height:100%; object-fit:cover; object-position:center 20% }
.rthumbs .q { display:grid; place-items:center; font:700 13px Georgia, serif; color:color-mix(in srgb, var(--t) 60%, var(--muted)) }
.rrow .rn { font-weight:700; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rrow .rk { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:2px }
.rrow.r-follow .rk { color:var(--s-follow) } .rrow.r-week .rk { color:var(--s-week) }
.rrow.r-follow { border-color:color-mix(in srgb, var(--s-follow) 40%, var(--line)) }
.rrow.r-week { border-color:color-mix(in srgb, var(--s-week) 35%, var(--line)) }
.rrow .rm { font-size:12.5px; color:var(--muted); margin:3px 0 6px; font-variant-numeric:tabular-nums }
.rrow .btn { min-height:34px; padding:6px 12px; font-size:13px }
.ebrowse { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13.5px; margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
  color:var(--muted) }
.ebrowse a { color:var(--ink); text-decoration:none } .ebrowse a:hover { color:var(--accent) }
.ebrowse small { color:var(--muted); margin-left:4px }
.dtiles.big { grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) } .dtiles.big .dtile { min-height:128px }
@media (max-width:700px) {
  .ehead { grid-template-columns:1fr; gap:14px } .emyst { max-width:none } .ehead h1 { font-size:24px }
  .ehead h1 span { display:block; margin:4px 0 0 } .rrows { grid-template-columns:1fr }
}
/* fiche mystère : fabriquer la carte */
.craft { display:grid; gap:6px; padding:12px; border-radius:12px; background:var(--surface); border:1px solid var(--line); text-align:center }
.craft .muted { font-size:12.5px }

/* coups de cœur des joueurs : la carte et son nombre de cœurs */
.lovedc { position:relative; display:grid; gap:4px }
.lovedc .lk { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums }
.lovedc .lk .ico-svg { color:#e5484d; margin:0 }
.lovedc .lk .ico-svg path { fill:currentColor }