:root{
  --bg: #0f1222;
  --panel: #171b33;
  --muted: #9aa3b2;
  --text: #eef2ff;
  --primary: #7c4dff;
  --primary-2: #4adede;
  --danger:#ff5572;
  --chip:#1f2446;
  --ok:#2ecc71;
  --ring:#2b2f5e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 80% -10%, #1b2050 0%, #0f1222 60%, #0b0e1a 100%);
  color:var(--text);
}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid #23284f; backdrop-filter:saturate(1.2) blur(6px);
  position:sticky; top:0; z-index:10; background:rgba(15,18,34,0.8);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700}
.logo{width:34px; height:34px; border-radius:8px; object-fit:cover; background:#22264d}
.nav{display:flex; gap:14px}
.nav a{color:var(--text); text-decoration:none; opacity:.9; padding:8px 10px; border-radius:10px}
.nav a:hover{background:#1b2050}

/* Hero */
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; padding:56px 22px; align-items:center}
.hero-card{background:linear-gradient(180deg,#161a35, #141835); border:1px solid #262a59; border-radius:18px; padding:28px}
.hero h1{font-size:40px; margin:0 0 8px}
.hero p{color:var(--muted); margin:0 0 16px}
.hero-actions{display:flex; gap:12px; margin:18px 0}
.hero-stats{display:flex; gap:18px; list-style:none; padding:0; margin:0; color:#cbd5ff}
.hero-art{position:relative; height:320px}
.card-float{position:absolute; inset:auto 0 0 auto; width:280px; height:180px; border-radius:18px; border:1px solid #2a2f62;
  background: linear-gradient(135deg, rgba(124,77,255,.2), rgba(74,222,222,.2)); transform:rotate(-6deg) translate(10px, -10px);
  box-shadow:0 10px 50px rgba(124,77,255,.25)}
.sparkles{position:absolute; inset:20px; background:
  radial-gradient(circle at 20% 30%, rgba(124,77,255,.6), transparent 40%),
  radial-gradient(circle at 70% 70%, rgba(74,222,222,.6), transparent 35%),
  radial-gradient(circle at 85% 20%, rgba(255, 215, 0, .6), transparent 30%);
  filter: blur(14px); opacity:.8}

/* Common */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid #2b2f5e; color:var(--text); background:#1a1f45; text-decoration:none; cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(120deg, var(--primary), var(--primary-2)); border:0}
.btn.danger{background:linear-gradient(120deg, #ff416c, #ff4b2b); border:0}
.hint{color:#b7c0d8; font-size:14px}

/* Layouts */
.page{max-width:1000px; margin:24px auto; padding:0 16px}
.panel{background:linear-gradient(180deg,#161a35, #141835); border:1px solid #262a59; border-radius:16px; padding:18px; margin:16px 0}
.grid-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:12px}
.card{background:linear-gradient(180deg,#161a35, #141835); border:1px solid #262a59; border-radius:16px; padding:18px}
.foot{padding:22px; text-align:center; color:#aeb6d9}

/* Auth */
.auth{display:grid; place-items:center; padding:40px 18px}
.tabs{display:flex; gap:8px; margin-bottom:12px}
.tab{background:#1a1f45; color:var(--text); border:1px solid #2b2f5e; padding:8px 12px; border-radius:999px; cursor:pointer; opacity:.8}
.tab.active{opacity:1; background:linear-gradient(120deg, var(--primary), var(--primary-2)); border:0}
.auth .panel{display:none}
.auth .panel.active{display:block}
label{display:grid; gap:6px; margin:10px 0}
input, select{background:#0f1330; color:var(--text); border:1px solid #2b2f5e; border-radius:10px; padding:10px}

/* Toolbar + bars */
.toolbar{display:grid; gap:10px; margin:8px 0 16px}
.bar{height:10px; background:#0f1330; border:1px solid #293067; border-radius:999px; overflow:hidden}
.bar-fill{height:100%; width:0; background:linear-gradient(90deg, var(--primary), var(--primary-2))}
.label{color:#cbd5ff}

/* Items */
.item{display:flex; gap:12px; align-items:flex-start; background:#12163a; border:1px solid #2b2f5e; padding:12px; border-radius:14px}
.item h3{margin:0; font-size:18px}
.item .cap{font-size:12px; color:#cdd3ff}
.badge{padding:2px 8px; font-size:12px; border-radius:999px; background:#212755; border:1px solid #33408f}
.diff-0{background:#233250}
.diff-1{background:#244d2d}
.diff-2{background:#584a1a}
.diff-3{background:#592626}

/* Chips */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{background:var(--chip); color:#d5dcff; border:1px solid #2b2f5e; padding:6px 10px; border-radius:999px}

/* Wallet & missions */
.wallet{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.wallet-amount{font-size:18px}
.missions{display:grid; gap:10px}
.mission{display:flex; justify-content:space-between; align-items:center; background:#12163a; border:1px solid #2b2f5e; padding:10px 14px; border-radius:12px}
.mission .title{font-weight:600}
.mission .state{font-size:13px; color:#b6bee0}

/* Shop */
.shop-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px}
.product{background:#12163a; border:1px solid #2b2f5e; border-radius:14px; padding:12px}
.product h3{margin:0 0 6px}
.price{color:#ffd78a}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(5,7,16,.66); display:none; place-items:center}
.modal[aria-hidden="false"]{display:grid}
.modal-content{width:min(720px, 92vw); max-height:86vh; overflow:auto; background:#12163a; border:1px solid #2b2f5e; border-radius:16px; padding:18px}
.modal-close{position:sticky; top:0; float:right; border:0; background:#1a1f45; color:#fff; border-radius:999px; width:32px; height:32px; cursor:pointer}

/* Cases alignées à gauche, texte en colonne à droite */
.checklist label{
  display: grid;
  grid-template-columns: 22px 1fr; /* colonne case + colonne texte */
  align-items: start;
  gap: 10px;
}

/* Alignement propre et style de la case */
.checklist input[type="checkbox"]{
  margin: 3px 0 0 0;               /* aligne en haut du paragraphe multi-lignes */
  accent-color: var(--primary, #7c4dff);
}

/* Un peu d’air entre les éléments */
.checklist li{
  list-style: none;
  padding: 6px 8px;
}
.checklist li + li{ margin-top: 6px; }

/* Liens des cartes (techniques/tours) = blancs, non soulignés */
.card .title-row a,
a.link {
  color: var(--foreground, #fff);
  text-decoration: none;
  font-weight: 700;
}

/* Pas de violet après clic */
.card .title-row a:visited,
a.link:visited {
  color: var(--foreground, #fff);
}

/* Hover propre + accessibilité focus */
.card .title-row a:hover,
a.link:hover { text-decoration: underline; text-underline-offset: 2px; }

.card .title-row a:focus-visible,
a.link:focus-visible {
  outline: 2px solid var(--primary, #7c4dff);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding:28px 16px}
  .hero-art{height:200px}
}