/* ==========================================================================
   educis Quest — Aussehen der Filmszenen.
   Bausteine und Einheit (--u) kommen aus film.css.
   ========================================================================== */

/* ---------- 1 · Level ---------- */
.lvl {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: calc(1 * var(--u)) calc(1.6 * var(--u));
  width: calc(58 * var(--u));
  font-family: var(--mono);
  font-size: calc(1.2 * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f-muted);
}
.lvl__bar {
  position: relative;
  height: calc(1.7 * var(--u));
  border-radius: 99px;
  background: rgb(255 255 255 / 0.1);
  overflow: hidden;
  --p: 0;
}
.lvl__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 1%);
  border-radius: 99px;
  background: linear-gradient(90deg, #7c3aed, #c4b5fd 70%, #fff);
  box-shadow: 0 0 calc(2 * var(--u)) rgb(167 139 250 / 0.9);
}
.lvl__to { color: var(--f-text); }
.lvl__xp { grid-column: 1 / -1; justify-self: center; font-size: calc(1.5 * var(--u)); color: var(--f-accent-2); }
.lvl__xp b { font-variant-numeric: tabular-nums; }
.lvl__up {
  position: absolute;
  left: 50%;
  top: calc(-6.4 * var(--u));
  padding: calc(0.8 * var(--u)) calc(1.8 * var(--u));
  border-radius: 99px;
  background: linear-gradient(120deg, #fde047, #fb923c);
  color: #2b1500;
  font-family: var(--font);
  font-size: calc(1.9 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  transform: translateX(-50%);
  box-shadow: 0 0 calc(4 * var(--u)) rgb(251 191 36 / 0.7);
  white-space: nowrap;
}
.sparks { position: absolute; right: calc(7 * var(--u)); top: 22%; width: 0; height: 0; }
.sparks i {
  position: absolute;
  width: calc(0.8 * var(--u));
  height: calc(0.8 * var(--u));
  background: #fde047;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
}
.sparks i:nth-child(3n) { background: #c4b5fd; }
.sparks i:nth-child(4n) { background: #fff; }

/* ---------- Die Lernwelt ---------- */
.world {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: calc(0.34 * var(--u));
  width: 100%;
}
.cl {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(0.55 * var(--u));
  background: rgb(255 255 255 / 0.05);
}
.cl b { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.cl b::after { content: ""; position: absolute; }
.cl--g b, .cl--t b { background: linear-gradient(160deg, #2f9a69, #1c6a48); }
.cl--g b::after { inset: 22% auto auto 20%; width: 14%; height: 14%; border-radius: 50%; background: rgb(255 255 255 / 0.22); box-shadow: calc(1.6 * var(--u)) calc(1.3 * var(--u)) 0 rgb(255 255 255 / 0.14); }
.cl--p b, .cl--c b { background: linear-gradient(160deg, #f0d9a8, #d0ae72); }
.cl--w b { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.cl--w b::after { left: 14%; right: 14%; top: 42%; height: 12%; border-radius: 99px; background: rgb(255 255 255 / 0.5); box-shadow: calc(0.7 * var(--u)) calc(1 * var(--u)) 0 calc(-0.1 * var(--u)) rgb(255 255 255 / 0.35); }
.cl--t b::after { inset: 14%; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6ee7b7, #0f5132 72%); box-shadow: 0 calc(0.3 * var(--u)) calc(0.5 * var(--u)) rgb(0 0 0 / 0.35); }
.cl--c b::after { inset: 20% 16%; border-radius: 18%; background: linear-gradient(180deg, #fde047 0 46%, #b45309 46% 56%, #f59e0b 56%); box-shadow: 0 0 calc(1.4 * var(--u)) rgb(253 224 71 / 0.9); }

.npc,
.runner {
  position: absolute;
  left: calc((var(--x) + 0.5) * 12.5%);
  top: calc((var(--y) + 0.5) * 20%);
  width: 9.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.npc {
  --x: 3;
  --y: 0;
  background: radial-gradient(circle at 34% 30%, #ddd6fe, #7c3aed 70%);
  box-shadow: 0 0 0 calc(0.35 * var(--u)) rgb(255 255 255 / 0.85), 0 calc(0.4 * var(--u)) calc(1 * var(--u)) rgb(0 0 0 / 0.5);
}
.npc::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: calc(1.7 * var(--u));
  line-height: 1;
}
.runner {
  --x: 0;
  --y: 1;
  z-index: 2;
  background: radial-gradient(circle at 34% 30%, #fff, #fdba74 55%, #ea580c);
  box-shadow: 0 0 0 calc(0.35 * var(--u)) #fff, 0 0 calc(1.6 * var(--u)) rgb(251 146 60 / 0.9);
}
.world--build .runner { display: none; }

/* ---------- 2 · Baukasten ---------- */
.editor {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(1.4 * var(--u));
  width: calc(49 * var(--u));
  padding: calc(1.5 * var(--u));
}
.palette {
  display: grid;
  align-content: start;
  gap: calc(0.8 * var(--u));
  padding: calc(0.8 * var(--u));
  border-radius: calc(1.1 * var(--u));
  background: rgb(0 0 0 / 0.3);
}
.sw, .ghost {
  width: calc(3.6 * var(--u));
  aspect-ratio: 1;
  border-radius: calc(0.7 * var(--u));
  border: 1px solid rgb(255 255 255 / 0.25);
}
.sw--p, .ghost--p { background: linear-gradient(160deg, #f0d9a8, #d0ae72); }
.sw--w, .ghost--w { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.sw--t, .ghost--t { background: radial-gradient(circle at 40% 36%, #6ee7b7 0 26%, #0f5132 27% 48%, #2f9a69 49%); }
.sw--g { background: linear-gradient(160deg, #2f9a69, #1c6a48); }
.sw--c { background: linear-gradient(180deg, #fde047 0 46%, #b45309 46% 56%, #f59e0b 56%); }
.ghost {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  opacity: 0;
  box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / 0.6);
}
.qcard {
  position: absolute;
  z-index: 5;
  left: 44%;
  top: 31%;
  display: grid;
  gap: calc(0.6 * var(--u));
  padding: calc(1.2 * var(--u)) calc(1.4 * var(--u));
  background: #1d1838;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform-origin: 8% 0;
}
.qcard::before {
  content: "";
  position: absolute;
  left: calc(1.6 * var(--u));
  top: calc(-0.6 * var(--u));
  width: calc(1.2 * var(--u));
  height: calc(1.2 * var(--u));
  background: #1d1838;
  border-left: 1px solid var(--f-line);
  border-top: 1px solid var(--f-line);
  transform: rotate(45deg);
}
.qcard small, .task small, .pstat small {
  font-family: var(--mono);
  font-size: calc(0.95 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f-muted);
}
.qcard strong { font-size: calc(2.6 * var(--u)); letter-spacing: -0.02em; line-height: 1.1; }
.qcard div { display: flex; gap: calc(0.5 * var(--u)); }
.qcard .f-chip { font-size: calc(1 * var(--u)); padding: calc(0.4 * var(--u)) calc(0.8 * var(--u)); }

/* ---------- 3 · Spielen ---------- */
.journey__tablet { width: calc(40 * var(--u)); aspect-ratio: 8 / 5.5; }
.journey__tablet .dev__screen { place-items: center; padding: calc(1 * var(--u)); background: #0c1a14; }
.task {
  position: absolute;
  z-index: 5;
  left: 52%;
  top: 5%;
  display: grid;
  justify-items: start;
  gap: calc(0.3 * var(--u));
  padding: calc(1 * var(--u)) calc(1.3 * var(--u));
  background: #1d1838;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform-origin: 0 50%;
}
.task strong { font-size: calc(2.4 * var(--u)); line-height: 1.1; }
.task__a {
  padding: calc(0.3 * var(--u)) calc(1.1 * var(--u));
  border-radius: 99px;
  background: rgb(52 211 153 / 0.25);
  border: 1px solid #34d399;
  color: #a7f3d0;
  font-weight: 700;
  font-size: calc(1.5 * var(--u));
}
.xp {
  position: absolute;
  z-index: 6;
  padding: calc(0.4 * var(--u)) calc(1 * var(--u));
  border-radius: 99px;
  background: linear-gradient(120deg, #fde047, #fb923c);
  color: #2b1500;
  font-weight: 700;
  font-size: calc(1.4 * var(--u));
  white-space: nowrap;
  box-shadow: 0 0 calc(2 * var(--u)) rgb(251 191 36 / 0.7);
}
.xp--a { left: 30%; top: 44%; }
.xp--b { right: 4%; top: 30%; }
.journey__phone {
  position: absolute;
  left: calc(-2.4 * var(--u));
  bottom: calc(-3.4 * var(--u));
  width: calc(13 * var(--u));
  aspect-ratio: 9 / 15;
  border-radius: calc(2 * var(--u));
}
.journey__phone .dev__screen {
  align-content: center;
  gap: calc(0.9 * var(--u));
  padding: calc(2.2 * var(--u)) calc(1 * var(--u)) calc(1.2 * var(--u));
  background: linear-gradient(180deg, #1a1433, #0f0c1e);
}
.pstat {
  display: grid;
  gap: calc(0.4 * var(--u));
  padding: calc(0.9 * var(--u));
  border-radius: calc(1 * var(--u));
  background: rgb(255 255 255 / 0.07);
  border: 1px solid var(--f-line);
}
.pstat strong { display: flex; align-items: center; gap: calc(0.4 * var(--u)); font-size: calc(1.5 * var(--u)); color: #fdba74; }
.pstat strong .f-ico { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
.pstat strong b { font-variant-numeric: tabular-nums; }
.pbar { height: calc(0.7 * var(--u)); border-radius: 99px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.pbar i { display: block; height: 100%; width: 62%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #c4b5fd); transform-origin: left center; }

/* ---------- 4 · Eigenes Tempo ---------- */
.lanes { display: grid; gap: calc(2.3 * var(--u)); width: calc(80 * var(--u)); }
.lane {
  display: grid;
  grid-template-columns: calc(13 * var(--u)) 1fr auto;
  align-items: center;
  gap: calc(2.2 * var(--u));
  --p: 0;
}
.lane .f-chip { justify-content: center; font-size: calc(1.4 * var(--u)); }
.lane__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(0.7 * var(--u));
  padding-inline: 4%;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.12);
}
.lane__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p) * 1%);
  border-radius: 99px;
}
.lane__track b {
  position: relative;
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  border-radius: 50%;
  background: #17132b;
  border: calc(0.3 * var(--u)) solid rgb(255 255 255 / 0.3);
}
.lane__hero {
  position: absolute;
  left: calc(var(--p) * 1%);
  top: 50%;
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  border: calc(0.4 * var(--u)) solid #fff;
  transform: translate(-50%, -50%);
}
.lane__flag {
  display: grid;
  place-items: center;
  width: calc(3.4 * var(--u));
  height: calc(3.4 * var(--u));
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid var(--f-line);
  color: rgb(255 255 255 / 0.35);
}
.lane--0 { --c: #6ee7b7; }
.lane--1 { --c: #93c5fd; }
.lane--2 { --c: #c4b5fd; }
.lane .f-chip { border-color: color-mix(in srgb, var(--c) 50%, transparent); color: var(--c); }
.lane__fill, .lane__hero { background: var(--c); }
.lane__hero { box-shadow: 0 0 calc(1.8 * var(--u)) var(--c); }

/* ---------- 5 · Lernsog ---------- */
.scene[data-scene="pull"] > * { grid-area: 1 / 1; }
.orbit { position: relative; width: calc(84 * var(--u)); height: calc(40 * var(--u)); }
.mech { position: absolute; font-size: calc(1.55 * var(--u)); padding: calc(0.8 * var(--u)) calc(1.5 * var(--u)); background: #1b1634; }
.mech .f-ico { color: var(--f-accent-2); }
.mech--0 { left: 9%; top: 8%; }
.mech--1 { left: 58%; top: 2%; }
.mech--2 { left: 83%; top: 40%; }
.mech--3 { left: 68%; top: 82%; }
.mech--4 { left: 14%; top: 84%; }
.mech--5 { left: 0; top: 46%; }
.mech--0 .f-ico { color: #fb923c; }
.mech--1 .f-ico { color: #f472b6; }
.mech--2 .f-ico { color: #fde047; }
.mech--3 .f-ico { color: #6ee7b7; }
.orbit__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #c4b5fd 30%, #7c3aed 60%, transparent 72%);
  transform: translate(-50%, -50%);
  filter: blur(calc(0.3 * var(--u)));
}
.pull__text { display: grid; justify-items: center; gap: calc(1.4 * var(--u)); }
.pull__word { font-size: calc(13 * var(--u)); letter-spacing: -0.055em; line-height: 0.95; }

/* ---------- 6 · Lehrkraft ---------- */
.ldash { position: relative; width: calc(47 * var(--u)); padding: calc(1.6 * var(--u)); display: grid; gap: calc(0.9 * var(--u)); }
.ldash__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: calc(0.6 * var(--u)); font-size: calc(1.6 * var(--u)); }
.ldash__live {
  display: inline-flex;
  align-items: center;
  gap: calc(0.7 * var(--u));
  font-family: var(--mono);
  font-size: calc(1.05 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a7f3d0;
}
.lrow {
  display: grid;
  grid-template-columns: auto calc(7.4 * var(--u)) 1fr calc(12.4 * var(--u));
  align-items: center;
  gap: calc(1.1 * var(--u));
  padding: calc(0.8 * var(--u)) calc(1 * var(--u));
  border-radius: calc(1 * var(--u));
  background: rgb(255 255 255 / 0.04);
  border: 1px solid transparent;
}
.lrow__av {
  display: grid;
  place-items: center;
  width: calc(3 * var(--u));
  height: calc(3 * var(--u));
  border-radius: 50%;
  background: rgb(139 92 246 / 0.35);
  font-size: calc(1.3 * var(--u));
  font-weight: 650;
}
.lrow__name { font-size: calc(1.45 * var(--u)); font-weight: 550; }
.lrow__bar { height: calc(0.75 * var(--u)); border-radius: 99px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.lrow__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #6ee7b7); transform-origin: left center; }
.lrow--guess .lrow__bar i { background: linear-gradient(90deg, #f59e0b, #fde047); }
.lrow__state { justify-items: end; }
.lrow__state .f-chip { font-size: calc(1.05 * var(--u)); padding: calc(0.35 * var(--u)) calc(0.8 * var(--u)); font-style: normal; }
.ldash__hint { position: absolute; right: calc(-1.4 * var(--u)); bottom: calc(-2.4 * var(--u)); font-size: calc(1.25 * var(--u)); background: #2a2009; }

/* ---------- Hochformat ---------- */
@container (max-aspect-ratio: 1/1) {
  .lvl { width: calc(44 * var(--u)); }
  .editor { width: calc(45.6 * var(--u)); gap: calc(1 * var(--u)); padding: calc(1.1 * var(--u)); }
  .sw, .ghost { width: calc(3 * var(--u)); }
  .qcard { left: 34%; top: 36%; }
  .journey__tablet { width: calc(44 * var(--u)); }
  .journey__phone { left: 0; bottom: calc(-2 * var(--u)); width: calc(12 * var(--u)); }
  .lanes { width: calc(45.6 * var(--u)); gap: calc(3 * var(--u)); }
  .lane { grid-template-columns: 1fr auto; gap: calc(1 * var(--u)) calc(1.4 * var(--u)); }
  .lane .f-chip { grid-column: 1 / -1; justify-self: start; }
  .orbit { width: calc(46 * var(--u)); height: calc(52 * var(--u)); }
  .mech { font-size: calc(1.35 * var(--u)); padding: calc(0.65 * var(--u)) calc(1.1 * var(--u)); }
  .mech--0 { left: 2%; top: 4%; }
  .mech--1 { left: 46%; top: 13%; }
  .mech--2 { left: 66%; top: 31%; }
  .mech--3 { left: 62%; top: 88%; }
  .mech--4 { left: 4%; top: 80%; }
  .mech--5 { left: 0; top: 66%; }
  .pull__word { font-size: calc(11 * var(--u)); }
  .ldash { width: calc(45.6 * var(--u)); padding: calc(1.2 * var(--u)); }
  .lrow { grid-template-columns: auto calc(6.6 * var(--u)) 1fr calc(11.6 * var(--u)); gap: calc(0.8 * var(--u)); }
  .ldash__hint { right: 0; bottom: auto; top: calc(-2.2 * var(--u)); }
}