/* ==========================================================================
   Votes des jeux (page d'accueil) — classement des jeux par glisser-déposer
   ========================================================================== */

/* Bandeaux d'information */
.vj-banner { display: flex; align-items: center; gap: 1.2rem; max-width: 900px; margin: 0 auto 2rem; padding: 1.2rem 1.5rem; background: rgba(var(--jc-surface-rgb, 26, 31, 58), .75); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; color: #c0c0c0; }
.vj-banner--highlight { border-color: rgba(var(--jc-accent-rgb, 212, 175, 55), .55); box-shadow: 0 0 18px rgba(var(--jc-accent-rgb, 212, 175, 55), .25), 0 0 40px rgba(var(--jc-accent-rgb, 212, 175, 55), .1); animation: vj-pulse 2.8s ease-in-out infinite; }
.vj-banner--success { border-color: rgba(46, 204, 113, .5); box-shadow: 0 0 16px rgba(46, 204, 113, .18); }
.vj-banner__icon { flex-shrink: 0; font-size: 1.8rem; color: var(--jc-accent, #d4af37); }
.vj-banner--success .vj-banner__icon { color: #2ecc71; }
.vj-banner__body { flex: 1; }
.vj-banner__body strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; color: #fff; }
.vj-banner__body p { margin: 0; font-size: .9rem; }

@keyframes vj-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(var(--jc-accent-rgb, 212, 175, 55), .25), 0 0 40px rgba(var(--jc-accent-rgb, 212, 175, 55), .1); }
  50% { box-shadow: 0 0 26px rgba(var(--jc-accent-rgb, 212, 175, 55), .4), 0 0 60px rgba(var(--jc-accent-rgb, 212, 175, 55), .18); }
}

.vj-btn { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; padding: .65rem 1.3rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--jc-bg, #0a0e27); background: linear-gradient(135deg, var(--jc-accent, #d4af37), var(--jc-accent-light, #f5d76e)); border: none; border-radius: 8px; text-decoration: none; cursor: pointer; transition: all .2s; }
.vj-btn:hover { color: var(--jc-bg, #0a0e27); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--jc-accent-rgb, 212, 175, 55), .35); }
.vj-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.vj-btn--lg { padding: .85rem 1.8rem; font-size: .95rem; }

/* Un panneau par type de jeu */
.vj-app { display: flex; flex-direction: column; gap: 1.8rem; }
.vj-panel { padding: 1.4rem; background: rgba(var(--jc-bg-rgb, 18, 19, 42), .85); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; }
.vj-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.vj-panel__title { margin: 0; font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff; }
.vj-panel__counter { padding: .3rem .8rem; font-size: .85rem; font-weight: 700; color: var(--jc-accent-light, #f5d76e); background: rgba(var(--jc-accent-rgb, 212, 175, 55), .12); border: 1px solid rgba(var(--jc-accent-rgb, 212, 175, 55), .35); border-radius: 999px; }
.vj-panel__counter--done { color: #2ecc71; background: rgba(46, 204, 113, .12); border-color: rgba(46, 204, 113, .4); }
.vj-flash { animation: vj-shake .35s; }
@keyframes vj-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.vj-panel__cols { display: grid; grid-template-columns: minmax(340px, 1fr) 1.6fr; gap: 1.4rem; align-items: start; }
.vj-app--readonly .vj-panel__cols { grid-template-columns: 1fr; }
.vj-col__title { margin-bottom: .6rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(var(--jc-accent-rgb, 212, 175, 55), .85); }

.vj-list { position: relative; min-height: 120px; margin: 0; padding: .6rem; list-style: none; background: rgba(var(--jc-bg-rgb, 10, 14, 39), .55); border: 2px dashed rgba(255, 255, 255, .12); border-radius: 12px; }
.vj-list:empty::before { content: attr(data-empty); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-size: .85rem; color: rgba(255, 255, 255, .35); }
.vj-list--ranking { display: flex; flex-direction: column; gap: .5rem; border-color: rgba(var(--jc-accent-rgb, 212, 175, 55), .35); }
.vj-list--ranking.vj-list--full { border-style: solid; border-color: rgba(46, 204, 113, .4); }
.vj-list--pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.vj-app--readonly .vj-list--ranking { border-style: solid; }

/* Cartes de jeu */
.vj-card { position: relative; display: flex; align-items: center; gap: .6rem; padding: .4rem; background: rgba(var(--jc-surface-rgb, 26, 31, 58), .95); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; color: #fff; cursor: grab; user-select: none; transition: border-color .2s, transform .2s; }
.vj-card:hover { border-color: rgba(var(--jc-accent-rgb, 212, 175, 55), .5); }
.vj-card:active { cursor: grabbing; }
.vj-app--readonly .vj-card { cursor: default; }
.vj-card--ghost { opacity: .35; }
.vj-card__media { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 72px; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255, 255, 255, .06); border-radius: 6px; color: rgba(255, 255, 255, .3); }
.vj-card__media img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vj-card__name { flex: 1; min-width: 0; font-size: .85rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.vj-card__rank, .vj-card__points, .vj-card__remove { display: none; }

/* Carte placée dans le classement : rang, points du barème et bouton de retrait */
.vj-list--ranking .vj-card__rank { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; font-weight: 800; color: var(--jc-bg, #0a0e27); background: linear-gradient(135deg, var(--jc-accent, #d4af37), var(--jc-accent-light, #f5d76e)); border-radius: 50%; }
.vj-list--ranking .vj-card__points { display: block; flex-shrink: 0; font-size: .75rem; color: rgba(255, 255, 255, .5); }
.vj-list--ranking .vj-card__remove { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: rgba(255, 255, 255, .5); background: transparent; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; cursor: pointer; }
.vj-list--ranking .vj-card__remove:hover { color: #e74c3c; border-color: rgba(231, 76, 60, .5); }

/* Carte dans les jeux proposés : jaquette au-dessus du nom */
.vj-list--pool .vj-card { flex-direction: column; align-items: stretch; gap: .4rem; }
.vj-list--pool .vj-card__media { width: 100%; }
.vj-list--pool .vj-card__name { text-align: center; }

.vj-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }
.vj-actions__hint { font-size: .85rem; color: rgba(255, 255, 255, .5); }

@media (max-width: 992px) {
  .vj-panel__cols { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .vj-banner { flex-direction: column; align-items: flex-start; }
  .vj-panel { padding: 1rem; }
  .vj-list--ranking .vj-card__media { width: 56px; }
  .vj-list--pool { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .vj-actions { justify-content: stretch; }
  .vj-actions .vj-btn { width: 100%; justify-content: center; }
}

/* Compte à rebours avant l'ouverture des votes */
.vj-countdown { max-width: 900px; margin: 0 auto 2rem; padding: 1.5rem; text-align: center; background: rgba(var(--jc-surface-rgb, 26, 31, 58), .75); border: 1px solid rgba(var(--jc-accent-rgb, 212, 175, 55), .55); border-radius: 14px; box-shadow: 0 0 18px rgba(var(--jc-accent-rgb, 212, 175, 55), .25), 0 0 40px rgba(var(--jc-accent-rgb, 212, 175, 55), .1); animation: vj-pulse 2.8s ease-in-out infinite; }
.vj-countdown__label { display: block; margin-bottom: 1rem; color: var(--jc-accent, #d4af37); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.vj-countdown__label i { margin-right: .4rem; }
.vj-countdown__grid { display: flex; justify-content: center; gap: 1rem; }
.vj-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 90px; padding: .8rem .6rem; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; }
.vj-countdown__value { font-size: 2.6rem; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.vj-countdown__name { margin-top: .4rem; font-size: .8rem; color: #8899aa; text-transform: uppercase; letter-spacing: .06em; }
.vj-countdown--ouvert { border-color: rgba(46, 204, 113, .6); }
.vj-countdown--ouvert .vj-countdown__label { color: #2ecc71; }
@media (max-width: 576px) {
  .vj-countdown__grid { gap: .5rem; }
  .vj-countdown__unit { min-width: 0; flex: 1; padding: .6rem .3rem; }
  .vj-countdown__value { font-size: 1.7rem; }
  .vj-countdown__name { font-size: .65rem; }
}