/* Oxygen Edu — Jeux du train (layout en sections) */
.ox-train-bg{background:radial-gradient(1000px 600px at 50% -200px,#1e293b,#0b1023 70%)}
.ox-train{
  max-width:1100px;margin:0 auto;padding:clamp(16px,2vw,24px);
  color:#e5e7eb;--accent:#a78bfa;--accent-2:#38bdf8;--ok:#22c55e;--err:#ef4444;
  --panel:rgba(255,255,255,.06);--border:rgba(255,255,255,.14);--radius:18px;--shadow:0 12px 30px rgba(0,0,0,.25)
}
.title{font:700 32px/1.1 Poppins,Inter,sans-serif;color:#f5f3ff;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.subtitle{color:#cbd5e1;margin:.25rem 0 1.2rem}

/* bouton retour */
.topbar{display:flex;justify-content:flex-start;margin-bottom:.6rem}
.backlink{
  display:inline-flex;gap:.45rem;align-items:center;padding:.5rem .9rem;border-radius:999px;
  color:#e7e7ee;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  text-decoration:none;font-weight:600
}
.backlink:hover{border-color:rgba(255,255,255,.22)}

/* panneaux */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.panel__title{margin:.2rem 0 .8rem;font-weight:700;color:#e9d5ff}

/* filtres */
.chkgroup{display:flex;flex-wrap:wrap;gap:.55rem}
.chkgroup label{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .6rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));font-weight:600}

/* controles */
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.label{font-weight:700}
.select{appearance:none;border:1px solid #334155;background:#0b1322;color:#e5e7eb;padding:.55rem .75rem;border-radius:12px}
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b1023;font-weight:800;border:none;padding:.6rem 1.1rem;border-radius:14px;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.25)}
.btn:active{transform:translateY(1px)}
.score-wrap{margin-left:auto;color:#e7e7ee}

/* rail + train (compact) */
.rail-panel .board{
  position:relative;overflow:hidden;background:linear-gradient(#0b1322 60%, #08101f 60%);
  border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);
  min-height:220px;           /* <<< plus compact */
  padding:18px
}
#landscape{
  position:absolute;inset:0;background:
   linear-gradient(#0b1322 60%, #08101f 60%),
   repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 100px, transparent 100px 200px);
  transform:translateX(0);will-change:transform
}
.board.moving #landscape{animation:moveBg 1.1s linear 1}
@keyframes moveBg{from{transform:translateX(0)} to{transform:translateX(-160px)}}

.train{position:absolute;left:12px;right:12px;bottom:16px;height:58px;z-index:0;pointer-events:none}
.locomotive{font-size:40px;filter:drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.rail{position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,#94a3b8 0 30px,#475569 30px 35px);border-radius:4px;opacity:.7}

/* timeline */
.timeline{margin:.25rem 0 .4rem}
.timeline__rail{position:relative;height:10px;border-radius:6px;background:linear-gradient(90deg,rgba(167,139,250,.4),rgba(56,189,248,.4));box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.timeline__flag{position:absolute;top:-18px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:12px solid #fbbf24;transform:translateX(-50%);font:700 10px/1 Poppins,Inter,sans-serif;color:#fff}
.timeline__flag::after{content:attr(data-step);position:absolute;top:14px;left:50%;transform:translateX(-50%)}
.timeline__flag.hit{border-bottom-color:#22c55e}
.timeline__cursor{position:absolute;top:-6px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(167,139,250,.45);transform:translateX(-50%);left:0;transition:left .35s ease-out}
.timeline__flag[data-step="5"]{left:12.5%}
.timeline__flag[data-step="10"]{left:25%}
.timeline__flag[data-step="15"]{left:37.5%}
.timeline__flag[data-step="20"]{left:50%}
.timeline__flag[data-step="25"]{left:62.5%}
.timeline__flag[data-step="30"]{left:75%}
.timeline__flag[data-step="35"]{left:87.5%}
.timeline__flag[data-step="40"]{left:100%}

/* question/réponses */
.phrase{text-align:center;font:700 22px/1.35 Poppins,Inter,sans-serif;margin:6px 0 12px;min-height:60px}
.choices{width:clamp(480px,56vw,720px);margin:10px auto 0;display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:14px;justify-items:center}
.wagon{background:#0b1322;border:3px solid #1f2a3b;border-radius:16px;color:#fff;text-align:center;padding:16px;font:800 20px/1 Poppins,sans-serif;cursor:pointer;position:relative}
.wagon:hover{background:#0f192b}
.wagon[data-state="good"]{border-color:#22c55e;background:rgba(34,197,94,.18)}
.wagon[data-state="bad"]{border-color:#ef4444;background:rgba(239,68,68,.15)}
.feedback{margin-top:10px;min-height:22px;text-align:center;font:700 18px/1.2 Poppins,Inter,sans-serif}
.help{margin-top:6px;color:#cbd5e1;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:10px;min-height:18px;text-align:center}

/* destination */
.destination{display:flex;align-items:center;gap:12px}
.destination img{width:140px;height:auto;border-radius:14px;border:2px solid rgba(255,255,255,.15);box-shadow:var(--shadow)}
.destination figcaption{font-weight:800;color:#e9d5ff}
.city-desc{font-size:.9rem;color:#ccc;margin-top:5px}

/* modale */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:.2s}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-content{background:#0b1322;border:1px solid #1f2a3b;border-radius:18px;padding:22px;width:min(520px,92%);box-shadow:var(--shadow)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}