:root{
  --bg:#0E0A14;        /* noir violacé */
  --panel:#171024;     /* panneaux violet très sombre */
  --muted:#B1A7C7;     /* gris-lavande */
  --text:#F0ECFF;      /* blanc légèrement lavande */
  --accent:#f87bff;
  --accent2:#de8bfa;
  --border:#2F2540;    /* border violet sombre */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
.spacelil{
height: 48px;
}

#meaning { white-space: pre-line; }

.wrap{max-width:1000px; margin:0 auto; padding:28px}
.page-title{color:var(--accent); font-size:32px; margin-bottom:20px}
.category-title{color:white; font-size:24px; margin:20px 0 10px}

/* Cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.card{
  background:var(--panel); border:1px solid var(--border);
  border-radius:16px; overflow:hidden; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  text-align:center;
}
.card:hover{transform:translateY(-4px); box-shadow:0 0 12px var(--accent)}
.thumb{
  width:100%; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent2);
}
.thumb img{
  height:80%; object-fit:cover;
}
.name{padding:8px; font-weight:bold; font-size:16px; color:white(--accent)}

/* Popup */
.modal{  z-index: 1000; position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.75)}
.modal.open{display:grid}
.sheet{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px; max-width:900px; width:90%;
  max-height:90vh; display:flex; flex-direction:column;
}
.sheethead{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:#171024; border-bottom:1px solid var(--border);
  border-top-left-radius:18px;
  border-top-right-radius:18px;
}
.sheethead h2{margin:0; color:white}

.btn{
  background:none; border:none; color:var(--text);
  font-size:20px; cursor:pointer;
}
.content{
  display:grid; grid-template-columns:300px 1fr; flex:1;
  overflow-y:auto;
}
.pane{padding:16px}

/* Bloc animation carré */
.previewBox{
  background:#171024; border:1px dashed var(--border);
  border-radius:12px; aspect-ratio:1/1; width:100%;
  display:grid; place-items:center;
}
.previewSprite{
  width:80%; height:80%; border-radius:12px;
  background:conic-gradient(from 0deg, rgba(139,92,246,.35), rgba(167,139,250,.35));
}

/* Animations */
.anim-buttons{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:center;
  margin-top:8px;
}
.anim-btn{
  background:#2A2F3A; border:none; color:var(--text);
  padding:4px 8px; border-radius:8px; cursor:pointer;
  font-size:12px; transition:all 0.2s ease;
}
.anim-btn:hover{background:var(--accent2); color:#fff}
.anim-btn.active{
  background:var(--accent); color:#fff;
  box-shadow:0 0 8px var(--accent);
  animation:glow 1.5s ease-in-out infinite alternate;
}

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.iframe{
  width: 100%;
  height: 100%;
  max-height: 360px;
  max-width: 640px;
}

@keyframes glow{
  0%{box-shadow:0 0 8px var(--accent);}
  100%{box-shadow:0 0 16px var(--accent);}
}

/* Tableaux */
.stats-table h4, .attacks h4{color:white; margin-bottom:6px}
.stats-table table, .attacks table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  margin-top:4px;
}
.stats-table th, .stats-table td,
.attacks th, .attacks td{
  padding:6px; text-align:center; vertical-align:middle;
  border-bottom:1px solid var(--border);
}
.stats-table th, .attacks th{
  background:var(--accent2); color:#fff; font-weight:bold;
}
.stats-table tr:last-child td, .attacks tr:last-child td{border-bottom:none}

/* Signification */
.meaning-section{margin-top:20px}
.meaning-section h4{color:white; margin-bottom:6px; margin-top: 32px;}
#meaning{margin-top: 0;}
/* Responsive */
@media (max-width: 768px){
  .content{grid-template-columns:1fr}
  .sprite-pane{order:-1}
  #statsTable thead{display:none}
  #statsTable, #statsTable tbody, #statsTable tr, #statsTable td{
    display:block; width:100%;
  }
  #statsTable td{
    display:flex; justify-content:space-between;
    border-bottom:1px solid var(--border);
    padding:8px; background:var(--panel);
  }
  #statsTable td::before{
    content:attr(data-label);
    background:var(--accent2); color:#fff;
    padding:4px 8px; border-radius:6px;
    margin-right:8px; font-weight:bold;
  }
}

@media (max-width: 600px){
  .grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.linkcqs{
color: #f87bff;
}

.drops-section {
  margin-top: 20px;
}
.drops-section h4 {
  color: white;
  margin-bottom: 6px;
  margin-top: 32px;
}
#dropList {
  list-style: none;
  padding: 0;
  margin: 0;
}
#dropList li {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 4px;
}