@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* =====================================================================
   MINE-IDLE — Thème « Néon moderne » (lisse, non pixel)
   ===================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0d0e1c; --panel: #221d2b; --panel2: #2a2536; --panel3: #342d44;
  --line: #4a3d2a; --line2: #74602f;
  --ink: #f3ead6; --muted: #b8aa8d; --dim: #8a7c62;
  --cyan: #5ecfdc; --violet: #9a6cff; --pink: #e57ba8;
  --gold: #e8b84a; --green: #6fcf6f; --red: #e0584a; --blue: #6a8cff;
  --f-pixel: 'Cinzel', serif;
  --f-body: 'Inter', 'Segoe UI', sans-serif;
}
html, body { height: 100%; }
body {
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  background:
    radial-gradient(1100px 560px at 50% -8%, #2a2450 0%, rgba(18,14,28,0) 55%),
    radial-gradient(900px 520px at 100% 0%, rgba(232,184,74,.13) 0%, rgba(18,14,28,0) 45%),
    radial-gradient(900px 600px at 0% 110%, #3a2030 0%, rgba(18,14,28,0) 50%),
    linear-gradient(#12101e, #0a0813);
  background-attachment: fixed; overflow: hidden; letter-spacing: .2px;
}
canvas { image-rendering: auto; }
b { color: #fff; font-weight: 700; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0c18; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; border: 2px solid #0c0c18; }
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

.logo, .cap-title, #topbar .stat b, h2.ptitle, h3.ptitle, .ename, .cc-name, .es-title { font-family: var(--f-pixel); }

/* ============ SHELL ============ */
#app { display: flex; height: 100vh; }

#sidebar {
  width: 220px; flex-shrink: 0; padding: 14px 12px;
  background: linear-gradient(180deg, #16162e, #0c0c1a);
  border-right: 1px solid var(--line); box-shadow: 4px 0 24px rgba(0,0,0,.45);
  display: flex; flex-direction: column;
}
.player-head { background: linear-gradient(180deg, #222242, #15152a); border: 1px solid var(--line2); border-radius: 12px; padding: 12px; margin-bottom: 14px; box-shadow: inset 0 0 18px rgba(168,85,247,.12), 0 4px 14px rgba(0,0,0,.4); }
.player-av { width: 58px; height: 58px; display: block; margin: 0 auto 8px; background: radial-gradient(circle, rgba(168,85,247,.25), transparent 70%); border: 1px solid var(--line2); border-radius: 50%; }
.ph-name { font-family: var(--f-pixel); font-size: 10px; color: #fff; text-align: center; line-height: 1.6; }
.ph-lv { color: var(--cyan); }
.ph-ranks { display: flex; gap: 5px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.rk { font-size: 10px; font-weight: 700; color: var(--rc); border: 1px solid var(--rc); background: rgba(0,0,0,.25); padding: 2px 9px; border-radius: 20px; text-shadow: 0 0 6px var(--rc); }
.ph-xp { margin-top: 10px; }
.ph-xpbar { height: 7px; background: #0a0a14; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.ph-xpbar div { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 8px rgba(34,211,238,.5); transition: width .3s; }
.ph-xptext { display: block; text-align: center; font-size: 10px; color: var(--dim); margin-top: 4px; letter-spacing: 1px; }
#nav { display: flex; flex-direction: column; gap: 5px; flex: 1; overflow-y: auto; }
.nav-btn {
  display: flex; align-items: center; gap: 10px; font-family: var(--f-body); font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: 1px; color: var(--muted); cursor: pointer;
  background: linear-gradient(180deg, #1a1a32, #15152a); border: 1px solid var(--line);
  border-left: 3px solid transparent; padding: 10px; text-align: left;
  border-radius: 8px; transition: all .12s ease;
}
.nav-ic { font-size: 15px; width: 22px; text-align: center; }
.nav-lb { flex: 1; }
.nav-btn:hover { color: #fff; border-color: var(--line2); transform: translateX(2px); background: linear-gradient(180deg, #20203c, #17172e); }
.nav-btn.active {
  color: #fff; border-left-color: var(--gold);
  background: linear-gradient(90deg, rgba(232,184,74,.22), rgba(232,184,74,.05));
  box-shadow: 0 0 16px rgba(232,184,74,.25), inset 0 0 0 1px rgba(232,184,74,.3);
}
.side-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.side-foot .btn { width: 100%; }
.side-region {
  font-size: 12px; text-align: center; color: var(--gold); padding: 9px;
  background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.3); border-radius: 8px;
}

#rightcol { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ============ TOPBAR ============ */
#topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 18px;
  background: linear-gradient(180deg, rgba(22,22,46,.96), rgba(13,13,28,.96));
  border-bottom: 1px solid var(--line); backdrop-filter: blur(4px);
}
#topbar .logo { font-size: 14px; white-space: nowrap;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(168,85,247,.5)); }
.topbar-stats { display: flex; gap: 8px; flex-wrap: wrap; }
#topbar .stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 8px; width: 104px; flex-shrink: 0; border-radius: 8px;
  background: linear-gradient(180deg, #1c1c38, #161630); border: 1px solid var(--line);
}
#topbar .sl { font-size: 10px; color: var(--muted); font-family: var(--f-body); letter-spacing: .3px; white-space: nowrap; }
#topbar .stat b { font-size: 16px; color: var(--ink); width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
#topbar .stat.gold b { color: var(--gold); text-shadow: 0 0 10px rgba(251,191,36,.5); }
#topbar .stat.ess b { color: var(--cyan); text-shadow: 0 0 10px rgba(34,211,238,.4); }
#topbar .stat.bonbon b { color: #ffcf6b; text-shadow: 0 0 10px rgba(255,184,74,.45); }
#topbar .stat.gem b { color: var(--pink); text-shadow: 0 0 10px rgba(244,114,182,.4); }
.save-tag { margin-left: auto; font-size: 13px; color: var(--green); white-space: nowrap;
  background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); border-radius: 20px; padding: 7px 16px; }

#content { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 16px; }

/* ============ PANELS ============ */
.panel {
  background: linear-gradient(180deg, rgba(42,36,54,.92), rgba(26,22,36,.94));
  border: 1px solid var(--line2); border-radius: 10px; padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,184,74,.08), inset 0 1px 0 rgba(255,255,255,.05);
}
.ptitle {
  font-size: 15px; color: #fff; margin-bottom: 12px; line-height: 1.4; letter-spacing: 1px; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(232,184,74,.3); display: flex; align-items: center; gap: 8px;
}
.ptitle::before { content: ''; width: 4px; height: 18px; background: linear-gradient(var(--gold), #a9842b); border-radius: 2px; box-shadow: 0 0 8px rgba(232,184,74,.6); }
.sub, .hint { font-size: 13px; color: var(--muted); margin: 4px 0; }

/* ============ CHIPS / FILTRES ============ */
.filters { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 7px 0; }
.fl { font-size: 13px; color: var(--dim); margin-right: 4px; text-transform: uppercase; letter-spacing: 1px; }
.chip {
  font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer;
  background: #1b1b34; border: 1px solid var(--line); padding: 5px 12px; border-radius: 20px; transition: all .1s;
}
.chip:hover { color: #fff; border-color: var(--line2); }
.chip-on { color: #fff; background: linear-gradient(180deg, var(--violet), #7c3aed); border-color: #c084fc; box-shadow: 0 0 12px rgba(168,85,247,.45); }
.chip.locked { opacity: .45; cursor: not-allowed; }

/* ============ BOUTONS ============ */
.btn {
  font-family: var(--f-body); font-size: 14px; font-weight: 600; color: #fff; cursor: pointer;
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line2);
  background: linear-gradient(180deg, #2b2b50, #1f1f3c); border-bottom: 3px solid #12122a;
  transition: filter .1s, transform .06s, box-shadow .1s; letter-spacing: .3px;
}
.btn:hover { filter: brightness(1.18); }
.btn:active { transform: translateY(2px); border-bottom-width: 1px; }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; border-bottom-width: 1px; }
.btn-green { background: linear-gradient(180deg, #4ade80, #25a35a); border-color: #86efac; border-bottom-color: #176b39; box-shadow: 0 0 14px rgba(74,222,128,.35); color: #06210f; }
.btn-amber { background: linear-gradient(180deg, #fbbf24, #d97706); border-color: #fcd34d; border-bottom-color: #92500a; box-shadow: 0 0 14px rgba(251,191,36,.35); color: #2a1605; }
.btn-violet { background: linear-gradient(180deg, #a855f7, #7c3aed); border-color: #c084fc; border-bottom-color: #5b21b6; box-shadow: 0 0 14px rgba(168,85,247,.4); }
.btn-ghost { background: linear-gradient(180deg, #3a2540, #2a1a2e); border-color: #5a3a55; }

/* ============ BADGES ÉLÉMENT / ÉTOILES ============ */
.ebadge { display: inline-block; font-family: var(--f-body); font-size: 11px; font-weight: 700; color: #0a0a12;
  padding: 2px 7px; margin: 1px; border-radius: 4px; border: 1px solid rgba(0,0,0,.3); text-shadow: 0 1px 0 rgba(255,255,255,.2); }
.stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; text-shadow: 0 0 6px rgba(251,191,36,.6); }
.stars-off { color: #44446a; text-shadow: none; }
.eff { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.eff.strong { color: #bbf7d0; background: rgba(74,222,128,.18); box-shadow: 0 0 8px rgba(74,222,128,.3); }
.eff.weak { color: #fecaca; background: rgba(251,91,109,.18); }

/* ============ COMBAT ============ */
.campaign-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cap-left { flex: 1; min-width: 220px; }
.cap-title { font-size: 9px; color: var(--cyan); letter-spacing: 1.5px; text-shadow: 0 0 8px rgba(34,211,238,.5); }
.cap-loc { font-size: 17px; margin-top: 6px; font-weight: 600; }
.routes { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 268px; }
.zone-bar { height: 12px; background: #0c0c1a; border: 1px solid var(--line); border-radius: 8px; margin-top: 8px; overflow: hidden; max-width: 460px; }
.zone-fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--gold), var(--pink)); box-shadow: 0 0 12px rgba(244,114,182,.5); transition: width .25s; }

/* navigateur de zones (switch zone par zone) */
.zonenav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.znav-arrow { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; cursor: pointer; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, #2a2540, #1a1730); border: 1px solid var(--line2); transition: all .12s; }
.znav-arrow:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.znav-arrow:disabled { opacity: .3; cursor: not-allowed; }
.znav-cur { flex: 1; min-width: 110px; text-align: center; background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.znav-mode { font-size: 9px; letter-spacing: 1.5px; color: var(--cyan); font-weight: 700; }
.znav-name { font-family: var(--f-pixel); font-size: 14px; color: #fff; line-height: 1.3; }
.znav-camp { width: 100%; font-size: 12px; padding: 7px; }
.zone-list { display: flex; gap: 6px; flex-wrap: wrap; }
.zchip { font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 5px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #1f1a2e, #181426); border: 1px solid var(--line); transition: all .12s; }
.zchip:hover { color: #fff; border-color: var(--line2); }
.zchip-on { color: #fff; background: linear-gradient(180deg, var(--violet), #7c3aed); border-color: #c084fc; box-shadow: 0 0 12px rgba(168,85,247,.45); }
.zchip-front { border-color: var(--gold); }
.zchip-front.zchip-on { background: linear-gradient(180deg, var(--gold), #d97706); color: #2a1605; border-color: #fcd34d; }
.zf { font-size: 9px; opacity: .85; }

/* sélecteur de MONDE */
.world-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-world { font-family: var(--f-pixel); font-size: 13px; }
.world-mode { font-size: 11px; color: var(--cyan); font-weight: 700; letter-spacing: 1px; }
.world-box { max-width: 480px; width: min(480px, 94vw); text-align: left; position: relative; }
.world-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.world-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #16162c; border: 1px solid var(--line); border-left: 4px solid var(--we, var(--line2)); border-radius: 10px; padding: 11px 13px; }
.world-row.active { box-shadow: inset 0 0 0 1px rgba(94,207,220,.4); }
.world-row.locked { opacity: .55; }
.wr-name { font-family: var(--f-pixel); font-size: 15px; color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wr-info { font-size: 12px; color: var(--muted); margin-top: 3px; }
.wr-here { font-size: 12px; color: var(--cyan); font-weight: 700; white-space: nowrap; }
.wr-lock { font-size: 16px; }

/* modal STARTER */
.starter-box { max-width: 580px; width: min(580px, 94vw); text-align: center; }
.starter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.starter-card { background: linear-gradient(180deg, #20203e, #15152a); border: 2px solid; border-radius: 12px; padding: 10px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.starter-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 22px rgba(94,207,220,.4); }
.starter-card canvas, .starter-card img { width: 100%; height: 200px; object-fit: cover; object-position: 50% 12%; border-radius: 10px; display: block; margin-bottom: 8px; }
@media (max-width: 560px) { .starter-grid { grid-template-columns: 1fr; } }

/* guide */
.guide-sec { margin-bottom: 2px; }
.guide-txt { font-size: 14px; line-height: 1.7; color: var(--ink); }
.guide-txt b { color: #fff; }
.empty-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 16px;
  background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(34,211,238,.12)) !important;
  border: 1px solid var(--violet) !important; box-shadow: 0 0 24px rgba(168,85,247,.3) !important;
}
.empty-cta .btn { margin-left: auto; }

.combat-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px 300px; gap: 16px; align-items: stretch; flex: 1; min-height: 0; }
.combat-team, .combat-side { display: flex; flex-direction: column; overflow-y: auto; }
.combat-side { gap: 2px; }
.combat-center { display: flex; flex-direction: column; gap: 14px; }
/* scène de combat */
.scene { position: relative; padding: 0; overflow: hidden; flex: 1; min-height: 280px; border-radius: 12px; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.scene-head { position: absolute; top: 12px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; z-index: 3; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.scene-head .ename { color: #fff; }
.scene-enemy { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); width: 300px; height: 300px; max-width: 70%; object-fit: contain; z-index: 2; filter: drop-shadow(0 14px 14px rgba(0,0,0,.55)); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-6px); } }
.scene-hp { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 3; }
.scene .hp-text { text-align: center; text-shadow: 0 1px 4px #000; }
/* récompenses + stats */
.reward-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.reward-row .rw { font-size: 15px; }
.stat-row { display: flex; gap: 12px; }
.statpill { flex: 1; background: linear-gradient(180deg, #1c1c38, #141428); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; text-align: center; }
.statpill span { display: block; font-size: 11px; color: var(--muted); letter-spacing: 1px; }
.statpill.dps b { font-size: 24px; color: var(--cyan); text-shadow: 0 0 12px rgba(34,211,238,.5); }
.statpill.kos b { font-size: 24px; color: var(--red); text-shadow: 0 0 12px rgba(251,91,109,.4); }
/* équipe verticale */
.team-list { display: flex; flex-direction: column; gap: 9px; }
.tcard { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 2px solid; background: linear-gradient(180deg, #1e1e3c, #15152a); box-shadow: 0 3px 10px rgba(0,0,0,.35); transition: transform .1s; }
.tcard:hover { transform: translateX(-3px); }
.tcard.shiny { box-shadow: 0 0 0 2px #ffe98a, 0 0 16px rgba(251,191,36,.45); }
.tcard canvas { width: 54px; height: 54px; flex-shrink: 0; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.tc-main { flex: 1; min-width: 0; }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tc-name { font-size: 11px; color: #fff; }
.lv-pill { font-family: var(--f-body); font-size: 11px; font-weight: 700; background: #2a2a4e; border: 1px solid var(--line2); padding: 2px 8px; border-radius: 10px; color: var(--cyan); white-space: nowrap; }
.tc-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 3px 0; }
.tc-rar { font-size: 11px; font-weight: 600; }
.tc-xp { margin: 4px 0; }
.tc-xpbar { height: 6px; background: #0c0c1a; border-radius: 4px; overflow: hidden; }
.tc-xpbar div { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.maxed { font-size: 10px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
.tc-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.tc-base { color: var(--muted); }
.dps-pill { color: var(--muted); font-size: 11px; }
.dps-pill b { color: var(--cyan); font-size: 13px; }
/* colonne puissance */
.side-obj { background: linear-gradient(90deg, rgba(168,85,247,.18), rgba(34,211,238,.1)); border: 1px solid var(--violet); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.side-obj span { display: block; font-size: 12px; color: var(--muted); }
.side-obj b { font-size: 14px; }
.side-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.side-box { background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.side-box span { display: block; font-size: 11px; color: var(--muted); }
.side-box b { font-size: 16px; color: var(--gold); }
.side-sub { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 1px; margin: 12px 0 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.side-syn { font-size: 12px; color: #bbf7d0; padding: 4px 0; }
.side-syn small { color: var(--dim); font-size: 11px; font-weight: 400; }
.side-chap { font-size: 12px; color: var(--muted); padding: 4px 0; }
.side-chap.done { color: var(--green); }
.side-stat { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.side-stat span { color: var(--muted); }
.side-stat b { color: var(--ink); }
.enemy-panel { text-align: center; position: relative; overflow: hidden; }
.enemy-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 35%, rgba(168,85,247,.12), transparent 60%); pointer-events: none; }
.enemy-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ename { font-size: 14px; color: #fff; text-shadow: 0 0 12px rgba(251,91,109,.6); }
.elvl { font-size: 14px; color: var(--muted); font-family: var(--f-body); }
.boss-tag { font-family: var(--f-pixel); font-size: 10px; background: linear-gradient(180deg, #fb5b6d, #b91c2c); color: #fff; padding: 3px 8px; border-radius: 4px; box-shadow: 0 0 14px rgba(251,91,109,.6); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { filter: brightness(1.3); } }
.enemy-canvas { width: 188px; height: 188px; margin: 6px auto; display: block; background: radial-gradient(circle, rgba(255,255,255,.05), transparent); border: 1px solid var(--line); border-radius: 10px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.hp-bar { height: 22px; background: #2a0a12; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; }
.hp-fill { height: 100%; background: linear-gradient(90deg, #ff8a8a, #e0344b); box-shadow: 0 0 14px rgba(224,52,75,.6); transition: width .12s linear; }
.hp-text { font-size: 14px; margin-top: 5px; color: #ffc9cf; font-weight: 600; }
.rewards { display: flex; justify-content: center; gap: 14px; margin: 12px 0; }
.rw { font-size: 15px; font-weight: 600; padding: 5px 12px; border-radius: 8px; background: #14142a; border: 1px solid var(--line); }
.rw.gold b { color: var(--gold); } .rw.ess b { color: var(--cyan); }
.combat-stats { display: flex; gap: 10px; }
.cs { flex: 1; background: linear-gradient(180deg, #1c1c38, #141428); border: 1px solid var(--line); padding: 10px; border-radius: 8px; }
.cs span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.cs b { font-size: 22px; color: var(--cyan); text-shadow: 0 0 12px rgba(34,211,238,.5); }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tslot { background: linear-gradient(180deg, #1d1d3a, #16162c); border: 1px solid; border-radius: 8px; padding: 7px; text-align: center; transition: transform .1s; }
.tslot:hover { transform: translateY(-2px); }
.tslot canvas { width: 50px; height: 50px; display: block; margin: 0 auto 3px; }
.ts-name { font-size: 12px; color: #fff; }
.ts-el { line-height: 1; }
.ts-dps { font-size: 13px; color: var(--cyan); font-weight: 600; }

/* ============ CARTES CRÉATURE ============ */
.cre-grid, .pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cre-card {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(244,197,66,.08), transparent 60%),
    linear-gradient(180deg, #29294f, #18182f 55%, #101020);
  border: 2px solid; border-radius: 13px;
  padding: 14px 12px; text-align: center; position: relative; transition: transform .12s, box-shadow .12s;
  box-shadow: 0 7px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.cre-card::before { content: ''; position: absolute; inset: 4px; border-radius: 9px; border: 1px solid rgba(244,197,66,.3); pointer-events: none; }
.cre-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.55); }
.cre-card.in-team::after { content: ''; position: absolute; inset: 0; border-radius: 9px; box-shadow: inset 0 0 0 2px rgba(74,222,128,.5); pointer-events: none; }
.cre-card.shiny { background: linear-gradient(180deg, #3a3318, #241f0e); box-shadow: 0 0 0 2px #ffe98a, 0 0 22px rgba(251,191,36,.55); }
.team-flag { position: absolute; top: 6px; right: 6px; font-family: var(--f-pixel); font-size: 8px; color: #06210f; background: var(--green); padding: 2px 5px; border-radius: 4px; }
.shiny-badge { position: absolute; top: 6px; left: 6px; font-size: 15px; filter: drop-shadow(0 0 4px var(--gold)); }
.cre-card canvas { width: 100%; height: 180px; display: block; margin: 0 0 10px; border-radius: 8px; }
.cc-name { font-size: 12px; color: #fff; line-height: 1.4; }
.cc-rar { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.cc-cls { font-size: 11px; color: var(--gold); letter-spacing: .4px; margin-top: 1px; }
.cc-el { line-height: 1; margin: 3px 0; }
.cc-lvl { font-size: 13px; color: var(--muted); margin: 6px 0 3px; }
.cc-xp { height: 5px; background: #0c0c1a; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin: 0 0 7px; }
.cc-xp div { height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); }
.cc-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cc-actions .btn { width: 100%; font-size: 12px; padding: 7px; }

/* ============ ÉQUIPE ============ */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.eq-slot { background: linear-gradient(180deg, #20203e, #15152a); border: 2px solid; border-radius: 12px; padding: 12px; text-align: center; min-height: 160px; transition: transform .12s; }
.eq-slot.clickable:hover { transform: translateY(-3px); }
.eq-slot canvas, .eq-slot img { width: 100%; height: 300px; object-fit: cover; object-position: 50% 12%; display: block; margin: 0 0 10px; border-radius: 10px; }
.eq-slot .cc-name { font-size: 17px; }
.eq-slot.empty canvas, .eq-slot.empty img { height: auto; }
.eq-slot.empty { border-color: var(--line); border-style: dashed; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.empty-slot { color: var(--dim); font-size: 14px; }
.eq-slot .btn { width: 100%; }
.syn { font-size: 14px; padding: 6px 10px; margin: 5px 0; border-radius: 8px; }
.syn.on { color: #bbf7d0; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); }
.syn.off { color: var(--dim); }
.syn-sep { font-size: 11px; color: var(--dim); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 1.5px; border-top: 1px solid var(--line); padding-top: 8px; }

/* ============ INVOCATION ============ */
.banner-hero { position: relative; margin-top: 12px; padding: 18px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, rgba(154,108,255,.22), rgba(20,16,34,.6) 60%), linear-gradient(180deg, #221d3a, #15122a);
  border: 1px solid var(--line2); box-shadow: inset 0 0 40px rgba(154,108,255,.12); }
.banner-hero.locked { filter: grayscale(.5) brightness(.8); }
.bh-name { font-family: var(--f-pixel); font-size: 22px; color: #fff; text-align: center; text-shadow: 0 0 14px rgba(168,85,247,.5); margin-bottom: 12px; }
.bh-lock { text-align: center; color: var(--red); font-size: 14px; padding: 10px; }
.bh-rates { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.rate-pill { font-size: 12px; font-weight: 700; color: var(--rc); border: 1px solid var(--rc); background: rgba(0,0,0,.3); padding: 3px 11px; border-radius: 14px; }
.rate-pill b { color: #fff; }
.inv-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.btn-invoke { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; padding: 12px 22px;
  background: linear-gradient(180deg, #a855f7, #7c3aed); border: 1px solid #c084fc; border-bottom: 3px solid #5b21b6; box-shadow: 0 0 18px rgba(168,85,247,.45); }
.btn-invoke.big { background: linear-gradient(180deg, #fbbf24, #d97706); border-color: #fcd34d; border-bottom-color: #92500a; box-shadow: 0 0 18px rgba(251,191,36,.5); color: #2a1605; }
.btn-invoke .ib-x { font-family: var(--f-pixel); font-size: 15px; }
.btn-invoke .ib-cost { font-size: 12px; opacity: .92; }
.inv-results { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }
.res { background: linear-gradient(180deg, #20203e, #15152a); border: 2px solid; border-radius: 8px; padding: 8px; text-align: center; font-size: 13px; position: relative; animation: popin .3s ease; }
@keyframes popin { from { transform: scale(.5) rotate(-8deg); opacity: 0; } }
.res { width: 120px; }
.res canvas, .res img { width: 100%; height: 130px; object-fit: cover; object-position: 50% 12%; display: block; margin: 0 auto 4px; border-radius: 6px; }
.res .new { display: block; color: var(--gold); font-size: 11px; font-weight: 700; }
.res .up { display: block; color: var(--green); font-size: 11px; font-weight: 700; }
.pool-cre { background: linear-gradient(180deg, #1c1c38, #15152a); border: 2px solid; border-radius: 8px; padding: 8px; text-align: center; transition: transform .1s; }
.pool-cre:hover { transform: translateY(-2px); }
.pool-cre.miss { opacity: .4; filter: grayscale(.6); }
.pool-cre canvas, .pool-cre img { width: 100%; height: 150px; object-fit: cover; object-position: 50% 12%; display: block; margin: 0 0 4px; border-radius: 6px; }
.pc-name { font-size: 13px; } .pc-rar { font-size: 12px; }

/* ============ ASCENSION ============ */
.asc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-top: 8px; }
.asc-box { background: linear-gradient(180deg, #1c1c38, #141428); border: 1px solid var(--line); padding: 12px; text-align: center; border-radius: 8px; }
.asc-box span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.asc-box b { font-size: 19px; color: var(--gold); text-shadow: 0 0 10px rgba(251,191,36,.4); }
.req { margin: 10px 0; }
.req-top { display: flex; justify-content: space-between; font-size: 15px; }
.req.ok .req-top b { color: var(--green); }
.req-bar { height: 12px; background: #0c0c1a; border: 1px solid var(--line); border-radius: 8px; margin-top: 4px; overflow: hidden; }
.req-bar div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--pink)); border-radius: 8px; }
.req.ok .req-bar div { background: linear-gradient(90deg, var(--green), #16a34a); box-shadow: 0 0 10px rgba(74,222,128,.5); }
.asc-btn { width: 100%; margin-top: 12px; padding: 13px; font-size: 15px; }
.asc-up { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(180deg, #1c1c38, #141428); border: 1px solid var(--line); padding: 12px; margin: 7px 0; border-radius: 8px; }
.au-info { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.au-info span { font-size: 13px; color: var(--muted); }
.au-lv { color: var(--cyan) !important; }
.asc-up .btn { white-space: nowrap; }

/* ============ QUÊTES ============ */
.daily-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(251,191,36,.12), rgba(244,114,182,.08)) !important; border: 1px solid rgba(251,191,36,.3) !important; }
.quest { background: linear-gradient(180deg, #1c1c38, #141428); border: 1px solid var(--line); padding: 12px; margin: 9px 0; border-radius: 8px; }
.quest.done { border-color: var(--green); box-shadow: 0 0 14px rgba(74,222,128,.2); }
.q-top { display: flex; justify-content: space-between; font-size: 15px; }
.q-bar { height: 12px; background: #0c0c1a; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0; overflow: hidden; }
.q-bar div { height: 100%; background: linear-gradient(90deg, var(--gold), var(--pink)); border-radius: 8px; }
.quest.done .q-bar div { background: linear-gradient(90deg, var(--green), #16a34a); }
.q-bot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.q-rw { font-size: 14px; color: var(--gold); font-weight: 600; }

/* ============ EXPÉDITIONS ============ */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 13px; margin-top: 8px; }
.exp-slot { background: linear-gradient(180deg, #1d1d3a, #15152a); border: 1px solid var(--line); padding: 14px; text-align: center; border-radius: 10px; }
.exp-slot.ready { border-color: var(--green); box-shadow: 0 0 18px rgba(74,222,128,.3); }
.es-title { font-size: 13px; color: #fff; margin-bottom: 8px; }
.es-missions { display: flex; flex-direction: column; gap: 7px; }
.es-mrw { font-size: 12px; color: var(--gold); }
.es-rw { font-size: 14px; color: var(--gold); font-weight: 600; }
.es-status { font-size: 14px; margin: 8px 0; color: var(--cyan); }
.exp-slot > .btn { width: 100%; }

/* ============ BOUTIQUE ============ */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 11px; margin-top: 8px; }
.shop-item { background: linear-gradient(180deg, #1d1d3a, #15152a); border: 1px solid var(--line); padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 10px; transition: border-color .1s; }
.shop-item:hover { border-color: var(--violet); }
.si-info { display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.si-info span { font-size: 13px; color: var(--muted); }
.shop-item .btn { white-space: nowrap; }
.boosts-active { font-size: 14px; color: var(--green); margin: 8px 0; }
.active-boost { background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.4); padding: 3px 10px; border-radius: 20px; margin-right: 5px; }

/* ============ TOASTS / MODALE ============ */
#toast-area { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 9px; z-index: 9999; align-items: center; }
.toast { background: rgba(13,13,28,.95); border: 1px solid var(--gold); color: #ffe9a8; padding: 11px 18px; font-size: 14px; font-weight: 600;
  border-radius: 10px; box-shadow: 0 0 24px rgba(251,191,36,.35); animation: tin .25s ease; max-width: 90vw; text-align: center; }
@keyframes tin { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
.floaty { position: fixed; pointer-events: none; z-index: 9999; font-family: var(--f-pixel); font-size: 12px; color: var(--gold); text-shadow: 0 0 6px rgba(251,191,36,.7); animation: floatup .7s ease forwards; }
@keyframes floatup { to { transform: translateY(-42px); opacity: 0; } }
.modal { position: fixed; inset: 0; background: rgba(4,4,10,.8); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal.hidden { display: none; }
.modal-box { max-width: 460px; text-align: center; box-shadow: 0 0 40px rgba(168,85,247,.4); }
.modal-box p { font-size: 16px; margin: 16px 0; line-height: 1.6; }
.modal-box .btn { margin: 0 auto; padding: 12px 26px; font-size: 15px; }

/* ============ CARTES CLIQUABLES + AUTO-ÉQUIPE ============ */
.clickable { cursor: pointer; }
.clickable:hover { box-shadow: 0 0 0 2px rgba(94,207,220,.55), 0 6px 18px rgba(0,0,0,.4); }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.btn-apply { white-space: nowrap; font-size: 12px; padding: 7px 13px; }
.cap-threat { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.eq-threat { font-size: 12px; color: var(--muted); margin: 4px 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.eq-threat-hint { color: var(--dim); }
.emini { display: inline-block; font-size: 10px; font-weight: 700; color: #0a0a12; padding: 2px 8px; border-radius: 10px; border: 1px solid; }
.eff.neutral { color: var(--muted); background: rgba(255,255,255,.06); }

/* ============ FICHE CARTE DÉTAILLÉE ============ */
.card-detail { max-width: 560px; width: min(560px, 94vw); text-align: left; position: relative; max-height: 92vh; overflow-y: auto; padding: 20px; box-shadow: 0 0 50px rgba(168,85,247,.45); }
.cd-close { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 4px; }
.cd-close:hover { color: #fff; }
.cd-head { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.cd-portrait { width: 96px; height: 120px; border-radius: 10px; border: 2px solid var(--rc); object-fit: cover; flex-shrink: 0; background: #14142a; box-shadow: 0 0 18px -4px var(--rc); }
.cd-name { font-family: var(--f-pixel); font-size: 20px; color: #fff; line-height: 1.2; }
.cd-rar { font-size: 14px; margin: 3px 0; }
.cd-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 5px 0; }
.cd-cls { font-size: 12px; color: var(--muted); }
.cd-lv { font-size: 12px; color: var(--dim); }
.cd-evo { font-size: 12px; color: var(--cyan); margin-top: 10px; }
.cd-power { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 16px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(232,184,74,.18), rgba(232,184,74,.04)); border: 1px solid rgba(232,184,74,.4); }
.cd-power span { font-size: 13px; color: var(--muted); font-weight: 600; }
.cd-power b { font-family: var(--f-pixel); font-size: 26px; color: var(--gold); text-shadow: 0 0 12px rgba(232,184,74,.5); }
.cd-sec { margin-top: 16px; }
.cd-sec-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.cd-sec-t.up { color: var(--green); }
.cd-sec-t.down { color: var(--red); }
.cd-vs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.cd-vs-en { display: inline-flex; align-items: center; gap: 6px; }
.cd-arrow { color: var(--dim); font-size: 18px; }
.cd-vs-dps b { color: var(--cyan); font-size: 17px; }
.cd-zone { font-size: 12px; color: var(--muted); margin-top: 8px; }
.cd-affin { display: flex; gap: 12px; }
.cd-aff-col { flex: 1; background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.cd-aff-list { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-none { color: var(--dim); }
.cd-calc { width: 100%; border-collapse: collapse; font-size: 13px; }
.cd-calc td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
.cd-calc td:first-child { color: var(--muted); }
.cd-calc .cd-op { color: var(--dim); text-align: center; font-size: 12px; }
.cd-calc td:last-child { text-align: right; color: var(--ink); }
.cd-final td { border-top: 1px solid var(--line2); border-bottom: none; padding-top: 9px; }
.cd-final td:first-child { color: var(--ink); font-weight: 700; }
.cd-final b { color: var(--gold); font-size: 17px; }
.cd-hint { font-size: 11px; color: var(--dim); margin-top: 9px; font-style: italic; line-height: 1.5; }

/* ============ ANIMATION D'INVOCATION ============ */
.gacha-ov {
  position: fixed; inset: 0; z-index: 10000; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(24,12,48,.86), rgba(4,4,10,.97));
  display: flex; align-items: center; justify-content: center; animation: gaIn .25s ease;
}
@keyframes gaIn { from { opacity: 0; } }
.gacha-stage { text-align: center; position: relative; width: min(92vw, 840px); }
.gacha-orb {
  width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 40% 35%, #fff, var(--c) 46%, rgba(0,0,0,0) 72%);
  box-shadow: 0 0 70px 14px var(--c), inset 0 0 34px rgba(255,255,255,.6);
  animation: orbPulse 1.4s ease-in-out infinite, orbGrow 1.4s ease forwards;
}
.gacha-orb.strong { animation: orbPulse .7s ease-in-out infinite, orbGrow 1.4s ease forwards, orbShake .25s linear infinite; }
.gacha-orb::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 460px; height: 460px;
  transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; opacity: .5;
  background: conic-gradient(from 0deg, transparent, var(--c), transparent 28%, transparent 50%, var(--c), transparent 78%);
  animation: spin 3s linear infinite;
}
@keyframes orbPulse { 50% { filter: brightness(1.45); transform: scale(1.06); } }
@keyframes orbGrow { 0% { transform: scale(.2); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes orbShake { 25% { margin-left: -4px; } 75% { margin-left: 4px; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.gacha-skip { margin-top: 32px; color: #d6d6f5; font-size: 15px; font-weight: 600; animation: blink 1.1s infinite; }
.gacha-skip span { color: var(--dim); font-size: 13px; }
@keyframes blink { 50% { opacity: .45; } }

.gacha-flash { position: absolute; inset: -50%; pointer-events: none; background: radial-gradient(circle, var(--c), transparent 60%); animation: flash .7s ease forwards; }
@keyframes flash { 0% { opacity: 0; transform: scale(.2); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }

.gacha-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-height: 70vh; overflow: auto; padding: 6px; }
.gacha-card {
  width: 124px; padding: 12px 8px; border-radius: 12px; position: relative;
  background: linear-gradient(180deg, #20203e, #14142a); border: 2px solid var(--c);
  box-shadow: 0 0 18px -2px var(--c); opacity: 0; transform: scale(0) rotate(-14deg);
  animation: cardIn .42s cubic-bezier(.2, 1.5, .4, 1) forwards;
}
@keyframes cardIn { to { opacity: 1; transform: scale(1) rotate(0); } }
.gacha-card canvas { width: 100%; height: 150px; display: block; border-radius: 8px; }
.gc-name { font-family: var(--f-pixel); font-size: 11px; margin-top: 6px; }
.gc-rar { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.gc-tag { font-size: 11px; font-weight: 700; margin-top: 4px; }
.gacha-card.gacha-hi { box-shadow: 0 0 34px 1px var(--c); }
.gacha-card.gacha-hi::before {
  content: ''; position: absolute; inset: -35%; z-index: -1; border-radius: 14px; opacity: .6;
  background: conic-gradient(from 0deg, transparent, var(--c), transparent 22%, transparent 50%, var(--c), transparent 64%);
  animation: spin 2.4s linear infinite;
}
.gacha-cont { margin-top: 26px; padding: 12px 30px; font-size: 15px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .combat-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .combat-side { grid-column: 1 / -1; }
  .side-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .combat-layout { grid-template-columns: 1fr; }
  .combat-side { grid-column: auto; }
  #sidebar { width: 160px; }
}

/* ============ INDEX (catalogue) ============ */
.idx-region { display: flex; align-items: center; justify-content: space-between; margin: 14px 4px 8px; font-family: var(--f-pixel); font-size: 14px; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.idx-region b { color: #fff; }
.idx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.idx-card { background: linear-gradient(180deg, #20203a, #15152a); border: 2px solid; border-radius: 12px; padding: 9px; text-align: center; transition: transform .12s; }
.idx-card:hover { transform: translateY(-3px); }
.idx-card.miss { filter: grayscale(.55) brightness(.78); }
.idx-card canvas, .idx-card img { width: 100%; height: 96px; object-fit: cover; object-position: 50% 14%; border-radius: 8px; display: block; }
.idx-name { font-family: var(--f-pixel); font-size: 12px; margin-top: 6px; color: #fff; }
.idx-rar { font-size: 11px; font-weight: 700; }
.idx-el { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin: 4px 0; }
.idx-status { font-size: 11px; color: var(--dim); }
.idx-status.on { color: var(--gold); }

/* ============ BADGES / GUIDE BOSS ============ */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.badge-card { background: linear-gradient(180deg, #221d2b, #161226); border: 1px solid var(--line); border-left: 4px solid var(--be, var(--line2)); border-radius: 12px; padding: 14px; }
.badge-card.done { box-shadow: inset 0 0 0 1px rgba(111,207,111,.3); }
.badge-card.current { box-shadow: 0 0 18px rgba(232,184,74,.25), inset 0 0 0 1px rgba(232,184,74,.4); }
.badge-card.locked { opacity: .6; border-left-color: var(--line); }
.bc-head { font-family: var(--f-pixel); font-size: 15px; color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bc-loc { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.bc-sub { font-size: 12px; color: var(--dim); margin-top: 6px; }
.bc-status { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 12px; background: rgba(255,255,255,.06); color: var(--muted); }
.bc-status.done { color: var(--green); background: rgba(111,207,111,.14); }
.bc-status.cur { color: var(--gold); background: rgba(232,184,74,.14); }
.bc-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; padding: 7px 10px; background: #16162c; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.bc-row b { color: var(--red); }
.bc-aff { display: flex; gap: 10px; margin: 8px 0; }
.bc-aff > div { flex: 1; }
.bc-aff-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 5px; }
.bc-aff-t.up { color: var(--green); } .bc-aff-t.down { color: var(--red); }
.bc-aff-l { display: flex; flex-wrap: wrap; gap: 4px; }
.bc-counter { margin-top: 8px; }
.bc-cc-list { display: flex; flex-wrap: wrap; gap: 5px; }
.bc-cc { font-size: 11px; color: var(--ink); background: #1c1830; border: 1px solid var(--line2); border-radius: 14px; padding: 3px 9px; cursor: pointer; }
.bc-cc:hover { border-color: var(--cyan); }
.bc-cc b { color: var(--cyan); }

/* ============ PROFIL / SUCCÈS ============ */
.profil-head { display: flex; align-items: center; gap: 16px; }
.prof-av { width: 70px; height: 70px; border-radius: 50%; border: 1px solid var(--line2); background: radial-gradient(circle, rgba(168,85,247,.25), transparent 70%); }
.prof-name { font-family: var(--f-pixel); font-size: 20px; color: #fff; }
.prof-lv { color: var(--cyan); }
.prof-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }
.prof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.prof-stat { background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.prof-stat span { display: block; font-size: 11px; color: var(--muted); }
.prof-stat b { font-size: 16px; color: var(--gold); }
.ach-list { display: flex; flex-direction: column; gap: 9px; }
.ach { display: flex; align-items: center; gap: 12px; background: #16162c; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.ach.done { border-color: rgba(111,207,111,.4); }
.ach.claimed { opacity: .7; }
.ach-info { flex: 1; min-width: 0; }
.ach-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ach-top b { color: #fff; }
.ach-rw { font-size: 12px; color: var(--gold); font-weight: 700; }
.ach-desc { font-size: 12px; color: var(--muted); }
.ach-bar { height: 6px; background: #0a0a14; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin: 6px 0 3px; }
.ach-bar div { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.ach-prog { font-size: 11px; color: var(--dim); }
.ach .btn { white-space: nowrap; font-size: 12px; padding: 7px 12px; }

/* ============ EXPÉDITIONS (refonte) ============ */
.exp-dps { font-size: 14px; color: var(--ink); margin: 8px 0 12px; padding: 8px 12px; background: rgba(94,207,220,.08); border: 1px solid rgba(94,207,220,.3); border-radius: 8px; }
.exp-dps b { color: var(--cyan); }
.es-missions { display: flex; flex-direction: column; gap: 9px; }
.es-mission { background: #16162c; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.es-mission.lock { opacity: .8; }
.es-mh { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.es-mh b { color: #fff; } .es-mh span { font-size: 12px; color: var(--muted); }
.es-min { font-size: 12px; margin: 6px 0; font-weight: 600; }
.es-min.ok { color: var(--green); } .es-min.bad { color: var(--red); }
.es-loots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.es-loot { font-size: 12px; background: #0e0e1c; border: 1px solid var(--line); border-radius: 14px; padding: 3px 9px; }
.es-loot i { color: var(--cyan); font-style: normal; font-weight: 700; }
.es-loot.no { opacity: .5; }
.es-mission .btn { width: 100%; }
.exp-locknote { font-size: 13px; color: var(--gold); margin: 6px 0; }
.es-cards-used { font-size: 11px; color: var(--dim); margin: 4px 0; line-height: 1.4; }
.exp-pickbar { background: #16162c; border: 1px solid var(--line2); border-radius: 10px; padding: 12px; margin: 10px 0 14px; }
.epb-info { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }
.epb-info b.ok { color: var(--green); } .epb-info b.bad { color: var(--red); }
.epb-bar { height: 12px; background: #0e0e1c; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-bottom: 10px; }
.epb-fill { height: 100%; background: linear-gradient(90deg, var(--red), #e0a82e); transition: width .2s; }
.epb-fill.ok { background: linear-gradient(90deg, #4ade80, #25a35a); box-shadow: 0 0 12px rgba(74,222,128,.4); }
.exp-pickbar .btn { width: 100%; }
.exp-pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.exp-pick { position: relative; background: linear-gradient(180deg, #1c1c38, #15152a); border: 2px solid; border-radius: 10px; padding: 8px; text-align: center; cursor: pointer; transition: transform .1s; }
.exp-pick:hover { transform: translateY(-2px); }
.exp-pick.sel { box-shadow: 0 0 0 2px var(--green), 0 0 16px rgba(74,222,128,.4); }
.exp-pick.dis { opacity: .4; cursor: not-allowed; }
.exp-pick canvas, .exp-pick img { width: 100%; height: 120px; object-fit: cover; object-position: 50% 12%; border-radius: 8px; display: block; margin-bottom: 6px; }
.ep-name { font-size: 13px; font-weight: 600; color: #fff; }
.ep-dps { font-size: 12px; color: var(--cyan); }
.ep-el { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.ep-check { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #06210f; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.5); }

/* ============ COMPTE + COMMUNAUTÉ ============ */
.acct-btn { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #2a2540, #1a1730); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 12px; white-space: nowrap; }
.acct-btn:hover { border-color: var(--cyan); color: #fff; }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: #6a6a82; box-shadow: 0 0 6px #6a6a82; }
.acct-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.acct-box { max-width: 420px; width: min(420px, 94vw); text-align: center; position: relative; }
.acct-fields { display: flex; flex-direction: column; gap: 9px; margin: 12px 0; }
.acct-in { font-family: var(--f-body); font-size: 14px; color: var(--ink); background: #0e0e1c; border: 1px solid var(--line2); border-radius: 8px; padding: 10px 12px; width: 100%; }
.acct-in:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(94,207,220,.25); }
.acct-row { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.acct-row .btn { flex: 1; }
.acct-row .acct-in { flex: 2; }
.acct-or { font-size: 12px; color: var(--dim); margin: 10px 0; letter-spacing: 1px; }
.acct-msg { font-size: 13px; min-height: 18px; margin: 6px 0; }
.acct-msg.err { color: var(--red); } .acct-msg.ok { color: var(--green); }
.acct-me { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 14px 0; }
.acct-av { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.3), transparent 70%); border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 24px; }
.acct-name { font-family: var(--f-pixel); font-size: 17px; color: #fff; text-align: left; }
.acct-sub { font-size: 12px; color: var(--muted); text-align: left; }
.acct-info { font-size: 13px; color: var(--muted); margin: 12px 0; }
.comm-nav { display: flex; gap: 7px; flex-wrap: wrap; }
.btn-sm { font-size: 11px; padding: 5px 11px; white-space: nowrap; }

/* chat */
.chat-chans { display: flex; gap: 7px; margin-bottom: 10px; }
.chat-log { height: 360px; overflow-y: auto; background: #0e0e1c; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.chat-msg { font-size: 14px; line-height: 1.4; }
.chat-msg b { color: var(--cyan); margin-right: 4px; }
.chat-msg span { color: var(--ink); word-break: break-word; }
.chat-input-row { display: flex; gap: 8px; margin-top: 10px; }
.chat-input-row .acct-in { flex: 1; }

/* classements */
.rank-list { display: flex; flex-direction: column; gap: 6px; }
.rank-row { display: flex; align-items: center; gap: 10px; background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.rank-row.me { border-color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(94,207,220,.3); }
.rank-pos { font-family: var(--f-pixel); font-size: 14px; color: var(--muted); width: 38px; }
.rank-pos.top { color: var(--gold); text-shadow: 0 0 8px rgba(232,184,74,.5); }
.rank-name { flex: 1; font-weight: 600; color: #fff; }
.rank-val { font-size: 12px; color: var(--muted); }

/* guilde */
.guild-members { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.gm-row { display: flex; align-items: center; gap: 10px; background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }
.gm-role { width: 20px; text-align: center; }
.gm-name { flex: 1; color: #fff; }
.gm-lvl { font-size: 12px; color: var(--muted); }
.fr-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 12px 0 6px; }

/* messages auto + MP */
.chat-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.preset-chip { font-size: 11px; color: var(--muted); background: #16162c; border: 1px solid var(--line); border-radius: 14px; padding: 4px 10px; cursor: pointer; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.preset-chip:hover { color: #fff; border-color: var(--cyan); }
.preset-chip.share { color: var(--gold); border-color: rgba(232,184,74,.4); }
.dm-head { font-size: 13px; color: var(--cyan); display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }

/* historique boss (profil) */
.boss-log { display: flex; flex-direction: column; gap: 6px; }
.bl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; }
.bl-name { font-weight: 600; color: #fff; flex: 1; min-width: 120px; }
.bl-dps { color: var(--cyan); font-size: 13px; }
.bl-date { font-size: 12px; color: var(--muted); }
.bl-team { flex-basis: 100%; font-size: 11px; color: var(--dim); }

/* titres */
.title-tag { font-weight: 700; }
.prof-title { margin: 4px 0 6px; font-family: var(--f-pixel); font-size: 15px; }
.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 8px; }
.title-card { background: #16162c; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.title-card:hover:not(.locked) { border-color: var(--cyan); }
.title-card.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,184,74,.4); }
.title-card.locked { opacity: .55; cursor: default; }
.title-name { font-family: var(--f-pixel); font-size: 14px; font-weight: 700; }
.title-desc { font-size: 11px; color: var(--dim); }

/* expédition communautaire */
.ce-bar { position: relative; height: 28px; background: #0e0e1c; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; margin: 12px 0; }
.ce-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 14px rgba(154,108,255,.5); transition: width .4s; }
.ce-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.ce-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.ce-done { font-size: 14px; color: var(--green); font-weight: 600; }

/* ============ MODES BONUS (Vagues & Tour) ============ */
.event-tag { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #2a1605; background: linear-gradient(180deg, var(--gold), #d97706); padding: 2px 8px; border-radius: 10px; vertical-align: middle; }
.event-tag.bonus { background: linear-gradient(180deg, var(--cyan), #2b8a96); color: #042024; }
.vg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vg-hp { margin: 12px 0; }
.vg-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 10px 0; }
.vg-meta b { color: var(--cyan); }
.vg-run { font-size: 13px; color: var(--gold); }
.vg-record { font-size: 15px; margin: 10px 0 14px; }
.vg-record b { color: var(--gold); font-size: 18px; }
.tower-prog { font-size: 14px; margin: 8px 0 14px; color: var(--muted); }
.tower-prog b { color: var(--gold); }
.tower-floor { background: #16162c; border: 1px solid var(--line2); border-radius: 10px; padding: 14px; max-width: 460px; }
.tower-floor.boss { border-color: var(--gold); box-shadow: 0 0 18px rgba(232,184,74,.2); }
.tf-head { font-family: var(--f-pixel); font-size: 16px; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tf-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.tf-row b.tf-ok { color: var(--green); }
.tf-row b.tf-bad { color: var(--red); }
.tower-floor .btn { width: 100%; margin-top: 12px; }