/* ===== Légendes — thème « musée de nuit » ===== */
:root {
  --bg: #120f0b; --bg2: #1b1711; --sf: #221d15; --sf2: #2b241a; --bd: #3a3022;
  --tx: #f3ead8; --mu: #a79a82; --gold: #e2bd62; --gold2: #f7e09a; --red: #c8442f; --ok: #6fd08c;
  --tabh: 64px; --safe-b: env(safe-area-inset-bottom, 0px);
  --f-title: "Cinzel", "Trajan Pro", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--tx); font: 15px/1.45 var(--f-body); overscroll-behavior: none; }
body { background: radial-gradient(ellipse at 50% -10%, #3a2a14 0%, transparent 55%), radial-gradient(ellipse at 50% 120%, #2a1a10 0%, transparent 50%), var(--bg); background-attachment: fixed; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { -webkit-user-drag: none; user-select: none; }
.hidden { display: none !important; }

/* ----- coque ----- */
#app { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }
header.top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); }
header.top h1 { font: 700 18px var(--f-title); letter-spacing: 3px; margin: 0; color: var(--gold); text-shadow: 0 0 12px #e2bd6255; flex: 1; }
.res { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: #0007; border: 1px solid var(--bd); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.res.bump { animation: bump .5s; }
@keyframes bump { 30% { transform: scale(1.25); background: #e2bd6244; } }
.iconbtn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #0005; border: 1px solid var(--bd); font-size: 16px; }
main { overflow-y: auto; overflow-x: hidden; padding: 6px 14px calc(var(--tabh) + 24px + var(--safe-b)); }
.screen { max-width: 980px; margin: 0 auto; animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }
nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabh) + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; background: #0d0b08ee; backdrop-filter: blur(10px); border-top: 1px solid var(--bd); z-index: 20; }
nav.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--mu); letter-spacing: .5px; position: relative; }
nav.tabs button .ti { font-size: 22px; filter: grayscale(.8) opacity(.7); transition: transform .2s; }
nav.tabs button.on { color: var(--gold); }
nav.tabs button.on .ti { filter: none; transform: translateY(-2px) scale(1.12); }
nav.tabs button .dot { position: absolute; top: 10px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.35); } }
@media (min-width: 900px) {
  #app { grid-template-columns: 96px 1fr; grid-template-rows: auto 1fr; }
  header.top { grid-column: 1 / 3; }
  nav.tabs { position: static; grid-row: 2; flex-direction: column; height: auto; justify-content: flex-start; gap: 6px; padding-top: 20px; border-top: 0; border-right: 1px solid var(--bd); background: transparent; }
  nav.tabs button { flex: 0 0 76px; }
  main { padding-bottom: 30px; }
}

h2.sec { font: 600 12px var(--f-title); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.info { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--mu); color: var(--mu); font: 600 12px/18px Georgia, serif; font-style: italic; display: inline-grid; place-items: center; }
.muted { color: var(--mu); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 14px; font-weight: 700; letter-spacing: .5px; background: var(--sf2); border: 1px solid var(--bd); }
.btn.gold { background: linear-gradient(180deg, #f7e09a, #c99a3b 55%, #a5761f); color: #2a1a05; border: 1px solid #ffeab0; box-shadow: 0 0 22px -4px #e2bd62aa, inset 0 1px 0 #fff8; text-shadow: 0 1px 0 #fff6; }
.btn.gold:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; filter: grayscale(.6); }
.btn.big { padding: 16px 30px; font-size: 17px; border-radius: 18px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; background: #0006; border: 1px solid var(--bd); }
.pill.on { border-color: var(--gold); color: var(--gold2); background: #e2bd621a; box-shadow: 0 0 12px -4px #e2bd62; }
.pill.off { opacity: .55; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.panel { background: linear-gradient(180deg, var(--sf), var(--bg2)); border: 1px solid var(--bd); border-radius: 18px; padding: 16px; }

/* ===================== CARTES ===================== */
.card { --w: 190px; width: var(--w); aspect-ratio: 5 / 7.2; position: relative; container-type: inline-size; border-radius: 6cqw; user-select: none; flex: none; }
.card.sm { --w: 112px; } .card.md { --w: 190px; } .card.lg { --w: min(76vw, 300px, 46vh); }
.c-frame { position: absolute; inset: 0; border-radius: 6cqw; padding: 4.2cqw;
  background: linear-gradient(135deg, #6d4e17, #f4d886 22%, #a57a2b 45%, #fbe7a6 68%, #7a5a1c 88%, #e9c66f);
  box-shadow: 0 0 0 1px #3d2a08, 0 8px 22px -8px #000, 0 0 calc(var(--glow, 0) * 1px) -2px var(--rc); }
.card.r-commun .c-frame { background: linear-gradient(135deg, #5b4a2c, #b19a6a 30%, #6d5a36 55%, #c2ad80 80%, #574628); }
.card.r-rare { --glow: 14; } .card.r-epique { --glow: 22; } .card.r-legendaire { --glow: 30; } .card.r-mythique { --glow: 40; }
.card.r-mythique .c-frame { background: linear-gradient(135deg, #6d1735, #f6a3b8 20%, #f4d886 40%, #a57a2b 55%, #ffd1e0 75%, #7a1c3a); }
.c-support { position: relative; height: 100%; border-radius: 3.5cqw; overflow: hidden; display: flex; flex-direction: column; box-shadow: inset 0 0 0 0.6cqw #0005; }
.c-head { height: 9cqw; flex: none; display: flex; align-items: center; justify-content: center; gap: 2cqw; font-size: 4.4cqw; }
.c-portrait { position: relative; flex: 1; margin: 0 5cqw; overflow: hidden; border-radius: 2cqw; background: #0003; }
.c-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; font-size: 34cqw; opacity: .85; }
.c-name { --k: max(.6, var(--fit, 1)); flex: none; text-align: center; font: 700 calc(8.4cqw * var(--k))/1.05 var(--f-title); padding: 4cqw 4cqw 2cqw; white-space: nowrap; overflow: hidden; }
.c-meta { flex: none; display: flex; justify-content: center; align-items: center; gap: 2.5cqw; font-size: 5.2cqw; padding-bottom: 3.2cqw; font-weight: 600; }
.c-rar { color: color-mix(in srgb, var(--rc) 70%, #000); text-transform: uppercase; letter-spacing: .3cqw; font-size: 4.6cqw; }
.c-lvl { opacity: .75; }
.c-stars { color: #ffd257; font-size: 4.6cqw; text-shadow: 0 0 1.2cqw #000, 0 0 .6cqw #000; letter-spacing: -.4cqw; white-space: nowrap; }
.c-shine { position: absolute; inset: 0; border-radius: 6cqw; pointer-events: none; mix-blend-mode: overlay; opacity: 0; }
.card.r-epique .c-shine, .card.r-legendaire .c-shine { opacity: .8; background: linear-gradient(115deg, transparent 35%, #fff9 47%, transparent 58%) -150% 0 / 250% 100% no-repeat; animation: gloss 4.5s infinite; }
.card.r-mythique .c-shine { opacity: .22; background: conic-gradient(from var(--a, 0deg), #ff4f7b, #ffd257, #6fd08c, #4c9bff, #b46cff, #ff4f7b); animation: holo 4s linear infinite; mix-blend-mode: soft-light; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes holo { to { --a: 360deg; } }
@keyframes gloss { 0%, 55% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
.card.sm .c-head { height: 7cqw; } .card.sm .c-meta .c-rar { display: none; }
/* petites cartes : le titre du journal et le cachet chinois ne doivent pas dépasser du haut */
.card.sm.sup-journal .c-head { height: 11cqw; } .card.sm.sup-journal .c-head b { font-size: 5.6cqw; } .card.sm.sup-journal .c-head small { font-size: 2.8cqw; }
.card.sup-bambou .hanzi { width: 6cqw; height: 6cqw; font-size: 2.6cqw; }

/* --- Roche (Antiquité) --- */
.sup-roche .c-support { background:
  radial-gradient(circle at 20% 30%, #ffffff14 0 8%, transparent 9%), radial-gradient(circle at 70% 80%, #0000001f 0 10%, transparent 11%),
  radial-gradient(circle at 80% 20%, #00000018 0 6%, transparent 7%), linear-gradient(160deg, #9d978e, #6f6a63 60%, #57524c); color: #26231f; }
.sup-roche .c-portrait { box-shadow: inset 0 0 3cqw 1cqw #0009, 0 0.5cqw 0 #ffffff30; border-radius: 40% 40% 3cqw 3cqw / 22% 22% 3cqw 3cqw; }
.sup-roche .c-portrait img { filter: grayscale(1) sepia(.25) contrast(1.25) brightness(1.05); mix-blend-mode: luminosity; }
.sup-roche .c-name { color: #2b2620; text-shadow: 0 0.4cqw 0 #ffffff40, 0 -0.3cqw 0 #0005; letter-spacing: .3cqw; text-transform: uppercase; font-size: calc(7.4cqw * var(--k)); }
.sup-roche .glyph { letter-spacing: 2cqw; opacity: .55; color: #2b2620; text-shadow: 0 0.3cqw 0 #ffffff30; }
/* --- Parchemin (Moyen Âge) --- */
.sup-parchemin .c-support { background: radial-gradient(ellipse at 50% 45%, #f6e7bf 35%, #dcc08a 75%, #a7804a 100%); color: #3a2410; border-radius: 1cqw; }
.sup-parchemin .c-support::before, .sup-parchemin .c-support::after { content: ""; position: absolute; left: -1cqw; right: -1cqw; height: 4cqw; background: linear-gradient(180deg, #8a6234, #e2c28a 45%, #6b4520); border-radius: 3cqw; z-index: 2; box-shadow: 0 1cqw 2cqw #0006; }
.sup-parchemin .c-support::before { top: 0; } .sup-parchemin .c-support::after { bottom: 0; }
.sup-parchemin .c-head { margin-top: 3cqw; }
.sup-parchemin .seal { width: 8cqw; height: 8cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e0573f, #8f1d10 70%); box-shadow: 0 0.5cqw 1cqw #0006; }
.sup-parchemin .c-portrait img { filter: sepia(.65) contrast(1.05) saturate(.9); }
.sup-parchemin .c-portrait { border: 0.8cqw solid #6b4520; }
.sup-parchemin .c-name { font-family: "IM Fell English", Georgia, serif; font-size: calc(9cqw * var(--k)); color: #4a2a0e; }
.sup-parchemin .c-meta { padding-bottom: 5.5cqw; }
/* --- Feuille (Renaissance) --- */
.sup-feuille .c-support { background: repeating-linear-gradient(0deg, transparent 0 6cqw, #6b4a2a14 6cqw 6.3cqw), linear-gradient(170deg, #f7efdc, #e9dcbc); color: #4a2e16; }
.sup-feuille .c-portrait { border: 0.6cqw solid #5b3a1e; transform: rotate(-1.2deg); box-shadow: 1cqw 1cqw 0 #5b3a1e22; }
.sup-feuille .c-portrait img { filter: sepia(1) contrast(1.35) brightness(1.08) saturate(.7); mix-blend-mode: multiply; }
.sup-feuille .c-name { font-family: "Caveat", "Segoe Script", cursive; font-size: calc(11cqw * var(--k)); font-weight: 700; color: #3d230c; }
.sup-feuille .folio { font-family: "Caveat", cursive; opacity: .6; font-size: 6cqw; }
/* --- Livre (Temps modernes) --- */
.sup-livre .c-support { background: linear-gradient(90deg, #f3e8cf 0, #e7d8b4 46%, #b89b6a 50%, #e7d8b4 54%, #f3e8cf 100%); color: #3b2412; border: 2.2cqw solid #5a2e1a; box-shadow: inset 0 0 0 0.5cqw #c9a14b; }
.sup-livre .c-portrait { border: 0.5cqw double #7a4a22; }
.sup-livre .c-portrait img { filter: sepia(.3) contrast(1.05); }
.sup-livre .c-name { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: calc(8.8cqw * var(--k)); }
.sup-livre .chap { font-family: "Playfair Display", Georgia, serif; font-size: 4cqw; letter-spacing: .4cqw; opacity: .6; font-style: italic; }
/* --- Journal (XIXe) --- */
.sup-journal .c-support { background: linear-gradient(180deg, #ece6d6, #ddd5c0); color: #111; }
.sup-journal .c-head { flex-direction: column; gap: 0; height: 12cqw; border-bottom: 0.6cqw double #111; margin: 0 4cqw; }
.sup-journal .c-head b { font: 900 6.4cqw/1 "Old Standard TT", "Times New Roman", serif; letter-spacing: .3cqw; }
.sup-journal .c-head small { font-size: 3.2cqw; letter-spacing: .3cqw; }
.sup-journal .c-portrait { margin-top: 2.5cqw; border-radius: 0; border: 0.4cqw solid #111; }
.sup-journal .c-portrait img { filter: grayscale(1) contrast(1.5) brightness(1.1); }
.sup-journal .halftone { position: absolute; inset: 0; background: radial-gradient(circle, #0003 28%, transparent 30%) 0 0 / 1.6cqw 1.6cqw; mix-blend-mode: multiply; }
.sup-journal .c-name { font: 900 calc(8.6cqw * var(--k))/1 "Old Standard TT", "Times New Roman", serif; text-transform: uppercase; }
.sup-journal .c-meta { border-top: 0.3cqw solid #111; margin: 0 4cqw; padding-top: 1.5cqw; }
/* --- Téléphone (XXe) --- */
.sup-telephone .c-support { background: linear-gradient(160deg, #2b3cff, #b13cff 50%, #ff4f7b); color: #fff; border: 2.6cqw solid #0b0b0f; border-radius: 6cqw; }
.sup-telephone .c-head { font: 600 4cqw var(--f-body); justify-content: space-between; padding: 0 4cqw; }
.sup-telephone .notch { width: 18cqw; height: 4.4cqw; background: #0b0b0f; border-radius: 3cqw; }
.sup-telephone .c-portrait { border-radius: 5cqw; box-shadow: 0 2cqw 5cqw #0006; }
.sup-telephone .c-portrait img { filter: saturate(1.25) contrast(1.05); }
.sup-telephone .c-name { margin: 2.5cqw 4cqw 0; padding: 2cqw; background: #ffffff2a; backdrop-filter: blur(4px); border-radius: 3cqw; font: 700 calc(7.4cqw * var(--k)) var(--f-body); }
.sup-telephone .c-rar { color: #fff; opacity: .9; }

/* --- Papyrus (Égypte, Mésopotamie) --- */
.sup-papyrus .c-support { background: repeating-linear-gradient(0deg, transparent 0 1.4cqw, #7a5a2a1c 1.4cqw 1.8cqw), repeating-linear-gradient(90deg, #d9bd80 0 1cqw, #e6cd93 1cqw 2.4cqw, #cfb070 2.4cqw 2.8cqw); color: #4a3010; }
.sup-papyrus .c-portrait { border: 0.6cqw solid #8a6430; border-radius: 1cqw; box-shadow: inset 0 0 3cqw #5a3a1088; }
.sup-papyrus .c-portrait img { filter: sepia(.5) saturate(.85) contrast(1.05); }
.sup-papyrus .c-name { font-family: "Cinzel", serif; color: #3d2508; letter-spacing: .3cqw; font-size: calc(7.6cqw * var(--k)); }
.sup-papyrus .glyph { letter-spacing: 1.6cqw; color: #1f5f8b; opacity: .75; font-size: 5cqw; }
/* --- Bambou (Chine antique) --- */
.sup-bambou .c-support { background: radial-gradient(ellipse at 50% 120%, #0003, transparent 60%), repeating-linear-gradient(90deg, #d6c06c 0 0.6cqw, #c8b25e 0.6cqw 8.6cqw, #7d6a2c 8.6cqw 9.4cqw); color: #2b2410; }
.sup-bambou .c-support::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 22cqw, #6b5a2266 22cqw 23cqw); pointer-events: none; }
.sup-bambou .c-portrait { border: 0.5cqw solid #3d3210; }
.sup-bambou .c-portrait img { filter: sepia(.35) contrast(1.1); }
.sup-bambou .c-name { font-family: "IM Fell English", serif; color: #2b2008; font-size: calc(8.6cqw * var(--k)); }
.sup-bambou .hanzi { width: 9cqw; height: 9cqw; display: grid; place-items: center; background: #b8261c; color: #fbe7c8; border-radius: 1.4cqw; font-size: 3.6cqw; line-height: 1; writing-mode: vertical-rl; }
/* --- Pierre runique (Vikings) --- */
.sup-runes .c-support { background: radial-gradient(ellipse at 40% 30%, #5d6c7a, #36414c 55%, #1e262e); color: #dfeeff; box-shadow: inset 0 0 0 1cqw #2a333c, inset 0 0 0 1.5cqw #7fd3ff33; }
.sup-runes .c-portrait { border-radius: 3cqw 3cqw 40% 40% / 3cqw 3cqw 18% 18%; box-shadow: inset 0 0 3cqw #000a; }
.sup-runes .c-portrait img { filter: grayscale(.6) sepia(.2) contrast(1.2); }
.sup-runes .c-name { font-family: "Cinzel", serif; text-transform: uppercase; color: #cfe8ff; text-shadow: 0 0 2cqw #7fd3ff88; font-size: calc(7.4cqw * var(--k)); }
.sup-runes .rune { letter-spacing: 1.6cqw; color: #7fd3ff; text-shadow: 0 0 2cqw #7fd3ff; font-size: 5cqw; }
.sup-runes .c-rar { color: #9fd8ff; }
/* --- Affiche art déco (1900-1945) --- */
.sup-affiche .c-support { background: conic-gradient(from 180deg at 50% 0, #e2bd6233 0 4deg, transparent 4deg 16deg) , linear-gradient(180deg, #1b2a3a, #0b1219); color: #f3e3b5; box-shadow: inset 0 0 0 1cqw #0b1219, inset 0 0 0 1.4cqw #e2bd62; }
.sup-affiche .c-portrait { border: 0.6cqw solid #e2bd62; border-radius: 50% 50% 1cqw 1cqw / 20% 20% 1cqw 1cqw; }
.sup-affiche .c-portrait img { filter: sepia(.35) contrast(1.15) saturate(.8); }
.sup-affiche .c-name { margin: 2cqw 5cqw 0; background: #e2bd62; color: #0b1219; font: 900 calc(7cqw * var(--k))/1.1 "Cinzel", serif; letter-spacing: .5cqw; text-transform: uppercase; }
.sup-affiche .deco { font: 700 3.6cqw "Cinzel", serif; letter-spacing: .6cqw; color: #e2bd62; }
.sup-affiche .c-rar { color: #e2bd62; }
/* --- Télévision (après-guerre) --- */
.sup-tele .c-support { background: linear-gradient(180deg, #7a5230, #4a2f18); color: #f3e3c8; border-radius: 5cqw; box-shadow: inset 0 0 0 1cqw #2e1b0c; }
.sup-tele .c-head { justify-content: space-between; padding: 0 6cqw; font: 700 3.6cqw var(--f-body); }
.sup-tele .live { color: #ff5a4a; animation: pulse 1.6s infinite; }
.sup-tele .c-portrait { border: 1.2cqw solid #1a1a1a; border-radius: 12% / 16%; background: #111; box-shadow: inset 0 0 4cqw #000; }
.sup-tele .c-portrait img { filter: saturate(.55) contrast(1.15) brightness(1.05); }
.sup-tele .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, #0003 0 0.5cqw, transparent 0.5cqw 1.2cqw), radial-gradient(ellipse, transparent 55%, #0008); pointer-events: none; }
.sup-tele .c-name { font: 700 calc(7.6cqw * var(--k)) var(--f-body); letter-spacing: .2cqw; }
.sup-tele .c-rar { color: #ffd9a0; }
/* --- matières : une vraie texture par support (tools/build_textures.py) --- */
.sup-roche .c-support { background: url("../data/textures/roche.jpg") center / cover; }
.sup-papyrus .c-support { background: url("../data/textures/papyrus.jpg") center / cover; }
.sup-bambou .c-support { background: url("../data/textures/bambou.jpg") center / cover; }
.sup-bambou .c-support::after { display: none; }
.sup-runes .c-support { background: url("../data/textures/runes.jpg") center / cover; }
.sup-parchemin .c-support { background: url("../data/textures/parchemin.jpg") center / cover; }
.sup-feuille .c-support { background: url("../data/textures/feuille.jpg") center / cover; }
.sup-livre .c-support { background: url("../data/textures/livre.jpg") center / cover; border: 0; box-shadow: none; color: #f3e3c0; }
.sup-livre .c-name { color: #f4d886; text-shadow: 0 0.4cqw 0 #0008; }
.sup-livre .chap { color: #e2bd62; opacity: .85; }
.sup-livre .c-portrait { border: 0.6cqw solid #c9a14b; }
.sup-journal .c-support { background: url("../data/textures/journal.jpg") center / cover; }
.sup-affiche .c-support { background: url("../data/textures/affiche.jpg") center / cover; }
.sup-tele .c-support { background: url("../data/textures/tele.jpg") center / cover; }
.sup-telephone .c-support { background: url("../data/textures/telephone.jpg") center / cover; }
/* matières dont le cadre est dessiné dans la texture (filets et losanges du cuir, filets art déco, clous des runes,
   liens rouges du bambou) : posées en border-image. Le cadre garde la même épaisseur quelle que soit la hauteur
   de la carte, et cette épaisseur réserve la place : le contenu ne peut plus passer dessus. */
.sup-livre .c-support { background: none; border-style: solid; border-width: 7.5cqw; border-image: url("../data/textures/livre.jpg") 30 fill stretch; }
.sup-affiche .c-support { background: none; border-style: solid; border-width: 5.5cqw; border-image: url("../data/textures/affiche.jpg") 22 fill stretch; box-shadow: none; }
.sup-runes .c-support { background: none; border-style: solid; border-width: 8cqw 0; border-image: url("../data/textures/runes.jpg") 32 0 fill stretch; box-shadow: none; }
.sup-bambou .c-support { background: none; border-style: solid; border-width: 5cqw 0 9.5cqw; border-image: url("../data/textures/bambou.jpg") 20 0 38 0 fill stretch; }
.sup-livre .c-portrait, .sup-affiche .c-portrait { margin-left: 1.5cqw; margin-right: 1.5cqw; }
.sup-livre .c-head, .sup-affiche .c-head, .sup-bambou .c-head { height: 6.5cqw; }
.sup-runes .c-head { height: 7.6cqw; line-height: 1; }
.sup-feuille .c-portrait { margin-top: 1.5cqw; margin-bottom: 1cqw; } /* portrait penché : ne touche ni l'en-tête ni le nom */
.sup-livre .c-meta, .sup-affiche .c-meta, .sup-runes .c-meta, .sup-bambou .c-meta { padding-bottom: 1.2cqw; }
.sup-affiche .c-name { margin-left: 1.5cqw; margin-right: 1.5cqw; }
.card.big.sup-livre .bc-top, .card.big.sup-affiche .bc-top { padding: 0 3cqw; }
.card.big.sup-livre .bc-tags, .card.big.sup-affiche .bc-tags { padding: 0 3cqw; }
.card.big.sup-livre .bc-box, .card.big.sup-affiche .bc-box { margin-left: 3cqw; margin-right: 3cqw; }
.card.big.sup-livre .c-support, .card.big.sup-affiche .c-support { padding-top: 1.5cqw; }
.card.big.sup-livre .c-support, .card.big.sup-affiche .c-support, .card.big.sup-runes .c-support, .card.big.sup-bambou .c-support { padding-bottom: 1cqw; }

/* --- couleurs de texte par matière : encre sombre sur les supports clairs, encre claire sur les sombres ---
   La rareté garde sa teinte mais assombrie (fond clair) ou éclaircie (fond sombre) pour rester lisible. */
/* rareté : pastille sombre, la couleur de rareté reste lisible sur toutes les matières (contraste vérifié ≥ 4,5:1) */
.card.card .c-rar { color: color-mix(in srgb, var(--rc) 70%, #fff); background: #000000b8; padding: .5cqw 1.8cqw; border-radius: 99px; text-shadow: none; }
.sup-roche .c-support { color: #23201b; }
.sup-papyrus .c-support { color: #3a2408; }
.sup-bambou .c-support { color: #2a2008; }
.sup-parchemin .c-support { color: #42260c; }
.sup-feuille .c-support { color: #3a220c; }
.sup-journal .c-support { color: #121212; }
.sup-runes .c-support { color: #efe3c8; }
.sup-runes .c-name { color: #f4e7c9; text-shadow: 0 0.4cqw 0 #000c, 0 0 2cqw #0008; }
.sup-runes .rune { color: #ffcf7a; text-shadow: 0 0 2cqw #ff9f3a; }
.sup-livre .c-support { color: #f3e3c0; }
.sup-affiche .c-support { color: #f3e3b5; }
.sup-tele .c-support { color: #f6e8cf; }
.sup-tele .c-name { text-shadow: 0 0.4cqw 0 #000b; }
.sup-telephone .c-support { color: #fff; }
.sup-roche .c-name, .sup-bambou .c-name, .sup-papyrus .c-name { text-shadow: 0 0 1.6cqw #ffffff8c, 0 0.3cqw 0 #ffffff66; }
.card.big .bc-pill.rar { color: color-mix(in srgb, var(--rc) 70%, #fff); background: #000000b8; }

/* --- carte en grand (fiche détaillée) : même cadre et même matière, mise en page réarrangée --- */
.card.big { --w: min(100%, 560px); width: var(--w); aspect-ratio: auto; margin: 0 auto 6px; border-radius: 4cqw; }
.card.big .c-frame { position: relative; padding: 2.4cqw; border-radius: 4cqw; --glow: 0; box-shadow: 0 0 0 1px #3d2a08, 0 14px 40px -12px #000, 0 0 28px -6px var(--rc); }
.card.big .c-shine { border-radius: 4cqw; opacity: .25 !important; }
.card.big.r-mythique .c-shine { opacity: .08 !important; }
.bc-stats.two b { font: 800 3cqw/1.25 var(--f-body); }
.card.big .c-support { height: auto; border-radius: 2.4cqw; padding-bottom: 3cqw; gap: 2.6cqw; }
/* en-tête de la grande fiche : sa hauteur suit son contenu (le titre du journal était coupé en haut) */
/* (marges haut/bas seulement : les marges latérales propres à chaque matière, ex. « ● EN DIRECT » de la télé, sont gardées) */
.card.big .c-head { height: auto; min-height: 7cqw; padding-top: 1.2cqw; padding-bottom: 1.2cqw; font-size: 3cqw; box-sizing: border-box; }
.sup-journal.big .c-head { padding-top: 1.6cqw; padding-bottom: 1cqw; }
.sup-journal.big .c-head b { font-size: 5cqw; }
.sup-journal.big .c-head small { font-size: 2.4cqw; }
.sup-parchemin.big .c-support::before, .sup-parchemin.big .c-support::after { height: 2.4cqw; }
.sup-parchemin.big .c-head { margin-top: 2.4cqw; }
.bc-top { display: flex; gap: 3.4cqw; padding: 0 3.4cqw; align-items: stretch; }
.card.big .bc-portrait { flex: none; width: 42%; aspect-ratio: 3 / 4; margin: 0; }
.bc-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.8cqw; justify-content: center; }
.card.big .bc-name { white-space: normal; text-align: left; padding: 0; margin: 0; font-size: calc(6.4cqw * var(--fit, 1)); line-height: 1.08; overflow: visible; }
.sup-affiche.big .bc-name { padding: 1cqw 2cqw; }
.sup-telephone.big .bc-name { padding: 1.4cqw 2cqw; }
.bc-pills, .bc-tags { display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.bc-tags { padding: 0 3.4cqw; }
.bc-box .bc-tags { padding: 0; }
.bc-pill { font: 600 2.6cqw var(--f-body); padding: .7cqw 2cqw; border-radius: 99px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); background: color-mix(in srgb, currentColor 8%, transparent); white-space: nowrap; }
.bc-pill.rar { color: var(--rc); border-color: var(--rc); background: #0006; font-weight: 800; text-transform: uppercase; letter-spacing: .3cqw; }
.bc-pill.on { border-color: #e2bd62; box-shadow: inset 0 0 0 1px #e2bd6266; }
.bc-lvl { font: 600 3cqw var(--f-body); opacity: .9; }
.bc-lvl b { font-size: 3.6cqw; }
.bc-stars { color: #ffd257; text-shadow: 0 0 1cqw #000; }
.bc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.bc-stats.two { grid-template-columns: 1fr 1fr; }
.bc-stats div { text-align: center; padding: 1.2cqw .4cqw; border-radius: 1.6cqw; background: #0000004d; color: #f7e9c4; border: 1px solid #e2bd6244; }
.bc-stats b { display: block; font: 700 3.8cqw var(--f-title); color: #f7e09a; }
.bc-stats small { font-size: 2.3cqw; opacity: .85; }
.bc-box { margin: 0 3.4cqw; padding: 2.2cqw 2.8cqw; border-radius: 2cqw; font-size: 3.1cqw; line-height: 1.45; background: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.bc-quote { font-style: italic; }
.bc-h { font: 700 2.4cqw var(--f-body); text-transform: uppercase; letter-spacing: .4cqw; opacity: .7; margin-bottom: .8cqw; font-style: normal; }
.bc-foot { text-align: center; font-size: 2.3cqw; opacity: .55; padding: 0 3cqw; }
.card.big .feat-icon { font-size: 20cqw; }
.card.big .noimg { font-size: 18cqw; }
@container (max-width: 400px) {
  .bc-top { flex-direction: column; }
  .card.big .bc-portrait { width: 100%; aspect-ratio: 4 / 3; }
  .card.big .bc-name { font-size: calc(8.4cqw * var(--fit, 1)); text-align: center; }
  .bc-pills { justify-content: center; } .bc-lvl { text-align: center; font-size: 4cqw; }
  .bc-pill { font-size: 3.6cqw; } .bc-box { font-size: 4.2cqw; } .bc-h { font-size: 3.2cqw; }
  .bc-stats b { font-size: 5.4cqw; } .bc-stats small { font-size: 3.2cqw; } .bc-foot { font-size: 3.2cqw; }
  .bc-stats.two b { font-size: 4cqw; }
  .card.big .c-head { min-height: 9cqw; font-size: 4cqw; }
  .sup-journal.big .c-head b { font-size: 7cqw; } .sup-journal.big .c-head small { font-size: 3.2cqw; }
}

/* --- dos et inconnues --- */
.card.back .c-support { background: radial-gradient(circle at 50% 40%, #7a1e1e, #3a0b0b 70%); align-items: center; justify-content: center; }
.card.back .emblem { width: 46cqw; height: 46cqw; border-radius: 50%; display: grid; place-items: center; font: 700 26cqw var(--f-title); color: var(--gold2); border: 1.5cqw double var(--gold); box-shadow: 0 0 6cqw #e2bd6266, inset 0 0 6cqw #e2bd6244; text-shadow: 0 0 4cqw #e2bd62; }
.card.back .c-support::before { content: ""; position: absolute; inset: 5cqw; border: 0.6cqw solid #e2bd6266; border-radius: 3cqw; }
.card.unknown { filter: grayscale(1) brightness(.45); }
.card.unknown .c-frame { background: #3a3326; }

/* --- Hauts faits --- */
.card.feat .feat-art img { filter: blur(1.5px) brightness(.55) sepia(.5) !important; transform: scale(1.1); }
.feat-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34cqw; filter: drop-shadow(0 0 4cqw var(--rc)); }
.card.feat .feat-name { white-space: normal; font-size: calc(7cqw * var(--fit, 1)); line-height: 1.1; height: 17cqw; display: flex; align-items: center; justify-content: center; }
.feat-owner { font-size: calc(4.2cqw * var(--fit, 1)); font-weight: 700; white-space: nowrap; overflow: hidden; max-width: 50cqw; min-width: 0; }
/* textes ajustés par autoFit (util.js) : police réduite, puis retour à la ligne s'il le faut, jamais coupés */
.c-name.fit-wrap, .feat-owner.fit-wrap { white-space: normal; overflow-wrap: break-word; line-height: 1.05; }
.feat-count { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #2a1a05; font-weight: 800; font-size: 12px; padding: 2px 7px; border-radius: 8px; z-index: 3; }
/* étiquette « Haut fait » : posée dans le haut du portrait, plus sur l'en-tête de la matière */
.feat-tag { position: absolute; top: 2cqw; left: 50%; translate: -50% 0; font: 700 3.4cqw var(--f-title); letter-spacing: .6cqw; text-transform: uppercase; white-space: nowrap; background: #000b; color: var(--gold2); padding: .6cqw 2.2cqw; border-radius: 2cqw; z-index: 2; }
.card.sm .feat-tag { font-size: 3cqw; letter-spacing: .3cqw; }
.card.big .feat-tag { font-size: 2.4cqw; top: 1.6cqw; }
.featrow { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.featrow .card { --w: 64px; }
.featrow .grow { flex: 1; min-width: 0; }
.featrow b { display: block; }
.slotempty { width: 64px; aspect-ratio: 5/7.2; border: 2px dashed var(--bd); border-radius: 6px; display: grid; place-items: center; color: var(--mu); }
.slotlocked { opacity: .5; }

/* ===================== PIOCHE ===================== */
.draw-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 10px; }
.draw-stage { position: relative; display: grid; place-items: center; padding: 18px; }
.draw-stage .card.back { animation: float 3.5s ease-in-out infinite; cursor: pointer; }
.draw-stage .card.back.ready { animation: float 3.5s ease-in-out infinite, glowp 1.6s infinite; }
@keyframes float { 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes glowp { 50% { filter: drop-shadow(0 0 22px #e2bd62); } }
.charges { display: flex; gap: 8px; align-items: center; }
.charge { width: 16px; height: 22px; border-radius: 4px; border: 1px solid var(--gold); background: #0006; }
.charge.full { background: linear-gradient(180deg, var(--gold2), #b7862c); box-shadow: 0 0 10px #e2bd62; }
.timer { font-variant-numeric: tabular-nums; color: var(--mu); font-size: 13px; }

/* Révélation plein écran */
.reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #2a1d0c, #000 75%); overflow: hidden; }
.reveal .rays { position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 45%; translate: -50% -50%; opacity: 0; background: repeating-conic-gradient(from 0deg, var(--rc) 0 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 0, transparent 45%); animation: spin 14s linear infinite; transition: opacity .6s; }
.reveal.lit .rays { opacity: .35; }
.reveal.r-mythique .rays { background: repeating-conic-gradient(#ff4f7b 0 5deg, transparent 5deg 12deg, #ffd257 12deg 17deg, transparent 17deg 24deg, #4c9bff 24deg 29deg, transparent 29deg 36deg); }
@keyframes spin { to { rotate: 360deg; } }
.reveal .holder { position: relative; z-index: 2; perspective: 1200px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.reveal .tag { font: 700 14px var(--f-title); letter-spacing: 5px; text-transform: uppercase; color: var(--rc); text-shadow: 0 0 18px var(--rc); opacity: 0; transform: scale(.6); transition: .4s; }
.reveal.lit .tag { opacity: 1; transform: none; }
.reveal .sub { min-height: 22px; color: var(--mu); text-align: center; }
.reveal .new { color: var(--ok); font-weight: 800; letter-spacing: 2px; }
.flash { position: fixed; inset: 0; background: #fff; z-index: 70; pointer-events: none; animation: flash .5s forwards; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translate(-6px, 3px) rotate(-1deg); } 40% { transform: translate(5px, -4px) rotate(1deg); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -2px); } }
.confetti { position: fixed; z-index: 65; width: 9px; height: 14px; top: 45%; left: 50%; pointer-events: none; border-radius: 2px; }
.tease { animation: tease .14s infinite; }
@keyframes tease { 50% { transform: scale(1.03) rotate(1deg); } }

/* animations de révélation par support */
.rv-roche { animation: rv-roche 1.1s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes rv-roche { 0% { transform: translateY(-120vh) rotate(-8deg); } 55% { transform: translateY(0) rotate(0); } 62% { transform: translateY(0) scaleY(.92) scaleX(1.05); } 75% { transform: scale(1); } }
.cracks { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.shard { position: fixed; z-index: 66; width: 18px; height: 14px; background: #7a746c; clip-path: polygon(0 0, 100% 30%, 60% 100%, 10% 70%); pointer-events: none; }
.rv-parchemin { animation: rv-parch 1.1s cubic-bezier(.3, .9, .3, 1) both; transform-origin: 50% 0; }
@keyframes rv-parch { 0% { clip-path: inset(0 0 100% 0); transform: rotateX(30deg); } 100% { clip-path: inset(0 0 0 0); transform: none; } }
.rv-feuille .c-portrait img { animation: rv-ink 1.6s ease-out both; }
.rv-feuille { animation: rv-paper 1s ease-out both; }
@keyframes rv-paper { 0% { transform: translate(-60vw, -30vh) rotate(-60deg) scale(.6); opacity: 0; } 70% { transform: rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes rv-ink { 0% { clip-path: polygon(0 0, 0 0, 0 0); filter: sepia(1) contrast(3) brightness(1.5); } 50% { clip-path: polygon(0 0, 140% 0, 0 140%); } 100% { clip-path: polygon(0 0, 200% 0, 0 200%); } }
.rv-livre { animation: rv-book 1.2s cubic-bezier(.3, .9, .3, 1) both; transform-origin: 0 50%; }
@keyframes rv-book { 0% { transform: rotateY(-100deg) scale(.7); filter: brightness(.3); } 100% { transform: none; filter: none; } }
.rv-journal { animation: rv-news 1.3s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rv-news { 0% { transform: scale(.05) rotate(-1080deg); } 85% { transform: scale(1.06) rotate(4deg); } 100% { transform: none; } }
.rv-telephone { animation: rv-phone 1.3s ease-out both; }
.rv-telephone .c-support { animation: rv-screen 1.3s ease-out both; }
@keyframes rv-phone { 0% { transform: translateY(40vh) scale(.6); } 40% { transform: translateY(0) scale(1); } 45%, 55%, 65% { transform: translateX(-5px) rotate(-2deg); } 50%, 60% { transform: translateX(5px) rotate(2deg); } 70% { transform: none; } }
/* --- Packs --- */
.pack { container-type: inline-size; width: min(58vw, 240px, 38vh); aspect-ratio: 5 / 7.6; position: relative; border-radius: 5cqw; cursor: pointer; user-select: none; }
.draw-stage .pack { animation: float 3.5s ease-in-out infinite; }
.draw-stage .pack.ready { animation: float 3.5s ease-in-out infinite, glowp 1.6s infinite; }
.pack .c-support { height: 100%; border-radius: 5cqw; align-items: center; justify-content: center; gap: 3cqw; box-shadow: inset 0 0 0 1.2cqw #0004, 0 24px 40px -14px #000; }
.pack.std .c-support { background: linear-gradient(135deg, #6d4e17, #f4d886 22%, #a57a2b 45%, #fbe7a6 68%, #7a5a1c 88%, #e9c66f); color: #3d2a08; }
.pack.std .c-support::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #fff8 47%, transparent 58%) -150% 0 / 250% 100% no-repeat; animation: gloss 3.5s infinite; mix-blend-mode: overlay; }
.pack.std .emblem { width: 40cqw; height: 40cqw; border-radius: 50%; display: grid; place-items: center; font: 700 22cqw var(--f-title); background: radial-gradient(circle, #7a1e1e, #3a0b0b); color: var(--gold2); border: 1.5cqw double #3d2a08; box-shadow: 0 0 6cqw #0006; }
.pack-title { font: 900 calc(9cqw)/1.05 var(--f-title); text-align: center; text-transform: uppercase; letter-spacing: .5cqw; padding: 0 5cqw; }
.pack-sub { font: 600 4.6cqw var(--f-body); opacity: .85; }
.pack.special .c-head { position: absolute; top: 3cqw; left: 0; right: 0; }
.pack-art { display: flex; justify-content: center; align-items: flex-end; height: 46cqw; margin-top: 8cqw; }
.pack-art img { width: 30cqw; height: 42cqw; object-fit: cover; object-position: 50% 18%; border-radius: 2cqw; border: 0.8cqw solid #fff9; box-shadow: 0 2cqw 4cqw #0009; margin: 0 -5cqw; }
.pack-art img:nth-child(1) { transform: rotate(-11deg) translateY(2cqw); }
.pack-art img:nth-child(2) { z-index: 1; transform: translateY(-2cqw); }
.pack-art img:nth-child(3) { transform: rotate(11deg) translateY(2cqw); }
.pack .ribbon { position: absolute; top: 9cqw; right: -3cqw; padding: 1.4cqw 5cqw; background: linear-gradient(90deg, #c8342f, #ff6a5c); color: #fff; font: 800 4.4cqw var(--f-title); letter-spacing: .5cqw; text-transform: uppercase; transform: rotate(10deg); box-shadow: 0 1cqw 3cqw #0008; z-index: 3; }
.pack-top { position: absolute; left: 0; right: 0; top: 0; height: 13cqw; border-radius: 5cqw 5cqw 0 0; border-bottom: 0.9cqw dashed #0006; background: linear-gradient(180deg, #ffffff30, transparent); z-index: 2; pointer-events: none; }
.pack.charging { animation: packshake .1s infinite; }
@keyframes packshake { 25% { transform: translate(-3px, 1px) rotate(-1.5deg); } 75% { transform: translate(3px, -1px) rotate(1.5deg); } }
.pack.torn .pack-top { animation: tear .48s ease-in forwards; }
.pack.torn .c-support, .pack.torn .ribbon { animation: packdrop .48s ease-in forwards; }
@keyframes tear { to { transform: translate(50cqw, -70cqw) rotate(40deg); opacity: 0; } }
@keyframes packdrop { to { transform: translateY(45vh) scale(.8); opacity: 0; } }
.pack-announce { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: popin .55s cubic-bezier(.2, .9, .3, 1.4) both; }
.pack-announce small { font: 700 14px var(--f-title); letter-spacing: 5px; text-transform: uppercase; color: var(--gold2); }
.pack-announce b { font: 900 clamp(30px, 8vw, 56px)/1 var(--f-title); color: #fff8e0; text-shadow: 0 0 30px #e2bd62; }
.pack-announce span { color: var(--mu); }
@keyframes popin { from { transform: scale(.3); opacity: 0; } }
.pack-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(94vw, 760px); perspective: 1200px; }
.pack-cards.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(96vw, 900px); }
@media (max-width: 640px) {
  .pack-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(84vw, 44vh); gap: 12px; }
  .pack-cards.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(96vw, 60vh); }
}
.pack-cards .pc { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; width: 100%; animation: dealin .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.pack-cards .card { --w: 100%; max-width: 180px; margin: 0 auto; cursor: pointer; }
.pack-cards .card.back.hot { animation: glowp 1.1s infinite; }
@keyframes dealin { from { transform: translateY(35vh) scale(.4) rotate(-25deg); opacity: 0; } }
.pc-lab { min-height: 34px; text-align: center; font-size: 12px; line-height: 1.3; color: var(--mu); }
.pc-lab b { display: block; color: var(--rc); letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.pack-cards .pc.open .card { cursor: zoom-in; }
.pack-hint { color: var(--mu); font-size: 13px; text-align: center; }
.pc-lab .new { color: var(--ok); font-weight: 800; }
.pack-actions { justify-content: center; }
.rv-papyrus { animation: rv-papyrus 1.1s cubic-bezier(.3, .9, .3, 1) both; }
@keyframes rv-papyrus { 0% { clip-path: inset(0 50% 0 50%); transform: scaleY(.96); } 100% { clip-path: inset(0 0 0 0); transform: none; } }
.rv-bambou { animation: rv-bambou .9s steps(8, end) both; }
@keyframes rv-bambou { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
.rv-runes { animation: rv-runes 1.2s ease-out both; }
.rv-runes .rune { animation: rv-runeglow 1.2s ease-out both; }
@keyframes rv-runes { 0% { transform: translateY(30vh) scale(.8); filter: brightness(0); } 40% { transform: none; filter: brightness(.3); } 70% { filter: brightness(1.6) drop-shadow(0 0 30px #7fd3ff); } 100% { filter: none; } }
@keyframes rv-runeglow { 0%, 50% { opacity: 0; } 70% { opacity: 1; text-shadow: 0 0 6cqw #fff; } }
.rv-affiche { animation: rv-affiche 1s cubic-bezier(.2, .9, .3, 1.1) both; transform-origin: 50% 0; }
@keyframes rv-affiche { 0% { transform: translateY(-40vh) rotate(-14deg) scale(1.3); opacity: 0; } 55% { transform: rotate(3deg) scale(1); opacity: 1; } 70% { transform: rotate(-1.5deg) skewX(2deg); } 100% { transform: none; } }
.rv-tele .c-portrait { animation: rv-crt 1.1s ease-out both; }
.rv-tele { animation: rv-telein .5s ease-out both; }
@keyframes rv-telein { from { transform: scale(.7); opacity: 0; } }
@keyframes rv-crt { 0%, 30% { clip-path: inset(49% 0 49% 0); filter: brightness(4); } 55% { clip-path: inset(0 0 0 0); filter: brightness(2) contrast(2); } 100% { clip-path: inset(0 0 0 0); filter: none; } }
@keyframes rv-screen { 0%, 60% { filter: brightness(0); } 75% { filter: brightness(1.8); } 100% { filter: none; } }
.notif { position: fixed; z-index: 67; left: 50%; top: 12%; translate: -50% 0; padding: 10px 16px; border-radius: 16px; background: #fffffff0; color: #111; font-weight: 600; box-shadow: 0 10px 30px #0008; animation: notif 2.2s both; font-size: 14px; }
@keyframes notif { 0% { transform: translateY(-120px); } 15%, 80% { transform: none; } 100% { transform: translateY(-120px); opacity: 0; } }

/* ===================== ÉQUIPE ===================== */
.formation { display: grid; gap: 10px; justify-items: center; }
.formation .line { display: flex; gap: 10px; justify-content: center; }
.formation .lbl { font: 600 11px var(--f-title); letter-spacing: 3px; color: var(--mu); text-transform: uppercase; }
.slot { width: 112px; aspect-ratio: 5 / 7.2; border-radius: 7px; border: 2px dashed var(--bd); display: grid; place-items: center; color: var(--mu); font-size: 26px; background: #0004; position: relative; }
.slot .card { --w: 112px; }
.slot .x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: #000c; border: 1px solid var(--bd); font-size: 12px; z-index: 3; }
.power { font: 700 22px var(--f-title); color: var(--gold2); }
.affs { display: flex; flex-wrap: wrap; gap: 6px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; justify-items: stretch; }
.grid-cards > .cell { width: 100%; min-width: 0; cursor: pointer; }
/* largeur explicite : une largeur en % d'une case qui s'adapte au contenu donnait 0 px (container-type) */
.grid-cards .card { --w: 100%; max-width: 160px; margin: 0 auto; }
header.top h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res { white-space: nowrap; flex: none; }
@media (max-width: 420px) {
  header.top { gap: 6px; padding-left: 10px; padding-right: 10px; }
  header.top h1 { font-size: 15px; letter-spacing: 1.5px; }
  .iconbtn { width: 32px; height: 32px; flex: none; }
  .xpbar { width: 26px; }
  .res { padding: 4px 8px; font-size: 13px; }
}
@media (max-width: 360px) { header.top h1 { display: none; } }
.res.plvl { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.res.plvl b { color: var(--gold2); }
.xpbar { display: inline-block; width: 42px; height: 5px; border-radius: 3px; background: #0008; overflow: hidden; margin-left: 4px; }
.xpbar > i { display: block; height: 100%; background: linear-gradient(90deg, #a57a2b, #f4d886); }
.card.notmine { filter: grayscale(1) brightness(.55); opacity: .75; }
.card.notmine:hover { filter: grayscale(.4) brightness(.8); }
.featowner { display: flex; gap: 14px; align-items: flex-start; }
.featowner .card { --w: 96px; }
.feat-title { font: 700 22px var(--f-title); margin: 0 0 8px; color: var(--gold2); }
.shop-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.shop-packs .cell { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.shop-packs .pack { width: 100%; max-width: 180px; margin: 0 auto; cursor: default; }
.shop-packs .cell.sold .pack { filter: grayscale(1) brightness(.6); }
.seg { display: flex; gap: 0; margin: 0 0 12px; border: 1px solid #e2bd6255; border-radius: 999px; padding: 3px; width: fit-content; max-width: 100%; }
.seg button { border: 0; background: none; color: var(--mu); font: 600 13px var(--f-body); padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: linear-gradient(135deg, #f4d886, #a57a2b); color: #2a1a05; }
.featsheet { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.featsheet .card { --w: min(42vw, 180px); }
.featsheet .grow { flex: 1; min-width: 220px; }
.grid-cards .card.inteam { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 7px; }
.seg + .seg { margin-top: -4px; }
.pickers { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.pick { display: flex; flex-direction: column; gap: 2px; font: 600 10px var(--f-body); color: var(--mu); text-transform: uppercase; letter-spacing: .06em; flex: 1; min-width: 96px; max-width: 180px; }
.pick select { appearance: none; background: #1d1710 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e2bd62'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--tx, #f3ead4); border: 1px solid #e2bd6255; border-radius: 10px; padding: 8px 26px 8px 10px; font: 600 13px var(--f-body); text-transform: none; letter-spacing: 0; cursor: pointer; }
.pick select:focus { outline: 2px solid #e2bd62; }
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.filters button { flex: none; }
.badge-new { position: absolute; top: -6px; left: -6px; z-index: 3; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.upg { position: absolute; bottom: -6px; right: -6px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #062; display: grid; place-items: center; font-size: 13px; font-weight: 900; box-shadow: 0 0 10px var(--ok); }
.cell { position: relative; }

/* ===================== FEUILLE (bottom sheet) ===================== */
.sheet-bg { position: fixed; inset: 0; background: #000a; z-index: 80; animation: fadein .2s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92dvh; overflow-y: auto; z-index: 81; background: linear-gradient(180deg, #2a2219, #16120d); border-top: 1px solid var(--gold); border-radius: 22px 22px 0 0; padding: 10px 18px calc(24px + var(--safe-b)); animation: up .28s cubic-bezier(.2, .9, .3, 1); }
@media (min-width: 900px) { .sheet { left: 50%; right: auto; width: 640px; translate: -50% 0; bottom: 4vh; border-radius: 22px; border: 1px solid var(--gold); max-height: 88vh; } }
@keyframes up { from { transform: translateY(100%); } }
/* barre de prise : toujours visible en haut, grande zone tactile ; la toucher ou la glisser ferme */
.sheet .grab { position: sticky; top: -10px; z-index: 5; display: grid; place-items: center; width: calc(100% + 36px); margin: -10px -18px 6px; height: 30px; background: linear-gradient(180deg, #2a2219 60%, #2a221900); cursor: grab; touch-action: none; }
.sheet .grab i { width: 48px; height: 5px; border-radius: 3px; background: var(--mu); opacity: .6; transition: opacity .15s, width .15s; }
.sheet .grab:hover i { opacity: 1; width: 60px; }
/* barres de défilement au style du site (ordinateur) */
* { scrollbar-width: thin; scrollbar-color: #7a6440 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8a7148, #5a4a30); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #b39360, #7a6440); background-clip: padding-box; border: 3px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }
.detail { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
@media (max-width: 520px) { .detail { grid-template-columns: 1fr; justify-items: center; } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.stats div { background: #0005; border: 1px solid var(--bd); border-radius: 10px; padding: 6px 2px; }
.stats b { display: block; font: 700 17px var(--f-title); color: var(--gold2); }
.stats small { color: var(--mu); font-size: 11px; }
.bar { height: 8px; border-radius: 4px; background: #0008; overflow: hidden; border: 1px solid var(--bd); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #b7862c, var(--gold2)); }
.quote { font-style: italic; color: #d9cdb4; border-left: 2px solid var(--gold); padding-left: 10px; margin: 10px 0; font-size: 14px; }
.credit { font-size: 11px; color: var(--mu); }
.credit a { color: var(--mu); }
.tip { position: fixed; z-index: 80; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: #2b2318; border: 1px solid var(--gold); font-size: 13px; box-shadow: 0 10px 30px #000a; animation: fadein .15s; }

/* ===================== COMBAT (écran) ===================== */
.fightcards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fc { position: relative; overflow: hidden; }
.fc h3 { margin: 0 0 4px; font: 700 17px var(--f-title); letter-spacing: 1px; }
.fc .big { font: 800 26px var(--f-title); color: var(--gold2); font-variant-numeric: tabular-nums; }
.fc .loot { display: flex; gap: 14px; margin: 10px 0 14px; flex-wrap: wrap; }
.fc .loot span { font-weight: 700; font-variant-numeric: tabular-nums; }
.enemy-row { display: flex; gap: 6px; margin: 10px 0; }
.enemy-row .card { --w: 58px; }
.dests { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.chest { font-size: 42px; position: absolute; right: 14px; top: 10px; animation: float 2.5s infinite; }
.chest.full { animation: float 2.5s infinite, glowp 1.2s infinite; }

/* ===================== ARÈNE (canvas) ===================== */
.arena { position: fixed; inset: 0; z-index: 50; background: #000; }
.arena canvas { width: 100%; height: 100%; display: block; }
.arena .hud { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 10px; display: flex; gap: 8px; z-index: 2; }
.arena .hud button { background: #000a; border: 1px solid var(--gold); border-radius: 10px; padding: 7px 12px; font-weight: 700; color: var(--gold2); }
.result { position: absolute; inset: 0; display: grid; place-items: center; background: #000b; z-index: 3; animation: fadein .3s; }
.result .box { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 20px; }
.result h2 { font: 900 44px var(--f-title); letter-spacing: 4px; margin: 0; }
.result .win { color: var(--gold2); text-shadow: 0 0 30px var(--gold); animation: bump 1s; }
.result .lose { color: #c9b9a0; }

/* ===================== ALBUM ===================== */
.era-progress { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.era-progress button { text-align: left; padding: 10px; border-radius: 12px; background: #0005; border: 1px solid var(--bd); }
.era-progress button.on { border-color: var(--gold); }
.era-progress b { display: block; font-size: 13px; }

/* ===================== DÉMARRAGE ===================== */
.onb { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #3a2a14, #000 80%); padding: 24px; text-align: center; }
.onb .slide { max-width: 440px; display: grid; gap: 16px; justify-items: center; animation: fadein .4s; }
.onb h2 { font: 700 30px var(--f-title); letter-spacing: 4px; color: var(--gold); margin: 0; text-shadow: 0 0 20px #e2bd6266; }
.onb p { margin: 0; color: #e6dac2; font-size: 16px; }
.onb .em { font-size: 64px; }
.onb .dots { display: flex; gap: 8px; } .onb .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bd); } .onb .dots i.on { background: var(--gold); }
.mini-cards { display: flex; gap: 6px; } .mini-cards .card { --w: 64px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 20px + var(--safe-b)); translate: -50% 0; z-index: 95; background: #2b2318; border: 1px solid var(--gold); padding: 10px 16px; border-radius: 14px; font-weight: 600; animation: toast 2.6s both; box-shadow: 0 10px 30px #000a; white-space: nowrap; }
@keyframes toast { 0% { transform: translateY(30px); opacity: 0; } 10%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ===================== 9 nov. : icônes, équipe, signalements ===================== */
/* pastille-icône : icône seule, le texte se déplie au survol ou au toucher */
.ipill { display: inline-flex; align-items: center; height: 34px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--bd); background: #0006; color: var(--tx); font-size: 13px; white-space: nowrap; transition: border-color .2s, background .2s; flex: none; }
.ipill .ii { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; }
.ipill .ii sup { font: 700 10px var(--f-body); margin-left: 2px; color: var(--mu); }
.ipill .il { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .28s ease, opacity .2s, margin .28s; }
.ipill:hover .il, .ipill:focus-visible .il, .ipill.peek .il, .ipill.show .il { max-width: 260px; opacity: 1; margin-left: 7px; }
.ipill.on { border-color: #b9a27a; background: #ffffff10; }
.ipill.on .ii sup { color: var(--tx); }
.ipill.off { opacity: .55; }
/* menus de l'Album */
.pickers { align-items: center; }
.imenu { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--bd); background: #0006; font-size: 13px; }
.imenu .ii { font-size: 16px; }
.imenu.set { border-color: #b9a27a; background: #ffffff10; }
.imenu .iv { font-weight: 600; }
.menu-pop { position: fixed; z-index: 90; min-width: 180px; background: #211b14; border: 1px solid var(--bd); border-radius: 14px; padding: 6px; box-shadow: 0 14px 40px #000c; animation: fadein .15s; display: grid; }
.menu-pop .mp-h { font: 600 10px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--mu); padding: 6px 10px 4px; }
.menu-pop button { text-align: left; padding: 9px 12px; border-radius: 9px; font-size: 14px; }
.menu-pop button:hover { background: #ffffff0d; }
.menu-pop button.on { color: var(--gold2); font-weight: 700; }
/* catégories dans la grande fiche */
.bc-icons { gap: 1.4cqw; }
.bc-icons .ipill { height: 7.4cqw; padding: 0 2cqw; font-size: 2.8cqw; border-color: color-mix(in srgb, currentColor 30%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); color: inherit; }
.bc-icons .ipill .ii { font-size: 3.8cqw; }
.bc-icons .ipill:hover .il, .bc-icons .ipill.peek .il { margin-left: 1.4cqw; }
/* onglet Équipe */
.team-head { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0 10px; }
.team-head .power { margin-right: auto; }
@media (max-width: 520px) { .team-head .power { margin-right: 0; width: 100%; text-align: center; } }
.team-stage { position: relative; padding: 6px 0 14px; }
.team-stage + .affs { justify-content: center; }
.formation .line { gap: 12px; }
.slot { cursor: pointer; transition: transform .2s, box-shadow .2s; }
.slot.full { border: 0; background: none; }
.slot .plus { font-size: 28px; color: var(--mu); }
.slot.sel { outline: 2px solid var(--tx); outline-offset: 4px; border-radius: 8px; }
.slot.linked { transform: translateY(-4px) scale(1.04); z-index: 2; }
.slot.linked .card { filter: drop-shadow(0 0 10px #e8d8b0aa); }
@media (min-width: 700px) { .team-stage > .formation:not(.small) .slot { width: 150px; } .team-stage > .formation:not(.small) .slot .card { --w: 150px; } }
.featdot { position: absolute; top: -7px; left: -7px; z-index: 4; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #1a140e; border: 1px solid #c9b07a; box-shadow: 0 0 10px #c9b07a88; animation: pulse 1.8s infinite; pointer-events: none; }
/* liens animés */
.links { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.link-svg { position: absolute; inset: 0; overflow: visible; transition: opacity .4s; }
.link-svg line { stroke: #efe2c2; stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 4px #efe2c2); }
.link-chip { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 1px; padding: 7px 14px; border-radius: 12px; background: #15110cee; border: 1px solid #c9b07a; box-shadow: 0 8px 26px #000c; white-space: nowrap; animation: chip .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.link-chip b { font-size: 14px; } .link-chip small { color: var(--mu); font-size: 12px; }
.link-chip.new b::before { content: "Nouveau lien · "; font-weight: 600; color: var(--ok); }
.link-chip.lost { border-color: var(--red); } .link-chip.lost small { color: #ff9a8a; }
@keyframes chip { from { opacity: 0; scale: .6; } }
/* carte de l'équipe : bonus des coéquipiers */
.bc-stats .up { display: block; font: 700 2.6cqw var(--f-body); color: var(--ok); font-style: normal; }
.srcs { display: grid; gap: 6px; }
.src { display: grid; grid-template-columns: 28px auto 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--bd); }
.src .si { font-size: 18px; text-align: center; }
/* éditeur d'équipe */
.tedit { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: grid; grid-template-rows: auto 1fr; animation: fadein .2s; }
.tedit-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--bd); }
.tedit-bar h2 { flex: 1; margin: 0; font: 700 15px var(--f-title); letter-spacing: 2px; text-transform: uppercase; }
.tedit-body { display: grid; grid-template-columns: minmax(330px, 420px) 1fr; min-height: 0; }
.tedit-left { overflow-y: auto; padding: 12px 14px; border-right: 1px solid var(--bd); display: grid; align-content: start; gap: 10px; }
.tedit-team { display: grid; gap: 8px; justify-items: center; }
.tedit-team .affs { justify-content: center; }
.tedit-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.tedit-hint { width: 100%; text-align: center; font-size: 13px; }
.tedit-coll { overflow-y: auto; padding: 12px 14px calc(20px + var(--safe-b)); }
.formation.small .slot { width: 92px; } .formation.small .slot .card { --w: 92px; }
.cell.sel .card { outline: 2px solid var(--tx); outline-offset: 3px; border-radius: 7px; }
@media (max-width: 760px) {
  .tedit-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tedit-left { border-right: 0; border-bottom: 1px solid var(--bd); overflow: visible; padding: 8px 10px; gap: 6px; }
  .tedit-team .power, .tedit-team .affs { display: none; }
  .formation.small { gap: 6px; } .formation.small .line { gap: 6px; }
  .formation.small .slot { width: min(17vw, 76px); } .formation.small .slot .card { --w: min(17vw, 76px); }
  .formation.small .line { display: contents; }
  .formation.small { display: flex; justify-content: center; }
}
/* signalements */
.sheet > div { position: relative; }
.tedit-coll .grid-cards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 9px; }
/* bouton de signalement : dans la rangée de la barre de prise, à droite, sans toucher la carte */
.report-btn { position: absolute; top: -34px; right: -6px; z-index: 6; width: 28px; height: 28px; border-radius: 50%; background: #0008; border: 1px solid var(--bd); color: var(--mu); font-size: 14px; opacity: .7; }
.report-btn:hover { opacity: 1; color: var(--tx); }
.report-note { width: 100%; margin-top: 10px; background: #0005; color: var(--tx); border: 1px solid var(--bd); border-radius: 12px; padding: 10px; font: 14px var(--f-body); resize: vertical; }
.featrow.missing { opacity: .7; }
/* combat : pause (les deux équipes, PV, liens, Hauts faits) */
.pause-panel { position: absolute; inset: 0; z-index: 3; background: #0b0907ee; backdrop-filter: blur(6px); display: grid; grid-template-rows: auto 1fr auto; padding: max(12px, env(safe-area-inset-top)) 14px calc(12px + var(--safe-b)); overflow-y: auto; animation: fadein .2s; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pp-head b { font: 700 16px var(--f-title); letter-spacing: 3px; text-transform: uppercase; }
.pp-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; }
@media (max-width: 700px) { .pp-body { grid-template-columns: 1fr; } }
.pp-side h3 { margin: 4px 0 8px; font: 600 12px var(--f-title); letter-spacing: 2px; text-transform: uppercase; color: var(--mu); }
.pp-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-unit { display: grid; gap: 3px; justify-items: center; cursor: pointer; }
.pp-unit .card { --w: 78px; }
.pp-unit.dead .card { filter: grayscale(1) brightness(.5); }
.pp-hp { width: 78px; height: 5px; border-radius: 3px; background: #ffffff1a; overflow: hidden; }
.pp-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fbf7a, #9fe0a8); }
.pp-unit small { font-size: 11px; color: var(--mu); font-variant-numeric: tabular-nums; }
.pp-affs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pp-info { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--bd); border-radius: 12px; min-height: 44px; font-size: 14px; }
.pp-info:empty::before { content: "Touche une carte pour voir ses stats et ses Hauts faits."; color: var(--mu); }
.pp-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0; }
.pp-stats small { color: var(--mu); }
.pp-feats { display: flex; flex-wrap: wrap; gap: 6px; }
/* combat : un Haut fait sort de son personnage puis y rentre */
.feat-pop { position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 2; display: grid; justify-items: center; gap: 10px; pointer-events: none; animation: fp-in .5s cubic-bezier(.2, .9, .3, 1) both; }
.feat-pop .card { --w: min(190px, 42vw); box-shadow: 0 20px 60px #000c; }
.fp-cap { display: grid; justify-items: center; gap: 2px; padding: 8px 16px; border-radius: 12px; background: #0d0a07e6; border: 1px solid #7a6440; text-align: center; }
.fp-cap small { color: var(--mu); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fp-cap b { font: 700 17px var(--f-title); }
.fp-cap span { color: #cfe8c8; font-size: 13px; }
.feat-pop.out { animation: fp-out .42s ease-in both; }
@keyframes fp-in { from { translate: calc(-50% + var(--fx)) calc(-50% + var(--fy)); scale: .15; opacity: 0; } }
@keyframes fp-out { to { translate: calc(-50% + var(--fx)) calc(-50% + var(--fy)); scale: .12; opacity: 0; } }
/* icônes au trait (icons.js) */
.ico { display: inline-flex; width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }
.ico svg { width: 100%; height: 100%; }
.ipill .ii .ico { width: 18px; height: 18px; }
.imenu .ii .ico { width: 18px; height: 18px; }
.bc-icons .ipill .ii .ico { width: 4.4cqw; height: 4.4cqw; }
.featdot .ico { width: 15px; height: 15px; color: #e8d8b0; }
.report-btn { display: grid; place-items: center; } .report-btn .ico { width: 14px; height: 14px; }
.src .si .ico { width: 20px; height: 20px; color: #d9c9a3; }
.link-chip b .ico { width: 16px; height: 16px; margin-right: 2px; }
/* liens condensés : icône, nombre, bonus en bref */
.ipill.aff { height: 32px; padding: 0 10px; }
.aff-c { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.aff-c b { font-weight: 700; font-variant-numeric: tabular-nums; }
.aff-c .ab { color: #cfe3c6; font-weight: 600; }
.ipill.aff.off .aff-c .ab { color: var(--mu); }
.ipill.aff .il { color: var(--mu); font-size: 12px; }
/* doublons : numéro d'exemplaire */
.copy-n { position: absolute; top: -6px; right: -6px; z-index: 3; padding: 1px 7px; border-radius: 8px; background: #1a140e; border: 1px solid #b9a27a; font: 700 11px var(--f-body); color: var(--tx); }
/* pas de fondu quand on reste sur le même onglet */
.screen { animation: none; }
.screen.enter { animation: fadein .25s; }
/* survol des pastilles : le détail s'affiche dans une bulle au-dessus, par-dessus les voisines ; rien ne bouge ni ne change de ligne */
.ipill { position: relative; transition: border-color .2s, background .2s, scale .15s; }
.ipill .il, .ipill:hover .il, .ipill.peek .il, .ipill:focus-visible .il {
  position: absolute; left: 50%; bottom: calc(100% + 7px); margin: 0; max-width: none; width: max-content; max-width: min(280px, 80vw);
  white-space: normal; text-align: center; line-height: 1.35; padding: 6px 10px; border-radius: 10px;
  background: #15110cf2; border: 1px solid #7a6440; box-shadow: 0 8px 24px #000b; color: var(--tx); font-size: 12.5px;
  pointer-events: none; z-index: 30; translate: -50% 4px; opacity: 0; transition: opacity .15s, translate .15s; }
.ipill:hover .il, .ipill.peek .il, .ipill:focus-visible .il { opacity: 1; translate: -50% 0; }
.ipill:hover, .ipill.peek { scale: 1.07; z-index: 31; }
/* exceptions : filtres en ligne défilante et filtre actif → le texte reste dans la pastille */
.filters .ipill .il, .ipill.show .il, .filters .ipill:hover .il, .filters .ipill.peek .il {
  position: static; translate: none; width: auto; max-width: 0; padding: 0; border: 0; background: none; box-shadow: none; white-space: nowrap; opacity: 0; transition: max-width .28s ease, opacity .2s, margin .28s; }
.filters .ipill:hover .il, .filters .ipill.peek .il, .ipill.show .il { max-width: 200px; opacity: 1; margin-left: 7px; }
.filters .ipill:hover, .filters .ipill.peek { scale: 1; }
/* dans la grande fiche : bulle à l'échelle de la carte */
.bc-icons .ipill .il, .bc-icons .ipill:hover .il, .bc-icons .ipill.peek .il { margin: 0; font-size: 3.4cqw; padding: 1.4cqw 2.4cqw; border-radius: 2cqw; }
/* bulles de la première et de la dernière pastille alignées sur leur bord (pas rognées par la carte ou l'écran) */
:is(.bc-icons, .affs) > .ipill:first-child .il { left: 0; translate: 0 4px; }
:is(.bc-icons, .affs) > .ipill:first-child:is(:hover, .peek) .il { translate: 0 0; }
:is(.bc-icons, .affs) > .ipill:last-child:not(:first-child) .il { left: auto; right: 0; translate: 0 4px; }
:is(.bc-icons, .affs) > .ipill:last-child:not(:first-child):is(:hover, .peek) .il { translate: 0 0; }
/* catégories ≠ bonus
   catégories (ce que le personnage EST) : étiquettes carrées, neutres, sans fond
   bonus (ce que l'équipe GAGNE) : pastilles rondes teintées de vert, valeur en clair ; lien pas encore actif : pointillés gris */
.bc-icons .ipill { border-radius: 1.4cqw; background: none; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); }
.bc-icons .ipill:hover, .bc-icons .ipill.peek { background: color-mix(in srgb, currentColor 8%, transparent); }
.ipill.aff { border-radius: 99px; border-color: #5f8f68; background: linear-gradient(180deg, #6fd08c1f, #6fd08c0d); }
.ipill.aff .aff-c b { color: #e8f4e6; }
.ipill.aff .aff-c .ab { color: #a9e2b4; }
.ipill.aff.off { opacity: 1; border: 1px dashed #5a5246; background: none; }
.ipill.aff.off .aff-c, .ipill.aff.off .aff-c .ab, .ipill.aff.off .aff-c b { color: var(--mu); }
/* comptes */
.signup-name { width: min(320px, 80vw); padding: 13px 16px; border-radius: 14px; border: 1px solid var(--bd); background: #0007; color: var(--tx); font: 600 17px var(--f-body); text-align: center; }
.signup-name:focus { outline: 2px solid #b9a27a; }
.signup-err { color: #ff9a8a; min-height: 1.2em; margin: 0; }
.invite-link { padding: 12px 14px; border-radius: 12px; border: 1px dashed #7a6440; background: #0006; font: 600 13px ui-monospace, monospace; word-break: break-all; margin: 8px 0 12px; user-select: all; }

/* ---- icônes au trait partout (émojis remplacés) : la couleur suit le texte (noir sur bouton clair, blanc sur fond sombre) ---- */
.ico.fill svg { fill: currentColor; }
nav.tabs button .ti { filter: none; opacity: .62; display: grid; place-items: center; }
nav.tabs button.on .ti { opacity: 1; }
nav.tabs .ti .ico { width: 23px; height: 23px; }
nav.tabs button.on .ti .ico svg { stroke-width: 2.1; }
.iconbtn .ico { width: 18px; height: 18px; }
.res .ico { width: 15px; height: 15px; opacity: .85; }
.btn .ico { width: 1.15em; height: 1.15em; vertical-align: -.22em; }
.loot .ico, .toast .ico, .muted .ico, .pill .ico, h3 .ico, .power .ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; opacity: .9; }
.onb .em .ico { width: 64px; height: 64px; }
.onb .em .ico svg { stroke-width: 1.1; }
.slotempty .ico { width: 18px; height: 18px; opacity: .6; }
.chest .ico { width: 1em; height: 1em; }
.chest .ico svg { stroke-width: 1.2; }
.c-cls .ico { width: 1em; height: 1em; vertical-align: -.12em; }
.noimg .ico { width: .9em; height: .9em; opacity: .55; }
.noimg .ico svg { stroke-width: 1.1; }
.feat-icon .ico { width: 1em; height: 1em; }
.feat-icon .ico svg { stroke-width: 1.3; }
.battle-bar button .ico, .bv-ctrl button .ico { width: 16px; height: 16px; vertical-align: -.2em; }
.hud button .ico { width: 16px; height: 16px; vertical-align: -.2em; }
/* ---- équipes enregistrées ---- */
.presets { display: grid; gap: 8px; }
.preset { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #ffffff08; border: 1px solid var(--bd); }
.preset.cur { border-color: #ffffff40; background: #ffffff10; }
.preset .grow { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.preset .pn { cursor: text; }
.preset-faces { display: flex; gap: 4px; margin-top: 3px; }
.preset-faces .pf { width: 30px; height: 40px; border-radius: 4px; overflow: hidden; background: #0006; border: 1px solid #ffffff22; display: grid; place-items: center; }
.preset-faces .pf img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); }
.preset-faces .pf.empty { border-style: dashed; opacity: .5; }
.preset-faces .pf .ico { width: 16px; height: 16px; opacity: .6; }
.preset .iconbtn .ico { width: 16px; height: 16px; }
.preset .grow { flex: 1; }
/* ---- pause sans fenêtre : bandeau discret + fiche de la carte touchée ---- */
.arena.paused canvas { cursor: pointer; }
.pause-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; display: flex; gap: 10px; align-items: baseline; padding: 7px 16px; border-radius: 99px; background: #0b0b0dcc; border: 1px solid #ffffff2a; backdrop-filter: blur(4px); }
.pause-tag b { font: 700 13px var(--f-title); letter-spacing: 3px; text-transform: uppercase; }
.pause-tag span { font-size: 12px; opacity: .7; }
.pause-info { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; width: min(420px, calc(100% - 24px)); padding: 14px 16px; border-radius: 14px; background: #0b0b0de6; border: 1px solid #ffffff2a; backdrop-filter: blur(6px); display: grid; gap: 8px; animation: piIn .18s ease-out; }
.pause-info.foe { border-color: #ff8a7a55; }
.pause-info .pi-head { display: flex; flex-direction: column; gap: 2px; padding-right: 26px; }
.pause-info .pi-head b { font: 700 17px var(--f-title); }
.pause-info .pi-x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #ffffff10; border: 1px solid #ffffff22; color: inherit; }
.pause-info .pi-x .ico { width: 14px; height: 14px; }
@keyframes piIn { from { opacity: 0; transform: translate(-50%, 8px); } }
/* vitesse des combats, choisie avant de lancer */
.speed-pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.speed-pick .lbl { font-size: 12px; opacity: .65; margin-right: 4px; }
.speed-pick button { padding: 5px 11px; border-radius: 99px; font-size: 12.5px; background: #ffffff08; border: 1px solid var(--bd); color: inherit; opacity: .75; }
.speed-pick button.on { opacity: 1; background: #ffffff1a; border-color: #ffffff55; }
.speed-pick button .ico { width: 14px; height: 14px; vertical-align: -.2em; margin-right: 3px; }
.pause-info.top { bottom: auto; top: 58px; }
/* pause : la vraie carte du personnage, chiffres du combat en cours */
.pause-info.pause-card { inset: 0; left: 0; top: 0; bottom: 0; transform: none; width: auto; padding: 56px 12px 16px; border: 0; border-radius: 0; background: #07070acc; display: grid; place-items: center; overflow-y: auto; animation: pcIn .2s ease-out; }
.pause-card .card.big { --w: min(360px, 88vw); }
.pause-card .pi-x { top: 14px; right: 14px; width: 34px; height: 34px; z-index: 2; }
.pause-card .ko { color: #ff8a7a; font-weight: 700; }
.pause-card .up { color: #9fe0a8; font-style: normal; font-size: .8em; margin-left: 4px; }
.pause-card.dead .card.big { filter: grayscale(.85) brightness(.8); }
@keyframes pcIn { from { opacity: 0; } }

/* ---- ouverture du paquet : vraie bande déchirée, lumière de la meilleure carte ---- */
.pack-strip { position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform; filter: drop-shadow(0 4px 6px #0006); }
.pack-strip > .c-support { height: 100%; }
.pack-strip.fly { transition: transform .5s cubic-bezier(.3, .1, .5, 1), opacity .5s ease-in; transform: translate(calc(var(--dir, 1) * 70%), -140%) rotate(calc(var(--dir, 1) * 38deg)) !important; opacity: 0; }
.pack-light { position: absolute; left: 6%; right: 6%; top: 10%; height: 9%; z-index: 2; pointer-events: none; opacity: 0; transform-origin: 50% 100%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, #fff 0%, var(--rc) 35%, transparent 70%); filter: blur(4px); mix-blend-mode: screen; }
.pack-light.burst { transition: transform .45s ease-out, opacity .55s ease-in .15s; transform: scale(1.6, 5) !important; opacity: 0 !important; }
.pack.torn .c-support { animation: packdrop .5s cubic-bezier(.5, 0, .8, .4) forwards; }
@media (prefers-reduced-motion: reduce) { .pack-strip.fly, .pack-light.burst { transition-duration: .01ms; } }
.pack-top { height: 14%; }

/* retournement des cartes du paquet : face préparée sous le dos, tension en CSS */
.pack-cards .pc { position: relative; }
.pack-cards .pc .pc-pre { position: absolute; left: 0; right: 0; top: 0; opacity: .001; pointer-events: none; }
.pack-cards .card.back.pc-charge { animation: pcwiggle .12s infinite; filter: drop-shadow(0 0 var(--g, 6px) var(--glow, #fff)); transition: filter .1s; }
@keyframes pcwiggle { 25% { transform: translate(-2px, 1px) rotate(-1.2deg); } 75% { transform: translate(2px, -1px) rotate(1.2deg); } }
/* liens : jamais bleu souligné ; couleur du texte et filet fin discret, qui s'affirme au survol */
a { color: inherit; text-decoration: none; }
a:not(.btn):not(.opt-row) { border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); transition: border-color .15s, color .15s; }
a:not(.btn):not(.opt-row):hover { border-bottom-color: currentColor; color: var(--tx); }
.credit a { color: var(--mu); }

/* options : groupes, une ligne par réglage */
.opts .opt-group { margin: 0 0 18px; }
.opts .opt-h { font: 600 11px var(--f-body, Inter, sans-serif); letter-spacing: 1.6px; text-transform: uppercase; color: var(--mu); margin: 0 0 6px; padding: 0 2px; }
.opts .opt-group > .seg { margin: 4px 0 0; }
.opt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 2px; border: 0; border-top: 1px solid var(--bd, #ffffff1a); background: none; color: var(--tx); font: inherit; text-align: left; }
.opt-group > .opt-h + .opt-row, .opt-group > .opt-h + * + .opt-row:first-of-type { border-top: 0; }
.opt-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-row .grow span { font-size: 14px; }
.opt-row .grow small { font-size: 12px; color: var(--mu); }
.opt-row > b { font-weight: 600; font-size: 14px; color: var(--tx); }
.opt-link { cursor: pointer; }
.opt-link:hover { background: var(--hov, #ffffff0a); }
.opt-chev { color: var(--mu); font-size: 20px; line-height: 1; }
.switch { flex: none; width: 42px; height: 24px; border-radius: 999px; border: 1px solid var(--bd, #ffffff33); background: transparent; position: relative; cursor: pointer; padding: 0; transition: background .18s, border-color .18s; }
.switch i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mu); transition: transform .18s, background .18s; }
.switch.on { background: var(--tx); border-color: var(--tx); }
.switch.on i { transform: translateX(18px); background: var(--bg, #000); }
.opt-credits summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.opt-credits summary::-webkit-details-marker { display: none; }
.opt-credits summary::after { content: "+"; font-size: 14px; letter-spacing: 0; }
.opt-credits[open] summary::after { content: "–"; }
.opt-credits p { font-size: 12px; color: var(--mu); line-height: 1.5; margin: 6px 2px; }
.btn.danger { border-color: #c8442f88; color: #e0755f; background: none; }
.opt-row .grow { flex: 1 1 auto; }
.opt-row > b, .opt-row > .switch, .opt-row > .opt-chev { margin-left: auto; }
:root[data-theme] .btn.danger { border-color: #c8442f88; color: #d0604a; background: none; }

/* Équipe et Combat remplissent l'écran sur PC et Fold (au lieu d'un bloc étroit au milieu d'un grand vide) */
@media (min-width: 560px) {
  .screen:has(> .team-stage), .screen:has(> .fightcards) { max-width: min(1500px, 100%); }
  .team-stage > .formation:not(.small) { --sw: clamp(120px, min((100dvh - 330px - var(--tabh, 0px)) / 2.95, (100vw - 120px) / 3.4), 270px); gap: calc(var(--sw) * .08); }
  .team-stage > .formation:not(.small) .line { gap: calc(var(--sw) * .12); }
  .team-stage > .formation:not(.small) .slot { width: var(--sw); }
  .team-stage > .formation:not(.small) .slot .card { --w: var(--sw); }
  .fightcards { min-height: calc(100dvh - 170px - var(--tabh, 0px)); align-items: stretch; gap: 18px; }
  .fightcards > .fc { display: flex; flex-direction: column; container-type: inline-size; padding: 20px 22px; }
  .fightcards > .fc > .btn:last-child, .fightcards > .fc > .pill:last-child { margin-top: auto; align-self: flex-start; }
  .fightcards .enemy-row { flex: 1; align-items: center; justify-content: center; gap: 2cqw; margin: 16px 0; }
  .fightcards .enemy-row { flex-wrap: wrap; align-content: center; }
  .fightcards .enemy-row .card { --w: clamp(58px, calc((100cqw - 8cqw) / 3.3), 150px); }
  .fightcards .fc .big { font-size: clamp(26px, 9cqw, 44px); margin: 8px 0; }
  .fightcards .fc .dests { margin-bottom: 16px; }
  .fightcards > .fc > .chest { position: static; order: 5; flex: 1; display: grid; place-items: center; font-size: clamp(60px, 26cqw, 150px); opacity: .35; animation: none; min-height: 90px; }
  .fightcards > .fc > .chest.full { opacity: .9; }
  .fightcards > .fc:first-child > :is(.dests, .btn, .row) { order: 6; } .fightcards > .fc:first-child > .btn:last-child { order: 7; }
}@media (min-width: 560px) { @container (max-width: 320px) { .fightcards .enemy-row .card { --w: calc((100cqw - 8cqw) / 2.25); } } }

/* fin de la DA : annonce de pack spécial et écran de fin de combat sans or */
.pack-announce small { font: 600 12px var(--f-body, Inter, sans-serif); letter-spacing: 6px; color: #b9b2a4; }
.pack-announce b { font: 600 clamp(32px, 8vw, 60px)/1 "Cormorant Garamond", Cinzel, Georgia, serif; color: #f1ece0; text-shadow: none; letter-spacing: .02em; }
.pack-announce b::after { content: ""; display: block; width: 46%; height: 1px; margin: 14px auto 0; background: linear-gradient(90deg, transparent, var(--rc, #f1ece0), transparent); }
.result { background: radial-gradient(ellipse at center, #0b0b0dcc 0%, #0b0b0df2 70%); }
.result h2 { font: 600 clamp(36px, 7vw, 56px) "Cormorant Garamond", Cinzel, Georgia, serif; letter-spacing: .32em; text-indent: .32em; }
.result .win { color: #f1ece0; text-shadow: 0 0 28px #ffffff26; animation: resin .9s ease-out both; }
.result .lose { color: #a59d90; animation: resin .9s ease-out both; }
.result h2::after { content: ""; display: block; height: 1px; width: 60%; margin: 12px auto 0; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .6; }
@keyframes resin { from { opacity: 0; letter-spacing: .6em; } }
.result .btn.gold { background: #f1ece0; color: #141416; border-color: #f1ece0; }
/* déchirer le paquet au doigt : le navigateur ne doit pas prendre le geste pour un défilement */
.reveal .pack { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.reveal .pack * { pointer-events: none; }
@media (min-width: 560px) and (max-width: 899px) { .fightcards { grid-template-columns: 1fr 1fr; min-height: 0; } .fightcards > .fc:last-child { grid-column: 1 / -1; } .fightcards > .fc:last-child .enemy-row .card { --w: clamp(58px, calc((100cqw - 10cqw) / 5.4), 130px); } }
@media (min-width: 560px) and (max-width: 899px) { .fightcards > .fc:not(:last-child) .enemy-row .card { --w: calc((100cqw - 8cqw) / 3.2); } }

/* bandeau « nouvelle version » */
.update-bar { position: fixed; z-index: 90; left: 50%; translate: -50% 0; bottom: calc(var(--tabh, 0px) + 14px + var(--safe-b, 0px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--sf, #1b1b1e); color: var(--tx, #f1ece0); border: 1px solid var(--bd, #ffffff30); box-shadow: 0 10px 30px #0006; font-size: 14px; animation: fadein .3s; white-space: nowrap; max-width: calc(100vw - 24px); }
.update-bar .btn { padding: 7px 14px; }
@media (min-width: 761px) { .update-bar { bottom: 22px; } }

/* ===================== WikiLegends (v28) ===================== */
/* logo WL : prend la couleur du texte, donc s'adapte au thème clair ou sombre */
header.top h1 { display: flex; align-items: center; gap: 10px; }
header.top h1 .logo { display: inline-flex; flex: none; }
header.top h1 .logo svg { width: 40px; height: 25px; }
header.top h1 .brand { font-size: .78em; letter-spacing: .14em; }
@media (max-width: 420px) { header.top h1 .brand { display: none; } }

/* barre des onglets : une frise temporelle sombre */
nav.tabs, :root[data-theme] nav.tabs { background: #0c0d0f; border-top: 0; color-scheme: dark; }
nav.tabs button { color: #8d8b85; }
nav.tabs button.on, :root[data-theme] nav.tabs button.on { color: #f1ece0; }
nav.tabs::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none;
  background:
    linear-gradient(#5c5850, #5c5850) 0 3px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, #5c5850 0 1px, transparent 1px 28px) 0 0 / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, #8a857a 0 1px, transparent 1px 140px) 0 0 / 100% 9px no-repeat; opacity: .8; }
:root[data-theme] nav.tabs button.on::before { top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px #0c0d0f, 0 0 10px var(--acc); }
@media (min-width: 900px) {
  nav.tabs, :root[data-theme] nav.tabs { background: #0c0d0f; justify-content: center; padding-top: 0; }
  nav.tabs::before { left: auto; right: 0; top: 0; bottom: 0; width: 9px; height: auto;
    background:
      linear-gradient(#5c5850, #5c5850) 3px 0 / 1px 100% no-repeat,
      repeating-linear-gradient(180deg, #5c5850 0 1px, transparent 1px 28px) 0 0 / 7px 100% no-repeat,
      repeating-linear-gradient(180deg, #8a857a 0 1px, transparent 1px 140px) 0 0 / 9px 100% no-repeat; }
  :root[data-theme] nav.tabs button.on::before { top: 50%; left: auto; right: -3px; translate: 0 -50%; width: 9px; height: 9px; }
}

/* boîte de dialogue du jeu */
.dlg-bg { position: fixed; inset: 0; z-index: 120; background: #0008; display: grid; place-items: center; padding: 20px; animation: fadein .15s; }
.dlg { width: min(380px, 100%); background: var(--sf); color: var(--tx); border: 1px solid var(--bd); border-radius: 14px; padding: 20px; display: grid; gap: 12px; box-shadow: 0 20px 50px #0008; }
.dlg h3 { margin: 0; font: 600 20px var(--f-title); }
.dlg p { margin: 0; color: var(--mu); }
.dlg-input { font: inherit; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--bd); background: var(--bg); color: var(--tx); }
.dlg-btns { display: flex; justify-content: flex-end; gap: 8px; }
.btn.danger { background: var(--red); color: #fff; border-color: var(--red); }

/* équipe : front / arrière, affinités actives puis manquantes */
.line-lbl { font-size: 11px; letter-spacing: .08em; color: var(--mu); text-align: center; }
.line-lbl b { font: 600 11px var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--tx); }
.formation.small .line-lbl { display: none; }
.affs-wrap { display: grid; gap: 8px; margin-top: 14px; }
.affs-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.affs-h > span { font: 600 11px var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mu); }
.affs-miss { display: grid; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--bd); }
.affs-miss > small { color: var(--mu); font-size: 11px; letter-spacing: .08em; }
.aff-none { margin: 0; }

/* éditeur d'équipe : glisser, comparer, cartes bloquées */
.drag-ghost { position: fixed; z-index: 200; pointer-events: none; --w: 92px; translate: -50% -60%; rotate: -4deg; filter: drop-shadow(0 12px 18px #0009); }
.cell.dragging { opacity: .35; }
.slot.drop { outline: 2px solid var(--acc); outline-offset: 4px; transform: scale(1.05); }
.cell.locked { position: relative; }
.cell.locked .card { filter: grayscale(.85) brightness(.6); }
.cell.locked::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; pointer-events: none; }
.cmp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cmp small { color: var(--mu); width: 100%; }
.tedit-filters { margin-bottom: 12px; }
.tedit .grid-cards > .cell { content-visibility: auto; contain-intrinsic-size: 104px 150px; }

/* fiche d'une carte : navigation, actions condensées */
.csheet { position: relative; display: grid; gap: 10px; justify-items: center; }
.cs-nav { display: flex; align-items: center; gap: 14px; }
.cs-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bd); font-size: 22px; line-height: 1; display: grid; place-items: center; }
@media (hover: hover) and (min-width: 700px) { .cs-nav { position: absolute; inset: 40% -6px auto; justify-content: space-between; pointer-events: none; z-index: 3; } .cs-nav small { display: none; } .cs-arrow { pointer-events: auto; background: var(--sf); } }
.cs-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fs-row { display: flex; gap: 8px; justify-content: center; }
.fs-slot { width: 62px; aspect-ratio: 5 / 7.2; border-radius: 6px; border: 1px dashed var(--bd); display: grid; place-items: center; align-content: center; gap: 2px; color: var(--mu); font-size: 11px; padding: 0; }
.fs-slot.full { border: 0; } .fs-slot.full .card { --w: 62px; }
.fs-slot.free span { font-size: 22px; line-height: 1; } .fs-slot.free.ready { border-color: var(--acc); color: var(--tx); }
.fs-slot.lock { opacity: .55; } .fs-slot .ico { width: 16px; height: 16px; }
.cs-links { display: flex; gap: 18px; justify-content: center; }
.lnk { color: var(--mu); font-size: 13px; text-decoration: none; border-bottom: 1px solid transparent; padding: 2px 0; }
.lnk:hover { color: var(--tx); border-bottom-color: var(--bd); }
.lock-note { margin: 0; color: var(--mu); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.csheet .srcs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* textes des grandes cartes : plus de rectangles arrondis, des filets et des ornements propres à chaque support */
.card.big .bc-box { background: none; border: 0; border-radius: 0; padding: 2.2cqw 1cqw; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.card.big .bc-h { display: flex; align-items: center; gap: 2cqw; font-size: 2.6cqw; letter-spacing: .3em; text-transform: uppercase; opacity: .8; margin-bottom: 1.2cqw; }
.card.big .bc-h::before, .card.big .bc-h::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .3; }
.card.big .bc-quote { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; border-top: 0; }
.card.big .bc-quote.open { -webkit-line-clamp: unset; display: block; }
.card.big .bc-quote::first-letter { font-size: 1.9em; font-weight: 700; line-height: .9; }
.card.big .bc-quote.more:not(.open) { position: relative; }
.card.big .bc-quote.more.open::after { content: " ↗ résumé Wikipédia"; font-size: .8em; opacity: .6; font-style: normal; }
.sup-journal.big .bc-box { border-top: 3px double currentColor; }
.sup-parchemin.big .bc-quote::first-letter { color: #8c1d14; font-size: 2.4em; }
.sup-feuille.big .bc-box { border-top: 0; border-left: 1px solid #c0392b88; padding-left: 3cqw; }
.sup-roche.big .bc-box, .sup-papyrus.big .bc-box { border-top: 0; box-shadow: inset 0 1px 0 #0003, inset 0 -1px 0 #fff4; }
.sup-affiche.big .bc-box { border-top: 0; outline: 1px solid color-mix(in srgb, currentColor 40%, transparent); outline-offset: -1cqw; padding: 3cqw; }
.sup-tele.big .bc-skill { border-top: 0; background: linear-gradient(90deg, #c0392bcc, #c0392b33 80%, transparent); color: #fff; }
.sup-telephone.big .bc-box { border-top: 0; background: #ffffff1f; border-radius: 3cqw 3cqw 3cqw .6cqw; margin-top: 1cqw; }
/* polices : fidèles à l'époque mais lisibles */
.sup-feuille .c-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: calc(9.6cqw * var(--k)); }
.sup-runes .c-name { font-family: "Uncial Antiqua", "Cinzel", serif; text-transform: none; font-size: calc(7.8cqw * var(--k)); }
.sup-affiche .c-name { font-family: "Limelight", "Cinzel", serif; font-weight: 400; }
.card.big.sup-roche .bc-box, .card.big.sup-papyrus .bc-box, .card.big.sup-bambou .bc-box, .card.big.sup-runes .bc-box, .card.big.sup-parchemin .bc-box, .card.big.sup-feuille .bc-box { font-family: "Alegreya", Georgia, serif; font-size: 3.4cqw; }
.card.big.sup-livre .bc-box, .card.big.sup-journal .bc-box { font-family: "Lora", Georgia, serif; }
/* bulle d'explication sur la pastille de classe */
.tip-pill { position: relative; cursor: help; font: inherit; color: inherit; }
.tip-pill::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; width: max-content; max-width: 220px; padding: 7px 10px; border-radius: 8px; background: #111214f2; color: #f1ece0; font: 500 12px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .15s, translate .15s; z-index: 5; box-shadow: 0 6px 16px #0007; }
.tip-pill:hover::after, .tip-pill.show::after { opacity: 1; translate: -50% 0; }
/* petit effet du coup signature */
.sig-fx { display: inline-grid; place-items: center; width: 4.6cqw; height: 4.6cqw; flex: none; order: -1; }
.card.big .bc-h:has(.sig-fx)::before { display: none; }
.sig-fx .ico { width: 100%; height: 100%; }
.sig-fx { animation: sigfx 2.4s ease-in-out infinite; }
.fx-flash, .fx-tesla, .fx-lightning, .fx-radiation { animation: sigflick 1.6s steps(1) infinite; }
.fx-relativity, .fx-wave, .fx-gadget, .fx-cubes, .fx-stars { animation: sigspin 6s linear infinite; }
.fx-rage, .fx-charge, .fx-hammer, .fx-sword, .fx-spear { animation: sigstrike 1.8s ease-in infinite; }
.fx-poison, .fx-souls, .fx-bats, .fx-magic, .fx-ink { animation: sigfloat 2.6s ease-in-out infinite; }
@keyframes sigfx { 50% { transform: scale(1.18); filter: drop-shadow(0 0 1.2cqw currentColor); } }
@keyframes sigflick { 0%, 100% { opacity: 1; } 8% { opacity: .2; } 12% { opacity: 1; } 55% { opacity: .5; } 58% { opacity: 1; } }
@keyframes sigspin { to { transform: rotate(360deg); } }
@keyframes sigstrike { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(.6cqw) rotate(18deg) scale(1.2); } }
@keyframes sigfloat { 50% { transform: translateY(-.8cqw); opacity: .7; } }
.bc-skill.sig b { letter-spacing: .02em; }
/* Hauts faits : effets lisibles même longs */
.card.big.feat .bc-stats.two { grid-template-columns: 1fr; }
.card.big.feat .bc-stats.two b { font-size: 3.4cqw; line-height: 1.3; white-space: normal; font-weight: 600; }
.card.big.feat .bc-stats.two small { font-size: 2.6cqw; }
.card.big .feat-desc { -webkit-line-clamp: 8; }

/* onglet Packs : centré dans la page */
.screen-draw { min-height: calc(100dvh - 140px - var(--tabh, 0px)); display: grid; place-items: center; }
.screen-draw .draw-wrap { gap: 16px; }
.screen-draw .pack { width: min(62vw, 300px, 46vh); }
.draw-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* onglet Combat : une colonne */
.screen-fight { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.fight-set { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.fight-set .speed-pick { margin: 0; }
.music-t .ico { width: 15px; height: 15px; }
.screen-fight .panel { display: grid; gap: 10px; }
.fc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fc-h h3 { margin: 0; font: 600 20px var(--f-title); }
.screen-fight .enemy-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0; }
.screen-fight .enemy-row .card { --w: clamp(56px, 16vw, 104px); }
.vs { display: flex; justify-content: space-between; font-size: 13px; color: var(--mu); } .vs b { color: var(--tx); }
.warn { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-left: 2px solid var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); font-size: 13px; }
.warn .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--red); }
.fight-camp.weak { border-color: color-mix(in srgb, var(--red) 50%, var(--bd)); }
.screen-fight .panel > .btn { justify-self: start; }
.q-n b { font-size: 20px; }
.q-pips { display: flex; gap: 5px; }
.q-pips i { flex: 1; height: 6px; border-radius: 1px; background: var(--bd); }
.q-pips i.on { background: var(--acc); }
/* expédition : la destination en image, le temps comme une frise */
.panel.exp { padding: 0; overflow: hidden; }
.exp-scene { height: 150px; background: #222 center / cover; image-rendering: pixelated; position: relative; display: flex; align-items: flex-end; }
.exp-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, #000c); }
.exp-cap { position: relative; z-index: 1; padding: 12px 16px; display: grid; color: #f1ece0; }
.exp-cap small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.exp-cap b { font: 600 24px var(--f-title); line-height: 1.1; }
.exp-cap span { font-size: 12px; opacity: .8; }
.exp-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.exp-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ef-time { font: 600 18px var(--f-title); }
.exp-frieze { position: relative; height: 26px; margin: 0 8px; }
.ef-marks { position: absolute; inset: 9px 0 auto; height: 8px; display: flex; justify-content: space-between; border-top: 1px solid var(--bd); }
.ef-marks i { width: 1px; height: 5px; background: var(--mu); opacity: .6; } .ef-marks i.big { height: 9px; opacity: 1; }
.ef-fill { position: absolute; left: 0; top: 8px; height: 3px; background: var(--acc); transition: width 1s linear; box-shadow: 0 0 8px var(--acc); }
.ef-walker { position: absolute; top: 0; translate: -50% 0; width: 20px; height: 20px; border-radius: 50%; background: var(--sf); border: 1px solid var(--acc); display: grid; place-items: center; transition: left 1s linear; }
.ef-walker .ico { width: 13px; height: 13px; color: var(--acc); }
.exp.full .ef-walker { animation: pulse 1.4s infinite; }
.exp .dests { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.exp .dest { flex: none; width: 88px; height: 52px; border-radius: 6px; background: #333 center / cover; image-rendering: pixelated; position: relative; overflow: hidden; border: 1px solid var(--bd); opacity: .7; }
.exp .dest span { position: absolute; inset: auto 0 0; padding: 3px 5px; font-size: 10.5px; line-height: 1.15; color: #fff; background: linear-gradient(transparent, #000c); text-align: left; }
.exp .dest.on { opacity: 1; outline: 2px solid var(--acc); outline-offset: 1px; }
.exp-body > .btn { justify-self: start; }

/* boutique : toutes les cartes à la même taille */
.shop-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.offer { display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; }
.offer > .card, .offer > .pack { --w: 118px; width: 118px; cursor: pointer; }
.offer.sold > .card, .offer.sold > .pack { filter: grayscale(1) brightness(.6); }
.of-sub { font-size: 12px; min-height: 16px; }
.offer .btn { padding: 8px 12px; width: 118px; }
.pack.rare-pack .c-support { filter: hue-rotate(185deg) saturate(.8); }

/* social */
.social { max-width: 760px; margin: 0 auto; display: grid; gap: 4px; }
.soc-me { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bd); border-radius: 12px; }
.soc-me .grow, .soc-row .grow { display: grid; min-width: 0; }
.soc-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--bd); }
.soc-row .btn { padding: 8px 14px; }
.soc-sec > .btn { margin-top: 12px; }
.trade { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--bd); }
.tr-line { display: grid; gap: 4px; }
.tr-cards { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-cards .card { --w: 64px; }
.tr-sub { font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); margin: 16px 0 8px; }
.tr-pick { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.tr-pick .cell.sel .card { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.sticky-act { position: sticky; bottom: 0; background: var(--sf); padding: 10px 0; margin-top: 12px; gap: 8px; }

/* règles du jeu en images */
.rules { display: grid; gap: 6px; }
.rule { padding: 14px 0; border-top: 1px solid var(--bd); display: grid; gap: 10px; }
.rule h3 { margin: 0; font: 600 20px var(--f-title); }
.rule p { margin: 0; color: var(--mu); font-size: 14px; }
.r-backs { display: flex; justify-content: center; height: 86px; }
.r-backs i { width: 52px; height: 76px; border-radius: 5px; margin: 0 -10px; background: linear-gradient(135deg, #2a2b2f, #17181a); border: 1px solid #ffffff2a; rotate: calc((var(--i) - 2) * 9deg); translate: 0 calc(abs(var(--i) - 2) * 5px); box-shadow: 0 6px 14px #0006; animation: rfan .8s calc(var(--i) * .08s) both; }
@keyframes rfan { from { rotate: 0deg; translate: 0 20px; opacity: 0; } }
.r-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.r-facts > div { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--bd); border-radius: 8px; }
.r-facts b { font: 600 22px var(--f-title); } .r-facts span { font-size: 12px; color: var(--mu); } .r-facts .ico { width: 22px; height: 22px; }
.r-rars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.r-rar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.r-rar i { width: 100%; height: var(--h); background: linear-gradient(var(--rc), color-mix(in srgb, var(--rc) 30%, transparent)); border-radius: 3px 3px 0 0; animation: rgrow .9s ease-out both; transform-origin: bottom; }
.r-rar b { font-size: 11px; }
@keyframes rgrow { from { transform: scaleY(0); } }
.r-lock { display: flex; gap: 6px; align-items: center; }
.r-cls { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.r-c { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--bd); border-radius: 8px; }
.r-ci .ico { width: 24px; height: 24px; } .r-c small { color: var(--mu); font-size: 12px; } .r-c em { font-size: 12px; color: var(--acc); font-style: normal; }
.r-form { display: grid; justify-items: center; gap: 4px; }
.r-line { display: flex; gap: 8px; } .r-line i { width: 34px; height: 48px; border-radius: 4px; border: 1px solid var(--tx); opacity: .7; }
.r-form small { color: var(--mu); font-size: 11px; }
.r-aff { display: flex; justify-content: center; gap: 18px; } .r-aff .ico { width: 30px; height: 30px; animation: sigfx 2.4s ease-in-out infinite; }

/* tutoriel en images et visite guidée */
.onb .slide { min-height: 420px; align-content: center; }
.ob-art { position: relative; height: 210px; width: min(360px, 86vw); display: grid; place-items: center; }
.ob-art .card { --w: 92px; }
.ob-logo { color: #f1ece0; } .ob-logo svg { width: 96px; height: 60px; } .ob-logo.big svg { width: 120px; height: 75px; }
.ob-fan .ob-logo { position: absolute; top: -6px; z-index: 6; }
.ob-fan .ob-c { position: absolute; bottom: 0; rotate: calc(var(--i) * 12deg); translate: calc(var(--i) * 44px) calc(abs(var(--i)) * 10px); transform-origin: 50% 120%; animation: obfan .9s calc((var(--i) + 2) * .09s) both; }
@keyframes obfan { from { rotate: 0deg; translate: 0 40px; opacity: 0; } }
.ob-pack .pack { width: 110px; animation: float 3s ease-in-out infinite; }
.ob-pack .ob-out { position: absolute; animation: obout 2.8s calc((var(--i) + 1) * .25s) ease-out infinite; opacity: 0; }
@keyframes obout { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 30% { opacity: 1; } 60%, 100% { opacity: 1; transform: translate(calc(var(--i) * 110px), -40px) rotate(calc(var(--i) * 10deg)) scale(.85); } 100% { opacity: 0; } }
.ob-team { gap: 6px; align-content: center; } .ob-team .ob-row { display: flex; gap: 6px; justify-content: center; } .ob-team .card { --w: 62px; }
.ob-team .ob-link { position: absolute; left: 30%; right: 30%; top: 50%; height: 2px; background: var(--acc, #b0643c); box-shadow: 0 0 10px var(--acc, #b0643c); animation: oblink 1.8s ease-in-out infinite; }
@keyframes oblink { 0%, 100% { transform: scaleX(0); } 50% { transform: scaleX(1); } }
.ob-duel { grid-template-columns: 1fr auto 1fr; }
.ob-duel .ob-l { animation: obhitl 1.6s ease-in-out infinite; } .ob-duel .ob-r { animation: obhitr 1.6s ease-in-out infinite; }
.ob-spark { width: 30px; height: 30px; background: radial-gradient(#fff, transparent 70%); animation: obspark 1.6s infinite; }
@keyframes obhitl { 0%, 100% { transform: none; } 45% { transform: translateX(26px) rotate(6deg); } }
@keyframes obhitr { 0%, 100% { transform: none; } 45% { transform: translateX(-26px) rotate(-6deg); } }
@keyframes obspark { 0%, 40%, 70%, 100% { opacity: 0; transform: scale(.4); } 48% { opacity: 1; transform: scale(1.6); } }
.ob-loop { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ob-tile { display: grid; justify-items: center; gap: 2px; padding: 12px 16px; border: 1px solid #ffffff2a; border-radius: 10px; color: #f1ece0; animation: obtile .5s calc(var(--i) * .12s) both; }
.ob-tile .ico { width: 26px; height: 26px; } .ob-tile small { color: #a9a49a; }
@keyframes obtile { from { opacity: 0; transform: translateY(14px); } }
.ob-skip { color: #a9a49a; }
.coach { position: fixed; inset: 0; z-index: 130; }
.coach-spot { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px #000b; transition: all .3s ease; pointer-events: none; outline: 2px solid #f1ece0aa; }
.coach-bub { position: fixed; width: 290px; padding: 14px; border-radius: 12px; background: var(--sf); color: var(--tx); border: 1px solid var(--bd); box-shadow: 0 10px 30px #0008; display: grid; gap: 10px; transition: top .3s, left .3s; }
.coach-bub p { margin: 0; font-size: 14px; }
.coach-btns { display: flex; align-items: center; gap: 10px; } .coach-btns small { margin-right: auto; }

/* signalement avec capture */
.rep-thumb { position: relative; display: inline-block; margin: 8px 0; }
.rep-thumb img { max-width: 160px; max-height: 120px; border-radius: 6px; border: 1px solid var(--bd); display: block; }
.rep-thumb .iconbtn { position: absolute; top: -10px; right: -10px; background: var(--sf); }
.rep-tip { display: block; margin-top: 4px; }

/* combat : passer l'intro */
.arena .intro-skip { position: absolute; z-index: 3; left: 50%; translate: -50% 0; bottom: max(24px, env(safe-area-inset-bottom)); padding: 10px 18px; border-radius: 99px; background: #0b0b0dcc; color: #f1efea; border: 1px solid #ffffff40; font-weight: 600; }
.pack.std .emblem, .card.back .emblem { font-size: 15cqw !important; letter-spacing: -.04em; }

/* ===== v29 : retours du 9 nov. (soir) ===== */
/* paquets de 1 à 3 cartes : centrés, pas de vide à droite */
.pack-cards.n1, .pack-cards.n2, .pack-cards.n3 { width: auto; justify-content: center; }
.pack-cards.n1 { grid-template-columns: minmax(0, 200px); }
.pack-cards.n2 { grid-template-columns: repeat(2, minmax(0, 190px)); }
.pack-cards.n3 { grid-template-columns: repeat(3, minmax(0, 180px)); }
@media (max-width: 640px) { .pack-cards.n2 { grid-template-columns: repeat(2, minmax(0, 40vw)); } .pack-cards.n3 { grid-template-columns: repeat(3, minmax(0, 29vw)); } }
/* gain d'équipe : « +27 % » ne passe plus à la ligne */
.bc-stats .up { white-space: nowrap; font-size: 2.4cqw; letter-spacing: -.02em; }
/* pastilles de la grande carte : couleur de la matière (plus d'icônes blanches sur papier clair) */
:root[data-theme] .bc-icons .ipill { color: inherit; background: none; border-color: color-mix(in srgb, currentColor 38%, transparent); }
:root[data-theme] .bc-icons .ipill .il { color: var(--tx); }
/* deux familles : catégories (carrées, neutres) / atouts (rondes, teintées, sous un titre) */
.bc-tagrows { display: grid; gap: 1.6cqw; padding: 0 3.4cqw; }
.bc-tagrows .bc-tags { padding: 0; }
.bc-perkrow { display: flex; align-items: center; gap: 2cqw; padding-top: 1.6cqw; border-top: 1px dashed color-mix(in srgb, currentColor 28%, transparent); }
.bc-perk-h { font: 700 2.2cqw var(--f-body); letter-spacing: .16em; text-transform: uppercase; opacity: .7; flex: none; }
.bc-perks .ipill { border-radius: 99px !important; border-style: solid; background: color-mix(in srgb, #6fd08c 14%, transparent) !important; border-color: color-mix(in srgb, #4e9a63 70%, currentColor) !important; }
.bc-perks .ipill .ico { color: color-mix(in srgb, #3f8a55 65%, currentColor); }
/* coup signature : nom en grand au centre, animé selon l'attaque ; texte ; « Coup signature » en petit dessous */
.bc-skill.sig-big { text-align: center; display: grid; gap: 1.2cqw; justify-items: center; padding-top: 2.6cqw; padding-bottom: 2.2cqw; }
.sig-name { font: 700 6cqw/1.05 var(--f-title, Cinzel), Georgia, serif; letter-spacing: .03em; color: inherit; }
.sig-text { font-size: 3.2cqw; line-height: 1.35; opacity: .92; max-width: 92%; }
.sig-lbl { display: inline-flex; align-items: center; gap: 1.2cqw; font: 700 2.1cqw var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .65; }
.sig-lbl .sig-fx { width: 3.4cqw; height: 3.4cqw; order: 0; }
.sn-elec { animation: snElec 2.8s steps(1) infinite; }
@keyframes snElec { 0%, 100% { text-shadow: 0 0 0 transparent; } 8% { text-shadow: 0 0 1.4cqw #bfe4ff, 0 0 .3cqw #fff; opacity: .7; } 10% { opacity: 1; } 12% { text-shadow: 0 0 2cqw #bfe4ff; } 16% { text-shadow: none; } }
.sn-time { animation: snTime 4s ease-in-out infinite; }
@keyframes snTime { 0%, 100% { letter-spacing: .03em; filter: blur(0); } 50% { letter-spacing: .14em; filter: blur(.25px); opacity: .8; } }
.sn-strike { animation: snStrike 2.4s ease-in infinite; }
@keyframes snStrike { 0%, 70%, 100% { transform: none; } 74% { transform: translateX(-1.2cqw) skewX(-8deg); } 78% { transform: translateX(.8cqw) scale(1.06); } 84% { transform: none; } }
.sn-float { animation: snFloat 3.2s ease-in-out infinite; }
@keyframes snFloat { 0%, 100% { transform: translateY(0); text-shadow: 0 0 0 transparent; } 50% { transform: translateY(-.8cqw); text-shadow: 0 .6cqw 1.6cqw color-mix(in srgb, currentColor 35%, transparent); } }
.sn-ink { background: linear-gradient(90deg, currentColor 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: snInk 4.5s ease-in-out infinite; }
@keyframes snInk { 0% { background-position: 100% 0; } 40%, 85% { background-position: 0 0; } 100% { background-position: 100% 0; } }
.sn-wave { animation: snWave 2.6s ease-in-out infinite; }
@keyframes snWave { 0%, 100% { transform: skewY(0); } 25% { transform: skewY(-1.5deg) translateY(-.3cqw); } 75% { transform: skewY(1.5deg) translateY(.3cqw); } }
.sn-shield { animation: snShield 3s ease-in-out infinite; }
@keyframes snShield { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 .8cqw #a0d7f0, 0 0 2cqw #a0d7f055; } }
@media (prefers-reduced-motion: reduce) { .sig-name { animation: none !important; } }
/* Haut fait en grand = même disposition qu'un personnage */
.bc-stats.n2 { grid-template-columns: repeat(2, 1fr); }
.fs-count { text-align: center; margin: 2px 0 0; font-size: 13px; }
/* campagne trop difficile : drapeau rouge + bulle */
.weak-flag { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #b0453a; background: #b0453a22; color: #e06656; margin-left: 6px; cursor: help; padding: 0; }
.weak-flag .ico { width: 16px; height: 16px; }
.weak-flag::after { left: 0; translate: 0 4px; }
.weak-flag:hover::after, .weak-flag.show::after { translate: 0 0; }
.fc-h { flex-wrap: wrap; }
.anim-links { font-size: 12.5px; padding: 5px 11px; }
/* éditeur : 4 gros boutons de comparaison au-dessus de la liste */
.cmp-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 12px; }
.cmp-bar[hidden] { display: none; }
.cmp-big { display: grid; justify-items: center; gap: 1px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--bd); background: transparent; color: var(--tx); cursor: pointer; font: inherit; transition: background .15s, border-color .15s; }
.cmp-big b { font: 800 17px var(--f-body); letter-spacing: .04em; }
.cmp-big small { font-size: 11px; color: var(--mu); }
.cmp-big.on { border-color: var(--ok, #6fd08c); background: color-mix(in srgb, var(--ok, #6fd08c) 14%, transparent); }
.cmp-big.on small { color: var(--ok, #6fd08c); }
/* glisser : fantôme déplacé par transform, ombre simple (pas de filtre coûteux) */
.drag-ghost { left: 0 !important; top: 0 !important; translate: none !important; rotate: none !important; filter: none !important; box-shadow: 0 14px 26px #000a; border-radius: 6px; will-change: transform; }
.slot.drop { transform: none; outline-width: 3px; }
/* éditeur plus léger sur PC : pas d'effet coûteux sur la grille */
.tedit .grid-cards .card { transition: none; }
.tedit .grid-cards .card .c-shine { display: none; }
.tedit .grid-cards > .cell { contain: layout paint style; }
/* ===== Boutique : rue marchande ===== */
:root { --awn1: #2c2f37; --awn2: #b9ae95; --wood1: #5b3f27; --wood2: #33231a; --sign: #e9e0cb; --signtx: #2a2118; }
:root[data-theme="light"] { --awn1: #efe7d6; --awn2: #8f7d5f; --wood1: #8a6440; --wood2: #5b3f27; --sign: #fffaf0; --signtx: #2a2118; }
.screen-shop { max-width: 980px; margin: 0 auto; }
.stall { position: relative; margin: 26px 2px 30px; padding: 58px 12px 0; border: 1px solid var(--bd); border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #0000 40%, #00000022), var(--sf, #15171c); }
.stall-awn { position: absolute; left: -8px; right: -8px; top: -14px; height: 34px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(90deg, var(--awn1) 0 30px, var(--awn2) 30px 60px); box-shadow: 0 6px 10px #0005; }
.stall-awn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; background: radial-gradient(circle at 15px 0, var(--awn1) 14px, transparent 15px) 0 0 / 60px 12px repeat-x, radial-gradient(circle at 45px 0, var(--awn2) 14px, transparent 15px) 0 0 / 60px 12px repeat-x; }
.stall-sign { position: absolute; top: 26px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 7px; padding: 5px 16px; border-radius: 4px; background: var(--sign); color: var(--signtx); font: 600 17px "Cormorant Garamond", Georgia, serif; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 3px 8px #0006; z-index: 1; }
.stall-sign::before, .stall-sign::after { content: ""; position: absolute; top: -12px; width: 1px; height: 12px; background: var(--awn2); }
.stall-sign::before { left: 18%; } .stall-sign::after { right: 18%; }
.stall-sign .ico { width: 16px; height: 16px; }
.stall .shop-row { justify-content: center; align-items: end; padding: 6px 0 0; }
.stall-counter { position: relative; height: 20px; margin: 4px -13px 0; border-radius: 3px; background: repeating-linear-gradient(90deg, #0000 0 46px, #00000018 46px 48px), linear-gradient(180deg, var(--wood1), var(--wood2)); border-top: 3px solid color-mix(in srgb, var(--wood1) 70%, #fff); box-shadow: 0 8px 14px #0006; }
/* établi : plateau épais et pieds */
.st-bench .stall-awn { display: none; }
.st-bench { padding-top: 46px; margin-top: 10px; background: linear-gradient(180deg, #0000 50%, #00000026), repeating-linear-gradient(0deg, #0000 0 22px, #ffffff06 22px 23px), var(--sf, #15171c); }
.st-bench .stall-sign { top: 10px; }
.st-bench .stall-sign::before, .st-bench .stall-sign::after { display: none; }
.st-bench .stall-counter { height: 26px; margin-bottom: 26px; }
.st-bench .stall-counter::before, .st-bench .stall-counter::after { content: ""; position: absolute; top: 100%; width: 16px; height: 24px; background: linear-gradient(90deg, var(--wood2), var(--wood1), var(--wood2)); }
.st-bench .stall-counter::before { left: 26px; } .st-bench .stall-counter::after { right: 26px; }
/* prix : étiquette de papier */
.stall .offer .btn { position: relative; width: auto; min-width: 86px; padding: 6px 12px 6px 18px; border-radius: 3px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); background: var(--sign); color: var(--signtx); border: 0; font-weight: 700; }
.stall .offer .btn::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--wood2); }
.stall .offer .btn:disabled { opacity: .55; }
.stall .offer.sold .btn { background: transparent; color: var(--mu); clip-path: none; }
.stall .of-sub { font-size: 11.5px; }
/* texte de carte : coupé en fondu + flèche « Lire la suite », dépliage animé */
.card.big .bc-quote, .card.big .bc-quote.open { display: block; -webkit-line-clamp: unset; overflow: visible; cursor: default; }
.card.big .bc-quote.long { cursor: pointer; }
.card.big .bc-quote .qt { max-height: 9em; overflow: hidden; transition: max-height .45s cubic-bezier(.3, .8, .3, 1); }
.card.big.feat .bc-quote .qt { max-height: 12em; }
.card.big .bc-quote.long:not(.open) .qt { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.card.big .bc-quote .q-more { display: none; }
.card.big .bc-quote.long .q-more { display: flex; align-items: center; justify-content: center; gap: 1.4cqw; margin-top: .6cqw; font: 700 2.3cqw var(--f-body); font-style: normal; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.q-chev { width: 2.2cqw; height: 2.2cqw; border-right: .45cqw solid currentColor; border-bottom: .45cqw solid currentColor; rotate: 45deg; translate: 0 -.5cqw; transition: rotate .35s, translate .35s; }
.card.big .bc-quote.long:not(.open) .q-chev { animation: qbob 1.6s ease-in-out infinite; }
@keyframes qbob { 0%, 100% { translate: 0 -.6cqw; } 50% { translate: 0 .2cqw; } }
.card.big .bc-quote.open .q-chev { rotate: 225deg; translate: 0 .6cqw; }
.card.big .bc-quote.more.open::after { content: none; }
/* compétence de classe : même bloc que le coup signature, animation simple (léger souffle) */
.sn-calm { animation: snCalm 3.6s ease-in-out infinite; }
@keyframes snCalm { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .82; transform: scale(1.025); } }
.cls-skill .sig-name { font-size: 5.2cqw; }
.cls-skill .sig-fx .ico { width: 100%; height: 100%; }

/* ===== v32 : fiche = la grosse carte + son socle d'actions (plus de panneau gris autour) ===== */
.sheet:has(> div > .csheet), :root[data-theme] .sheet:has(> div > .csheet) { background: transparent; border: 0; box-shadow: none; padding-left: 10px; padding-right: 10px; }
.sheet:has(> div > .csheet) .grab, :root[data-theme] .sheet:has(> div > .csheet) .grab { background: transparent; }
.sheet:has(> div > .csheet) .grab i { background: #fff; opacity: .7; }
.sheet-bg:has(+ .sheet > div > .csheet) { background: #000c; backdrop-filter: blur(3px); }
.cs-card { width: min(100%, 560px); margin: 0 auto; display: grid; filter: drop-shadow(0 18px 30px #000c); container-type: inline-size; }
.cs-card > .card.big { width: 100%; margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
/* le socle : prolonge la carte, graphite sombre gravé, filet couleur de rareté ; ses propres couleurs quel que soit le thème */
.cs-plate {
  --tx: #ece4d2; --mu: #a39c8f; --bd: #ffffff26; --sf: #1b1d22; color: var(--tx);
  display: grid; gap: 12px; justify-items: center; padding: 16px 14px 18px; margin-top: -1px;
  border-radius: 0 0 4cqw 4cqw; border: 1px solid color-mix(in srgb, var(--rc) 45%, #ffffff22); border-top: 0;
  background: radial-gradient(120% 80% at 50% 0, #ffffff0d, transparent 60%), repeating-linear-gradient(90deg, #ffffff04 0 2px, transparent 2px 6px), linear-gradient(180deg, #202329, #121317);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--rc) 70%, transparent), inset 0 10px 18px #0008; }
.cs-plate .btn { background: #ffffff0d; border-color: var(--bd); color: var(--tx); }
.cs-plate .btn.gold { background: var(--tx); color: #16181d; border-color: var(--tx); }
.cs-plate .btn:disabled { opacity: .45; }
.cs-plate .lnk { color: var(--mu); }
.cs-plate .lnk:hover { color: var(--tx); }
.cs-plate .lock-note { color: var(--mu); }
.cs-plate .fs-slot { border-color: var(--bd); color: var(--mu); }
.csheet > .credit { opacity: .8; text-align: center; }
.csheet > .report-btn { top: -30px; }
/* Haut fait : le personnage et les exemplaires, en images */
.cs-ownrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 440px; }
.cs-owner { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; border: 1px solid var(--bd); background: #ffffff08; color: var(--tx); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.cs-owner:disabled { cursor: default; }
.own-face { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: visible; background: #000; }
.own-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--rc) 70%, #fff); display: block; }
.cs-owner.missing .own-face img { filter: grayscale(1) brightness(.45); border-color: #ffffff33; }
.own-badge { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #b0453a; color: #fff; border: 2px solid #16181d; }
.own-badge.on { background: #3f8a55; }
.own-badge .ico { width: 12px; height: 12px; }
.cs-owner.missing .own-face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px #b0453a88; }
.own-txt { display: grid; min-width: 0; line-height: 1.2; }
.own-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-txt small { font-size: 11.5px; color: var(--mu); }
.cs-owner.missing .own-txt small { color: #e07a6d; }
.cs-copies { display: flex; align-items: center; gap: 4px; flex: none; }
.cs-copies .cp { width: 16px; height: 23px; border-radius: 3px; border: 1.5px solid color-mix(in srgb, var(--rc) 80%, #fff); background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 45%, #222), #15161a); box-shadow: 0 2px 4px #0008; rotate: -4deg; }
.cs-copies .cp:nth-child(even) { rotate: 3deg; }
.cs-copies .cp.used { opacity: .35; }
.cs-copies .cp.ghost { display: grid; place-items: center; font: 700 12px var(--f-body); font-style: normal; color: var(--mu); border-style: dashed; border-color: var(--mu); background: none; rotate: 0deg; }
.cs-copies small { color: var(--mu); font-size: 12px; margin-left: 2px; }

/* ===== v33 ===== */
/* carte + socle : la carte se prolonge sans coin arrondi ni double filet au raccord */
.cs-card > .card.big .c-frame, .cs-card > .card.big .c-shine { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cs-card > .card.big .c-frame, :root[data-theme] .cs-card > .card.big .c-frame { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent); clip-path: inset(-3px -3px 0 -3px); }
.cs-plate { border-color: color-mix(in srgb, var(--rc) 70%, transparent); margin-top: 0; }

/* ===== Page Combat : bannière de campagne + trois médaillons ===== */
.screen-fight { display: grid; gap: 22px; max-width: 860px; margin: 0 auto; align-content: start; }
.fx-hero { position: relative; overflow: hidden; border-radius: 18px; min-height: 300px; padding: 18px 18px 16px; display: grid; gap: 12px; align-content: space-between; color: #f1ece0;
  background: #0d0e11 center / cover no-repeat; image-rendering: pixelated; box-shadow: 0 18px 40px -18px #000; isolation: isolate; }
.fx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0b0c0fcc 0%, #0b0c0f55 35%, #0b0c0fdd 78%, #0b0c0f 100%); }
.fx-hero.boss::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 0 2px #c9a24e88, inset 0 0 60px #c9a24e33; border-radius: inherit; }
.fh-top { display: flex; align-items: center; gap: 8px; }
.fh-top small { font: 700 11px var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.fh-title { display: block; font: 600 clamp(24px, 5vw, 34px)/1.05 "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; }
.fh-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.fh-side { display: grid; gap: 2px; }
.fh-side.them { text-align: right; }
.fh-side small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.fh-side b { font: 700 clamp(22px, 4.6vw, 30px) var(--f-body); }
.fx-hero.weak .fh-side.me b { color: #e98a7c; }
.fh-x { font: 600 22px "Cormorant Garamond", serif; opacity: .8; padding: 0 6px; border-left: 1px solid #ffffff33; border-right: 1px solid #ffffff33; }
.fh-enemies { display: flex; justify-content: center; padding: 6px 0 2px; }
.fh-enemies .card { --w: 76px; width: 76px; margin: 0 -10px; rotate: calc((var(--i) - var(--mid)) * 6deg); translate: 0 calc(var(--d) * 5px); box-shadow: 0 10px 18px #000a; transition: translate .2s; }
.fh-enemies .card:hover { translate: 0 -8px; z-index: 2; }
.fh-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fh-loot { display: flex; gap: 12px; font-size: 13px; opacity: .9; }
.fh-loot .ico { width: 15px; height: 15px; vertical-align: -.2em; }
.fx-hero .btn.gold { background: #f1ece0; color: #15171c; border-color: #f1ece0; padding: 11px 26px; font-size: 15px; }
.camp-track { display: flex; align-items: center; gap: 0; justify-content: center; }
.camp-track i { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #ffffff55; background: #0b0c0f; flex: none; display: grid; place-items: center; }
.camp-track i + i { margin-left: 18px; }
.camp-track i + i::before { content: ""; position: absolute; right: 100%; top: 50%; width: 19px; height: 1.5px; background: #ffffff33; }
.camp-track i.done { background: #f1ece0; border-color: #f1ece0; }
.camp-track i.done + i::before, .camp-track i.done::before { background: #f1ece0aa; }
.camp-track i.cur { width: 16px; height: 16px; border-color: #f1ece0; box-shadow: 0 0 0 4px #f1ece022; animation: trackpulse 1.8s ease-in-out infinite; }
@keyframes trackpulse { 50% { box-shadow: 0 0 0 7px #f1ece011; } }
.camp-track i.boss { width: 20px; height: 20px; border-color: #c9a24e; color: #c9a24e; }
.camp-track i.boss .ico { width: 12px; height: 12px; }
/* les trois médaillons */
.medals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; justify-items: center; }
.medal { display: grid; justify-items: center; gap: 6px; background: none; border: 0; color: var(--tx); font: inherit; cursor: pointer; padding: 0; text-align: center; }
.medal:disabled { cursor: default; opacity: .5; }
.md-disc { position: relative; width: clamp(92px, 24vw, 132px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transition: transform .2s; }
.medal:not(:disabled):hover .md-disc { transform: translateY(-3px); }
.md-disc svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.md-disc .trk { fill: none; stroke: var(--bd); stroke-width: 3; }
.md-disc .val { fill: none; stroke: var(--tx); stroke-width: 3.4; stroke-linecap: round; transition: stroke-dasharray .6s; }
.md-in { position: absolute; inset: 9%; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(circle at 50% 35%, #ffffff10, transparent 70%), var(--sf); box-shadow: inset 0 0 0 1px var(--bd), 0 10px 22px -10px #000; overflow: hidden; }
.md-in b { font: 700 clamp(26px, 6vw, 36px)/1 var(--f-body); }
.md-in small { font-size: 11px; color: var(--mu); }
.md-in .ico { width: 34%; height: 34%; }
.md-lbl { font: 600 13.5px var(--f-body); }
.md-sub { font-size: 11.5px; color: var(--mu); min-height: 1.3em; }
.medal.m-daily .md-in { background: radial-gradient(circle, #c9a24e22, transparent 70%), var(--sf); }
.medal.m-daily.done .md-in { color: var(--ok, #6fd08c); }
.medal.m-exp .md-in { background: #000 center / cover; image-rendering: pixelated; }
.medal.m-exp .md-in::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 40%, #000a); }
.medal.m-exp.full .val { stroke: #c9a24e; }
.md-dot { position: absolute; top: 6%; right: 6%; width: 14px; height: 14px; border-radius: 50%; background: #c9a24e; box-shadow: 0 0 0 3px var(--bg, #0d0e11); z-index: 2; }
/* réglages : une ligne discrète */
.fight-set { justify-content: center; opacity: .85; }
@media (min-width: 700px) { .fx-hero { min-height: 340px; padding: 24px 26px 20px; } .fh-enemies .card { --w: 92px; width: 92px; } }
/* bouton Vendre : une petite échoppe (auvent rayé festonné, devanture, comptoir) */
.cs-links { align-items: center; gap: 22px; }
.shop-btn { position: relative; display: grid; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--signtx, #2a2118); filter: drop-shadow(0 6px 10px #0009); transition: transform .15s; }
.shop-btn:not(:disabled):hover { transform: translateY(-2px); }
.shop-btn:not(:disabled):active { transform: translateY(1px); }
.shop-btn:disabled { opacity: .45; cursor: default; }
.sb-awn { position: relative; height: 16px; margin: 0 -7px; border-radius: 5px 5px 0 0; background: repeating-linear-gradient(90deg, #b0453a 0 14px, #efe6d2 14px 28px); }
.sb-awn::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px; background: radial-gradient(circle at 7px 0, #b0453a 6.5px, transparent 7px) 0 0 / 28px 7px repeat-x, radial-gradient(circle at 21px 0, #efe6d2 6.5px, transparent 7px) 0 0 / 28px 7px repeat-x; }
.sb-front { display: flex; align-items: center; gap: 10px; padding: 12px 18px 9px; min-width: 150px; justify-content: center; border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #e9e0cb, #d8ccb0); border-bottom: 5px solid #5b3f27; box-shadow: inset 0 -2px 0 #0002; }
.sb-lbl { font: 600 17px "Cormorant Garamond", Georgia, serif; letter-spacing: .04em; }
.sb-front b { font: 800 15px var(--f-body); display: inline-flex; align-items: center; gap: 3px; }
.sb-front b .ico { width: 15px; height: 15px; }
.sb-front small { font-size: 11.5px; opacity: .7; }
/* ===== v35 : le socle est DANS le cadre de la carte : un seul cadre, un seul filet, aucune jonction ===== */
.cs-card > .card.big .c-frame, .cs-card > .card.big .c-shine { border-radius: 4cqw; }
.cs-card > .card.big .c-frame, :root[data-theme] .cs-card > .card.big .c-frame { clip-path: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent), 0 14px 40px -16px #000c; }
.cs-card > .card.big { border-radius: 4cqw; }
.cs-card > .card.big .c-shine { display: none; }
.c-frame > .cs-plate { margin: 0; padding: 4cqw 2cqw 2cqw; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--f-body); font-style: normal; font-size: 14px; letter-spacing: 0; text-transform: none; }
@container (min-width: 0) { .c-frame > .cs-plate { padding-top: 16px; } }
/* bouton « Passer » des ouvertures de paquets */
.pack-skip { position: fixed; top: calc(14px + var(--safe-t, 0px)); right: 16px; z-index: 5; padding: 8px 16px; border-radius: 99px; border: 1px solid #ffffff40; background: #0009; color: #f1ece0; font: 600 14px var(--f-body); cursor: pointer; backdrop-filter: blur(4px); }
.pack-skip:hover { background: #000c; border-color: #ffffff80; }
/* bouton Vendre : échoppe sombre et monochrome, au trait comme les icônes */
.shop-btn { color: var(--tx); filter: none; }
.sb-awn { height: 14px; margin: 0 -6px; border: 1.5px solid color-mix(in srgb, var(--tx) 70%, transparent); border-bottom: 0; border-radius: 5px 5px 0 0;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--tx) 22%, transparent) 0 12px, transparent 12px 24px), #16181d; }
.sb-awn::after { top: calc(100% - 1px); height: 7px; background: radial-gradient(circle at 6px 0, #16181d 5px, color-mix(in srgb, var(--tx) 70%, transparent) 5.5px 6.5px, transparent 7px) 0 0 / 12px 7px repeat-x; }
.sb-front { background: linear-gradient(180deg, #1d2026, #131519); border: 1.5px solid color-mix(in srgb, var(--tx) 70%, transparent); border-top: 0; border-bottom: 3px solid color-mix(in srgb, var(--tx) 70%, transparent); border-radius: 0 0 5px 5px; box-shadow: 0 6px 12px #0007; padding-top: 13px; }
.sb-lbl { color: var(--tx); }
.sb-front b { color: var(--tx); }
.sb-front small { color: var(--mu); opacity: 1; }
.shop-btn:not(:disabled):hover .sb-front, .shop-btn:not(:disabled):hover .sb-awn { border-color: var(--tx); }

/* ===== v38 : échoppe Vendre au trait seul ; page Combat : expédition + bandeaux ===== */
.sb-awn { background: repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--tx) 55%, transparent) 11px 12.5px); }
.sb-awn::after { background: radial-gradient(circle at 6px 0, transparent 5px, color-mix(in srgb, var(--tx) 70%, transparent) 5.5px 6.5px, transparent 7px) 0 0 / 12px 7px repeat-x; }
.sb-front { background: none; box-shadow: none; }

.fight-modes { display: grid; gap: 14px; align-items: start; }
.fm-exp { margin: 0; }
.fm-exp .exp-scene { height: 120px; }
.exp-claim { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-claim .loot { display: flex; gap: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-side { display: grid; }
.fm-strip { display: grid; gap: 9px; padding: 14px 4px; border-top: 1px solid var(--bd); }
.fm-strip:last-child { border-bottom: 1px solid var(--bd); }
.fm-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fm-h small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mu); }
.fm-h b { font: 600 22px var(--f-title); line-height: 1; }
.fm-h b span { font-size: 14px; color: var(--mu); }
.fm-streak { font-size: 13px; color: var(--mu); display: inline-flex; align-items: center; gap: 3px; }
.fm-streak .ico, .fm-loot .ico, .fm-done .ico { width: 1.05em; height: 1.05em; }
.fm-notches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.fm-notches i { height: 6px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--tx) 35%, transparent); }
.fm-notches i.on { background: var(--tx); border-color: var(--tx); }
.fm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fm-info { display: grid; gap: 3px; min-width: 0; }
.fm-sub { font-size: 12px; color: var(--mu); font-variant-numeric: tabular-nums; }
.fm-loot { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.fm-loot i { font-style: normal; color: var(--mu); padding: 0 2px; }
.fm-rule { margin: 0; font-size: 14px; line-height: 1.35; }
.fm-faces { display: flex; }
.fm-face { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #222; border: 2px solid var(--rc, var(--bd)); margin-left: -8px; box-shadow: 0 0 0 2px var(--bg, #111); }
.fm-face:first-child { margin-left: 0; }
.fm-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.fm-strip .btn { flex: none; }
.fm-done { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--mu); }
.fm-daily.done .fm-rule { color: var(--mu); }
@media (min-width: 700px) {
  .fight-modes { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; }
  .fm-strip:first-child { border-top: 0; padding-top: 4px; }
}
.fm-daily .fm-info { gap: 7px; }

/* ===== v39 : éditeur d'équipe — appui simple = fiche, appui long = comparer, glisser = placer ===== */
.tedit .cell, .tedit .slot.full { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.tedit .cell.armed .card, .tedit .slot.armed .card { transform: scale(1.06); transition: transform .18s; box-shadow: 0 0 0 2px var(--tx); border-radius: 6px; }
.tedit .slot.dragging { opacity: .35; }
.cmp-bar.pop .cmp-big { animation: cmpIn .42s cubic-bezier(.2, 1.4, .4, 1) both; }
.cmp-bar.pop .cmp-big:nth-child(2) { animation-delay: .06s; }
.cmp-bar.pop .cmp-big:nth-child(3) { animation-delay: .12s; }
.cmp-bar.pop .cmp-big:nth-child(4) { animation-delay: .18s; }
@keyframes cmpIn { from { opacity: 0; transform: translateY(-14px) scale(.7); } to { opacity: 1; transform: none; } }
.tedit .slot.sel .card { animation: selPulse 1.6s ease-in-out infinite; }
@keyframes selPulse { 50% { box-shadow: 0 0 0 3px var(--tx); } }
.cs-hyp { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mu); margin-bottom: 6px; }
.cs-hyp .ico { width: 15px; height: 15px; }
.cs-hyp i { font-style: normal; font-size: 15px; letter-spacing: 0; }
.cs-hyp .fm-face { width: 28px; height: 28px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .cmp-bar.pop .cmp-big, .tedit .slot.sel .card { animation: none; } }

/* ===== v40 : bonus d'équipe en tuiles au trait (plus de pastilles vertes) ; formation collante ; images ===== */
.ipill.aff { height: auto; min-width: 54px; padding: 6px 9px 5px; border-radius: 6px; background: none; border: 1px solid color-mix(in srgb, var(--tx) 32%, transparent); justify-content: center; }
.ipill.aff .ii { font-size: inherit; }
.ipill.aff .aff-c { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; column-gap: 4px; row-gap: 2px; justify-items: center; align-items: center; }
.ipill.aff .aff-c .ico { width: 18px; height: 18px; grid-row: 1; color: var(--tx); opacity: .95; }
.ipill.aff .aff-c b { grid-row: 1; font: 600 16px/1 var(--f-title); color: var(--tx); }
.ipill.aff .aff-c .ab { grid-row: 2; grid-column: 1 / -1; font: 600 10.5px/1.1 var(--f-body); letter-spacing: .05em; color: var(--tx); opacity: .78; white-space: nowrap; }
.ipill.aff:hover, .ipill.aff.peek { border-color: var(--tx); }
.ipill.aff.off { border: 1px dashed color-mix(in srgb, var(--tx) 22%, transparent); background: none; }
.ipill.aff.off .aff-c .ico, .ipill.aff.off .aff-c b, .ipill.aff.off .aff-c .ab { color: var(--mu); opacity: 1; }
.affs { gap: 6px; }
.tedit .grid-cards > .cell { content-visibility: visible; }
@media (min-width: 761px) {
  .tedit-left { overflow: hidden; display: flex; flex-direction: column; }
  .tedit-team { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; }
  .tedit-team > .power, .tedit-team > .team-stage, .tedit-tools { flex: none; }
  .tedit-team .affs-wrap { min-height: 0; overflow-y: auto; align-self: stretch; scrollbar-width: thin; }
}
@media (max-width: 760px) { .tedit-team .affs-wrap { display: none; } }

/* ===== v41 : formation 2+3 aussi dans l'éditeur sur téléphone ; Atouts des cartes monochromes ; tuiles condensées ===== */
@media (max-width: 760px) {
  .formation.small { display: grid; gap: 6px; justify-items: center; }
  .formation.small .line { display: flex; gap: 7px; justify-content: center; }
  .formation.small .slot { width: min(17vw, 70px); } .formation.small .slot .card { --w: min(17vw, 70px); }
}
.bc-perks .ipill { background: none !important; border-color: color-mix(in srgb, currentColor 45%, transparent) !important; }
.bc-perks .ipill .ico { color: currentColor; }
.ipill.aff .aff-c .ab { font-size: 10px; letter-spacing: .06em; }@media (max-width: 559px) { .team-stage > .formation:not(.small) .slot { width: min(112px, calc((100vw - 56px) / 3)); } .team-stage > .formation:not(.small) .slot .card { --w: min(112px, calc((100vw - 56px) / 3)); } .team-stage > .formation:not(.small) .line { gap: 8px; } }
.bc-stats .up { color: inherit; opacity: .8; }
:root[data-theme] .bc-stats .up { color: inherit; }
.cmp-big.on { border-color: var(--tx); background: color-mix(in srgb, var(--tx) 12%, transparent); }
.cmp-big.on small { color: var(--tx); }

/* ===== v44 : page Combat — bannière Campagne + trois tuiles-photos de même forme ; réglages en icônes dans la bannière ===== */
.fh-set { position: absolute; top: 14px; right: 14px; display: flex; gap: 6px; z-index: 2; }
.fh-ico { height: 30px; min-width: 30px; padding: 0 9px; border-radius: 99px; border: 1px solid #f1ece055; background: #0b0c0f66; color: #f1ece0; font: 600 12px var(--f-body); letter-spacing: .04em; display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; backdrop-filter: blur(4px); }
.fh-ico:hover { border-color: #f1ece0; }
.fh-ico .ico { width: 15px; height: 15px; }
.ft-row { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 700px) { .ft-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.ft { position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; min-height: 196px; padding: 14px 15px 13px; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; color: #f1ece0; background: #101216; border: 1px solid #ffffff14; box-shadow: 0 14px 30px -18px #000; }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0b0c0fb3 0%, #0b0c0f40 38%, #0b0c0fd9 72%, #0b0c0f 100%); }
.ft-bg { position: absolute; inset: 0; z-index: -2; background: #15171c center / cover no-repeat; image-rendering: pixelated; }
.ft-collage { position: absolute; inset: 0; z-index: -2; display: flex; }
.ft-collage > * { flex: 1; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(.35) contrast(1.05); border-right: 1px solid #0b0c0f; }
.ft-collage > :last-child { border-right: 0; }
.ft-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.ft-top small { font: 700 11px var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.ft-ico { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #f1ece055; background: #0b0c0f66; color: #f1ece0; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.ft-ico:hover { border-color: #f1ece0; }
.ft-ico .ico { width: 15px; height: 15px; }
.ft-streak { display: inline-flex; align-items: center; gap: 3px; font: 600 13px var(--f-body); opacity: .85; }
.ft-streak .ico { width: 15px; height: 15px; }
.ft-body { display: grid; align-content: end; gap: 7px; }
.ft-title { font: 600 26px/1.05 var(--f-title); text-shadow: 0 2px 10px #000a; }
.ft-title span { font-size: 16px; opacity: .65; }
.ft-rule { font-size: 18px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ft-sub { font-size: 12px; opacity: .78; font-variant-numeric: tabular-nums; }
.ft-notches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.ft-notches i { height: 5px; border-radius: 2px; border: 1px solid #f1ece066; }
.ft-notches i.on { background: #f1ece0; border-color: #f1ece0; }
.ft .exp-frieze { margin: 0 9px; height: 22px; }
.ft .ef-marks { border-top-color: #f1ece055; }
.ft .ef-marks i { background: #f1ece0; }
.ft .ef-fill { background: #f1ece0; box-shadow: none; height: 2px; }
.ft .ef-walker { background: #0b0c0fcc; border-color: #f1ece0; width: 22px; height: 22px; }
.ft .ef-walker .ico { color: #f1ece0; }
.ft-exp.full .ef-walker { animation: pulse 1.4s infinite; }
.ft-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid #f1ece026; }
.ft-loot { display: flex; align-items: center; gap: 12px; font: 600 13px var(--f-body); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.ft-loot span { display: inline-flex; align-items: center; gap: 4px; }
.ft-loot .ico { width: 15px; height: 15px; }
.ft-btn { flex: none; padding: 8px 16px; border-radius: 99px; background: transparent; border: 1px solid #f1ece0; color: #f1ece0; font-size: 13.5px; }
.ft-btn:not(:disabled):hover { background: #f1ece01f; }
.ft-btn:disabled { border-color: #f1ece055; color: #f1ece088; filter: none; opacity: 1; }
.ft-exp.full .ft-btn:not(:disabled) { background: #f1ece0; color: #141416; }
.ft-state { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px var(--f-body); opacity: .75; text-align: right; }
.ft-state .ico { width: 14px; height: 14px; }
.ft-daily.done .ft-rule { opacity: .6; }
.dest-sheet .dests { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.dest-sheet .dest { height: 78px; border-radius: 10px; background: #333 center / cover; image-rendering: pixelated; position: relative; overflow: hidden; border: 1px solid var(--bd); opacity: .75; cursor: pointer; }
.dest-sheet .dest span { position: absolute; inset: auto 0 0; padding: 4px 7px; font-size: 12px; color: #fff; background: linear-gradient(transparent, #000c); text-align: left; }
.dest-sheet .dest.on { opacity: 1; outline: 2px solid var(--tx); outline-offset: 1px; }
@media (max-width: 699px) { .ft { min-height: 168px; } .fh-set { top: 12px; right: 12px; } }
/* fin de combat : une colonne par récompense, bien séparées */
.end-loot { display: flex; justify-content: center; align-items: stretch; margin: 2px 0 8px; }
.el-it { display: grid; justify-items: center; align-content: start; gap: 5px; padding: 4px 24px; border-left: 1px solid #f1ece02e; animation: elIn .5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(.2s + var(--i) * .14s); }
.el-it:first-child { border-left: 0; }
.el-it .ico { width: 22px; height: 22px; opacity: .85; }
.el-it b { font: 600 32px/1 var(--f-title); font-variant-numeric: tabular-nums; color: #f1ece0; }
.el-it small { font: 700 10.5px var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
@keyframes elIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) { .el-it { padding: 4px 13px; } .el-it b { font-size: 25px; } }.ft-collage > * { filter: grayscale(.5) brightness(.5) contrast(1.05); }
.ft-collage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, #0b0c0fcc, transparent 75%); }
.ft-loot { flex-wrap: nowrap; gap: 10px; white-space: nowrap; }
.ft-state { white-space: nowrap; }
.ft-btn { padding: 8px 14px; }
/* ===== v46 : page Combat en grille de 2 colonnes — Expédition 2 lignes, Campagne 3, Combats rapides 1, Défi 1 ===== */
.fx-grid { --u: 112px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(var(--u), auto); gap: 12px; }
@media (min-width: 700px) { .fx-grid { --u: 124px; gap: 14px; } }
.fx-grid > * { grid-column: 1 / -1; min-height: 0; }
.fx-grid > .ft-exp { grid-row: span 2; }
.fx-grid > .fx-camp { grid-row: span 3; min-height: 0; }
.fx-grid > .ft-quick, .fx-grid > .fd { grid-row: span 1; }
/* Combats rapides : une seule ligne */
.ft.ft-quick { min-height: 0; grid-template-rows: none; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 16px; }
.fq-l { display: grid; gap: 3px; }
.ft-lab { font: 700 11px var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .8; white-space: nowrap; }
.fq-l .ft-title { font-size: 30px; }
.fq-m { display: grid; gap: 8px; min-width: 0; }
.fq-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-quick .ft-collage::after { background: linear-gradient(90deg, #0b0c0fee 20%, #0b0c0f99 60%, #0b0c0fdd); }
/* Défi du jour : parchemin scellé, encre sombre */
.fd { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 18px 12px 14px; border-radius: 6px;
  background: linear-gradient(180deg, #efe6d2, #e0d3b8); color: #2a2118; box-shadow: inset 0 0 0 4px #efe6d2, inset 0 0 0 5px #8a7a5a66, 0 14px 30px -18px #000; }
.fd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 20% 0%, #fff6 0%, transparent 55%), radial-gradient(ellipse at 100% 100%, #8a6a3a22, transparent 60%); }
.fd-seal { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 0; rotate: -8deg;
  background: radial-gradient(circle at 35% 30%, #b04a39, #7a2519 70%); color: #f3e3c8; box-shadow: 0 0 0 3px #7a251955, 0 3px 6px #0005, inset 0 -3px 6px #0004; }
.fd-seal .ico { width: 18px; height: 18px; }
.fd-seal b { font: 700 15px/1 var(--f-title); }
.fd.done .fd-seal { background: radial-gradient(circle at 35% 30%, #6b6255, #3f3830 70%); }
.fd-mid { display: grid; gap: 3px; min-width: 0; }
.fd-mid small { font: 700 10.5px var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: #6b5a40; }
.fd-rule { margin: 0; font: 600 17px/1.2 var(--f-title); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-loot { display: flex; gap: 12px; font: 700 12.5px var(--f-body); color: #4a3c28; }
.fd-loot span { display: inline-flex; align-items: center; gap: 4px; } .fd-loot .ico { width: 14px; height: 14px; }
.fd-faces { display: flex; }
.fd-faces span { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; margin-left: -9px; border: 2px solid #efe6d2; background: #cbbd9f; box-shadow: 0 1px 3px #0004; }
.fd-faces span:first-child { margin-left: 0; }
.fd-faces img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: sepia(.35); }
.fd-btn { padding: 9px 18px; border-radius: 4px; border: 1.5px solid #2a2118; background: transparent; color: #2a2118; font: 700 13.5px var(--f-body); letter-spacing: .06em; cursor: pointer; }
.fd-btn:hover { background: #2a2118; color: #efe6d2; }
.fd-state { display: inline-flex; align-items: center; gap: 5px; font: 700 12.5px var(--f-body); color: #6b5a40; white-space: nowrap; }
.fd.done .fd-state { font: 700 14px var(--f-title); letter-spacing: .3em; text-transform: uppercase; color: #7a2519; border: 2px solid #7a2519; padding: 3px 8px; rotate: -6deg; }
.fd-state .ico { width: 14px; height: 14px; }
.fd.done .fd-rule { opacity: .55; }
@media (max-width: 560px) {
  .fd { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; }
  .fd-faces { display: none; }
  .fd-seal { width: 48px; height: 48px; }
  .fd-rule { font-size: 15px; }
  .ft.ft-quick { gap: 12px; padding: 10px 12px; }
  .fq-l .ft-title { font-size: 24px; }
  .ft-quick .ft-loot { display: none; }
}.ft-title, .fd-seal b, .el-it b { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1; }
@media (max-width: 560px) {
  .ft.ft-quick { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; }
  .ft-quick .fq-l { display: flex; align-items: baseline; gap: 10px; }
  .ft-quick > .ft-btn { grid-column: 2; grid-row: 1; }
  .ft-quick .fq-m { grid-column: 1 / -1; grid-row: 2; }
}
/* ===== v49 : plus de bouton pause — appui court sur l'arène = pause, appui long = accéléré tant qu'on appuie ===== */
.arena canvas { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:root .arena .hud button.boost, :root[data-theme] .arena .hud button.boost { background: #f1efea; color: #141416; border-color: #f1efea; }

/* ===== v52 : bouton « Monter l'équipe » au trait ; icône d'accélération ===== */
.team-up { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 2px auto 10px; padding: 8px 16px; border-radius: 99px; background: none; border: 1px solid color-mix(in srgb, var(--tx) 45%, transparent); color: var(--tx); font: 600 13.5px var(--f-body); cursor: pointer; }
.team-up:hover { border-color: var(--tx); }
.team-up .ico { width: 17px; height: 17px; }
.team-up small { display: inline-flex; align-items: center; gap: 4px; padding-left: 9px; border-left: 1px solid color-mix(in srgb, var(--tx) 25%, transparent); font: 600 12px var(--f-body); opacity: .75; font-variant-numeric: tabular-nums; }
.team-up small .ico { width: 13px; height: 13px; }

/* ===== v53 : gestes au trait (appui court, long, double, glisser), tutoriel complet, carte-guide du premier combat ===== */
.fg-tap, .fg-hold, .fg-dbl, .fg-drag { position: relative; display: inline-block; width: 30px; height: 30px; flex: none; color: currentColor; }
.fg-tap::before, .fg-hold::before, .fg-dbl::before, .fg-drag::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 1.6px solid currentColor; }
.fg-tap::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: fgTap 1.6s ease-out infinite; }
.fg-hold::before { background: currentColor; }
.fg-hold::after { content: ""; position: absolute; inset: 1px; border-radius: 50%; border: 1px dashed currentColor; animation: fgHold 4s linear infinite; }
.fg-dbl::before { margin-left: -10px; }
.fg-dbl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -2px; border-radius: 50%; border: 1.6px solid currentColor; }
.fg-drag::before { margin-left: -12px; }
.fg-drag::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 7px; margin: -4px 0 0 1px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: skewX(40deg); }
@keyframes fgTap { 0% { opacity: .9; transform: scale(.5); } 70%, 100% { opacity: 0; transform: scale(1.15); } }
@keyframes fgHold { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fg-tap::after, .fg-hold::after { animation: none; opacity: .5; } }
/* tutoriel */
.ob-gest { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-gest .ob-tile { padding: 12px 8px; }
.ob-cls { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ob-cls .ob-tile { padding: 9px 6px; } .ob-cls .ob-tile b { font-size: 13px; } .ob-cls .ob-tile small { font-size: 11px; }
.ob-rars { width: 100%; }
.ob-rars .r-rar b { color: var(--tx); }
.ob-one { grid-template-columns: auto auto; gap: 18px; }
.ob-one .card { --w: 118px; }
.ob-stats { display: grid; gap: 8px; text-align: left; }
.ob-stats b { font: 600 14px var(--f-body); letter-spacing: .14em; padding: 5px 12px; border: 1px solid #ffffff2a; border-radius: 99px; color: var(--tx); animation: obtile .5s calc(var(--i) * .12s) both; }
.coach.free { background: #000b; }
.coach-h { font: 600 16px var(--f-title); letter-spacing: .04em; }
.coach-bub { width: 310px; }
/* carte-guide du premier combat */
.fight-guide { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(380px, 90vw); display: grid; gap: 12px; padding: 20px 20px 18px; border-radius: 16px; background: #0b0b0de6; border: 1px solid #ffffff2a; color: #f1efea; backdrop-filter: blur(6px); box-shadow: 0 20px 50px -20px #000; }
.fight-guide .fg-k { font: 600 11px var(--f-body); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.fight-guide h3 { margin: 0; font: 600 22px var(--f-title); }
.fight-guide p { margin: 0; font-size: 13.5px; line-height: 1.4; opacity: .85; }
.fg-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #ffffff1a; }
.fg-row b { display: block; font-size: 14px; } .fg-row small { display: block; font-size: 12.5px; opacity: .75; }
.fight-guide .fg-hud { font-size: 12.5px; opacity: .7; }
.fight-guide .btn { justify-self: center; margin-top: 4px; }
/* ouverture de pack : rappel des gestes */
.pack-gest { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; pointer-events: none; font: 600 11.5px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: #f1ece0; opacity: .55; white-space: nowrap; }
.reveal.boost .pack-gest { opacity: 1; }
/* règles : les gestes */
.r-gest { display: grid; gap: 6px; }
.r-gest h4 { margin: 8px 0 0; font: 600 12px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.r-g { display: grid; grid-template-columns: 30px 120px 1fr; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--bd); font-size: 13.5px; }
.r-g b { font-weight: 600; } .r-g span { color: var(--mu); }
@media (max-width: 480px) { .r-g { grid-template-columns: 30px 1fr; } .r-g span { grid-column: 2; } }
/* v54 : le tuto avance d'un appui hors de la bulle */
.coach { cursor: pointer; } .coach-bub { cursor: default; }
.coach-tip, .ob-tip { font-size: 11px; letter-spacing: .08em; opacity: .5; text-align: center; }
.onb { cursor: pointer; }
.coach-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.coach-skip { font-size: 12px; white-space: nowrap; opacity: .7; }
.coach-btns { flex-wrap: nowrap; } .coach-btns button { white-space: nowrap; }

/* ===== v57 : bulle de tuto réorganisée — en-tête (bloc · étape | passer), titre, texte, pied (astuce | retour, suivant) ===== */
.coach-bub { width: min(330px, calc(100vw - 20px)); padding: 0; gap: 0; overflow: hidden; border-radius: 14px; }
.coach-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 9px; border-bottom: 1px solid var(--bd); }
.coach-k { font: 600 10.5px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); }
.coach-k span { letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.coach-skip { font-size: 12px; white-space: nowrap; color: var(--mu); padding: 0; }
.coach-skip:hover { color: var(--tx); }
.coach-h { display: block; padding: 13px 16px 0; font: 600 18px/1.2 var(--f-title); letter-spacing: .01em; }
.coach-p { margin: 0; padding: 6px 16px 14px; font-size: 14px; line-height: 1.45; color: var(--tx); opacity: .9; }
.coach-btns { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px 16px; border-top: 1px solid var(--bd); }
.coach-btns .coach-tip { margin-right: auto; font-size: 11.5px; letter-spacing: .02em; color: var(--mu); opacity: 1; text-align: left; }
.coach-btns .btn { padding: 7px 14px; font-size: 13.5px; white-space: nowrap; }
.coach-back { background: none; border: 1px solid var(--bd); }
/* ===== v58 : retours du site — cadenas au trait, affinités au toucher, images (fusion « luminosité » retirée), noms d'équipes ===== */
.cell.locked::after { content: ""; position: absolute; left: 50%; top: 44%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #0b0b0dcc; border: 1px solid #f1ece055; font-size: 0; }
.cell.locked::before { content: ""; position: absolute; left: 50%; top: 44%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 1; background: #f1ece0; -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 11h12v10H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3M12 15v2%22/%3E%3C/svg%3E') center / contain no-repeat; mask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 11h12v10H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3M12 15v2%22/%3E%3C/svg%3E') center / contain no-repeat; pointer-events: none; }
.c-portrait { isolation: isolate; }
.sup-roche .c-portrait img { mix-blend-mode: normal; }
.slot.linked .card { filter: none; box-shadow: 0 0 0 1px #e8d8b099, 0 0 18px #e8d8b066; border-radius: 6px; }
.affs-t { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.affs-t .ico { width: 14px; height: 14px; opacity: .6; }
.affs-t:hover .ico { opacity: 1; }
.ipill.aff:not(.off) { cursor: pointer; }
.team-stage .slot.full.armed .card { transform: scale(1.06); transition: transform .18s; box-shadow: 0 0 0 2px var(--tx); border-radius: 6px; }
.team-stage .slot.dragging { opacity: .35; }
.team-stage .slot.drop .card, .team-stage .slot.drop .plus { outline: 2px dashed var(--tx); outline-offset: 3px; }
.team-stage .slot.full { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.fh-side small { display: block; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-side.them small { margin-left: auto; }/* badges d'affinités : le compte collé à l'icône, en chiffres alignés */
.ipill.aff .aff-c { grid-template-columns: 1fr 1fr; column-gap: 5px; }
.ipill.aff .aff-c .ico { justify-self: end; }
.ipill.aff .aff-c b { justify-self: start; font: 600 13px/1 var(--f-body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; opacity: .85; }
.ipill.aff .aff-c:not(:has(b)) .ico { grid-column: 1 / -1; justify-self: center; }
.affs-h > .affs-t { font: 600 11px var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mu); }
.affs-h > .affs-t:hover { color: var(--tx); }

/* ===== v60 : pack sans bouton Continuer ; Or dans les échanges ===== */
.pack-cont { width: 100%; text-align: center; font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #f1ece0; opacity: .7; animation: pulse 1.8s infinite; }
.tr-gold { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border: 1px solid var(--bd); border-radius: 99px; font: 600 14px var(--f-body); font-variant-numeric: tabular-nums; align-self: center; }
.tr-gold .ico { width: 15px; height: 15px; }
.tr-goldin { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.tr-goldin .ico { width: 16px; height: 16px; flex: none; }
.tr-goldin input { width: 120px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--bd); background: transparent; color: var(--tx); font: 600 14px var(--f-body); font-variant-numeric: tabular-nums; }

/* ===== v61 : plus de boutons (prix sur le paquet, appui dans le vide) ; indications masquées à partir du niveau 5 ===== */
.pack-price { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 99px; border: 1px solid #f1ece0aa; background: #0b0c0fcc; color: #f1ece0; font: 700 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; backdrop-filter: blur(3px); }
.pack-price .ico { width: 15px; height: 15px; }
.pack-price.free { background: #f1ece0; color: #141416; border-color: #f1ece0; }
.draw-stage .pack { cursor: pointer; }
.draw-stage .pack.poor { opacity: .55; filter: grayscale(.4); }
.draw-tap { font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.tap-cont { font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #f1ece0; opacity: .7; animation: pulse 1.8s infinite; margin-top: 6px; }
.result { cursor: pointer; }
body.hints-off .pack-gest, body.hints-off .pack-hint, body.hints-off .pack-cont, body.hints-off .tap-cont, body.hints-off .draw-tap, body.hints-off .pack-tear { display: none !important; }.tedit-bar { position: relative; padding-top: max(20px, calc(env(safe-area-inset-top) + 12px)); justify-content: center; text-align: center; touch-action: none; cursor: grab; user-select: none; }
.tedit-bar h2 { flex: none; }
.tedit-grab { position: absolute; left: 50%; top: max(7px, env(safe-area-inset-top)); transform: translateX(-50%); display: block; }
.tedit-grab i { display: block; width: 48px; height: 5px; border-radius: 3px; background: var(--mu); opacity: .6; }
.tedit-bar:hover .tedit-grab i { opacity: 1; }.fg-wrap { position: absolute; inset: 0; z-index: 6; cursor: pointer; }
.fight-guide .tap-cont { text-align: center; }

/* ===== v63 : Combat tient dans l'écran, quel que soit l'appareil (la grille suit la hauteur ; les blocs se compactent) ===== */
main:has(> .screen-fight) { display: flex; flex-direction: column; }
main > .screen-fight { flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.screen-fight > .fx-grid { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(132px, 1.4fr) minmax(0, 3fr) auto; grid-auto-rows: auto; }
.screen-fight .fx-grid > * { grid-row: auto !important; min-height: 0; }
.screen-fight .ft.ft-exp { min-height: 0; container-type: size; padding-top: 10px; padding-bottom: 10px; gap: 6px; }
.screen-fight .ft-exp .ft-body { min-height: 0; align-content: center; gap: 4px; }
/* la frise reste toujours visible : on retire d'abord le libellé, puis la ligne de temps */
@container (max-height: 160px) { .ft-exp .ft-top { min-height: 0; } .ft-exp .ft-ico { width: 26px; height: 26px; } .ft-exp .ft-title { font-size: 21px; } .ft-exp .ft-foot { padding-top: 5px; } .ft-exp .ft-sub { display: none; } }
@container (max-height: 135px) { .ft-exp .ft-sub { display: none; } .ft-exp .exp-frieze { height: 18px; } .ft-exp .ef-walker { width: 18px; height: 18px; } }
.screen-fight .fx-hero { min-height: 0; container-type: size; grid-template-rows: auto auto minmax(0, 1fr) auto auto; align-content: stretch; gap: 8px; }
.screen-fight .fh-enemies { min-height: 0; container-type: size; align-items: center; padding: 0; }
.screen-fight .fh-enemies .card { --w: clamp(30px, calc(86cqh / 1.44), 96px); width: var(--w); }
@container (max-height: 46px) { .fh-enemies .card { display: none; } }
@container (max-height: 300px) { .fx-hero { padding-top: 12px; padding-bottom: 12px; } .fh-title { font-size: 24px; } .fx-hero .btn.gold { padding: 9px 22px; } }
@container (max-height: 240px) { .fx-hero .camp-track { display: none; } }
/* écran vraiment trop bas (téléphone couché) : on revient au défilement normal */
@media (max-height: 520px) {
  main:has(> .screen-fight) { display: block; }
  .screen-fight > .fx-grid { grid-template-rows: none; grid-auto-rows: auto; }
  .screen-fight .ft.ft-exp { container-type: normal; min-height: 150px; }
  .screen-fight .fx-hero { container-type: normal; min-height: 300px; }
  .screen-fight .fh-enemies { container-type: normal; min-height: 90px; }
  .screen-fight .fh-enemies .card { --w: 64px; }
}
/* ===== v63 : Équipe tient dans l'écran (les cartes prennent la place qui reste entre l'en-tête et les affinités) ===== */
main:has(> .screen-team) { display: flex; flex-direction: column; }
main > .screen-team { flex: 1 1 0; min-height: 0; width: 100%; max-width: min(1500px, 100%); display: flex; flex-direction: column; }
.screen-team > .team-head { margin: 8px 0 6px; flex: none; }
.screen-team > .team-up, .screen-team > .affs-wrap, .screen-team > p { flex: none; }
.screen-team > .affs-wrap { margin-top: 6px; }
.screen-team > .team-stage { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; padding: 4px 0; }
.screen-team > .team-stage > .formation:not(.small) { --sw: clamp(48px, min((100cqh - 56px) / 3.08, (100cqw - 24px) / 3.36), 270px); gap: calc(var(--sw) * .07); }
.screen-team > .team-stage > .formation:not(.small) .line { gap: calc(var(--sw) * .1); }
.screen-team > .team-stage > .formation:not(.small) .slot { width: var(--sw); }
.screen-team > .team-stage > .formation:not(.small) .slot .card { --w: var(--sw); }
@media (max-height: 520px) {
  main:has(> .screen-team) { display: block; }
  .screen-team > .team-stage { container-type: normal; }
  .screen-team > .team-stage > .formation:not(.small) { --sw: min(112px, calc((100vw - 56px) / 3)); }
}.screen-team > .team-head .power { width: auto; margin-right: auto; text-align: left; }
/* v64 : chaque élément de la campagne garde sa ligne (un élément masqué ne décale plus les autres) ; écrans bas : campagne resserrée */
.screen-fight .fx-hero > :nth-child(1) { grid-row: 1; } .screen-fight .fx-hero > .camp-track { grid-row: 2; } .screen-fight .fx-hero > .fh-enemies { grid-row: 3; }
.screen-fight .fx-hero > .fh-vs { grid-row: 4; } .screen-fight .fx-hero > .fh-foot { grid-row: 5; }
@container (max-height: 200px) { .fx-hero .fh-top small, .fx-hero .fh-side small { display: none; } .fx-hero .fh-side b { font-size: 22px; } }
@media (max-height: 700px) { .screen-fight .fx-hero { padding: 12px 16px; gap: 6px; } }
/* ===== v65 : défis du jour dans un tiroir à droite (languette au bord de l'écran, glisser vers la gauche) ===== */
.dd-tab { position: fixed; right: 0; top: 50%; translate: 0 -50%; z-index: 25; width: 46px; padding: 14px 0 12px 4px; display: grid; justify-items: center; gap: 6px;
  border-radius: 16px 0 0 16px; border: 1px solid #f1ece055; border-right: 0; background: linear-gradient(180deg, #1b1d23f2, #0d0e11f2); color: #f1ece0;
  box-shadow: -10px 0 26px -12px #000; backdrop-filter: blur(6px); cursor: grab; touch-action: none; user-select: none; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.dd-tab .ico { width: 18px; height: 18px; }
.dd-tab b { font: 700 16px/1 var(--f-body); font-variant-numeric: lining-nums tabular-nums; display: grid; place-items: center; }
.dd-tab b .ico { width: 15px; height: 15px; opacity: .8; }
.dd-tab small { writing-mode: vertical-rl; rotate: 180deg; font: 700 10px var(--f-body); letter-spacing: .26em; text-transform: uppercase; opacity: .7; }
.dd-grip { position: absolute; left: 5px; top: 50%; translate: 0 -50%; width: 3px; height: 26px; border-radius: 2px; background: #f1ece044; }
.dd-tab.live > .ico { animation: ddglow 2.4s ease-in-out infinite; }
@keyframes ddglow { 50% { filter: drop-shadow(0 0 6px #f1ece0aa); } }
.dd-tab:not(.live) { opacity: .75; }
.dd-bg { position: fixed; inset: 0; z-index: 30; background: #000a; opacity: 0; pointer-events: none; transition: opacity .28s; }
.dd-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 31; width: min(440px, 92vw); transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column; gap: 12px; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) 18px; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #17191e, #0d0e11); color: #f1ece0; border-left: 1px solid #f1ece026; box-shadow: -24px 0 50px -20px #000; touch-action: pan-y; }
.dd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #f1ece026; }
.dd-head small { font: 700 10.5px var(--f-body); letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.dd-head h2 { margin: 4px 0 0; font: 600 30px/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .02em; }
.dd-streak { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 5px; justify-items: start; padding: 6px 12px; border: 1px solid #f1ece055; border-radius: 99px; }
.dd-streak .ico { width: 15px; height: 15px; } .dd-streak b { font: 700 16px var(--f-body); } .dd-streak small { grid-column: 1 / -1; justify-self: center; font-size: 9px; letter-spacing: .2em; }
.dd-sub { margin: 0; font-size: 13px; line-height: 1.4; opacity: .7; }
.dd-list { display: grid; gap: 14px; padding-bottom: 6px; }
.dd-fd { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px 14px; padding: 14px 14px 12px; }
.dd-fd .fd-rule { -webkit-line-clamp: 3; }
.dd-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px dashed #2a211833; }
.dd-fd .fd-faces { display: flex; }
.dd-fd.facile .fd-seal { width: 50px; height: 50px; }
.dd-fd.difficile .fd-seal { width: 62px; height: 62px; }
.dd-fix { background: none; border: 0; cursor: pointer; padding: 6px 0; text-decoration: underline; text-underline-offset: 3px; }
.dd-fd.done .fd-state { rotate: -4deg; }
@media (max-width: 899px) { .dd-tab { top: 46%; } }.dd-pow { font: 700 13px var(--f-body); color: #2a2118; font-variant-numeric: tabular-nums; white-space: nowrap; } .dd-pow small { font-weight: 600; color: #6b5a40; }
.dd-side .fd-faces { margin-left: auto; }

/* ===== v69 : tout révéler = toutes les cartes se retournent ensemble, d'un geste léger ; paquets de victoire réunis ===== */
.pack-cards .pc.sync > .card { animation: pcsync .38s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--k, 0) * 35ms); }
@keyframes pcsync { from { transform: perspective(900px) rotateY(80deg) scale(.96); opacity: .3; } to { transform: none; opacity: 1; } }
.pack-cards.n6 { grid-template-columns: repeat(3, minmax(0, 170px)); width: auto; justify-content: center; }
@media (max-width: 640px) { .pack-cards.n6 { grid-template-columns: repeat(3, minmax(0, 27vw)); } }
@media (max-height: 820px) { .pack-cards.n6 { grid-template-columns: repeat(3, minmax(0, min(27vw, 18vh))); gap: 10px; } }
/* ===== v71 : recherche dans l'album ; échoppe = le prix seul ; boutons avec icône ; Combattre au centre ; temps d'expédition ; coup signature et Minions ===== */
.alb-search { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; padding: 0 6px 0 14px; height: 44px; border: 1px solid var(--bd, #f1ece033); border-radius: 99px; background: #ffffff08; color: var(--tx); cursor: text; }
.alb-search:focus-within { border-color: var(--tx); background: #ffffff0d; }
.alb-search > .ico { width: 18px; height: 18px; flex: none; opacity: .7; }
.alb-q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: inherit; font: 500 15px var(--f-body); }
.alb-q::placeholder { color: var(--mu); }
.alb-q::-webkit-search-cancel-button { display: none; }
.alb-qx { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--mu); cursor: pointer; visibility: hidden; }
.alb-qx:hover { color: var(--tx); background: #ffffff12; }
.alb-qx .ico { width: 15px; height: 15px; }
/* échoppe plus courte, sans « Vendre » : l'auvent tient dans la largeur du comptoir */
.shop-btn { justify-self: start; }
.sb-awn { height: 10px; margin: 0 -3px; }
.sb-awn::after { height: 5px; background-size: 12px 5px; }
.sb-front { min-width: 0; gap: 6px; padding: 9px 14px 7px; }
.sb-front b { font-size: 14.5px; }
/* boutons : icône + libellé, alignés */
.btn:has(> .ico + span), .ft-btn:has(> .ico), .fd-btn:has(> .ico) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.fd-btn .ico { width: 15px; height: 15px; }
/* campagne : Combattre au centre du face-à-face, gains centrés dessous */
.fh-vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.fx-hero .btn.gold.fh-go { padding: 11px 22px; border-radius: 99px; font-size: 15px; font-weight: 700; box-shadow: 0 8px 22px -8px #000; }
.fh-go .ico { width: 18px; height: 18px; }
.fh-foot { justify-content: center; }
.fh-loot { justify-content: center; flex-wrap: wrap; }
@container (max-height: 300px) { .fx-hero .btn.gold.fh-go { padding: 9px 16px; font-size: 14px; } }
@media (max-width: 420px) { .fx-hero .btn.gold.fh-go span { display: none; } .fx-hero .btn.gold.fh-go { padding: 12px; } .fh-go .ico { width: 22px; height: 22px; } }
/* expédition : le temps écoulé reste affiché, dans le pied du bloc */
.ft-exp .ft-foot .ft-time { display: inline-flex !important; align-items: center; gap: 5px; margin-left: auto; white-space: nowrap; opacity: .8; }
.ft-time .ico { width: 14px; height: 14px; }
/* coup signature : ce qui le déclenche */
.sig-when { font-size: 2.7cqw; line-height: 1.3; opacity: .7; font-style: italic; max-width: 92%; margin-top: .6cqw; }