/* ruimte.css - ruimtethema voor busimatch.academy (Didier 08-11-2026: "waar zijn de sterren, planeten en het rakettje?").
   Komt NA busimatch.css. Zelfde sfeer als busimatch.com (28-10-2026) en busiverse.network:
   sterrenhemel (canvas uit ruimte.js), nevels in paars, blauw en oranje, glazen vlakken.
   Alleen in layout.php; de lesspeler (layout_player.php) blijft rustig om te lezen. */
:root{
  --bg:#070a24;
  --card:rgba(18,22,70,.72);
  --line:rgba(140,150,255,.18);
  --moon:#7c5cff; --moon2:#2bd4ff; --sun2:#ffcc00;
}
body{
  background:
    radial-gradient(1200px 760px at 12% 6%,rgba(124,92,255,.30),transparent 62%),
    radial-gradient(1000px 680px at 92% 22%,rgba(249,115,22,.20),transparent 60%),
    radial-gradient(900px 620px at 70% 78%,rgba(43,212,255,.14),transparent 62%),
    radial-gradient(800px 600px at 8% 88%,rgba(236,72,153,.12),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
/* de sterrenhemel ligt achter alles; de inhoud erboven */
.bm-sterren{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.top,#main,.foot,.flash,.skip{position:relative;z-index:1}
.top{position:sticky;top:0;z-index:50;background:rgba(7,10,36,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.foot{background:linear-gradient(180deg,rgba(7,10,36,.4),rgba(5,7,26,.85))}

/* glazen kaarten die oplichten */
.card,.ccard,.pcard,.filters,.cbox,.kpi,.lrow,.bmod,.block,.qq,.quizq,.result,.curr .mod{
  background:var(--card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.ccard:hover,.card:hover{border-color:rgba(43,212,255,.45);box-shadow:0 0 0 1px rgba(43,212,255,.15),0 18px 50px rgba(124,92,255,.25)}
.ccard .img{background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(249,115,22,.25))}
.hero{background:radial-gradient(120% 140% at 100% 0%,rgba(249,115,22,.22),transparent 55%),radial-gradient(110% 130% at 0% 100%,rgba(124,92,255,.30),transparent 55%),rgba(18,22,70,.6);border-color:rgba(140,150,255,.35)}
.cta{background:radial-gradient(120% 140% at 100% 0%,rgba(249,115,22,.24),transparent 55%),radial-gradient(110% 130% at 0% 100%,rgba(124,92,255,.28),transparent 55%),rgba(18,22,70,.62);border-color:rgba(140,150,255,.35)}
.chero{background:rgba(7,10,36,.55)}

/* titels met kleurverloop van maan (paars/blauw) naar zon (oranje/geel), zoals busiverse.network */
.hero h1,main > h1{
  background:linear-gradient(90deg,#fff 0%,#e9e6ff 35%,var(--moon2) 62%,var(--g) 82%,var(--sun2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.btn{box-shadow:0 8px 26px rgba(249,115,22,.30),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.ghost,.btn.outline{box-shadow:none}
.btn.ghost{background:rgba(124,92,255,.10);border-color:rgba(140,150,255,.35)}
.btn.ghost:hover{background:rgba(124,92,255,.2);border-color:rgba(43,212,255,.55)}
::selection{background:var(--moon);color:#fff}
/* menu's en taalkeuze niet doorschijnend: de kaarten erachter storen het lezen */
details .menu{background:#0d1036}