/* =========================================================
   GACHA CARDS — CONNEXION (arcade)
   Réutilise arcade.css (tokens, .ar-root + grille synthwave)
   ========================================================= */

.lg-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lg-card {
  position: relative; z-index: 2; width: 100%; max-width: 880px; display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--primary-border); border-radius: 20px; overflow: hidden;
  background: linear-gradient(150deg, rgba(0,16,6,0.86), rgba(0,6,3,0.92));
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 50px rgba(var(--primary-rgb), 0.08);
}

/* ----- panneau marque (gauche) ----- */
.lg-brand {
  position: relative; overflow: hidden; padding: 38px 34px;
  background: linear-gradient(160deg, rgba(var(--primary-rgb), 0.12), rgba(0,0,0,0.3) 60%);
  border-right: 1px solid var(--primary-border); display: flex; flex-direction: column;
}
.lg-brand::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 0%, rgba(var(--primary-rgb), 0.16), transparent 60%); }
.lg-logo { font-family: var(--f-pixel); font-size: 22px; line-height: 1.5; color: var(--primary); text-shadow: 0 0 18px rgba(var(--primary-rgb), 0.5); position: relative; z-index: 1; }
.lg-logo b { font-weight: 400; }
.lg-beta { font-family: var(--f-pixel); font-size: 7px; color: var(--combat); border: 1px solid var(--combat); border-radius: 4px; padding: 3px 5px; vertical-align: super; margin-left: 6px; }
.lg-tag { font-family: var(--f-term); font-size: 19px; color: var(--ink-mute); margin-top: 12px; line-height: 1.3; position: relative; z-index: 1; }

/* cartes en éventail décoratives (modèle détaillé) — mises à l'échelle pour
   tenir dans le panneau sans déborder (la carte native fait 186×272). */
.lg-fan { position: relative; z-index: 1; flex: 1; min-height: 220px; margin: 18px 0; overflow: visible; }
/* le wrapper (.lg-fan-l/c/r) est absolu+transformé ; la carte reste en flux dedans */
.lg-fan .gcard { position: relative; }
.lg-fan-l { transform: translate(-50%, -50%) translateX(-72px) rotate(-12deg) scale(.56); z-index: 1; opacity: .8; }
.lg-fan-r { transform: translate(-50%, -50%) translateX(72px) rotate(12deg) scale(.56); z-index: 1; opacity: .8; }
.lg-fan-c { transform: translate(-50%, -50%) scale(.66); z-index: 3; animation: lg-float 4s ease-in-out infinite; }
@keyframes lg-float {
  0%, 100% { transform: translate(-50%, -50%) scale(.66) translateY(-8px); }
  50%      { transform: translate(-50%, -50%) scale(.66) translateY(6px); }
}

.lg-stats { display: flex; gap: 18px; position: relative; z-index: 1; }
.lg-stat-v { font-family: var(--f-term); font-size: 22px; color: var(--primary); white-space: nowrap; }
.lg-stat-l { font-family: var(--f-pixel); font-size: 6px; color: var(--ink-dim); letter-spacing: 1px; margin-top: 4px; }

/* ----- panneau formulaire (droite) ----- */
.lg-form { padding: 34px 32px; display: flex; flex-direction: column; }
.lg-online { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-term); font-size: 15px; color: var(--ink-mute); margin-bottom: 20px; white-space: nowrap; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary); animation: lg-pulse 2s ease-in-out infinite; }
@keyframes lg-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

.lg-tabs { display: flex; gap: 4px; margin-bottom: 22px; }
.lg-tab { flex: 1; font-family: var(--f-pixel); font-size: 9px; letter-spacing: .5px; cursor: pointer; color: var(--ink-mute); background: rgba(0,0,0,0.3); border: 1px solid var(--primary-border); border-radius: 9px; padding: 13px; transition: all .18s; }
.lg-tab:hover { color: var(--primary-dim); }
.lg-tab.is-active { color: #04140a; background: var(--primary); border-color: var(--primary); box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.3); }

.lg-field { margin-bottom: 16px; }
.lg-label { font-family: var(--f-pixel); font-size: 7px; color: var(--primary-dim); letter-spacing: 1px; margin-bottom: 8px; display: block; }
.lg-input-line { display: flex; align-items: center; gap: 9px; background: rgba(0,0,0,0.5); border: 1px solid var(--primary-border); border-radius: 9px; padding: 12px 14px; transition: all .18s; }
.lg-input-line:focus-within { border-color: rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.12); }
.lg-prompt { font-family: var(--f-term); font-size: 18px; color: var(--primary); }
.lg-input { flex: 1; min-width: 0; font-family: var(--f-term); font-size: 19px; color: #e6f3e4; background: none; border: none; outline: none; }
.lg-input::placeholder { color: var(--ink-dim); }
.lg-eye { font-family: var(--f-term); font-size: 16px; color: var(--ink-mute); cursor: pointer; background: none; border: none; padding: 0 2px; }
.lg-eye:hover { color: var(--primary); }

.lg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.lg-check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-term); font-size: 16px; color: var(--ink-mute); cursor: pointer; white-space: nowrap; }
.lg-box { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--primary-border); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--primary); }
.lg-box.is-on { background: rgba(var(--primary-rgb), 0.15); border-color: var(--primary); }
.lg-forgot { font-family: var(--f-term); font-size: 16px; color: var(--ink-mute); cursor: pointer; text-decoration: none; white-space: nowrap; }
.lg-forgot:hover { color: var(--primary); }

.lg-submit {
  font-family: var(--f-pixel); font-size: 13px; letter-spacing: 1px; cursor: pointer; color: #04140a;
  background: linear-gradient(180deg, #66ff77, var(--primary)); border: none; border-radius: 11px; padding: 17px; transition: all .2s;
  box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.3); display: flex; align-items: center; justify-content: center; gap: 10px;
}
.lg-submit:hover { filter: brightness(1.08); box-shadow: 0 0 36px rgba(var(--primary-rgb), 0.55); transform: translateY(-2px); }
.lg-submit:active { transform: translateY(0); }

.lg-sep { display: flex; align-items: center; gap: 12px; margin: 18px 0; font-family: var(--f-pixel); font-size: 7px; color: var(--ink-dim); letter-spacing: 1px; }
.lg-sep::before, .lg-sep::after { content: ''; flex: 1; height: 1px; background: var(--primary-border); }
.lg-guest { font-family: var(--f-pixel); font-size: 9px; letter-spacing: .5px; cursor: pointer; color: var(--ink-mute); background: none; border: 1px solid var(--primary-border); border-radius: 11px; padding: 14px; transition: all .18s; }
.lg-guest:hover { color: var(--primary); border-color: rgba(var(--primary-rgb), 0.4); background: rgba(var(--primary-rgb), 0.04); }
.lg-foot { font-family: var(--f-term); font-size: 14px; color: var(--ink-dim); text-align: center; margin-top: 18px; }

/* ===== responsive ===== */
@media (max-width: 720px) {
  .lg-card { grid-template-columns: 1fr; max-width: 420px; }
  .lg-brand { border-right: none; border-bottom: 1px solid var(--primary-border); padding: 28px 28px 20px; }
  .lg-fan { min-height: 200px; margin: 14px 0; }
  .lg-mini { width: 76px; height: 104px; font-size: 32px; }
}

/* ---- ajouts projet ---- */
.lg-msg { font-family: var(--f-term); font-size: 16px; min-height: 20px; text-align: center; margin-top: 6px; }
.lg-msg.err { color: var(--combat); }
.lg-msg.ok { color: var(--primary); }
.lg-hint { font-family: var(--f-term); font-size: 13px; color: var(--ink-dim); margin-top: 6px; }