/* Thème Star Wars : espace profond, conteneur métallique, message holographique. */
:root{
  --display: "Orbitron", "Eurostile", system-ui, sans-serif;
  --serif:   "News Cycle", "News Gothic", "Franklin Gothic", system-ui, sans-serif;
  --script:  "Orbitron", system-ui, sans-serif;
  /* lignes de balayage de l'hologramme */
  --texture: repeating-linear-gradient(0deg, color-mix(in srgb,var(--gold) 7%,transparent) 0 1px, transparent 1px 3px);
  --aging:
    radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb,var(--gold) 16%,transparent), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 100%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 70%);
  --hint-color: #4bd5ee;
  --hint-glow:  rgba(75,213,238,.55);
  --on-accent:  #0b0b0b;
  --paper-shadow: color-mix(in srgb,var(--gold) 22%,transparent);
  --fold: rgba(0,0,0,.28);
  --drop: rgba(0,0,0,.95);
}
body{
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, color-mix(in srgb,var(--gold) 9%,var(--bg)) 0%, var(--bg) 70%),
    var(--bg);
}

/* Champ d'étoiles (deux couches qui scintillent) */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{
  opacity:.8;
  background-image:
    radial-gradient(1px 1px at 12px 30px, #fff, transparent),
    radial-gradient(1px 1px at 70px 110px, #cfe8ff, transparent),
    radial-gradient(1.5px 1.5px at 130px 50px, #fff, transparent),
    radial-gradient(1px 1px at 180px 160px, #fff, transparent),
    radial-gradient(1px 1px at 40px 180px, #ffe9b0, transparent),
    radial-gradient(1px 1px at 160px 100px, #fff, transparent);
  background-size:200px 200px;
}
body::after{
  opacity:.5;animation:sw-twinkle 4s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.6px 1.6px at 50px 60px, #fff, transparent),
    radial-gradient(1px 1px at 220px 30px, #bfe3ff, transparent),
    radial-gradient(1.2px 1.2px at 140px 240px, #fff, transparent);
  background-size:310px 290px;
}
@keyframes sw-twinkle{from{opacity:.25}to{opacity:.7}}

/* Étoiles filantes (créées par effects.js) */
.decor i{
  position:absolute;left:var(--x);top:var(--y);width:120px;height:1px;
  background:linear-gradient(90deg, transparent, #fff);
  opacity:0;transform:rotate(-18deg);
  animation:sw-shoot var(--d) linear var(--t) infinite;
}
@keyframes sw-shoot{
  0%,90%{opacity:0;transform:rotate(-18deg) translateX(0)}
  92%{opacity:1}
  100%{opacity:0;transform:rotate(-18deg) translateX(-340px)}
}

/* Introduction : le célèbre texte bleu */
.intro{background:var(--bg)}
.intro p{font-family:var(--serif);font-size:clamp(1.2rem,4.4vw,1.75rem);letter-spacing:.02em;color:#4bd5ee;max-width:24ch}

/* Conteneur métallique */
.env-pocket{
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(0,0,0,.35) 49.8% 50.2%, transparent 50.4%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, color-mix(in srgb,var(--envelope) 75%,#fff), var(--envelope) 40%, color-mix(in srgb,var(--envelope) 70%,#000));
}
.flap .out{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
    linear-gradient(170deg, color-mix(in srgb,var(--envelope) 65%,#fff), var(--envelope));
}
.flap .in{background:linear-gradient(0deg, color-mix(in srgb,var(--liner) 70%,#000), var(--liner))}
.env-back{box-shadow:0 40px 70px -25px var(--drop), 0 0 40px -6px color-mix(in srgb,var(--gold) 35%,transparent)}
.letter{background:var(--texture), var(--paper);box-shadow:inset 0 0 18px var(--paper-shadow)}
.addr{
  font-size:clamp(.85rem,3.6vw,1.1rem);letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--gold) 80%,#fff);text-shadow:0 0 10px var(--hint-glow);
}

/* Insigne (remplace le sceau de cire) */
.seal{
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 52%, color-mix(in srgb,var(--accent) 55%,#000) 53% 60%, var(--accent) 61% 100%);
  box-shadow:0 0 0 3px rgba(0,0,0,.6), 0 0 18px 2px color-mix(in srgb,var(--accent) 55%,transparent), 0 6px 12px rgba(0,0,0,.6);
}
.seal::before{border:1px dashed rgba(0,0,0,.45);box-shadow:none}
.seal span{font-weight:700;color:#111;text-shadow:none}
.hint{font-style:normal;font-family:var(--display);font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}

/* Message holographique */
.card{
  border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 50px -6px color-mix(in srgb,var(--gold) 45%,transparent),
             inset 0 0 50px var(--paper-shadow), 0 50px 90px -30px var(--drop);
}
.card::before{border-color:color-mix(in srgb,var(--gold) 35%,transparent);border-radius:3px}
.card.show{animation:sw-holo 6s ease-in-out infinite}
@keyframes sw-holo{0%,100%{filter:none}48%{filter:none}50%{filter:brightness(1.25) hue-rotate(-8deg)}52%{filter:none}}
.to,.from{font-size:.95rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);text-shadow:0 0 10px var(--hint-glow)}
.from{margin-top:1.4em}
h1{font-weight:700;font-size:clamp(1.15rem,5vw,1.6rem);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
   text-shadow:0 0 18px color-mix(in srgb,var(--accent) 45%,transparent)}
.msg{font-size:1.15rem;color:var(--ink)}
.rule::after{background:var(--paper)}
.note{background:rgba(255,255,255,.04);border-color:color-mix(in srgb,var(--gold) 45%,transparent);font-style:normal;color:var(--ink)}
.btn{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border-radius:3px}
.btn-yes{border-color:var(--accent);box-shadow:0 0 18px -4px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-yes:hover{box-shadow:0 0 28px -2px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-no{border-color:color-mix(in srgb,var(--gold) 50%,transparent);color:var(--gold)}
.btn-no.free{background:var(--paper)}
.dodge-msg{font-style:normal;color:var(--accent)}
.mark{color:var(--accent);text-shadow:0 0 14px var(--accent)}