:root{
  --brand:#F1CD5A;
  --bg:#0B0B0D;
  --text:#FFFFFF;
  --card:rgba(255,255,255,.05);
  --ok:#2ecc71;
  --warn:#f39c12;
  --danger:#e74c3c;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
.vq-wrap{
  background:var(--bg);
  color:var(--text);
  min-height:80vh;
  padding:16px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  position:relative;
}

/* Flash overlay (Dry Hit) – permanent tant que actif */
.vq-flash{
  pointer-events:none;
  position:absolute; inset:0;
  background:rgba(255,0,0,.35);
  opacity:0;
  transition:opacity .15s ease;
}
.vq-flash.show{ opacity:1; }

/* Écran d’accueil */
.vq-start{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center; z-index:20;
}
.vq-start-card{
  width:min(560px, 92vw);
  background:#111; border:1px solid #222; border-radius:12px;
  padding:18px; text-align:center;
}
.vq-start-card h2{margin:0 0 8px;color:#fff}
.vq-start-card p{margin:0 0 14px;opacity:.9}
.vq-start-btn{
  padding:12px 16px; border:none; border-radius:10px;
  background:var(--brand); color:#000; font-weight:700; cursor:pointer;
}

/* Header */
.vq-header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:16px; gap:12px; flex-wrap:wrap;
}
.vq-title{display:flex; align-items:center; gap:10px}
.vq-title h1{ margin:0; font-size:1.4rem; font-weight:700; color:#fff; }
.vq-dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); box-shadow:0 0 8px var(--brand); }
.vq-status{ display:flex; gap:12px; flex-wrap:wrap }
.vq-status-item{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border-radius:8px; padding:4px 8px; }
.vq-ico{opacity:.9;font-size:.9rem}
.vq-bar{width:120px;height:8px;background:#222;border-radius:8px;overflow:hidden}
.vq-bar-fill{height:100%;width:0;background:var(--ok);transition:width .25s ease, background .25s ease}
.vq-bar-fill.vq-fatigue{background:var(--warn)}
.vq-bar-fill.vq-fatigue.max{background:var(--danger)} /* rouge à 100% */
.vq-bar-fill.vq-durability{background:#3498db}

/* Layout */
.vq-main{display:grid;grid-template-columns:1fr 360px;gap:16px}
@media(max-width:980px){.vq-main{grid-template-columns:1fr}}

/* Appareil */
.vq-device{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:16px}
.vq-device-stage{position:relative;display:flex;justify-content:center;align-items:center;height:280px;background:radial-gradient(120px 40px at 50% 70%,rgba(241,205,90,.12),transparent)}
.vq-device-svg{width:180px;height:auto;fill:#111;stroke:#555;stroke-width:1.2}
.vq-device-svg .body{fill:#151515}
.vq-device-svg .drip{fill:#202020}
.vq-device-svg .button{fill:#202020}
.vq-device-svg .glass{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.08);stroke-width:1}

/* Jauge e-liquide */
#vq-eliq-vis{
  transition:height .25s ease, y .25s ease, fill .25s ease;
  stroke:none; filter:drop-shadow(0 0 6px rgba(241,205,90,0.6));
}

/* Alerte encart device (malus, charge, etc.) */
.vq-device-alert{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.15);
  color:#fff; padding:6px 10px; border-radius:999px;
  font-size:.85rem; pointer-events:none; opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  white-space:nowrap; z-index:2;
}
.vq-device-alert.show{opacity:1;transform:translateX(-50%) translateY(0)}
.vq-device-alert.neg{background:rgba(231,76,60,.85);border-color:rgba(231,76,60,.9)}
.vq-device-alert.warn{background:rgba(243,156,18,.85);border-color:rgba(243,156,18,.9)}
.vq-device-alert.pos{background:rgba(46,204,113,.85);border-color:rgba(46,204,113,.9)}
.vq-device-alert.info{background:rgba(52,152,219,.85);border-color:rgba(52,152,219,.9)}

/* Badges sous-niveaux dans l'encart */
.vq-sub-badges{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:2;
}
.vq-sub-badge{
  background:#101010; border:1px solid #1f1f1f; color:#fff;
  padding:2px 6px; border-radius:999px; font-size:.8rem;
  display:flex; align-items:center; gap:6px;
}
.vq-sub-badge .lvl{opacity:.9}

/* Shake pour malus */
.vq-device-stage.shake{animation:shake .35s ease}
@keyframes shake{
  0%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}

/* Vape animée */
.vq-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vq-clouds .c {
  position: absolute;
  bottom: 70px;
  left: 50%; /* position de base, qu’on va décaler en JS */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  filter: blur(5px); /* moins floue */
  opacity: 0;
  background: rgba(255, 255, 255, 0.35); /* plus dense */
  animation: drift 2.8s ease-out forwards;
}

/* plus besoin de .c1, .c2, .c3, .c4 ici */

@keyframes drift {
  0% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  15% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-150px) scale(1.5);
  }
}


/* Compteurs */
.vq-counters{display:flex;gap:14px;justify-content:center;margin:10px 0 12px;flex-wrap:wrap;align-items:center}
.vq-counter{background:#121212;border:1px solid #1d1d1d;border-radius:10px;padding:10px 12px;min-width:120px;text-align:center;display:flex;gap:8px;align-items:center;justify-content:center}
.vq-counter label{display:block;font-size:.78rem;opacity:.7}
.vq-counter strong{font-size:1.2rem}
.vq-level-name{display:inline-block;margin-left:6px;font-size:.85rem;opacity:.85}
.vc-ico{filter:drop-shadow(0 0 4px rgba(241,205,90,.5))}

/* Bouton principal */
.vq-vape-btn{width:100%;padding:14px 16px;border:none;border-radius:12px;background:var(--brand);color:#000;font-weight:700;font-size:1.05rem;cursor:pointer;transition:transform .06s ease,filter .2s}
.vq-vape-btn:active{transform:scale(.985)}
.vq-vape-btn[disabled]{opacity:.6;cursor:not-allowed;filter:grayscale(1)}
.vq-hint{margin-top:10px;opacity:.85;font-size:.9rem;min-height:1.2em;text-align:center}

/* Panneaux */
.vq-panels{display:grid;gap:16px}
.vq-card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px}
.vq-card h2{margin:0 0 10px;font-size:1.05rem;color:#fff;font-weight:700}
.vq-shop-list{display:grid;gap:8px}
.vq-shop-item{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#121212;border:1px solid #1c1c1c;border-radius:10px;padding:10px}
.vq-shop-item .meta{display:flex;flex-direction:column}
.vq-shop-item .meta strong{color:#fff}
.vq-shop-item .meta small{opacity:.8;color:#ddd}
.vq-shop-item .price{font-weight:700}
.vq-shop-item button{background:#222;color:#fff;border:1px solid #333;padding:8px 10px;border-radius:8px;cursor:pointer}
.vq-shop-item button:disabled{opacity:.6;cursor:not-allowed}
.vq-shop-item button.buy{background:var(--brand);color:#000;border:none}

/* Maintenance */
.vq-maint{display:flex;gap:8px;flex-wrap:wrap}
.vq-btn{background:#222;border:1px solid #333;border-radius:8px;color:#fff;padding:8px 10px;cursor:pointer}
.vq-btn:disabled{opacity:.6;cursor:not-allowed}
.vq-small{font-size:.8rem;opacity:.7;margin-top:6px}

/* Journal */
.vq-log{background:#0e0e0e;border:1px solid #191919;border-radius:8px;min-height:120px;max-height:200px;overflow:auto;padding:10px;font-size:.9rem}
.vq-log p{margin:.25rem 0}
.vq-log .neg{color:var(--danger)}
.vq-log .pos{color:var(--ok)}
.vq-log .warn{color:var(--warn)}

/* Quêtes */
.vq-quests-card{
  margin-top:16px;
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:14px;
}
.vq-quests-card h2{margin:0 0 10px;font-size:1.05rem;color:#fff;font-weight:700}
.vq-quests-scroll{
  max-height:260px;
  overflow:auto;
  padding-right:6px;
}
.vq-quest-section{
  margin-bottom:14px;
  border:1px solid #1b1b1b;
  border-radius:10px;
  overflow:hidden;
}
.vq-quest-section header{
  background:#121212;
  padding:8px 10px;
  font-weight:700;
}
.vq-quest-list{padding:8px}
.vq-quest-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px dashed #222;padding:8px 2px;
}
.vq-quest-item:last-child{border-bottom:none}
.vq-quest-left{display:flex;align-items:center;gap:8px}
.q-ico{font-size:1rem}
.q-badge{min-width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem}
.q-badge.fail{background:#2b1515;border:1px solid #4b2222;color:#ff7b7b}
.q-badge.ok{background:#102b17;border:1px solid #1f4b2b;color:#79ffb5}

/* Footer */
.vq-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-size:.85rem;opacity:.8;gap:10px;flex-wrap:wrap}
.vq-badge{background:#1a1a1a;border:1px solid #2a2a2a;padding:6px 8px;border-radius:999px}
.vq-badge.warn{border-color:#4a3315;color:#f1c27d}