:root {
  --bg: #0b1538;
  --panel: #ffffff;
  --primary: #0b4fd6;
  --primary-dark: #071d54;
  --sky: #27b8ff;
  --secondary: #22c55e;
  --accent: #ffd21a;
  --orange: #ff8a00;
  --danger: #ef4444;
  --text: #10203f;
  --muted: #64748b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top, #1d4ed8 0%, var(--bg) 48%, #020617 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.game-wrapper { width: min(1120px, 100%); }

.panel {
  background: rgba(255,255,255,0.97);
  border-radius: 26px;
  padding: 22px;
  box-shadow: 0 22px 70px rgba(0,0,0,0.38);
  overflow: hidden;
}

.intro { text-align: center; }

.main-logo {
  width: min(620px, 92%);
  max-height: 270px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.2));
}

.end-logo {
  width: min(420px, 90%);
  max-height: 210px;
  object-fit: contain;
  display: block;
  margin: 0 auto 4px;
}

.brand-logo {
  width: min(230px, 70%);
  display: block;
  margin: 12px auto 0;
}

.intro-text {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 4px 0 16px;
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}

.setup-card {
  background: #eff6ff;
  border: 2px solid #bfdbfe;
  border-radius: 20px;
  padding: 14px;
}

label { font-weight: 900; }

select, button {
  width: min(460px, 100%);
  display: block;
  margin: 10px auto;
  padding: 13px 15px;
  border-radius: 15px;
  border: 2px solid #dbeafe;
  font-size: 1rem;
}

button {
  border: none;
  color: white;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.15s, filter 0.15s;
}
button:hover { transform: translateY(-2px); filter: brightness(1.05); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.primary-btn, .secondary-btn { background: linear-gradient(135deg, var(--primary), var(--sky)); }
.secondary-btn { background: linear-gradient(135deg, var(--primary-dark), #334155); }
.small { color: var(--muted); font-size: 0.95rem; }

.sound-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 14px auto 2px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff7cc;
  border: 2px solid #fde68a;
}
.sound-option input { transform: scale(1.2); }

.custom-title { font-weight: 900; margin: 0 0 10px; color: var(--primary-dark); }
.table-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.table-check {
  background: white;
  border: 2px solid #bfdbfe;
  border-radius: 13px;
  padding: 9px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.table-check input { margin-right: 6px; }
.quick-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.small-btn { width: auto; min-width: 130px; margin: 0; padding: 10px 12px; background: var(--primary); }
.small-btn.ghost { background: #64748b; }

.game { padding-top: 16px; }
.game-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(320px, 1.35fr);
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.hud-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--primary-dark);
  color: var(--accent);
  border-radius: 22px;
  padding: 10px 14px;
  box-shadow: 0 12px 26px rgba(7,29,84,.22);
  min-height: 86px;
}

.mini-logo {
  width: 66px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.25));
}

.topbar {
  display: flex;
  gap: 10px 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-size: clamp(.92rem, 1.8vw, 1.15rem);
  font-weight: 900;
  line-height: 1.2;
}
.topbar strong { color: white; }

.question-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: #eff6ff;
  color: var(--primary);
  border: 2px solid #bfdbfe;
  border-radius: 22px;
  font-size: clamp(1.9rem, 4.7vw, 3.3rem);
  font-weight: 900;
  padding: 12px 18px;
  min-height: 86px;
}
.question-card span { justify-self: center; }

.audio-btn {
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), var(--orange));
  color: #111827;
  font-size: 1.35rem;
}

.space {
  position: relative;
  height: min(58vh, 500px);
  min-height: 330px;
  border-radius: 22px;
  background: radial-gradient(circle at 50% 25%, #1e40af, #020617 75%);
  overflow: hidden;
  border: 4px solid #dbeafe;
}

.stars, .stars::before, .stars::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.42;
  animation: starsMove 8s linear infinite;
}
.stars::before { background-size: 70px 70px; opacity: 0.25; animation-duration: 12s; }
.stars::after { background-size: 26px 26px; opacity: 0.2; animation-duration: 6s; }
@keyframes starsMove { to { transform: translateY(90px); } }

.rocket {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 4rem;
  filter: drop-shadow(0 0 14px #38bdf8);
  z-index: 4;
}
.rocket.hit { animation: rocketShake .42s ease; }
@keyframes rocketShake {
  0%,100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 14px)); }
  40% { transform: translateX(calc(-50% + 14px)); }
  60% { transform: translateX(calc(-50% - 10px)); }
  80% { transform: translateX(calc(-50% + 10px)); }
}

.asteroids { position: absolute; inset: 0; z-index: 2; }
.asteroid {
  position: absolute;
  width: clamp(74px, 15vw, 106px);
  height: clamp(74px, 15vw, 106px);
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.75);
  background: radial-gradient(circle at 35% 30%, #fef3c7, #f59e0b 45%, #92400e 100%);
  color: #111827;
  font-size: clamp(1.25rem, 3.5vw, 2rem);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  animation: fall linear forwards;
}
.asteroid:hover { filter: brightness(1.12); }
.asteroid.locked { pointer-events: none; }
@keyframes fall { from { transform: translateY(-130px) rotate(0deg); } to { transform: translateY(660px) rotate(260deg); } }

.missile {
  position: absolute;
  width: 9px;
  height: 32px;
  border-radius: 99px;
  background: linear-gradient(#fff7ad, var(--accent), var(--orange));
  box-shadow: 0 0 18px var(--accent);
  z-index: 6;
  left: var(--from-x);
  top: var(--from-y);
  transform: translate(-50%, -50%) rotate(var(--angle));
  animation: missileMove .42s linear forwards;
}
@keyframes missileMove { to { left: var(--to-x); top: var(--to-y); } }

.explode-good, .explode-bad { color: white !important; animation: explode .55s ease forwards !important; }
.explode-good { background: radial-gradient(circle, #bbf7d0, var(--secondary), #166534) !important; }
.explode-bad { background: radial-gradient(circle, #fecaca, var(--danger), #7f1d1d) !important; }
@keyframes explode {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  55% { transform: scale(1.32) rotate(16deg); opacity: .95; box-shadow: 0 0 45px currentColor; }
  100% { transform: scale(.05) rotate(40deg); opacity: 0; }
}

.blink-correct {
  animation: blinkCorrect .75s ease-in-out 3 !important;
  background: radial-gradient(circle, #dcfce7, var(--secondary), #166534) !important;
  color: white !important;
}
@keyframes blinkCorrect { 0%,100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.7); transform: scale(1.18); } }

.message { min-height: 32px; text-align: center; font-weight: 900; margin-top: 10px; }
.good { color: var(--secondary); }
.bad { color: var(--danger); }
.end-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.end-actions button { margin: 8px 0; }

@media (max-width: 780px) {
  body { padding: 8px; align-items: flex-start; }
  .panel { padding: 14px; border-radius: 18px; }
  .main-logo { width: min(460px, 96%); max-height: 210px; }
  .brand-logo { width: min(190px, 70%); }
  .game-dashboard { grid-template-columns: 1fr; gap: 10px; }
  .hud-card { grid-template-columns: 54px 1fr; min-height: 70px; padding: 8px 10px; border-radius: 18px; }
  .mini-logo { width: 50px; height: 42px; }
  .topbar { font-size: .92rem; gap: 6px 10px; justify-content: space-around; }
  .question-card { min-height: 72px; padding: 9px 12px; font-size: clamp(1.8rem, 10vw, 2.7rem); }
  .audio-btn { width: 48px; height: 48px; border-radius: 14px; }
  .space { height: calc(100vh - 235px); min-height: 330px; }
  .rocket { font-size: 3.4rem; }
  .table-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 430px) {
  .topbar { display: grid; grid-template-columns: 1fr 1fr; }
  .topbar div:last-child { grid-column: 1 / -1; }
  .main-logo { max-height: 180px; }
}


.mission-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 760px;
  margin: 14px auto 18px;
}

.summary-item {
  background: #eff6ff;
  border: 2px solid #bfdbfe;
  border-radius: 18px;
  padding: 12px;
  text-align: center;
}

.summary-item span {
  display: block;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.summary-item strong {
  display: block;
  color: var(--primary-dark);
  font-size: 1.45rem;
}

.mistakes-panel {
  max-width: 860px;
  margin: 16px auto;
  text-align: left;
  background: #fff7ed;
  border: 2px solid #fed7aa;
  border-radius: 22px;
  padding: 16px;
}

.mistakes-panel h3 {
  margin: 0 0 12px;
  color: var(--primary-dark);
  text-align: center;
}

.success-panel {
  background: #ecfdf5;
  border-color: #86efac;
  text-align: center;
}

.mistakes-list {
  display: grid;
  gap: 10px;
}

.mistake-card {
  background: white;
  border-radius: 16px;
  padding: 12px 14px;
  border-left: 6px solid var(--orange);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.mistake-calculation {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--primary-dark);
}

.mistake-reason {
  color: var(--danger);
  font-weight: 800;
  margin-top: 3px;
  font-size: .92rem;
}

.mistake-tip {
  margin-top: 7px;
  color: #334155;
  line-height: 1.45;
  font-weight: 700;
}

#reviewMistakesBtn {
  background: linear-gradient(135deg, var(--orange), var(--accent));
  color: #111827;
}

@media (max-width: 780px) {
  .mission-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .mistakes-panel {
    padding: 12px;
  }
}

@media (max-width: 430px) {
  .mission-summary {
    grid-template-columns: 1fr;
  }
}


/* ---- Mission Tables v6.1 ---- */
.unlock-info {
  max-width: 720px;
  margin: 12px auto 0;
  color: #475569;
  font-weight: 700;
  line-height: 1.45;
}

.hall-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px auto;
  max-width: 860px;
}

.hall-record-card {
  background: linear-gradient(135deg, #eff6ff, #ffffff);
  border: 2px solid #bfdbfe;
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .08);
}

.hall-record-card.locked {
  opacity: .72;
  filter: grayscale(.25);
}

.hall-grade {
  color: var(--primary-dark, #1e40af);
  font-size: 1.15rem;
  font-weight: 900;
}

.hall-desc {
  color: var(--muted, #64748b);
  font-weight: 700;
  margin-top: 4px;
}

.hall-score {
  color: var(--accent, #facc15);
  background: #0f172a;
  border-radius: 999px;
  display: inline-block;
  margin-top: 10px;
  padding: 6px 10px;
  font-weight: 900;
}

.hall-points {
  color: #334155;
  font-size: .9rem;
  font-weight: 800;
  margin-top: 8px;
}

.unlock-card {
  max-width: 760px;
  margin: 16px auto;
  background: #f8fafc;
  border: 2px dashed #93c5fd;
  border-radius: 20px;
  padding: 16px;
  text-align: left;
}

.unlock-card h3 {
  margin-top: 0;
  color: var(--primary-dark, #1e40af);
  text-align: center;
}

.unlock-card ul {
  margin: 8px 0 8px 20px;
  line-height: 1.7;
}

.yoda-status {
  text-align: center;
  font-weight: 900;
  color: #1e40af;
}

.final-grade-line {
  text-align: center;
  font-weight: 900;
  color: var(--primary-dark, #1e40af);
  margin: 8px 0 4px;
}

.asteroid {
  min-width: 86px;
  padding: 4px;
  word-break: keep-all;
}

@media (max-width: 700px) {
  .hall-records {
    grid-template-columns: 1fr;
  }

  .unlock-info {
    font-size: .92rem;
  }
}


/* ---- Mission Tables v6.2 ---- */
.yoda-status {
  line-height: 1.55;
}

.unlock-info {
  background: #eff6ff;
  border: 2px solid #bfdbfe;
  border-radius: 16px;
  padding: 10px 14px;
}


/* ---- Mission Tables v6.3 ---- */
.asteroid.medium-number {
  font-size: clamp(1.05rem, 3vw, 1.65rem);
}

.asteroid.big-number {
  font-size: clamp(.95rem, 2.5vw, 1.35rem);
  width: clamp(86px, 19vw, 122px);
}


/* V6.5 Starfighter */
.rocket.starfighter{
position:absolute;
bottom:18px;
left:50%;
transform:translateX(-50%);
width:90px;
height:90px;
font-size:0;
}
.rocket.starfighter .body{
position:absolute;left:38px;top:12px;width:14px;height:46px;
background:linear-gradient(#e5e7eb,#94a3b8);
border-radius:12px;
border:2px solid #1e3a8a;
}
.rocket.starfighter .cockpit{
position:absolute;left:34px;top:0;width:22px;height:22px;
background:#38bdf8;border-radius:50%;
border:3px solid #1e3a8a;
}
.rocket.starfighter .wing{
position:absolute;top:28px;width:28px;height:16px;
background:linear-gradient(#60a5fa,#1d4ed8);
border:2px solid #1e3a8a;
}
.rocket.starfighter .wing.left{left:8px;transform:skew(20deg);}
.rocket.starfighter .wing.right{right:8px;transform:skew(-20deg);}
.rocket.starfighter .engine{
position:absolute;left:34px;bottom:4px;width:22px;height:18px;
background:radial-gradient(circle,#fef08a,#f97316,#dc2626);
border-radius:0 0 50% 50%;
animation:engineGlow .4s infinite alternate;
}
@keyframes engineGlow{
from{filter:drop-shadow(0 0 4px #f97316);}
to{filter:drop-shadow(0 0 12px #fde047);}
}


/* ---- Mission Tables v6.6 : vrai vaisseau CSS, sans emoji ---- */
.rocket.css-ship {
  width: 98px;
  height: 118px;
  font-size: 0 !important;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 16px #38bdf8);
}

.css-ship,
.css-ship * {
  position: absolute;
  box-sizing: border-box;
}

.ship-body {
  left: 50%;
  top: 8px;
  width: 42px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 50% 50% 28% 28%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.45), transparent 24%, transparent 76%, rgba(0,0,0,.18)),
    linear-gradient(180deg, #f8fafc 0%, #dbeafe 48%, #94a3b8 100%);
  border: 3px solid #0f3c88;
  z-index: 4;
}

.ship-body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  background: linear-gradient(180deg, #ef4444, #f97316);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 6px;
}

.ship-cockpit {
  left: 50%;
  top: 18px;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #bae6fd, #0ea5e9 55%, #1e3a8a 100%);
  border: 3px solid #60a5fa;
  box-shadow: inset 0 0 8px rgba(255,255,255,.7), 0 0 8px #38bdf8;
  z-index: 6;
}

.ship-stripe {
  left: 50%;
  top: 45px;
  width: 10px;
  height: 34px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444, #f97316);
  opacity: .9;
  z-index: 5;
}

.ship-wing {
  top: 36px;
  width: 44px;
  height: 56px;
  background: linear-gradient(180deg, #1d4ed8, #38bdf8 58%, #0f172a);
  border: 3px solid #0f3c88;
  z-index: 2;
}

.ship-wing-left {
  left: 5px;
  clip-path: polygon(100% 0, 0 64%, 78% 100%);
  border-radius: 18px 4px 18px 8px;
}

.ship-wing-right {
  right: 5px;
  clip-path: polygon(0 0, 100% 64%, 22% 100%);
  border-radius: 4px 18px 8px 18px;
}

.ship-cannon {
  top: 70px;
  width: 8px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e2e8f0, #64748b);
  border: 2px solid #0f172a;
  z-index: 1;
}

.ship-cannon-left {
  left: 15px;
}

.ship-cannon-right {
  right: 15px;
}

.ship-engine {
  bottom: 2px;
  width: 18px;
  height: 30px;
  border-radius: 0 0 50% 50%;
  background: radial-gradient(circle at top, #fff7ed, #fb923c 45%, #ef4444 70%, transparent 74%);
  animation: shipFlame .18s infinite alternate;
  z-index: 0;
}

.ship-engine-left {
  left: 30px;
}

.ship-engine-right {
  right: 30px;
}

@keyframes shipFlame {
  from {
    transform: scaleY(.82);
    opacity: .75;
  }
  to {
    transform: scaleY(1.2);
    opacity: 1;
  }
}

.rocket.css-ship.hit {
  animation: shipHit .35s ease;
}

@keyframes shipHit {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 8px)); }
  45% { transform: translateX(calc(-50% + 8px)); }
  70% { transform: translateX(calc(-50% - 4px)); }
}

@media (max-width: 620px) {
  .rocket.css-ship {
    width: 82px;
    height: 100px;
    transform: translateX(-50%) scale(.9);
  }
}


/* ---- Mission Tables v6.9 : logo + vaisseau SVG + missile corrigés ---- */
.logo-fallback {
  color: var(--primary);
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 900;
  margin: 10px 0;
  text-transform: uppercase;
  text-shadow: 0 3px 0 var(--accent);
}

.rocket.rocket-img {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;
  width: 112px !important;
  height: 126px !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  font-size: 0 !important;
  filter: drop-shadow(0 0 18px #38bdf8) !important;
  user-select: none;
  pointer-events: none;
}

.rocket.rocket-img.hit {
  animation: shipSvgHit .35s ease;
}

@keyframes shipSvgHit {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 9px)); }
  45% { transform: translateX(calc(-50% + 9px)); }
  70% { transform: translateX(calc(-50% - 5px)); }
}

@media (max-width: 620px) {
  .rocket.rocket-img {
    width: 92px !important;
    height: 108px !important;
  }
}


/* V7 responsive playfield */
.game-space,.space-area,.space{height:min(75vh,700px);min-height:420px;}


/* v7.1-custom-tables */
.custom-tables { margin-top: 10px; }
.table-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.table-check {
  background: white;
  border: 2px solid #bfdbfe;
  border-radius: 13px;
  padding: 9px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.table-check input { margin-right: 6px; }
.quick-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
@media (max-width: 620px) {
  .table-grid { grid-template-columns: repeat(3, 1fr); }
}