/* ===========================================================================
   Le Mystère d'Halloween — Ambiance visuelle
   Noir / violet foncé / orange · mobile-first · animations soignées
   =========================================================================== */

:root {
  --bg-0:   #0a0612;
  --bg-1:   #140a24;
  --violet: #2b1055;
  --violet-2:#4a1d8f;
  --orange: #ff7b00;
  --orange-2:#ffb347;
  --ghost:  #e8e0ff;
  --card:   rgba(28, 16, 50, 0.72);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg-0);
  color: var(--ghost);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

/* Décor : dégradé nocturne + lune + château + brouillard -------------------- */
.scene {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(130% 90% at 50% -10%, #1b0b3a 0%, var(--bg-1) 40%, var(--bg-0) 100%);
}
.moon {
  position: fixed; top: 6vh; right: 12vw; width: 110px; height: 110px; z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6da, #ffd27a 55%, #e9a94a 100%);
  box-shadow: 0 0 60px 20px rgba(255, 200, 120, .35);
  filter: saturate(1.1);
}
.castle {
  position: fixed; bottom: 0; left: 0; right: 0; height: 36vh; z-index: -2;
  background:
    linear-gradient(to top, #05030a 0%, rgba(5,3,10,0) 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><path fill='black' d='M0,300 L0,160 L40,160 L40,120 L70,120 L70,160 L120,160 L120,90 L150,60 L180,90 L180,160 L260,160 L260,120 L300,120 L300,80 L330,80 L330,40 L360,40 L360,80 L390,80 L390,120 L430,120 L430,160 L560,160 L560,70 L600,30 L640,70 L640,160 L780,160 L780,120 L820,120 L820,80 L850,80 L850,40 L880,40 L880,80 L910,80 L910,120 L950,120 L950,160 L1050,160 L1050,110 L1080,110 L1080,150 L1120,150 L1120,110 L1160,110 L1160,160 L1200,160 L1200,300 Z'/></svg>") bottom center / cover no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300'><path fill='black' d='M0,300 L0,160 L40,160 L40,120 L70,120 L70,160 L120,160 L120,90 L150,60 L180,90 L180,160 L260,160 L260,120 L300,120 L300,80 L330,80 L330,40 L360,40 L360,80 L390,80 L390,120 L430,120 L430,160 L560,160 L560,70 L600,30 L640,70 L640,160 L780,160 L780,120 L820,120 L820,80 L850,80 L850,40 L880,40 L880,80 L910,80 L910,120 L950,120 L950,160 L1050,160 L1050,110 L1080,110 L1080,150 L1120,150 L1120,110 L1160,110 L1160,160 L1200,160 L1200,300 Z'/></svg>") bottom center / cover no-repeat;
}

/* Brouillard animé */
.fog {
  position: fixed; left: 0; right: 0; bottom: 0; height: 40vh; z-index: -1;
  pointer-events: none; opacity: .5;
  background: radial-gradient(60% 100% at 50% 100%, rgba(120,80,180,.35), transparent 70%);
  animation: fogDrift 16s ease-in-out infinite alternate;
}
@keyframes fogDrift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

/* Étoiles / particules scintillantes */
.spark {
  position: fixed; width: 3px; height: 3px; border-radius: 50%;
  background: var(--orange-2); z-index: -1; opacity: .0;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%,100% { opacity: 0; transform: scale(.6); }
  50%     { opacity: .9; transform: scale(1.2); }
}

/* Mise en page générale --------------------------------------------------- */
.stage {
  position: relative; z-index: 1;
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
.panel {
  width: 100%; max-width: 440px;
}

/* Carte vitrée */
.glass {
  background: var(--card);
  border: 1px solid rgba(160,120,255,.22);
  border-radius: 22px;
  padding: 26px 22px;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Titres */
.title {
  font-size: clamp(26px, 7vw, 38px); font-weight: 800; line-height: 1.1;
  text-align: center; letter-spacing: .5px;
  background: linear-gradient(180deg, #fff 0%, var(--orange-2) 70%, var(--orange) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(255,140,40,.25);
}
.subtitle { text-align: center; color: #c9bdf0; font-size: 15px; line-height: 1.55; margin-top: 12px; }

/* Boutons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; border: 0; cursor: pointer;
  padding: 15px 20px; border-radius: 14px; font-size: 16px; font-weight: 700;
  transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  color: #1a0b00;
  background: linear-gradient(135deg, var(--orange-2), var(--orange));
  box-shadow: 0 10px 30px -8px rgba(255,123,0,.7), 0 0 0 1px rgba(255,180,90,.4) inset;
  animation: pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 10px 30px -8px rgba(255,123,0,.55); }
  50%     { box-shadow: 0 10px 44px -6px rgba(255,123,0,.95); }
}
.btn-ghost {
  color: var(--ghost); background: rgba(255,255,255,.06);
  border: 1px solid rgba(160,120,255,.3);
}
.btn-oauth {
  color: #20232a; background: #fff; font-weight: 600;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.6);
}
.btn-oauth.ms { }
.btn:disabled { opacity: .55; cursor: not-allowed; animation: none; }

/* Champs ------------------------------------------------------------------ */
.field { margin-top: 14px; }
.field label { display:block; font-size: 13px; color:#b9abe6; margin-bottom: 6px; }
.input {
  width: 100%; padding: 14px 14px; border-radius: 12px; font-size: 16px;
  color: #fff; background: rgba(10,6,20,.7);
  border: 1px solid rgba(160,120,255,.3); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,123,0,.25); }
.input.err { border-color: #ff5b6e; box-shadow: 0 0 0 3px rgba(255,91,110,.2); }
.hint { font-size: 12.5px; color:#ff8a98; margin-top: 6px; min-height: 16px; }
.note { font-size: 12px; color:#9c8fce; text-align:center; margin-top: 16px; line-height:1.5; }

.divider { display:flex; align-items:center; gap:12px; color:#8f82bd; font-size:13px; margin:18px 0; }
.divider::before, .divider::after { content:""; height:1px; flex:1; background:rgba(160,120,255,.25); }

/* Portes (jeu) ------------------------------------------------------------ */
.doors { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
@media (max-width: 380px){ .doors { gap: 8px; } }

.door {
  position: relative; aspect-ratio: 3/5; border-radius: 12px 12px 6px 6px;
  cursor: pointer; perspective: 800px;
  background: linear-gradient(180deg, #3a2410, #221405);
  border: 2px solid #5a3a16;
  box-shadow: inset 0 0 20px rgba(0,0,0,.6), 0 10px 24px -12px #000;
  transition: transform .2s ease, box-shadow .25s ease;
  overflow: hidden;
}
.door:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -14px rgba(255,123,0,.6); }
.door .emoji { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: clamp(30px, 10vw, 46px); transition: opacity .3s; }
.door .knob { position:absolute; top:50%; right:10%; width:9px; height:9px; border-radius:50%;
  background: var(--orange-2); box-shadow: 0 0 8px var(--orange); }
.door .panelwood { position:absolute; inset:12% 14%; border:2px solid rgba(0,0,0,.35); border-radius:6px; }

/* Ouverture de porte : rotation sur charnière gauche */
.door.opening .leaf {
  transform-origin: left center;
  animation: doorSwing .9s cubic-bezier(.5,.05,.2,1) forwards;
}
.door .leaf { position:absolute; inset:0; background: inherit; border-radius: inherit; }
@keyframes doorSwing { to { transform: rotateY(-105deg); } }
.door.opening { box-shadow: 0 0 40px 6px rgba(255,160,40,.7); }
.door .behind {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size: clamp(34px, 12vw, 54px); background: radial-gradient(circle, #ffcf87, #ff7b00 70%);
  opacity:0; animation: reveal .6s .45s forwards;
}
@keyframes reveal { to { opacity: 1; } }
.door.dim { opacity:.35; pointer-events:none; }

/* Confettis / éclat de gain */
.burst { position: fixed; inset: 0; pointer-events:none; z-index: 5; overflow:hidden; }
.confetti { position:absolute; top:-10px; width:9px; height:14px; opacity:.9;
  animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity:.2; } }

/* Transition d'écran */
.screen-enter { animation: screenIn .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes screenIn { from { opacity:0; transform: translateY(14px) scale(.98); } to { opacity:1; transform:none; } }

.badge-demo {
  position: fixed; top: 10px; left: 10px; z-index: 20;
  background: rgba(255,123,0,.18); border:1px solid var(--orange);
  color: var(--orange-2); font-size:12px; font-weight:700;
  padding: 5px 10px; border-radius: 999px; letter-spacing:.5px;
}

.result-emoji { font-size: 70px; text-align:center; animation: pop .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

.spin { animation: spin 1s linear infinite; display:inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Écran de connexion générique (évoque un portail, sans cloner de marque) */
.sso { width:100%; max-width:400px; margin:0 auto; background:#fff; color:#1b1b1f;
  border-radius:16px; overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,.8); }
.sso-head { background: var(--accent, #0067b8); color:#fff; padding:26px 24px 22px; text-align:center; }
.sso-lock { font-size:34px; }
.sso-title { font-size:22px; font-weight:700; margin-top:6px; }
.sso-sub { font-size:13px; opacity:.9; margin-top:4px; }
.sso-body { padding:22px 24px 10px; }
.sso-label { display:block; font-size:12.5px; color:#555; margin:12px 0 6px; font-weight:600; }
.sso-input { width:100%; padding:13px 12px; font-size:16px; border-radius:8px;
  border:1px solid #c7c7cc; background:#fff; color:#111; outline:none; transition:border-color .2s, box-shadow .2s; }
.sso-input:focus { border-color: var(--accent, #0067b8); box-shadow:0 0 0 3px rgba(0,103,184,.18); }
.sso-input.err { border-color:#d13438; box-shadow:0 0 0 3px rgba(209,52,56,.15); }
.sso .hint { color:#d13438; }
.sso-btn { width:100%; margin-top:14px; padding:13px; border:0; border-radius:8px; cursor:pointer;
  color:#fff; font-size:16px; font-weight:700; transition:filter .2s, transform .12s; }
.sso-btn:hover { filter:brightness(1.07); }
.sso-btn:active { transform:scale(.98); }
.sso-btn:disabled { opacity:.7; cursor:default; }
.sso-link { display:block; width:100%; margin:12px 0 4px; background:none; border:0; cursor:pointer;
  color:#555; font-size:13px; text-align:center; }
.sso .note { color:#8a8a90; }

ul.tips { list-style:none; padding:0; margin: 18px 0 0; }
ul.tips li { display:flex; gap:10px; align-items:flex-start; padding:10px 0;
  border-top:1px solid rgba(160,120,255,.15); font-size:14.5px; line-height:1.5; color:#d8cdfa; }
ul.tips li:first-child { border-top:0; }
ul.tips .ic { color: var(--orange); font-size:18px; flex:none; }