/* ===== Thème Star Citizen / MobiGlas ===== */
:root {
  --sc-bg-0: #02060d;
  --sc-bg-1: #07121f;
  --sc-panel: rgba(10, 28, 46, 0.72);
  --sc-line: rgba(63, 208, 255, 0.35);
  --sc-cyan: #3fd0ff;
  --sc-cyan-dim: #1f7fa3;
  --sc-amber: #ffb347;
  --sc-good: #3dffb0;
  --sc-bad: #ff4d6d;
  --sc-text: #d6ecf7;
  --sc-text-dim: #7fa3b8;
  --sc-cut: 14px;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  color: var(--sc-text);
  font-family: 'Rajdhani', 'Exo 2', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  background:
    radial-gradient(ellipse at 20% 0%, #0b2540 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, #0a1d33 0%, transparent 50%),
    var(--sc-bg-0);
  background-attachment: fixed;
}

/* Champ d'étoiles */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 140px 90px, #9fdcff, transparent),
    radial-gradient(1.5px 1.5px at 250px 160px, #fff, transparent),
    radial-gradient(1px 1px at 330px 40px, #cfeaff, transparent),
    radial-gradient(1px 1px at 60px 200px, #fff, transparent);
  background-size: 360px 240px;
  opacity: 0.55;
  animation: sc-drift 120s linear infinite;
}

/* Scanlines discrètes */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(63,208,255,0.035) 0 1px, transparent 1px 3px);
}

@keyframes sc-drift { to { background-position: -360px 240px; } }

/* Titres */
h1, h2, h3, h4 {
  font-family: 'Orbitron', 'Rajdhani', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sc-cyan);
  text-shadow: 0 0 12px rgba(63,208,255,0.45);
  font-weight: 700;
}
h1 { font-size: clamp(1.6rem, 4vw, 2.6rem); }

/* Panneaux / cartes */
.card, .panel, section, .box, .modal, .question, .room, .player,
fieldset, table {
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  backdrop-filter: blur(8px);
  clip-path: polygon(
    var(--sc-cut) 0, 100% 0, 100% calc(100% - var(--sc-cut)),
    calc(100% - var(--sc-cut)) 100%, 0 100%, 0 var(--sc-cut));
  box-shadow: inset 0 0 24px rgba(63,208,255,0.06);
}

/* Boutons */
button, .btn, input[type="submit"], a.button {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: var(--sc-cyan);
  background: linear-gradient(180deg, rgba(63,208,255,0.14), rgba(63,208,255,0.04));
  border: 1px solid var(--sc-cyan);
  padding: 0.8em 1.4em;
  cursor: pointer;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
                     calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: all .18s ease;
}
button:hover, .btn:hover, input[type="submit"]:hover {
  background: var(--sc-cyan);
  color: #021019;
  box-shadow: 0 0 22px rgba(63,208,255,0.7);
}
button:active { transform: translateY(1px) scale(0.99); }
button:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--sc-amber); outline-offset: 3px;
}

/* Boutons dangereux / secondaires (si classes présentes) */
.danger, .btn-danger { color: var(--sc-bad); border-color: var(--sc-bad); }
.danger:hover, .btn-danger:hover { background: var(--sc-bad); color: #1a0309; box-shadow: 0 0 22px rgba(255,77,109,.7); }

/* Champs de formulaire */
input, select, textarea {
  font-family: inherit; font-size: 1rem;
  color: var(--sc-text);
  background: rgba(2, 12, 22, 0.8);
  border: 1px solid var(--sc-cyan-dim);
  border-bottom: 2px solid var(--sc-cyan);
  padding: 0.7em 0.9em;
  width: 100%;
  transition: box-shadow .2s, border-color .2s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sc-cyan);
  box-shadow: 0 0 14px rgba(63,208,255,0.4);
}
::placeholder { color: var(--sc-text-dim); }
label { color: var(--sc-text-dim); text-transform: uppercase; font-size: .8rem; letter-spacing: .15em; }

/* Les 4 réponses du quiz (adapter aux classes réelles) */
.answer, .answers button, .choice {
  display: block; width: 100%; text-align: left;
  min-height: 56px; font-size: 1rem;
}
.answer.correct, .choice.correct { color: var(--sc-good); border-color: var(--sc-good); box-shadow: 0 0 18px rgba(61,255,176,.5); }
.answer.wrong, .choice.wrong { color: var(--sc-bad); border-color: var(--sc-bad); }

/* Timer / barre de progression */
progress, .timer-bar {
  appearance: none; width: 100%; height: 10px;
  background: rgba(63,208,255,.12); border: 1px solid var(--sc-line);
}
progress::-webkit-progress-bar { background: transparent; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--sc-cyan), var(--sc-amber)); box-shadow: 0 0 12px var(--sc-cyan); }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--sc-cyan), var(--sc-amber)); }

/* Tableaux / classement */
table { width: 100%; border-collapse: collapse; }
th { color: var(--sc-cyan); text-transform: uppercase; font-size: .8rem; letter-spacing: .15em; text-align: left; }
th, td { padding: .7em 1em; border-bottom: 1px solid var(--sc-line); }
tr:hover td { background: rgba(63,208,255,0.07); }

/* Images (illustrations des questions) */
img { max-width: 100%; }
.question img, .illustration { border: 1px solid var(--sc-line); box-shadow: 0 0 24px rgba(63,208,255,.15); }

/* Liens */
a { color: var(--sc-cyan); text-decoration: none; }
a:hover { color: var(--sc-amber); text-shadow: 0 0 8px rgba(255,179,71,.6); }

/* Accessibilité : respecte la préférence "moins d'animations" */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  * { transition: none !important; }
}

/* Mobile */
@media (max-width: 600px) {
  html, body { font-size: 16px; }
  :root { --sc-cut: 10px; }
}