/* Le défi du jour: its sheet (banner, party, boards) and its end of run. */
.defi-banner { position: relative; margin: -4px -4px 0; border: 3px solid var(--edge); border-radius: 6px; overflow: hidden; background: #1c1e20; }
.defi-banner canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.defi-plaque { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 10px 7px; background: linear-gradient(rgba(12, 13, 14, 0), rgba(12, 13, 14, .9)); }
.defi-plaque small { display: block; font-family: var(--pixel); font-size: .7rem; color: #ffe28a; }
.defi-plaque b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 1.1rem; color: var(--ink); }
.defi-banner.o-funeste .defi-plaque small { color: #ff9aa2; }
.defi-pitch { margin: 10px 2px 0; font-style: italic; color: #e6d9c0; line-height: 1.35; }
.defi-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 2px; }
.defi-facts span { padding: 5px 8px; background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 1px #3c4044; }
.defi-facts b { display: block; font-family: var(--pixel); font-weight: 400; color: var(--gold); }
.defi-facts small { color: var(--muted); font-size: .74rem; }
.defi-party { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.defi-hero { width: 100%; text-align: left; color: var(--ink); display: flex; align-items: center; gap: 10px; padding: 6px 9px; background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 1px #3c4044; }
.defi-hero canvas { flex: none; }
.defi-hero .dh-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.defi-hero .dh-text > b { font-family: var(--pixel); font-weight: 400; font-size: .9rem; }
.defi-hero .dh-text > small { color: var(--muted); font-size: .78rem; }
.defi-hero small .r-rare { color: var(--rare); } .defi-hero small .r-epique { color: var(--epic); } .defi-hero small .r-legendaire { color: var(--legend); }
.defi-hero .dh-skills { color: var(--muted); font-size: .72rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.defi-tabs { display: flex; gap: 4px; margin: 14px 0 6px; }
.defi-tabs button { flex: 1; font-family: var(--pixel); font-size: .8rem; padding: 7px 0; color: var(--muted); background: var(--bg-2); border: 2px solid var(--edge); border-radius: 4px; }
.defi-tabs button.on { color: #2a1a05; background: linear-gradient(#f3c45a, #d89a2b); }
.defi-board { display: flex; flex-direction: column; gap: 4px; }
.defi-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 9px; background: var(--panel); border: 2px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 1px #3c4044; }
.defi-row.me { box-shadow: inset 0 0 0 2px #b0702c; }
.defi-row.dim { opacity: .6; }
.defi-row .dr-rank { font-family: var(--pixel); font-weight: 400; color: var(--gold); text-align: center; }
.defi-row .dr-name { min-width: 0; } .defi-row .dr-name b { display: block; font-family: var(--pixel); font-weight: 400; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.defi-row .dr-res { font-size: .78rem; color: var(--muted); text-align: right; } .defi-row .dr-res.good { color: var(--ok); }
.defi-track { display: flex; gap: 2px; margin-top: 3px; }
.defi-track i { width: 14px; height: 5px; background: #1c1e20; border: 1px solid var(--edge); }
.defi-track i.f { background: var(--gold); } .defi-track i.b { background: var(--ok); }
.defi-fanion { margin: 8px 0 0; font-size: .84rem; color: var(--gold); }
.defi-reward { margin: 10px 0 2px; padding: 7px 9px; font-size: .84rem; background: #2b2418; border: 2px solid var(--edge); border-radius: 4px; box-shadow: inset 0 0 0 1px #5a4630; }
.defi .btn.big { margin: 4px 0 2px; }
.defi-rank { display: flex; align-items: center; gap: 12px; margin: 12px 0 8px; padding: 10px; background: #1c1e20; border: 2px solid var(--edge); border-radius: 4px; }
.defi-rank .dr-big { font-family: var(--pixel); font-weight: 400; font-size: 2.2rem; color: var(--gold); line-height: 1; }
.defi-rank p { margin: 0; display: flex; flex-direction: column; gap: 2px; } .defi-rank small { color: var(--muted); }