/* ═══════════════════════════════════════════════════════════
   CITADELLE — Effets cyberpunk + Thèmes
   ═══════════════════════════════════════════════════════════ */

/* ── Visibilité des fonds par thème ─────────────────────── */
#jdm-bg-canvas, #space-bg-canvas { display: none; }
body.theme-jdm   #jdm-bg-canvas   { display: block; }
body.theme-space #space-bg-canvas { display: block; }
body.theme-jdm   #cyber-bg-canvas,
body.theme-space #cyber-bg-canvas { display: none; }

/* ── Thème JDM : Street Race Drift Japan ────────────────── */
body.theme-jdm {
  --bg:       #060010;
  --sidebar:  #0a0015;
  --card:     #120008;
  --border:   #3d0025;
  --primary:  #ff5e00;
  --primary-h:#dd4500;
  --cyan:     #ff0060;
  --text:     #e8b090;
  --muted:    #4a1525;
}

body.theme-jdm .login-header-area h2 {
  text-shadow: 0 0 20px rgba(255,94,0,.6), 0 0 60px rgba(255,94,0,.2);
}

body.theme-jdm #login-citadelle-frame {
  border-color: rgba(255,94,0,.5);
  animation: jdm-pulse-border 2.5s ease-in-out infinite;
}
body.theme-jdm #login-citadelle-frame img {
  filter: brightness(.9) saturate(.65) hue-rotate(300deg) contrast(1.15);
}
body.theme-jdm #login-citadelle-frame::after {
  background: linear-gradient(180deg, transparent, rgba(255,60,0,.07), transparent);
}
body.theme-jdm #login-citadelle-wrap { animation: hud-flicker 5s infinite; }
body.theme-jdm .hud-corner-tl,
body.theme-jdm .hud-corner-tr,
body.theme-jdm .hud-corner-bl,
body.theme-jdm .hud-corner-br { border-color: #ff5e00; }
body.theme-jdm #citadelle-hud-label { color: #ff5e00; text-shadow: 0 0 10px rgba(255,94,0,.6); }
body.theme-jdm #citadelle-hud-label span { color: rgba(255,0,96,.8); }
body.theme-jdm #citadelle-hud-data {
  border-color: rgba(255,94,0,.3);
  border-top-color: rgba(255,0,96,.4);
  color: rgba(255,94,0,.85);
}
body.theme-jdm #citadelle-hud-data-inner p span { color: #ff5e00; }

@keyframes jdm-pulse-border {
  0%,100% { box-shadow: 0 0 12px rgba(255,94,0,.4), inset 0 0 12px rgba(255,94,0,.08); }
  50%     { box-shadow: 0 0 28px rgba(255,94,0,.75), inset 0 0 20px rgba(255,94,0,.15); }
}

/* ── Thème Space Invaders ────────────────────────────────── */
body.theme-space {
  --bg:       #000000;
  --sidebar:  #001500;
  --card:     #001200;
  --border:   #003300;
  --primary:  #00ff41;
  --primary-h:#00cc33;
  --cyan:     #00aa28;
  --text:     #00ff41;
  --muted:    #004d14;
}

body.theme-space .login-header-area h2 {
  text-shadow: 0 0 20px rgba(0,255,65,.6), 0 0 60px rgba(0,255,65,.2);
}

body.theme-space #login-citadelle-frame {
  border-color: rgba(0,255,65,.5);
  animation: space-pulse-border 0.8s steps(2) infinite;
}
body.theme-space #login-citadelle-frame img {
  filter: brightness(.8) saturate(.1) sepia(.4) hue-rotate(80deg) contrast(1.3);
}
body.theme-space #login-citadelle-frame::after {
  background: linear-gradient(180deg, transparent, rgba(0,255,65,.06), transparent);
}
body.theme-space #login-citadelle-wrap { animation: hud-flicker 4s infinite; }
body.theme-space .hud-corner-tl,
body.theme-space .hud-corner-tr,
body.theme-space .hud-corner-bl,
body.theme-space .hud-corner-br { border-color: #00ff41; }
body.theme-space #citadelle-hud-label { color: #00ff41; text-shadow: 0 0 8px rgba(0,255,65,.8); letter-spacing: 2px; }
body.theme-space #citadelle-hud-label span { color: rgba(0,200,50,.8); }
body.theme-space #citadelle-hud-data {
  border-color: rgba(0,255,65,.3);
  border-top-color: rgba(0,200,50,.4);
  color: rgba(0,255,65,.85);
}
body.theme-space #citadelle-hud-data-inner p span { color: #00ff41; }

/* Login semi-transparent en mode Space pour voir le jeu */
body.theme-space .login-step {
  background: rgba(0,12,0,0.80);
  backdrop-filter: blur(3px);
  padding: 20px;
  border: 1px solid rgba(0,255,65,.15);
}

@keyframes space-pulse-border {
  0%  { box-shadow: 0 0 18px rgba(0,255,65,.7); }
  50% { box-shadow: 0 0 4px rgba(0,255,65,.2); }
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes cyber-spark {
  0%   { opacity:0; transform:scale(0); }
  25%  { opacity:1; transform:scale(2.2); }
  70%  { opacity:0.7; transform:scale(1); }
  100% { opacity:0; transform:scale(0.3); }
}
@keyframes cyber-init-scan {
  0%   { top:-1px; opacity:1; }
  100% { top:calc(100% + 1px); opacity:0; }
}
@keyframes input-scan-sweep {
  0%   { background-position:-60% 0; }
  100% { background-position:160% 0; }
}
@keyframes cyber-corner-expand {
  from { width:0; height:0; opacity:0; }
  to   { width:14px; height:14px; opacity:1; }
}
@keyframes cyber-blink {
  0%,49% { opacity:1; } 50%,100% { opacity:0; }
}

/* ── Citadelle HUD portrait ───────────────────────────────── */

@keyframes hud-scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(400%); }
}
@keyframes hud-glitch-1 {
  0%,90%,100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  91%  { clip-path: inset(12% 0 74% 0); transform: translate(-4px, 0); }
  93%  { clip-path: inset(55% 0 28% 0); transform: translate(4px, 0); }
  95%  { clip-path: inset(80% 0 5%  0); transform: translate(-2px, 0); }
  97%  { clip-path: inset(30% 0 60% 0); transform: translate(3px, 0); }
}
@keyframes hud-glitch-2 {
  0%,88%,100% { clip-path: inset(0 0 100% 0); transform: translate(0); opacity:0; }
  89%  { clip-path: inset(20% 0 65% 0); transform: translate(6px); opacity:.7; color:#00d4ff; }
  92%  { clip-path: inset(60% 0 20% 0); transform: translate(-5px); opacity:.6; }
  96%  { clip-path: inset(45% 0 40% 0); transform: translate(3px);  opacity:.5; }
}
@keyframes hud-scroll-data {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes hud-pulse-border {
  0%,100% { box-shadow: 0 0 12px rgba(0,212,255,.4), inset 0 0 12px rgba(0,212,255,.08); }
  50%      { box-shadow: 0 0 24px rgba(0,212,255,.7), inset 0 0 20px rgba(0,212,255,.14); }
}
@keyframes hud-flicker {
  0%,100% { opacity:1; }
  92%     { opacity:.95; }
  93%     { opacity:.7; }
  94%     { opacity:1; }
  97%     { opacity:.85; }
  98%     { opacity:1; }
}

/* Conteneur HUD positionné en bas à droite */
#login-citadelle-wrap {
  position: fixed;
  right: 6vw;
  bottom: 0;
  width: 300px;
  z-index: 2;
  pointer-events: none;
  animation: hud-flicker 6s infinite;
}

/* Cadre angulaire CP2077 */
#login-citadelle-frame {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  overflow: hidden;
  border: 1px solid rgba(0,212,255,.5);
  animation: hud-pulse-border 3s ease-in-out infinite;
}

/* Image elle-même */
#login-citadelle-frame img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center top;
  filter: brightness(.85) saturate(.55) hue-rotate(170deg) contrast(1.1);
}

/* Overlay cyan hologramme */
#login-citadelle-frame::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,212,255,.12) 0%,
    transparent 40%,
    rgba(0,212,255,.08) 100%
  );
  z-index: 1;
}

/* Scanline qui balaye */
#login-citadelle-frame::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,.07), transparent);
  animation: hud-scanline 3.5s linear infinite;
  z-index: 2;
}

/* Calque glitch rouge */
#citadelle-glitch-r {
  position: absolute; inset: 0;
  background-image: inherit;
  background-size: cover; background-position: center top;
  filter: brightness(.85) saturate(.55) hue-rotate(170deg) contrast(1.1);
  mix-blend-mode: screen;
  animation: hud-glitch-1 7s infinite;
  z-index: 3;
  color: #ff003c;
}

/* Calque glitch cyan */
#citadelle-glitch-c {
  position: absolute; inset: 0;
  background-image: inherit;
  background-size: cover; background-position: center top;
  filter: brightness(.85) saturate(.3) hue-rotate(140deg);
  mix-blend-mode: screen;
  animation: hud-glitch-2 7s infinite;
  z-index: 3;
}

/* Coins HUD */
.hud-corner {
  position: absolute;
  width: 16px; height: 16px;
  z-index: 5; pointer-events: none;
}
.hud-corner-tl { top:-1px; left:-1px;   border-top:2px solid #f5e642; border-left:2px solid #f5e642; }
.hud-corner-tr { top:-1px; right:-1px;  border-top:2px solid #f5e642; border-right:2px solid #f5e642; }
.hud-corner-bl { bottom:-1px; left:-1px;  border-bottom:2px solid #f5e642; border-left:2px solid #f5e642; }
.hud-corner-br { bottom:-1px; right:-1px; border-bottom:2px solid #f5e642; border-right:2px solid #f5e642; }

/* Barre de données en bas du portrait */
#citadelle-hud-data {
  background: rgba(0,5,12,.85);
  border: 1px solid rgba(0,212,255,.3);
  border-top: 1px solid rgba(245,230,66,.4);
  padding: 8px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  color: rgba(0,212,255,.8);
  letter-spacing: 1px;
  overflow: hidden;
  height: 52px;
}
#citadelle-hud-data-inner {
  animation: hud-scroll-data 8s linear infinite;
}
#citadelle-hud-data-inner p {
  line-height: 1.8;
  white-space: nowrap;
}
#citadelle-hud-data-inner p span {
  color: #f5e642;
}

/* Label nom au-dessus */
#citadelle-hud-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #f5e642;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(245,230,66,.6);
  margin-bottom: 6px;
  padding-left: 4px;
  display: flex;
  justify-content: space-between;
}
#citadelle-hud-label span {
  color: rgba(0,212,255,.7);
  font-size: 9px;
  letter-spacing: 2px;
  align-self: flex-end;
}

/* ── Cartes — effets d'apparition ────────────────────────── */
.card { position: relative; }

.cyber-particle {
  position: absolute; width:3px; height:3px; border-radius:50%;
  background: #f5e642; pointer-events:none; z-index:10;
  animation: cyber-spark 550ms ease-out forwards;
}
.cyber-corner {
  position: absolute; width:0; height:0; pointer-events:none; z-index:5;
  animation-name: cyber-corner-expand; animation-duration:.15s;
  animation-timing-function:ease; animation-fill-mode:forwards;
}
.cyber-corner-tl { top:-3px; left:-3px;   border-top:2px solid #f5e642; border-left:2px solid #f5e642; }
.cyber-corner-tr { top:-3px; right:-3px;  border-top:2px solid #f5e642; border-right:2px solid #f5e642; }
.cyber-corner-bl { bottom:-3px; left:-3px;  border-bottom:2px solid #f5e642; border-left:2px solid #f5e642; }
.cyber-corner-br { bottom:-3px; right:-3px; border-bottom:2px solid #f5e642; border-right:2px solid #f5e642; }

.cyber-scan {
  position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, #f5e642, transparent);
  pointer-events:none; z-index:8;
  animation: cyber-init-scan 0.6s linear forwards;
}

/* ── Scan barre sur les inputs ───────────────────────────── */
#cyber-float-scan {
  position:fixed; height:2px; pointer-events:none; z-index:9999;
  background:linear-gradient(90deg, transparent, hsl(140 60% 50%), #f5e642, transparent);
  background-size:60% 100%; background-repeat:no-repeat;
  opacity:0; transition:opacity .2s;
}
#cyber-float-scan.active { opacity:1; animation:input-scan-sweep .8s linear infinite; }

#cyber-float-scan-label {
  position:fixed; font-size:10px; font-family:'Share Tech Mono',monospace;
  color:hsl(140 60% 50%); letter-spacing:2px;
  pointer-events:none; z-index:9999; opacity:0;
}
#cyber-float-scan-label.active { opacity:1; animation:cyber-blink .7s step-start infinite; }

/* ── Scramble ────────────────────────────────────────────── */
.cyber-scramble { font-family:'Share Tech Mono',monospace !important; }