/* RUSH TABLE G v3 — menus « méta » : bordeaux / rouge vin, gris charcoal, accents or. 100 % CSS, original. */
:root {
  --wine: #8e2236; --wine2: #6d1a2a; --wine3: #4a1420; --char: #3a3a3f; --char2: #2b2b2e; --char3: #1d1d20; --gold: #d4af37; --gold2: #f2cc63; --cream: #fdf9f3;
  --meander-g: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0 7.25H5.5V1.5H11V5H8V3.25' fill='none' stroke='%23d4af37' stroke-width='1.3'/><path d='M5.5 7.25H16' fill='none' stroke='%23d4af37' stroke-width='1.3'/></svg>");
  --marble: repeating-linear-gradient(62deg, transparent 0 9px, rgba(140,128,112,.16) 9px 10px, transparent 10px 23px), repeating-linear-gradient(-28deg, transparent 0 17px, rgba(160,150,135,.12) 17px 18px, transparent 18px 31px),
    linear-gradient(125deg, #fbfaf7 0%, #e9e6df 18%, #fdfcf9 26%, #d9d4ca 31%, #faf8f3 40%, #ece8e0 58%, #fff 66%, #d8d2c6 70%, #f7f5f0 82%, #e4dfd6 100%);
}
body { background: var(--char3); }
#scene { background: radial-gradient(130% 62% at 50% -4%, #a3293f 0%, #6d1a2a 26%, #3a1a20 48%, #2b2b2e 70%, #1d1d20 100%); }
#scene::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 7px); pointer-events: none; }
#scene .rays { background: repeating-conic-gradient(from 0deg, rgba(255,215,150,.06) 0 5deg, transparent 5deg 15deg); }
.frieze { height: 8px; flex: none; background: linear-gradient(90deg, var(--wine3), var(--wine2) 50%, var(--wine3)); position: relative; box-shadow: 0 2px 6px rgba(0,0,0,.4); z-index: 2; }
.frieze::after { content: ""; position: absolute; inset: 0; background: var(--meander-g) repeat-x center / 16px 8px; opacity: .75; }
.key { background: var(--wine3) var(--meander-g) repeat-x center / 20px 10px; }
.screen.meta { color: #fff; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.center { text-align: center; }
.note { font-size: 12.5px; color: rgba(255,255,255,.62); text-align: center; margin: 10px 14px; line-height: 1.35; }
.sheet .note { color: #75666a; }
.hidden { display: none !important; }

/* ---------- Pastilles de notification ---------- */
.bdg { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: linear-gradient(#ff5a5f, #d6262f); color: #fff; font: 800 11px/15px system-ui, sans-serif;
  border: 2px solid var(--char3); box-shadow: 0 2px 4px rgba(0,0,0,.4); z-index: 6; text-align: center; font-style: normal; }
.bdg.up { background: linear-gradient(#5bd473, #2b8a3e); top: -4px; right: -4px; }

/* ---------- Panneaux inclinés (fond biseauté via pseudo-élément : le contenu reste droit) ---------- */
.tile, .passbar, .rankplate, .playbtn, .dp, .mission, .mode, .lrow, .offer, .sacoffer, .freesac, .invsac, .xchg, .olyoffer, .colhead, .teamhead, .passhead, .drafthead, .setp, .seg button, .cur, .gear, .claim, .chal, .buy, .lvb {
  position: relative; isolation: isolate; }
.tile::before, .passbar::before, .rankplate::before, .playbtn::before, .dp::before, .mode::before, .colhead::before, .teamhead::before, .passhead::before, .drafthead::before, .freesac::before, .sacoffer::before, .xchg::before, .olyoffer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-7deg); border-radius: 6px;
  background: linear-gradient(165deg, #45454b, var(--char2) 60%, #242427); border: 1px solid rgba(212,175,55,.32); box-shadow: 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }

/* ---------- Barre du haut ---------- */
.mtop { display: flex; align-items: center; gap: 8px; padding: 8px 10px 7px; flex: none; background: linear-gradient(#2b2b2e, #232326); position: relative; z-index: 3; }
.ava { position: relative; width: 50px; height: 50px; border: 0; padding: 0; background: none; flex: none; }
.ava .ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--gold2) var(--p), rgba(255,255,255,.14) 0); padding: 3px; display: block; box-shadow: 0 0 10px rgba(212,175,55,.35); }
.ava .face { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #b8384f, var(--wine2) 70%); border: 2px solid var(--char2);
  font: 900 17px var(--serif); color: #fff3d0; letter-spacing: .5px; }
.ava .lv { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 24px; height: 17px; padding: 0 5px; border-radius: 5px; background: linear-gradient(#ffe08a, #c9962f); color: #3d2a00; font: 900 11px/17px system-ui, sans-serif; border: 1.5px solid var(--char2); }
.ava.lg { width: 86px; height: 86px; margin: 0 auto 8px; display: block; } .ava.lg .face { font-size: 28px; } .ava.lg .lv { font-size: 13px; height: 21px; line-height: 21px; min-width: 32px; }
.who { flex: 1; min-width: 0; line-height: 1.15; }
.who .wn { font: 900 14px var(--serif); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who .wr { font-size: 11.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.curs { display: flex; gap: 6px; flex: none; }
.cur { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 6px; height: 28px; }
.cur::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-14deg); border-radius: 4px; background: linear-gradient(#1a1a1c, #2e2e33); border: 1px solid rgba(212,175,55,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.cur i { font-style: normal; font-size: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.cur span { font: 800 13.5px system-ui, sans-serif; color: #ffe8a3; min-width: 22px; text-align: right; }
.cur.ol span { color: #d8f0a0; }
.cur.bump { animation: curb .5s ease; }
@keyframes curb { 40% { filter: brightness(1.6) drop-shadow(0 0 8px #ffd36b); } }
.curs.mini .cur { height: 24px; padding: 2px 8px 2px 5px; } .curs.mini .cur span { font-size: 12px; }
.gear { width: 34px; height: 34px; border: 0; color: #f2e6d0; font-size: 18px; background: none; flex: none; }
.gear::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-10deg); border-radius: 6px; background: linear-gradient(#45454b, #2b2b2e); border: 1px solid rgba(255,255,255,.18); }

/* ---------- Barre d'onglets ---------- */
.tabbar { flex: none; display: flex; align-items: flex-end; height: calc(62px + var(--safe-bot)); padding-bottom: var(--safe-bot); position: relative; z-index: 4;
  background: linear-gradient(#2f2f33, #1b1b1e); border-top: 1px solid rgba(212,175,55,.55); box-shadow: 0 -6px 16px rgba(0,0,0,.45); }
.tabbar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--meander-g) repeat-x center / 10px 5px; opacity: .35; }
.tab { flex: 1; height: 62px; border: 0; background: none; color: rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; padding: 0; }
.tab .ti svg { width: 25px; height: 25px; fill: currentColor; display: block; }
.tab .tl { font: 800 10.5px var(--sans); letter-spacing: .6px; text-transform: uppercase; }
.tab.on { color: var(--gold2); }
.tab.on:not(.mid)::after { content: ""; position: absolute; left: 18%; right: 18%; top: 2px; height: 3px; border-radius: 2px; background: var(--gold2); box-shadow: 0 0 10px var(--gold2); }
.tab .bdg { top: 4px; right: calc(50% - 22px); }
.tab.mid { flex: 1.25; height: 76px; margin-top: -14px; color: #fff3d0; z-index: 2; }
.tab.mid::before { content: ""; position: absolute; inset: 4px 6px 6px; z-index: -1; transform: skewX(-9deg); border-radius: 9px; background: linear-gradient(170deg, #c2334d, var(--wine) 45%, var(--wine3)); border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px var(--char3), 0 -4px 16px rgba(194,51,77,.55), inset 0 2px 0 rgba(255,255,255,.25); }
.tab.mid .ti svg { width: 31px; height: 31px; filter: drop-shadow(0 0 6px rgba(255,200,120,.75)); }
.tab.mid .tl { font-size: 12px; font-family: var(--serif); font-weight: 900; }
.tab.mid.on::before { animation: midglow 2.4s ease-in-out infinite; }
@keyframes midglow { 50% { box-shadow: 0 0 0 2px var(--char3), 0 -6px 26px rgba(255,120,120,.85), inset 0 2px 0 rgba(255,255,255,.3); } }
.tab.mid .bdg { right: 10px; top: 2px; }

/* ---------- Principal ---------- */
.home { display: flex; flex-direction: column; gap: 11px; padding: 12px 14px 4px; min-height: 100%; }
.passbar { display: flex; align-items: center; gap: 10px; border: 0; color: #fff; text-align: left; padding: 9px 14px 15px; margin: 0 4px; }
.passbar::before { background: linear-gradient(100deg, var(--wine3), var(--wine) 55%, #a3293f); border-color: rgba(242,204,99,.6); }
.pbl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pbl small { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.pbl b, .secth span, .subtop h2, .teamhead b, .mh b, .playbtn .pl { font-family: var(--serif); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .5px; }
.pbl b { font-size: 17px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.pbt { display: flex; align-items: baseline; gap: 1px; background: linear-gradient(#ffe08a, #c9962f); color: #3d2a00; padding: 3px 10px; border-radius: 4px; transform: skewX(-10deg); box-shadow: 0 0 12px rgba(242,204,99,.6); }
.pbn { font: 900 20px system-ui, sans-serif; } .pbt small { font-weight: 800; font-size: 11px; }
.pbp { position: absolute; left: 14px; right: 20px; bottom: 6px; height: 5px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; }
.pbp i, .prog i { display: block; height: 100%; background: linear-gradient(90deg, #c9962f, #ffe08a); box-shadow: 0 0 8px rgba(242,204,99,.8); border-radius: inherit; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 4px; }
.tile { border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px 8px; background: none; }
.tile .tic { font-size: 22px; line-height: 1.1; }
.tile b { font: 900 12.5px var(--serif); text-transform: uppercase; font-style: italic; letter-spacing: .5px; }
.tile small { font-size: 10.5px; opacity: .78; white-space: nowrap; }
.showcase { position: relative; height: 196px; flex: none; margin-top: 2px; }
.showcase::before { content: ""; position: absolute; left: 50%; top: 46%; width: 300px; height: 230px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(242,204,99,.30), rgba(194,51,77,.16) 55%, transparent); pointer-events: none; }
.showcase::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 230px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); }
.fan { position: absolute; left: 50%; top: 14px; transform-origin: 50% 100%; z-index: 1; }
.fan .hc { zoom: 1.32; }
.fan.f0 { transform: translateX(-50%) scale(1.06); z-index: 3; top: 6px; }
.fan.f1 { transform: translateX(-118%) rotate(-11deg) scale(.92); }
.fan.f2 { transform: translateX(18%) rotate(11deg) scale(.92); }
.rankplate { display: flex; align-items: center; gap: 10px; padding: 8px 14px; margin: 0 6px; }
.rankplate .ri { font-size: 24px; filter: drop-shadow(0 0 6px rgba(242,204,99,.7)); }
.rankplate .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rankplate .rt b { font: 900 14px var(--serif); color: #ffe8a3; text-transform: uppercase; }
.rankplate .rt small { font-size: 11.5px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankplate .rb { height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; margin-top: 4px; display: block; }
.rankplate .rb i { display: block; height: 100%; background: linear-gradient(90deg, #c9962f, #ffe08a); }
.streak { font: 900 14px system-ui; color: #ffb347; background: rgba(255,120,40,.15); border: 1px solid rgba(255,140,60,.6); padding: 2px 8px; border-radius: 10px; }
.playbtn { border: 0; height: 82px; margin: 4px 6px 0; color: #fff; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.playbtn::before { transform: skewX(-10deg); border-radius: 10px; border: 2px solid var(--gold2); background: linear-gradient(175deg, #d43c57 0%, var(--wine) 45%, var(--wine3) 100%);
  box-shadow: 0 0 0 3px var(--char3), 0 0 26px rgba(255,90,110,.55), 0 10px 22px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.28), inset 0 -6px 12px rgba(0,0,0,.3); animation: playglow 2.2s ease-in-out infinite; }
.playbtn::after { content: ""; position: absolute; inset: 2px 10px; z-index: -1; transform: skewX(-10deg); border-radius: 8px; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%) -200% 0 / 200% 100% no-repeat; animation: playsheen 3.2s ease-in-out infinite; }
@keyframes playglow { 50% { box-shadow: 0 0 0 3px var(--char3), 0 0 44px rgba(255,120,130,.9), 0 10px 22px rgba(0,0,0,.5), inset 0 3px 0 rgba(255,255,255,.28), inset 0 -6px 12px rgba(0,0,0,.3); } }
@keyframes playsheen { 0%, 50% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.playbtn .pl { font-size: 40px; line-height: 1; letter-spacing: 6px; text-shadow: 0 3px 0 rgba(60,0,10,.6), 0 0 18px rgba(255,220,160,.55); }
.playbtn small { font-size: 12.5px; font-weight: 700; opacity: .92; margin-top: 2px; letter-spacing: .3px; }
.deckpick { display: flex; gap: 10px; padding: 0 6px; }
.dp { flex: 1; min-width: 0; border: 0; background: none; color: #fff; height: 38px; font: 700 13.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.dp.lvl { flex: 0 0 auto; padding: 0 14px; }

/* ---------- Écrans secondaires ---------- */
.subtop { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex: none; background: linear-gradient(#2b2b2e, #232326); }
.subtop h2 { flex: 1; margin: 0; font-size: 19px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secth { display: flex; align-items: center; justify-content: space-between; margin: 16px 14px 8px; gap: 8px; }
.secth span { font-size: 15px; color: #ffe8a3; }
.secth small { font-size: 12px; opacity: .8; }
.seg { display: flex; gap: 8px; margin: 12px 14px 4px; }
.seg button { flex: 1; height: 38px; border: 0; color: rgba(255,255,255,.75); font: 900 14px var(--serif); font-style: italic; text-transform: uppercase; background: none; }
.seg button::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 5px; background: #2b2b2e; border: 1px solid rgba(255,255,255,.14); }
.seg button.on { color: #3d2a00; } .seg button.on::before { background: linear-gradient(#ffe08a, #c9962f); border-color: #fff3c4; box-shadow: 0 0 12px rgba(242,204,99,.5); }
.timer { text-align: center; font-size: 12.5px; color: #ffe8a3; margin: 8px 0 4px; }
.mission { display: flex; align-items: center; gap: 10px; margin: 10px 16px; padding: 10px 12px; }
.mission::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-5deg); border-radius: 6px; background: linear-gradient(165deg, #45454b, #2b2b2e); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 5px 12px rgba(0,0,0,.35); }
.mission.ready::before { border-color: var(--gold2); box-shadow: 0 0 16px rgba(242,204,99,.45), 0 5px 12px rgba(0,0,0,.35); }
.mission.claimed { opacity: .5; }
.mtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mtx b { font-size: 14.5px; line-height: 1.2; }
.mrw { font-size: 12px; color: #ffe8a3; }
.mtx small { font-size: 11px; opacity: .7; align-self: flex-end; margin-top: -2px; }
.prog { height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; margin: 4px 0 2px; display: block; }
.prog.big { height: 11px; }
.prog.sm { height: 5px; width: 90px; display: inline-block; vertical-align: middle; margin: 0 0 0 6px; }
.claim, .buy, .chal { border: 0; padding: 8px 13px; font: 900 13px var(--serif); font-style: italic; text-transform: uppercase; color: #3d2a00; background: none; white-space: nowrap; flex: none; }
.claim::before, .buy::before, .chal::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 5px; background: linear-gradient(#ffe9a0, #d9a93a); border: 1px solid #fff3c4; box-shadow: 0 3px 0 #8a6512, 0 0 14px rgba(242,204,99,.45); }
.claim::before { animation: claimglow 1.4s ease-in-out infinite; }
@keyframes claimglow { 50% { box-shadow: 0 3px 0 #8a6512, 0 0 26px rgba(255,220,120,.95); } }
.buy:disabled, .chal:disabled { color: rgba(255,255,255,.55); } .buy:disabled::before { background: #3a3a3f; border-color: rgba(255,255,255,.15); box-shadow: none; }
.chal { color: #fff; font-size: 12px; padding: 7px 11px; } .chal::before { background: linear-gradient(#c2334d, var(--wine2)); border-color: rgba(242,204,99,.6); box-shadow: 0 3px 0 #3d0f19; }
.claim .bdg { top: -9px; right: -10px; }
.mok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #2b8a3e; color: #fff; font-weight: 900; flex: none; }
.reroll { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: #2b2b2e; font-size: 15px; flex: none; }

/* ---------- Passe ---------- */
.passhead { margin: 12px 16px 6px; padding: 12px 16px; text-align: center; }
.passhead::before { background: linear-gradient(160deg, var(--wine), var(--wine3)); border-color: rgba(242,204,99,.55); }
.ph1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph1 small { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.ph1 b { font: 900 21px var(--serif); font-style: italic; text-transform: uppercase; color: #ffe8a3; }
.ph1 span { font-size: 12px; opacity: .85; }
.passhead > small { font-size: 12px; opacity: .85; }
.passhead .note { margin: 6px 0 0; }
.track { position: relative; margin: 10px 16px 0 14px; padding-left: 4px; }
.track::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 4px; border-radius: 2px; background: linear-gradient(#5a1522, #2b2b2e); }
.tier { display: flex; align-items: center; gap: 12px; padding: 7px 0; position: relative; }
.tier .node { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #2b2b2e; border: 2px solid rgba(255,255,255,.18); font: 900 14px system-ui; color: rgba(255,255,255,.6); z-index: 1; }
.tier.open .node { background: linear-gradient(#ffe08a, #c9962f); color: #3d2a00; border-color: #fff3c4; box-shadow: 0 0 12px rgba(242,204,99,.6); }
.tier.got .node { background: #2b8a3e; color: #fff; border-color: #8ce99a; box-shadow: none; }
.trw { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; background: linear-gradient(165deg, #3d3d42, #29292c); border: 1px solid rgba(255,255,255,.1); transform: skewX(-6deg); }
.trw > * { transform: skewX(6deg); }
.trw .tico { font-size: 18px; } .trw b { font-size: 13.5px; font-weight: 700; }
.tier.bigt .trw { background: linear-gradient(165deg, var(--wine), var(--wine3)); border-color: rgba(242,204,99,.6); }
.tier.final .trw { background: var(--marble); color: #3a2a10; border: 2px solid var(--gold); box-shadow: 0 0 18px rgba(255,255,255,.35), 0 0 26px rgba(190,150,255,.35); }
.tier.final .tico { color: #b8862b; text-shadow: 0 0 6px #fff; }
.tier .tlock { font-size: 15px; opacity: .55; width: 30px; text-align: center; }
.tier.got .trw { opacity: .6; }

/* ---------- Collection ---------- */
.colhead { margin: 10px 16px 8px; padding: 9px 14px; }
.clv { display: flex; align-items: center; gap: 10px; }
.clvn { width: 40px; height: 44px; flex: none; display: grid; place-items: center; font: 900 18px system-ui; color: #3d2a00; background: linear-gradient(#ffe08a, #c9962f); clip-path: polygon(50% 0, 100% 24%, 100% 76%, 50% 100%, 0 76%, 0 24%); }
.clt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clt b { font: 900 13px var(--serif); text-transform: uppercase; font-style: italic; }
.clt small { font-size: 11.5px; opacity: .8; }
.cnext { font-size: 10.5px; opacity: .75; max-width: 92px; text-align: right; line-height: 1.2; }
.chips { padding: 2px 12px 0; }
.chip { background: #2b2b2e; border-color: rgba(255,255,255,.18); }
.chip.on { background: linear-gradient(#ffe08a, #c9962f); color: #3d2a00; border-color: #fff3c4; }
.grid.col { padding: 10px 12px 10px; gap: 14px 8px; }
.grid .wrap { cursor: pointer; }
.copies { position: absolute; right: -5px; bottom: -7px; z-index: 5; background: var(--char2); color: #ffe8a3; border: 1px solid rgba(242,204,99,.6); border-radius: 8px; font: 800 10.5px system-ui; padding: 1px 5px; }
.hc.locked { filter: grayscale(1) brightness(.42) contrast(1.1); }
.hc.locked .ini, .big.locked .ii { opacity: .25; }
.lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); font-size: 26px; z-index: 6; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.lock.big { font-size: 64px; }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px 6px; justify-items: center; margin: 8px 0; }
.mini-grid > div { cursor: pointer; }
.fins { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.fchip { border: 1px solid #dccfc2; background: #f3ede6; color: #4d3d40; padding: 6px 10px; border-radius: 16px; font: 700 12.5px var(--sans); }
.fchip.on { background: var(--wine); color: #fff; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,.4); }
.fchip:disabled { opacity: .45; }
.fchip.f4:not(:disabled) { background: var(--marble); color: #6b4b10; border-color: var(--gold); }
.fchip.f4.on { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(190,150,255,.6); }
.upg { display: flex; flex-direction: column; gap: 3px; text-align: center; font-size: 13.5px; color: #4d3d40; background: #f7f2ec; border-radius: 10px; padding: 8px 10px; }
.fname { font-weight: 900; }
.fname.f1 { color: #a67c00; } .fname.f2 { background: linear-gradient(90deg, #d0368a, #2bb3d9, #c9a20f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fname.f3 { background: linear-gradient(90deg, #e03131, #f08c00, #2f9e44, #1c7ed6, #9c36b5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fname.f4 { color: #8a6512; text-shadow: 0 0 6px rgba(255,255,255,.9), 0 0 10px rgba(190,150,255,.6); letter-spacing: .5px; }
.badge.miss { background: #5c4b4e; }
.deckitem { background: linear-gradient(165deg, #fdf9f3, #efe7de); }
.sheet .deckitem { margin: 8px 0; box-shadow: 0 2px 0 rgba(0,0,0,.12), 0 0 0 1px #e0d6cb; }
.smallbtn.pri { background: linear-gradient(#c2334d, var(--wine2)); border: 1px solid rgba(242,204,99,.7); }

/* ---------- Cartes : finitions cosmétiques (le rendement ne change jamais) ---------- */
.hc .band, .big .tp { position: relative; }
.hc.f1 .in, .big.f1 .fr { border-color: #c9962f; }
.hc.f1 .band, .big.f1 .tp { background: linear-gradient(90deg, #8a6512, #f2cc63 50%, #8a6512); color: #3d2a00; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.hc.f1 .nm, .big.f1 .nm2 { color: #7a5600; }
.hc.f1 { box-shadow: 0 0 0 1px #f2cc63, 0 0 9px rgba(242,204,99,.6), 0 4px 8px rgba(0,0,0,.4); }
.hc.f2 .art::after, .hc.f3 .art::after, .big.f2 .ar .sun, .big.f3 .ar .sun { content: ""; }
.hc.f2 .art::after, .hc.f3 .art::after { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .85;
  background: linear-gradient(115deg, transparent 5%, rgba(255,80,200,.45) 28%, rgba(80,230,255,.55) 46%, rgba(255,240,90,.45) 64%, rgba(120,255,160,.4) 78%, transparent 95%); }
.big.f2 .ar::after, .big.f3 .ar::after { background: linear-gradient(90deg, #ff6ec7, #6ee7ff, #fff36e, #7dffa0, #ff6ec7) 0 0 / 200% 100%; animation: holo 4s linear infinite; }
.big.f2 .ar, .big.f3 .ar { background: linear-gradient(115deg, #ffe3f5, #dff8ff 40%, #fffbd9 70%, #e3ffe9); }
@keyframes holo { to { background-position: 200% 0; } }
.hc.f3::after, .big.f3::after { content: ""; position: absolute; inset: -3px; border-radius: 12px; padding: 3px; pointer-events: none; z-index: 4;
  background: conic-gradient(from var(--ang), #ff4d6d, #ffb703, #8ce99a, #4dabf7, #b197fc, #ff4d6d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinang 4s linear infinite; }
.big.f3::after { inset: -4px; border-radius: 17px; padding: 4px; }
/* Olympienne : marbre blanc, laurier d'or, aura prismatique */
.hc.f4, .big.f4 { background: var(--marble) !important; animation: none; box-shadow: 0 0 0 1.5px var(--gold), 0 0 12px rgba(255,255,255,.75), 0 0 22px rgba(180,140,255,.55), 0 4px 8px rgba(0,0,0,.4); }
.hc.f4::before, .big.f4::before { content: ""; position: absolute; inset: -6px; border-radius: 14px; z-index: -1; pointer-events: none; filter: blur(6px); opacity: .8;
  background: conic-gradient(from var(--ang), #ffd6e7, #fff3bf, #d3f9d8, #d0ebff, #e5dbff, #ffd6e7); animation: spinang 5s linear infinite; }
.big.f4::before { inset: -12px; border-radius: 24px; filter: blur(12px); }
.hc.f4 .in, .big.f4 .fr { border-color: var(--gold); background: #fffdf8; }
.hc.f4 .band, .big.f4 .tp { background: linear-gradient(90deg, #a67c00, #fff1b8 50%, #a67c00); color: #3d2a00; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.hc.f4 .art, .big.f4 .ar { background: var(--marble); }
.hc.f4 .art::before, .big.f4 .ar::before { background: repeating-linear-gradient(170deg, #c9b37a 0 3px, #e8d9a8 3px 6px); opacity: .55; }
.hc.f4 .art .ini { color: #fff; -webkit-text-stroke: 1.2px #a67c00; text-shadow: 0 2px 0 #a67c00, 0 0 8px rgba(255,255,255,.9); }
.hc.f4 .nm, .big.f4 .nm2 { color: #6b4b10; }
.laurel { position: absolute; left: 50%; bottom: 1px; width: 44px; height: 22px; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.big .laurel { width: 120px; height: 58px; bottom: 6px; }
.big.f4 .ar::after { display: none; }
.big.f4 .sun { background: radial-gradient(#fff, #f3e9c6); box-shadow: 0 0 22px #fff; }
.mc.f1 { border-color: #c9962f; box-shadow: 0 0 0 1px #f2cc63, 0 0 7px rgba(242,204,99,.55); }
.mc.f2 .ini, .mc.f3 .ini { background: linear-gradient(115deg, #ffe3f5, #dff8ff 40%, #fffbd9 70%, #e3ffe9); }
.mc.f3 { box-shadow: 0 0 0 2px #b197fc, 0 0 9px rgba(177,151,252,.7); }
.mc.f4 { border-color: var(--gold); box-shadow: 0 0 0 1px #fff, 0 0 10px rgba(255,255,255,.8), 0 0 16px rgba(180,140,255,.5); }
.mc.f4 .ini { background: var(--marble); color: #fff; -webkit-text-stroke: 1px #a67c00; }
.mc.f4 .bar { background: linear-gradient(90deg, #a67c00, #fff1b8 50%, #a67c00); color: #3d2a00; }
/* raretés : couleurs distinctes partout */
.rtag, .prar { display: inline-block; font: 800 10px var(--sans); text-transform: uppercase; letter-spacing: .6px; padding: 1px 7px; border-radius: 8px; color: #fff; }
.rtag.r-com, .prar.r-com { background: #6f7176; } .rtag.r-rare, .prar.r-rare { background: #2e86de; } .rtag.r-epic, .prar.r-epic { background: #9b4dca; } .rtag.r-leg, .prar.r-leg { background: linear-gradient(#e9c45a, #b8860b); color: #3d2a00; }

/* ---------- Boutique ---------- */
.shopnote { margin: 12px 16px 0; text-align: center; font-size: 12.5px; color: #e6d3bd; background: rgba(0,0,0,.25); border: 1px dashed rgba(242,204,99,.4); border-radius: 10px; padding: 6px 10px; }
.freesac { display: flex; align-items: center; gap: 12px; margin: 12px 18px 0; padding: 9px 14px; border: 0; color: #fff; text-align: left; width: calc(100% - 36px); background: none; }
.freesac span { display: flex; flex-direction: column; } .freesac b { font: 900 14px var(--serif); font-style: italic; text-transform: uppercase; } .freesac small { font-size: 12px; opacity: .85; }
.freesac.ready::before { border-color: var(--gold2); animation: claimglow2 1.4s ease-in-out infinite; }
@keyframes claimglow2 { 50% { box-shadow: 0 0 22px rgba(242,204,99,.7); } }
.inv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 14px; }
.invsac { border: 1px solid rgba(242,204,99,.35); border-radius: 10px; background: linear-gradient(165deg, #45454b, #2b2b2e); color: #fff; display: flex; flex-direction: column; align-items: center; padding: 8px 2px 6px; gap: 2px; }
.invsac b { font-size: 10.5px; line-height: 1.1; text-align: center; } .invsac small { font: 900 10.5px var(--serif); color: #ffe8a3; text-transform: uppercase; font-style: italic; }
.invsac .cnt { position: absolute; top: 4px; right: 6px; font: 900 12px system-ui; color: #ffe8a3; }
.invsac.empty { opacity: .45; }
.invsac:not(.empty) { border-color: var(--gold2); box-shadow: 0 0 12px rgba(242,204,99,.35); }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; }
.offer { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 4px 10px; border-radius: 10px; background: linear-gradient(165deg, #45454b, #2b2b2e); border: 1px solid rgba(255,255,255,.12); }
.offer .rtag { font-size: 9px; padding: 1px 5px; white-space: nowrap; }
.offer.sold { opacity: .5; }
.sacs { display: flex; flex-direction: column; gap: 10px; padding: 0 18px; }
.sacoffer { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.sacoffer::before { background: linear-gradient(100deg, color-mix(in srgb, var(--sc) 30%, #2b2b2e), #2b2b2e 60%); }
.so { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.so b { font: 900 14px var(--serif); font-style: italic; text-transform: uppercase; } .so small { font-size: 11.5px; opacity: .85; } .so .odds { font-size: 10.5px; opacity: .65; }
.olyoffer { display: flex; align-items: center; gap: 14px; margin: 0 18px; padding: 12px 14px; }
.olyoffer::before { background: linear-gradient(120deg, rgba(255,255,255,.14), #2b2b2e 55%); border-color: rgba(255,255,255,.4); }
.olyoffer > div:last-child { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.olyoffer b { font-size: 14px; } .olyoffer small { font-size: 12px; opacity: .8; }
.olyart { flex: none; padding: 6px; }
.xchg { display: flex; align-items: center; justify-content: space-between; margin: 0 18px; padding: 10px 14px; font-weight: 700; }
/* sac de livraison dessiné en CSS */
.bag { position: relative; display: inline-block; font-size: 46px; width: .9em; height: 1.05em; flex: none; }
.bag.sm { font-size: 36px; } .bag.huge { font-size: 170px; }
.bag i { position: absolute; display: block; }
.bag .bh { left: 30%; right: 30%; top: 0; height: 32%; border: .055em solid color-mix(in srgb, var(--sc) 55%, #000); border-bottom: 0; border-radius: .2em .2em 0 0; }
.bag .bb { left: 0; right: 0; top: 22%; bottom: 0; clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); border-radius: 0 0 .06em .06em;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 22%, rgba(255,255,255,.18) 48%, transparent 70%, rgba(0,0,0,.22)), linear-gradient(var(--sc), color-mix(in srgb, var(--sc) 70%, #000)); }
.bag .bf { left: 5%; right: 5%; top: 22%; height: 16%; background: linear-gradient(color-mix(in srgb, var(--sc) 80%, #fff), var(--sc)); clip-path: polygon(0 0, 100% 0, 100% 60%, 90% 100%, 80% 60%, 70% 100%, 60% 60%, 50% 100%, 40% 60%, 30% 100%, 20% 60%, 10% 100%, 0 60%); }
.bag .bs { left: 50%; top: 56%; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d43c57, #6d1a2a 70%); box-shadow: 0 0 0 .025em #f2cc63, 0 .03em .05em rgba(0,0,0,.4); }
.bag .bs::after { content: "TG"; position: absolute; inset: 0; display: grid; place-items: center; font: 900 .1em var(--serif); color: #ffe8a3; letter-spacing: .02em; }

/* ---------- Ouverture d'un sac ---------- */
.sacov { position: fixed; inset: 0; z-index: 420; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; overflow: hidden;
  background: radial-gradient(70% 50% at 50% 42%, color-mix(in srgb, var(--sc, #d4af37) 40%, #3a1a20), #1a1012 72%); animation: fadein .3s ease both; }
.sacov .srays { position: absolute; left: 50%; top: 42%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,226,160,.12) 0 4deg, transparent 4deg 12deg); -webkit-mask: radial-gradient(circle, #000 0 6%, transparent 44%); mask: radial-gradient(circle, #000 0 6%, transparent 44%); animation: spin 36s linear infinite; }
.sacstage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; z-index: 2; }
.sacstage .bag { filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)) drop-shadow(0 0 30px color-mix(in srgb, var(--sc) 60%, transparent)); }
.sacstage .bag.wob { animation: wob .42s ease; }
@keyframes wob { 20% { transform: rotate(-9deg) scale(1.05); } 45% { transform: rotate(8deg) scale(1.08); } 70% { transform: rotate(-4deg) scale(1.04); } }
.sacstage.burst .bag { animation: bagout .45s ease-in forwards; }
@keyframes bagout { 40% { transform: scale(1.25); filter: brightness(1.8); } 100% { transform: scale(1.6); opacity: 0; filter: brightness(3) blur(4px); } }
.sacname { font: 900 26px var(--serif); font-style: italic; text-transform: uppercase; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.saccta { font-size: 15px; color: #ffe8a3; animation: blink 1.6s ease-in-out infinite; }
.pulls { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 46px 14px; margin-top: 20px; max-width: 380px; padding: 0 10px; }
.pull { position: relative; width: 96px; height: 134px; perspective: 700px; cursor: pointer; animation: pullin .5s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes pullin { from { transform: translateY(80px) scale(.3) rotate(-14deg); opacity: 0; } }
.pin { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.3,.5,1); }
.pull.up .pin { transform: rotateY(180deg); }
.pback, .pface { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 11px; }
.pback { background: radial-gradient(circle at 50% 40%, #a3293f, #6d1a2a 60%, #3d0f19); border: 3px solid var(--gold); box-shadow: 0 8px 18px rgba(0,0,0,.5); display: grid; place-items: center; overflow: hidden; }
.pback::before { content: ""; position: absolute; inset: 6px; border-radius: 7px; background: var(--meander-g) repeat center / 14px 7px; opacity: .35; }
.pback span { position: relative; font: 900 22px var(--serif); color: #ffe8a3; text-shadow: 0 0 10px rgba(255,211,107,.8); }
.pface { transform: rotateY(180deg); }
.pface .hc { zoom: 1.26; }
.beam { position: absolute; left: 50%; bottom: 30%; width: 90px; height: 520px; transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%; pointer-events: none; opacity: 0; transition: transform .5s ease .2s, opacity .4s ease .2s; z-index: -1;
  background: linear-gradient(transparent, var(--bc, transparent) 70%, transparent); filter: blur(6px); }
.pull.up .beam { transform: translateX(-50%) scaleY(1); opacity: .9; }
.pull.lv0 { --bc: rgba(200,200,205,.0); } .pull.lv1 { --bc: rgba(46,134,222,.75); } .pull.lv2 { --bc: rgba(155,77,202,.85); } .pull.lv3 { --bc: rgba(242,204,99,.95); }
.pull.lv4 { --bc: rgba(255,255,255,.95); } .pull.lv4 .beam { width: 130px; background: linear-gradient(transparent, rgba(255,214,231,.9) 40%, rgba(208,235,255,.95) 70%, transparent); }
.ptag, .prar { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; transition: opacity .3s ease .5s; z-index: 3; }
.ptag { top: -30px; } .prar { bottom: -18px; }
.pull.up .ptag, .pull.up .prar { opacity: 1; }
.tnew, .tdup, .tolymp { display: inline-block; font: 900 12px var(--serif); font-style: italic; padding: 2px 9px; transform: skewX(-12deg); border-radius: 3px; }
.tnew { background: linear-gradient(#ff5a5f, #c92a2a); color: #fff; box-shadow: 0 0 12px rgba(255,90,95,.7); }
.tdup { background: #2b2b2e; color: #ffe8a3; border: 1px solid rgba(242,204,99,.5); }
.tolymp { background: var(--marble); color: #6b4b10; border: 1px solid var(--gold); box-shadow: 0 0 14px #fff, 0 0 22px rgba(180,140,255,.7); }
.tolymp { font-size: 9px; padding: 2px 5px; letter-spacing: 0; }
.sacend { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 18px; animation: fadein .4s both; }
.sacsum { text-align: center; font-size: 15px; line-height: 1.4; }
.sacend .bigbtn { min-width: 200px; }
.olyov .olyflash { position: absolute; inset: 0; background: radial-gradient(circle, #fff, rgba(255,255,255,0) 60%); animation: olyflash 1s ease-out forwards; pointer-events: none; }
@keyframes olyflash { from { opacity: 1; } to { opacity: 0; } }
.olybig { position: relative; z-index: 2; animation: medal .8s cubic-bezier(.2,1.5,.35,1) both; }
.olyt { position: relative; z-index: 2; margin: 0; font: 900 34px var(--serif); font-style: italic; text-transform: uppercase; letter-spacing: 2px;
  background: linear-gradient(90deg, #fff3bf, #ffd6e7, #d0ebff, #d3f9d8, #fff3bf) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(255,255,255,.7)); animation: holo 3s linear infinite; }

/* ---------- Modes ---------- */
.mode { margin: 12px 18px; padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.mode.classic::before { background: linear-gradient(160deg, var(--wine), var(--wine3)); border-color: rgba(242,204,99,.55); }
.mode.defi::before { background: linear-gradient(160deg, #4a3a1a, #2b2b2e 60%); border-color: rgba(242,204,99,.7); }
.mode.done { opacity: .75; }
.mh { display: flex; gap: 10px; align-items: flex-start; }
.mic { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.mh > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.mh b { font-size: 16px; color: #ffe8a3; } .mh small { font-size: 12.5px; opacity: .88; line-height: 1.3; }
.mh .bdg { top: -8px; right: -8px; }
.lvls { display: flex; gap: 8px; }
.lvb { flex: 1; border: 0; color: #fff; padding: 7px 4px; font: 800 13px var(--sans); background: none; display: flex; flex-direction: column; align-items: center; }
.lvb small { font-size: 10.5px; opacity: .75; font-weight: 700; }
.lvb::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-10deg); border-radius: 5px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); }
.lvb.on { color: #3d2a00; } .lvb.on::before { background: linear-gradient(#ffe08a, #c9962f); border-color: #fff3c4; }
.dinfo { display: flex; justify-content: space-between; font-size: 12.5px; color: #ffe8a3; }
.mode .bigbtn { padding: 11px; font-size: 16px; }
.drafthead { margin: 12px 18px; padding: 10px 14px; text-align: center; }
.drafthead b { font: 900 18px var(--serif); font-style: italic; text-transform: uppercase; } .drafthead small { font-size: 12.5px; opacity: .85; }
.dchoices { display: flex; justify-content: center; gap: 12px; padding: 10px 6px 4px; }
.dch { position: relative; cursor: pointer; } .dch .hc { zoom: 1.28; }
.dch .info { position: absolute; left: -6px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: #fff; color: var(--wine); font-weight: 900; z-index: 6; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.draftsel { margin: 0 16px; min-height: 40px; flex-wrap: wrap; }

/* ---------- Équipe / Tableau de la brigade ---------- */
.teamhead { margin: 12px 18px 6px; padding: 12px 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.teamhead::before { background: linear-gradient(160deg, var(--wine), var(--wine3)); border-color: rgba(242,204,99,.55); }
.teamhead b { font-size: 19px; color: #ffe8a3; } .teamhead small { font-size: 12.5px; opacity: .88; line-height: 1.3; }
.mypos { font-size: 13px; } .mypos b { font: 900 18px system-ui; color: #ffe8a3; }
.ladder { display: flex; flex-direction: column; gap: 7px; padding: 6px 16px; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; background: linear-gradient(100deg, #3d3d42, #29292c); border: 1px solid rgba(255,255,255,.08); }
.lrow.me { background: linear-gradient(100deg, var(--wine), var(--wine3)); border-color: var(--gold2); box-shadow: 0 0 14px rgba(242,204,99,.35); }
.lpos { width: 24px; text-align: center; font: 900 16px system-ui; color: rgba(255,255,255,.7); }
.lrow.top1 .lpos { color: #ffd43b; text-shadow: 0 0 8px rgba(255,212,59,.7); } .lrow.top2 .lpos { color: #dee2e6; } .lrow.top3 .lpos { color: #e8a87c; }
.lava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 900 13px var(--serif); background: radial-gradient(circle at 40% 30%, #5c5c63, #2b2b2e); border: 2px solid rgba(242,204,99,.5); }
.lrow.me .lava { background: radial-gradient(circle at 40% 30%, #c2334d, #6d1a2a); border-color: var(--gold2); }
.lnm { flex: 1; min-width: 0; display: flex; flex-direction: column; } .lnm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lnm small { font-size: 11px; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lpts { font: 800 13px system-ui; color: #ffe8a3; white-space: nowrap; }
.ranks { display: flex; gap: 4px; padding: 0 16px; }
.rkst { flex: 1; min-width: 0; text-align: center; padding: 7px 2px; border-radius: 5px; background: #2b2b2e; border: 1px solid rgba(255,255,255,.1); transform: skewX(-8deg); }
.rkst > * { transform: skewX(8deg); display: block; } .rkst b { font-size: 10.5px; line-height: 1.1; } .rkst small { font-size: 9.5px; opacity: .7; }
.rkst.past { background: #3a2a2e; } .rkst.on { background: linear-gradient(#ffe08a, #c9962f); color: #3d2a00; box-shadow: 0 0 12px rgba(242,204,99,.55); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px; }
.stats > div { background: linear-gradient(165deg, #3d3d42, #29292c); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; }
.stats b { font: 900 18px system-ui; color: #ffe8a3; } .stats small { font-size: 11px; opacity: .75; }

/* ---------- Réglages ---------- */
.setp { margin: 14px 16px; padding: 4px 14px; border-radius: 10px; background: linear-gradient(165deg, #3d3d42, #29292c); border: 1px solid rgba(255,255,255,.1); }
.tog { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); cursor: pointer; }
.tog:last-child { border-bottom: 0; }
.tog > span { display: flex; flex-direction: column; } .tog b { font-size: 15px; } .tog small { font-size: 12px; opacity: .7; }
.tog input { display: none; }
.tog i { width: 50px; height: 28px; border-radius: 14px; background: #55555c; position: relative; flex: none; transition: background .2s; }
.tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.tog input:checked + i { background: linear-gradient(#c2334d, var(--wine2)); box-shadow: 0 0 0 1px var(--gold); } .tog input:checked + i::after { transform: translateX(22px); }
.field { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; } .field b { font-size: 14px; }
.field input { border: 1px solid rgba(242,204,99,.5); background: #1d1d20; color: #fff; border-radius: 8px; padding: 9px 10px; font: 700 15px var(--serif); }
.setb { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: none; color: #fff; padding: 13px 0; font: 700 15px var(--sans); }
.setb:last-child { border-bottom: 0; } .setb.warn { color: #ff9a9a; }

/* ---------- Feuilles, profil, connexion ---------- */
.sheet { background: linear-gradient(#fdf9f3, #f5efe8); border-top: 3px solid var(--gold); }
.sheet h3 { font-style: italic; text-transform: uppercase; letter-spacing: .5px; }
.sbtn.pri { background: linear-gradient(#b8304a, var(--wine2)); border: 1px solid rgba(212,175,55,.8); }
.sbtn.glow:not(:disabled) { box-shadow: 0 0 0 2px rgba(212,175,55,.5), 0 0 16px rgba(194,51,77,.55); }
.sbtn:disabled { opacity: .5; }
.prof { text-align: center; } .prof h3 { margin: 4px 0 0; } .psub { font-size: 13px; color: #75666a; }
.prof .prog { background: #e9e0d6; height: 9px; margin: 8px 20px; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.pgrid div { background: #fff; border: 1px solid #e0d6cb; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; } .pgrid b { color: var(--wine2); font-size: 14px; } .pgrid small { font-size: 12px; color: #75666a; }
.pnote { font-size: 12.5px; color: #75666a; }
.login7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin: 10px 0; }
.ld { position: relative; background: #fff; border: 1px solid #e0d6cb; border-radius: 10px; padding: 6px 3px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ld small { font-size: 10.5px; color: #75666a; font-weight: 700; } .ld span { font-size: 22px; } .ld b { font-size: 10.5px; line-height: 1.15; color: #4d3d40; }
.ld.d7 { background: linear-gradient(#fff6d8, #ffe9a8); border-color: var(--gold); }
.ld.done { opacity: .55; } .ld.done i { position: absolute; top: 2px; right: 5px; color: #2b8a3e; font-style: normal; font-weight: 900; }
.ld.today { border: 2px solid var(--wine); box-shadow: 0 0 0 2px rgba(212,175,55,.5), 0 0 14px rgba(194,51,77,.35); }
.welcome .mini-grid { margin: 10px 0; }

/* ---------- Fin de service + récompenses ---------- */
.endov { overflow-y: auto; justify-content: flex-start; padding-top: calc(24px + var(--safe-top)); background: radial-gradient(circle at 50% 26%, rgba(142,34,54,.92), rgba(22,14,16,.97) 70%); }
.endov .endcard { background: linear-gradient(#fdf9f3, #f3ede6); padding: 14px 14px 16px; flex: none; }
.endhero { margin-bottom: 10px; }
.gainrow { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.gainrow .gain { margin: 0; min-width: 96px; font-size: 32px; }
.rkbox { flex: 1; min-width: 0; text-align: left; } .rkbox .rk { margin-top: 0; font-size: 14px; color: var(--wine2); } .rkbox .prog { background: #e9e0d6; } .rks { font-size: 11.5px; color: #75666a; }
.rewards { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; text-align: left; }
.rwl { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #e0d6cb; border-radius: 9px; padding: 6px 10px; animation: chipin .4s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(1.1s + var(--i) * .14s); }
.rwl .rwi { font-size: 19px; } .rwl .rwt { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: #3a1018; } .rwl .rwt small { display: block; font-weight: 400; color: #75666a; font-size: 11.5px; }
.rwl .rwt em { font-style: normal; color: #e8590c; font-size: 12px; margin-left: 4px; } .rwl b { font: 900 15px system-ui; color: var(--wine2); }
.rwl .prog.sm { background: #e9e0d6; }
.rwl.hi { background: linear-gradient(#fff8dc, #ffeeb5); border-color: var(--gold); }
.rwl.ms { background: linear-gradient(#fdecef, #f9d7de); border-color: #c2334d; }
.endbtns { display: flex; gap: 8px; margin-top: 12px; } .endbtns .bigbtn { flex: 1; }

/* ---------- Boutons (palette v3) ---------- */
.bigbtn.primary { border: 2px solid var(--gold2); background: linear-gradient(#c2334d, var(--wine) 55%, var(--wine2)); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 4px 0 #3d0f19, 0 10px 22px rgba(142,34,54,.45); text-shadow: 0 2px 0 rgba(60,0,10,.5); color: #fff; }
.bigbtn:not(.primary):not(.outline) { background: linear-gradient(#ffffff, #efe7de); color: var(--wine2); box-shadow: inset 0 -2px 0 rgba(109,26,42,.12), 0 4px 0 #b59a8a, 0 8px 16px rgba(0,0,0,.25); }
.actbtn.go { background: linear-gradient(#c2334d, var(--wine) 60%, var(--wine2)); box-shadow: 0 3px 0 #3d0f19, 0 0 0 1px var(--gold2); }
.actbtn.go.ready { animation: readyv3 1.1s ease-in-out infinite; }
@keyframes readyv3 { 50% { box-shadow: 0 3px 0 #3d0f19, 0 0 0 3px rgba(242,204,99,.85), 0 0 22px rgba(255,90,110,.95); filter: brightness(1.12); } }
.energy .flame { box-shadow: 0 0 0 3px rgba(43,43,46,.95), 0 0 16px rgba(255,138,60,.85), 0 0 34px rgba(255,138,60,.4); }
.energy .flame small { background: var(--wine2); }
.ghead { background: linear-gradient(rgba(29,29,32,.6), transparent); }
.tipjar { background: rgba(0,0,0,.28); border-color: rgba(242,204,99,.45); }
.side.me { background: linear-gradient(rgba(255,255,255,.07), rgba(255,255,255,.03)); }
.side.opp { background: linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.12)); }
.loc::before { background: var(--wine2) var(--meander-g) repeat-x center / 12px 6px; }
.loc { border-color: rgba(212,175,55,.8); }
.mc.back { background: radial-gradient(circle at 50% 40%, #a3293f, var(--wine2) 60%, #3d0f19); border-color: var(--gold); }
.mc.back::before { background: var(--meander-g) repeat center / 12px 6px; }
.toast { background: linear-gradient(rgba(58,58,63,.97), rgba(29,29,32,.97)); border-color: rgba(242,204,99,.85); }
.banner .bin { background: linear-gradient(90deg, transparent, rgba(74,20,32,.95) 16%, rgba(142,34,54,.97) 50%, rgba(74,20,32,.95) 84%, transparent); }
.builderhead { background: linear-gradient(#fdf9f3, #efe7de); }
.savebar { background: linear-gradient(transparent, rgba(29,29,32,.96) 30%); }
.panel h3, .help h4 { font-style: italic; }
.screen.sub .panel { background: linear-gradient(#fdf9f3, #f5efe8); }
.chip { color: #fff; }

/* ---------- Tutoriel : projecteur + bulle ---------- */
.tuto { position: fixed; inset: 0; z-index: 450; pointer-events: none; }
.tuto.hide { display: none; }
.tblock { position: fixed; inset: 0; pointer-events: auto; }
.thole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 200vmax rgba(16,9,11,.72); outline: 2px solid var(--gold2); outline-offset: 0; transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; pointer-events: none; }
.thole::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; border: 2px solid rgba(242,204,99,.8); animation: tring 1.3s ease-out infinite; }
@keyframes tring { from { opacity: 1; inset: -2px; } to { opacity: 0; inset: -16px; } }
.tuto.task .thole { box-shadow: 0 0 0 200vmax rgba(16,9,11,.5); }
.tbub { position: fixed; pointer-events: auto; background: linear-gradient(#fdf9f3, #f3ede6); color: #241a1c; border: 2px solid var(--gold); border-radius: 14px; padding: 12px 14px 10px 62px; box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 3px rgba(109,26,42,.6); min-height: 74px; }
.tbub.pop { animation: tpop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes tpop { from { transform: scale(.85); opacity: 0; } }
.tchef { position: absolute; left: 10px; top: 12px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; background: radial-gradient(circle at 40% 30%, #c2334d, var(--wine2)); border: 2px solid var(--gold2); }
.ttx { font-size: 14.5px; line-height: 1.38; } .ttx b { color: var(--wine2); }
.tbtns { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.tskip { border: 0; background: none; color: #8f8486; font-size: 12.5px; text-decoration: underline; padding: 4px 0; }
.tnext { border: 1px solid var(--gold); background: linear-gradient(#c2334d, var(--wine2)); color: #fff; font: 900 14px var(--serif); padding: 7px 16px; border-radius: 9px; }
.tuto.task .tbtns { justify-content: flex-start; }
.tarrow { position: absolute; width: 16px; height: 16px; background: #fdf9f3; border: 2px solid var(--gold); transform: translateX(-50%) rotate(45deg); }
.tarrow.up { top: -9px; border-right: 0; border-bottom: 0; } .tarrow.down { bottom: -9px; border-left: 0; border-top: 0; background: #f3ede6; } .tarrow.none { display: none; }

/* ---------- Animations réduites (réglage) ---------- */
body.reduce *, body.reduce *::before, body.reduce *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
body.reduce #scene .rays, body.reduce #bg { display: none; }

@media (max-height: 760px) {
  .showcase { height: 150px; } .fan .hc { zoom: 1.08; } .playbtn { height: 70px; } .playbtn .pl { font-size: 34px; } .home { gap: 8px; }
}
@media (max-height: 640px) { .showcase { display: none; } }
.defistrip { display: flex; align-items: center; gap: 10px; margin: 2px 6px 0; padding: 8px 14px; border: 0; color: #fff; text-align: left; background: none; position: relative; isolation: isolate; }
.defistrip::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-7deg); border-radius: 6px; background: linear-gradient(100deg, #4a3a1a, #2b2b2e 70%); border: 1px solid rgba(242,204,99,.5); }
.defistrip > span:first-child { font-size: 22px; } .dst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dst b { font: 900 13px var(--serif); font-style: italic; text-transform: uppercase; color: #ffe8a3; } .dst small { font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsr { font-size: 11.5px; color: #ffe8a3; white-space: nowrap; } .defistrip.done { opacity: .6; }
.showcase { flex: 1 0 196px; max-height: 236px; } .fan { top: calc(50% - 80px); } .fan.f0 { top: calc(50% - 88px); }
.toast.loud { font-size: 16px; max-width: 320px; margin: 0 auto; line-height: 1.2; }