.ev4x-sp-app,
.ev4x-sp-app * { box-sizing:border-box; }

.ev4x-sp-app {
  --bg1:#06141a;
  --bg2:#0d232a;
  --panel:rgba(255,255,255,.97);
  --ink:#1c2532;
  --muted:#6a7483;
  --line:rgba(255,255,255,.18);
  --teal:#34c7b8;
  --blue:#2f8f9d;
  --gold:#e7ba52;
  font-family:"Segoe UI", Arial, sans-serif;
  color:#edf9f7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

.ev4x-sp-teacher {
  padding:22px;
  border-radius:26px;
  background:
    linear-gradient(180deg, rgba(4,16,22,.78) 0%, rgba(8,23,29,.86) 100%),
    radial-gradient(circle at 14% 12%, rgba(47,143,157,.16), transparent 18%),
    radial-gradient(circle at 82% 18%, rgba(52,199,184,.14), transparent 18%),
    var(--ev4x-sp-shell-bg) center/cover no-repeat,
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%);
  box-shadow:0 22px 50px rgba(0,0,0,.22);
}

.ev4x-sp-overline {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:800;
  color:#bfeceb;
}

.ev4x-sp-topbar {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:20px;
}

.ev4x-sp-topbar h2,
.ev4x-sp-student-shell h2 {
  margin:8px 0;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-0.02em;
  text-shadow:none;
}

.ev4x-sp-meta { color:#d7f1ef; }

.ev4x-sp-toolbar {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.ev4x-sp-quick-controls {
  position:fixed;
  top:92px;
  right:22px;
  z-index:140;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  margin:0;
  padding:6px;
  width:128px;
  min-width:128px;
  border-radius:14px;
  background:rgba(10,19,31,.46);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);
  pointer-events:none;
}

.ev4x-sp-quick-controls .ev4x-sp-btn {
  width:100%;
  min-height:34px;
  padding:6px 8px;
  font-size:12px;
  line-height:1.1;
  font-weight:700;
  border-radius:8px;
  pointer-events:auto;
  box-shadow:none;
  background:rgba(255,255,255,.12);
  text-shadow:none;
}

.ev4x-sp-quick-controls .ev4x-sp-btn.ev4x-sp-btn-primary {
  background:linear-gradient(135deg, var(--teal), var(--blue));
}

.ev4x-sp-btn,
.ev4x-sp-mini-btn {
  appearance:none;
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
}

.ev4x-sp-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  background:rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  line-height:1.25;
  text-align:center;
  white-space:normal;
  font-weight:700;
  text-shadow:none;
}

.ev4x-sp-btn:hover,
.ev4x-sp-mini-btn:hover { transform:translateY(-1px); }
.ev4x-sp-btn-primary { background:linear-gradient(135deg, var(--teal), var(--blue)); }

.ev4x-sp-mini-btn {
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:#eaf6f5;
  color:#0e5867;
}

.ev4x-sp-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:20px;
  align-items:start;
}

.ev4x-sp-panel {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(230,245,250,.26);
  border-radius:24px;
  padding:18px;
  backdrop-filter: blur(3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 30px rgba(0,0,0,.16);
}

.ev4x-sp-map-panel {
  border-color:rgba(226,242,248,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 34px rgba(0,0,0,.18);
}

.ev4x-sp-map {
  position:relative;
  min-height:560px;
  border-radius:22px;
  overflow:visible;
  background-color:#07161b;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(225,242,248,.30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.ev4x-sp-map::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,16,22,.34), rgba(5,16,22,.54)),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 34%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 68%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 74%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 85% 14%, rgba(255,255,255,.45) 0 1px, transparent 2px);
  pointer-events:none;
  z-index:0;
}

.ev4x-sp-lines,
.ev4x-sp-nodes {
  z-index:1;
}

.ev4x-sp-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ev4x-sp-line {
  stroke:rgba(255,255,255,.20);
  stroke-width:0.5;
  stroke-dasharray:2.8 2.8;
}

.ev4x-sp-line-active {
  stroke:rgba(231,186,82,.92);
  stroke-width:0.9;
}

.ev4x-sp-nodes { position:absolute; inset:0; }

.ev4x-sp-node {
  position:absolute;
  transform:translate(-50%, -50%);
  min-width:104px;
  max-width:156px;
  padding:12px 14px;
  border-radius:999px;
  text-align:center;
  color:#fff;
  font-weight:700;
  font-size:12.5px;
  line-height:1.2;
  background:linear-gradient(135deg, #2f8f9d, #1c6d78);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  text-shadow:none;
}

.ev4x-sp-node.is-current {
  box-shadow:0 0 0 4px rgba(231,186,82,.42), 0 0 18px rgba(255,232,154,.55), 0 0 34px rgba(244,193,64,.32), 0 18px 28px rgba(0,0,0,.26);
  background:linear-gradient(135deg, #f2d17d, #e2ab3c);
  color:#22303f;
  animation:ev4xSpCurrentPulse 2.4s ease-in-out infinite;
}

@keyframes ev4xSpCurrentPulse {
  0%, 100% {
    box-shadow:0 0 0 4px rgba(231,186,82,.38), 0 0 14px rgba(255,232,154,.45), 0 0 28px rgba(244,193,64,.24), 0 18px 28px rgba(0,0,0,.24);
    transform:translate(-50%, -50%) scale(1);
  }
  50% {
    box-shadow:0 0 0 5px rgba(231,186,82,.50), 0 0 24px rgba(255,236,173,.72), 0 0 42px rgba(244,193,64,.34), 0 20px 30px rgba(0,0,0,.28);
    transform:translate(-50%, -50%) scale(1.04);
  }
}

.ev4x-sp-node.is-goal { background:linear-gradient(135deg, #7be0b7, #2da56f); }
.ev4x-sp-node.is-start { background:linear-gradient(135deg, #678eff, #4757ca); }
.ev4x-sp-node.is-hub { background:linear-gradient(135deg, #34c7b8, #178d83); }

.ev4x-sp-node span {
  display:block;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}

.ev4x-sp-node.is-long {
  font-size:12px;
  line-height:1.15;
}

.ev4x-sp-resultline {
  margin-top:14px;
  color:#dff8f6;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.ev4x-sp-current-node {
  background:var(--panel);
  color:var(--ink);
  border-radius:20px;
  padding:18px;
  margin-bottom:10px;
  border:1px solid rgba(214,232,239,.78);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72), 0 8px 24px rgba(0,0,0,.08);
}

.ev4x-sp-current-node h3 { margin:6px 0 10px; font-size:28px; font-weight:700; text-shadow:none; }
.ev4x-sp-current-node p { margin:0; color:#334155; font-size:18px; font-weight:400; text-shadow:none; }

.ev4x-sp-section-title {
  margin:6px 0 12px;
  font-size:18px;
  font-weight:800;
  color:#ffffff;
}

.ev4x-sp-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:10px;
}

.ev4x-sp-option-card {
  background:rgba(255,255,255,.96);
  color:#13202f;
  border-radius:18px;
  padding:16px;
}

.ev4x-sp-option-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:8px;
}

.ev4x-sp-option-letter {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--teal), var(--blue));
  color:#fff;
  font-size:22px;
  font-weight:900;
}

.ev4x-sp-option-count {
  font-weight:800;
  color:#0f5664;
}

.ev4x-sp-option-label {
  font-size:19px;
  font-weight:800;
  margin-bottom:6px;
}

.ev4x-sp-option-target { color:#5b6877; }
.ev4x-sp-helper { margin:0 0 16px; color:#d9f5f2; }

.ev4x-sp-columns {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.ev4x-sp-columns h4 {
  margin:0 0 10px;
  color:#fff;
  font-size:18px;
}

.ev4x-sp-code-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ev4x-sp-code-badge {
  display:inline-block;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff;
  font-weight:800;
}

.ev4x-sp-code-badge-empty { opacity:.65; }

.ev4x-sp-history-wrap { margin-top:18px; }

.ev4x-sp-history {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ev4x-sp-history-item {
  background:rgba(255,255,255,.95);
  color:#13202f;
  border-radius:14px;
  padding:12px 14px;
}

.ev4x-sp-history-item.is-empty {
  background:rgba(255,255,255,.12);
  color:#e7f8f6;
}

.ev4x-sp-history-label { font-weight:800; }
.ev4x-sp-history-stats {
  margin-top:6px;
  font-size:14px;
  font-weight:800;
  color:#0f5664;
}
.ev4x-sp-history-note { margin-top:4px; color:#3d4b5b; }
.ev4x-sp-history-time { margin-top:6px; font-size:12px; color:#5b6877; }

.ev4x-sp-final-stats {
  margin-top:18px;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.ev4x-sp-ranking {
  margin-top:16px;
}

.ev4x-sp-ranking-table {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ev4x-sp-ranking-row {
  display:grid;
  grid-template-columns:56px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  color:#13202f;
}

.ev4x-sp-ranking-rank {
  font-weight:900;
  font-size:20px;
  color:#0f5664;
}

.ev4x-sp-ranking-code {
  font-weight:900;
}

.ev4x-sp-ranking-meta {
  color:#4b5a6b;
  font-weight:700;
  text-align:right;
}

.ev4x-sp-inline-message,
.ev4x-sp-message {
  border-radius:16px;
  padding:14px 16px;
}

.ev4x-sp-inline-message {
  display:none;
  margin-bottom:16px;
  background:rgba(123,224,183,.18);
  border:1px solid rgba(123,224,183,.32);
  color:#f3fffb;
}

.ev4x-sp-inline-message.is-visible { display:block; }
.ev4x-sp-inline-message.is-error {
  background:rgba(230,96,96,.16);
  border-color:rgba(230,96,96,.32);
}

.ev4x-sp-student {
  max-width:760px;
  margin:0 auto;
  padding:12px;
}

.ev4x-sp-student-shell {
  background:
    linear-gradient(180deg, rgba(8,26,33,.82) 0%, rgba(14,42,49,.88) 100%),
    var(--ev4x-sp-shell-bg) center/cover no-repeat,
    linear-gradient(180deg, #081a21 0%, #0e2a31 100%);
  border-radius:24px;
  padding:22px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
}

.ev4x-sp-student-form {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  align-items:end;
  margin-bottom:16px;
}

.ev4x-sp-student-form label {
  display:block;
  font-weight:700;
  color:#e6fcfb;
}

.ev4x-sp-student-form input {
  width:100%;
  margin-top:8px;
  border:none;
  border-radius:14px;
  padding:14px 14px;
  font-size:16px;
}

.ev4x-sp-student-card {
  background:rgba(255,255,255,.96);
  color:#1d2534;
  border-radius:20px;
  padding:18px;
}

.ev4x-sp-student-card h3 { margin:8px 0 10px; font-size:28px; }
.ev4x-sp-student-card p { margin:0 0 16px; font-size:17px; color:#334155; }
.ev4x-sp-statusline { color:#536071; font-weight:700; }

.ev4x-sp-student-options {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.ev4x-sp-vote-btn {
  border:none;
  border-radius:18px;
  padding:18px 16px;
  background:#e8f5f3;
  color:#12313b;
  cursor:pointer;
  text-align:left;
}

.ev4x-sp-vote-btn strong {
  display:block;
  font-size:28px;
  margin-bottom:6px;
}

.ev4x-sp-vote-btn span {
  display:block;
  font-size:16px;
  font-weight:700;
}

.ev4x-sp-vote-btn.is-selected {
  background:linear-gradient(135deg, #34c7b8, #2f8f9d);
  color:#fff;
  box-shadow:0 0 0 3px rgba(52,199,184,.28);
}

.ev4x-sp-vote-btn:disabled {
  opacity:.65;
  cursor:not-allowed;
}

.ev4x-sp-student-distance {
  margin:10px 0 2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(45,86,175,.12), rgba(120,77,190,.14));
  border:1px solid rgba(60,102,196,.18);
  color:#294066;
  font-weight:900;
}


.ev4x-sp-student-brief {
  margin-top:14px;
  padding:16px 16px 14px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(15,31,62,.96), rgba(28,54,99,.92));
  color:#eef5ff;
  border:1px solid rgba(132,166,223,.24);
  box-shadow:0 14px 30px rgba(18,32,58,.18);
}

.ev4x-sp-student-brief-eyebrow {
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#bcd4ff;
  margin-bottom:8px;
}

.ev4x-sp-student-brief-title {
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  color:#ffffff;
}

.ev4x-sp-student-brief-text {
  margin-top:8px;
  font-size:14px;
  line-height:1.5;
  color:#dbe8ff;
}

.ev4x-sp-student-brief-meta {
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ev4x-sp-student-brief-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#f7fbff;
  font-size:12px;
  font-weight:800;
}

.ev4x-sp-student-brief-chip.is-start::before,
.ev4x-sp-student-brief-chip.is-goal::before,
.ev4x-sp-student-brief-chip.is-distance::before {
  content:'';
  width:9px;
  height:9px;
  border-radius:999px;
  display:block;
}

.ev4x-sp-student-brief-chip.is-start::before { background:#79a7ff; box-shadow:0 0 10px rgba(121,167,255,.7); }
.ev4x-sp-student-brief-chip.is-goal::before { background:#7be0b7; box-shadow:0 0 10px rgba(123,224,183,.7); }
.ev4x-sp-student-brief-chip.is-distance::before { background:#ffd978; box-shadow:0 0 10px rgba(255,217,120,.75); }

.ev4x-sp-student-note {
  margin-top:14px;
  color:#536071;
  font-weight:700;
}


.ev4x-sp-student-progress {
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.ev4x-sp-student-progress-badge {
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:#eef6ff;
  color:#24415f;
  font-weight:800;
  font-size:14px;
}

.ev4x-sp-student-progress-badge.is-good {
  background:#e8f8ef;
  color:#11613c;
}

.ev4x-sp-student-progress-badge.is-warn {
  background:#fff1e8;
  color:#8a3f12;
}

.ev4x-sp-student-history {
  margin-top:14px;
  display:grid;
  gap:10px;
}

.ev4x-sp-student-history-item {
  border:1px solid #dbe7f5;
  background:#f8fbff;
  border-radius:14px;
  padding:10px 12px;
}

.ev4x-sp-student-history-item.is-empty {
  color:#64748b;
}

.ev4x-sp-student-history-label {
  font-weight:700;
  color:#233247;
}

.ev4x-sp-student-history-time {
  margin-top:4px;
  font-size:12px;
  color:#64748b;
}

.ev4x-sp-message {
  margin-top:14px;
  background:rgba(255,255,255,.10);
  color:#eefbfa;
}

@media (max-width: 1024px) {
  .ev4x-sp-grid,
  .ev4x-sp-options,
  .ev4x-sp-columns,
  .ev4x-sp-student-form,
  .ev4x-sp-student-options {
    grid-template-columns:1fr;
  }

  .ev4x-sp-topbar {
    flex-direction:column;
  }

  .ev4x-sp-student-progress {
    flex-direction:column;
  }

  .ev4x-sp-toolbar {
    justify-content:flex-start;
  }

  .ev4x-sp-quick-controls {
    position:sticky;
    top:12px;
    right:auto;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    margin:0 0 14px;
    width:fit-content;
    max-width:100%;
    min-width:0;
    padding:10px;
  }

  .ev4x-sp-map { min-height:420px; }
}

@media (max-width: 640px) {
  .ev4x-sp-teacher,
  .ev4x-sp-student-shell {
    padding:16px;
  }

  .ev4x-sp-node {
    min-width:72px;
    font-size:12px;
    padding:10px 8px;
  }

  .ev4x-sp-ranking-row {
    grid-template-columns:44px 1fr;
  }

  .ev4x-sp-ranking-meta {
    grid-column:1 / -1;
    text-align:left;
  }
}


.ev4x-sp-student-fixed-session {
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 16px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#eefbfa;
  font-weight:700;
}


.ev4x-sp-join-card {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:16px;
  margin:0 0 16px;
}
.ev4x-sp-join-grid {
  display:grid;
  grid-template-columns:180px 1fr;
  gap:16px;
  align-items:center;
}
.ev4x-sp-join-qr {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:180px;
  background:rgba(255,255,255,.96);
  border-radius:18px;
  padding:12px;
}
.ev4x-sp-qr-svg {
  display:block;
  width:100%;
  max-width:170px;
  height:auto;
}

.ev4x-sp-join-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.ev4x-sp-join-actions-center {
  justify-content:center;
}

.ev4x-sp-join-actions .ev4x-sp-btn {
  max-width:100%;
}

.ev4x-sp-qr-modal[hidden] {
  display:none !important;
}

.ev4x-sp-qr-modal {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.ev4x-sp-qr-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(2, 8, 14, .94);
  backdrop-filter:none;
}

.ev4x-sp-qr-modal-dialog {
  position:relative;
  z-index:1;
  width:min(96vw, 1200px);
  max-height:96vh;
  overflow:auto;
  border-radius:32px;
  padding:24px 24px 22px;
  background:linear-gradient(180deg, #07151c 0%, #0d2229 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  text-align:center;
}

.ev4x-sp-qr-modal-title {
  margin:0 0 8px;
  font-size:clamp(24px, 4vw, 34px);
  font-weight:900;
  color:#eefbfa;
}

.ev4x-sp-qr-modal-subtitle {
  margin:0 0 16px;
  color:#cfeeed;
  font-size:clamp(16px, 2vw, 22px);
  font-weight:800;
}

.ev4x-sp-qr-modal-qr {
  width:min(88vmin, 980px);
  margin:0 auto 18px;
  padding:22px;
  border-radius:30px;
  background:rgba(255,255,255,.99);
}

.ev4x-sp-qr-modal-qr .ev4x-sp-qr-svg {
  display:block;
  width:100%;
  height:auto;
  max-width:none;
}

.ev4x-sp-qr-modal-close {
  position:absolute;
  top:12px;
  right:12px;
  width:46px;
  height:46px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  font-size:30px;
  line-height:1;
  color:#e8fbf9;
  background:rgba(255,255,255,.14);
}


@media (max-width: 960px) {
  .ev4x-sp-grid { grid-template-columns:1fr; }
  .ev4x-sp-join-grid { grid-template-columns:1fr; }
  .ev4x-sp-join-actions { flex-direction:column; align-items:stretch; }
}

@media (max-width: 640px) {
  .ev4x-sp-join-qr { min-height:150px; }
  .ev4x-sp-qr-modal { padding:12px; }
  .ev4x-sp-qr-modal-dialog { width:min(98vw, 98vh); padding:18px 14px 16px; border-radius:24px; }
  .ev4x-sp-qr-modal-qr { width:min(92vw, 92vh); padding:14px; }
}


.ev4x-sp-modal-open {
  overflow:hidden !important;
}


.ev4x-sp-cinematic[hidden] {
  display:none !important;
}

.ev4x-sp-cinematic {
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:grid;
  place-items:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.ev4x-sp-cinematic.is-visible {
  opacity:1;
  pointer-events:auto;
}

.ev4x-sp-cinematic-backdrop {
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 22%, rgba(67, 196, 255, .20), transparent 18%),
    radial-gradient(circle at 78% 20%, rgba(255, 215, 92, .18), transparent 16%),
    radial-gradient(circle at 50% 70%, rgba(125, 102, 255, .16), transparent 24%),
    linear-gradient(180deg, rgba(2, 10, 18, .95) 0%, rgba(4, 14, 26, .98) 100%);
  backdrop-filter: blur(4px);
}

.ev4x-sp-cinematic-stage {
  position:relative;
  width:min(96vw, 1120px);
  min-height:min(72vh, 720px);
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 56%, rgba(44, 104, 255, .18), transparent 22%),
    linear-gradient(180deg, rgba(5, 19, 34, .96) 0%, rgba(3, 10, 22, .98) 100%);
  box-shadow:0 36px 120px rgba(0,0,0,.48);
  isolation:isolate;
}

.ev4x-sp-cinematic-stage::before,
.ev4x-sp-cinematic-stage::after {
  content:'';
  position:absolute;
  inset:-20%;
  pointer-events:none;
}

.ev4x-sp-cinematic-stage::before {
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 42%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 28%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 64%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 72%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    radial-gradient(circle at 86% 76%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 18%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 8% 62%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 93% 12%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 84%, rgba(255,255,255,.8) 0 1px, transparent 2px);
  opacity:.9;
  animation:ev4xSpStarDrift 16s linear infinite;
}

.ev4x-sp-cinematic-stage::after {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.12) 13%, transparent 14%),
    linear-gradient(120deg, transparent 0 60%, rgba(255,255,255,.14) 61%, transparent 62%),
    linear-gradient(150deg, transparent 0 38%, rgba(255, 215, 115, .16) 39%, transparent 40%);
  opacity:.4;
  animation:ev4xSpNebulaPulse 8s ease-in-out infinite;
}

.ev4x-sp-cinematic-stars {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.ev4x-sp-cinematic-stars span {
  position:absolute;
  width:180px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
  box-shadow:0 0 18px rgba(255,255,255,.48);
  opacity:0;
  transform:rotate(-25deg) translateX(-120px);
  animation:ev4xSpShootingStar 2.8s linear infinite;
}

.ev4x-sp-cinematic-stars span:nth-child(1)  { top:12%; left:6%;  animation-delay:.2s;  }
.ev4x-sp-cinematic-stars span:nth-child(2)  { top:20%; left:48%; animation-delay:1.2s; }
.ev4x-sp-cinematic-stars span:nth-child(3)  { top:30%; left:20%; animation-delay:2.1s; }
.ev4x-sp-cinematic-stars span:nth-child(4)  { top:38%; left:64%; animation-delay:.9s; }
.ev4x-sp-cinematic-stars span:nth-child(5)  { top:48%; left:12%; animation-delay:1.9s; }
.ev4x-sp-cinematic-stars span:nth-child(6)  { top:58%; left:54%; animation-delay:2.7s; }
.ev4x-sp-cinematic-stars span:nth-child(7)  { top:66%; left:8%;  animation-delay:1.5s; }
.ev4x-sp-cinematic-stars span:nth-child(8)  { top:72%; left:44%; animation-delay:.5s; }
.ev4x-sp-cinematic-stars span:nth-child(9)  { top:22%; left:72%; animation-delay:2.4s; }
.ev4x-sp-cinematic-stars span:nth-child(10) { top:78%; left:68%; animation-delay:1.1s; }
.ev4x-sp-cinematic-stars span:nth-child(11) { top:84%; left:18%; animation-delay:2.9s; }
.ev4x-sp-cinematic-stars span:nth-child(12) { top:10%; left:76%; animation-delay:3.2s; }

.ev4x-sp-cinematic-content {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  align-content:start;
  justify-items:center;
  text-align:center;
  padding:24px 42px 92px;
  color:#fff;
}

.ev4x-sp-cinematic-content > :not(.ev4x-sp-cinematic-orbit) {
  position:relative;
  z-index:2;
}

.ev4x-sp-cinematic-orbit {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.ev4x-sp-cinematic-flightpath {
  position:absolute;
  left:24%;
  top:37%;
  width:54%;
  height:28%;
  border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(255,236,180,.18) 0%, rgba(120,173,255,.12) 38%, rgba(255,255,255,0) 72%);
  filter:blur(18px);
  opacity:.9;
  transform:rotate(-18deg);
  animation:ev4xSpRouteGlow 5.5s ease-in-out infinite;
}

.ev4x-sp-cinematic-flightpath::after {
  content:'';
  position:absolute;
  inset:18% 8%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,244,205,.22), rgba(255,255,255,0));
  filter:blur(10px);
  opacity:.8;
}

.ev4x-sp-cinematic-planet {
  position:absolute;
  border-radius:50%;
  overflow:hidden;
  background-color:transparent !important;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  box-shadow:none;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.28));
}

.ev4x-sp-cinematic-planet span {
  position:absolute;
  left:50%;
  bottom:-34px;
  transform:translateX(-50%);
  padding:7px 14px;
  border-radius:999px;
  background:rgba(5,17,33,.34);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  backdrop-filter:blur(6px);
  z-index:3;
}

.ev4x-sp-cinematic-planet.is-earth {
  left:8%;
  bottom:11%;
  width:min(24vw, 184px);
  height:min(24vw, 184px);
  background:transparent url('../img/web-zeme-2-transparent.png') center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(90,156,255,.28)) drop-shadow(0 0 34px rgba(41,92,187,.18));
  animation:ev4xSpPlanetFloat 5.5s ease-in-out infinite;
}

.ev4x-sp-cinematic-planet.is-destination {
  right:8%;
  top:18%;
  width:min(13vw, 110px);
  height:min(13vw, 110px);
  background:transparent url('https://system.eduvia4x.cz/wp-content/uploads/2026/04/web-bellatrix-3.png') center/cover no-repeat;
  filter:drop-shadow(0 0 12px rgba(255,234,176,.26)) drop-shadow(0 0 24px rgba(191,142,255,.18));
  animation:ev4xSpPlanetFloat 4.8s ease-in-out infinite;
}

.ev4x-sp-cinematic-planet.is-destination::before,
.ev4x-sp-cinematic-orbit-outro .ev4x-sp-cinematic-planet.is-arrival::before {
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:118%;
  height:118%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,248,210,.18) 0%, rgba(198,156,255,.12) 38%, rgba(146,111,255,.08) 56%, rgba(146,111,255,0) 76%);
  filter:blur(10px);
  z-index:-1;
  pointer-events:none;
  animation:ev4xSpBellatrixGlow 3.8s ease-in-out infinite;
}

.ev4x-sp-cinematic-orbit-outro .ev4x-sp-cinematic-planet.is-arrival {
  left:50%;
  top:71%;
  width:min(28vw, 240px);
  height:min(28vw, 240px);
  margin-left:calc(min(29vw, 248px) / -2);
  margin-top:calc(min(29vw, 248px) / -2);
  background:transparent url('https://system.eduvia4x.cz/wp-content/uploads/2026/04/web-bellatrix-3.png') center/cover no-repeat;
  filter:drop-shadow(0 0 14px rgba(255,240,190,.24)) drop-shadow(0 0 34px rgba(191,136,255,.18));
  animation:ev4xSpArrivalPulse 5.2s ease-in-out infinite;
}

.ev4x-sp-cinematic-content.is-outro {
  background:radial-gradient(circle at 50% 62%, rgba(56, 185, 117, .12), transparent 24%);
  align-content:start;
  padding-top:54px;
}

.ev4x-sp-cinematic-kicker {
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:13px;
  font-weight:900;
  color:#cfeffc;
  margin-bottom:16px;
  opacity:0;
  transform:translateY(16px);
}

.ev4x-sp-cinematic-title {
  font-size:clamp(28px, 4.6vw, 62px);
  font-weight:900;
  line-height:1.04;
  letter-spacing:.01em;
  margin-bottom:16px;
  text-shadow:0 10px 36px rgba(0,0,0,.44);
  opacity:0;
  transform:scale(.92) translateY(22px);
}


.ev4x-sp-cinematic-title,
.ev4x-sp-cinematic-subtitle,
.ev4x-sp-cinematic-mission,
.ev4x-sp-cinematic-summary {
  max-width:min(88%, 980px);
}
.ev4x-sp-cinematic-subtitle {
  max-width:760px;
  font-size:clamp(16px, 2.1vw, 24px);
  line-height:1.35;
  color:#eaf8ff;
  opacity:0;
  transform:translateY(18px);
}

.ev4x-sp-cinematic-mission {
  margin-top:16px;
  padding:14px 24px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff2cb;
  font-size:clamp(15px, 1.7vw, 21px);
  font-weight:900;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(18px);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.ev4x-sp-cinematic-summary {
  margin-top:12px;
  max-width:900px;
  padding:16px 22px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#effef6;
  font-size:clamp(14px, 1.45vw, 18px);
  font-weight:800;
  line-height:1.45;
  opacity:0;
  transform:translateY(18px);
}

.ev4x-sp-cinematic-glow {
  position:absolute;
  width:min(86vw, 520px);
  height:min(86vw, 520px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255, 221, 122, .34) 0%, rgba(85, 151, 255, .18) 35%, rgba(5, 14, 28, 0) 72%);
  filter:blur(6px);
  animation:ev4xSpGlowPulse 4s ease-in-out infinite;
  pointer-events:none;
}

.ev4x-sp-cinematic.is-outro .ev4x-sp-cinematic-glow {
  background:radial-gradient(circle, rgba(138, 235, 182, .34) 0%, rgba(72, 160, 255, .16) 34%, rgba(5, 14, 28, 0) 72%);
}

.ev4x-sp-cinematic.is-visible .ev4x-sp-cinematic-kicker {
  animation:ev4xSpRiseIn .7s ease forwards .2s;
}

.ev4x-sp-cinematic.is-visible .ev4x-sp-cinematic-title {
  animation:ev4xSpTitleIn .95s cubic-bezier(.2,.75,.15,1) forwards .45s;
}

.ev4x-sp-cinematic.is-visible .ev4x-sp-cinematic-subtitle {
  animation:ev4xSpRiseIn .8s ease forwards .85s;
}

.ev4x-sp-cinematic.is-visible .ev4x-sp-cinematic-mission {
  animation:ev4xSpRiseIn .8s ease forwards 1.1s;
}

.ev4x-sp-cinematic.is-visible .ev4x-sp-cinematic-summary {
  animation:ev4xSpRiseIn .8s ease forwards 1.2s;
}

.ev4x-sp-cinematic-welcome {
  position:absolute;
  left:50%;
  top:calc(71% + min(29vw, 248px) / 2 + 20px);
  transform:translateX(-50%);
  z-index:3;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(5,17,33,.42);
  border:1px solid rgba(255,255,255,.12);
  color:#fff7d8;
  font-size:clamp(15px, 1.55vw, 19px);
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.ev4x-sp-cinematic-skip {
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:2;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  background:rgba(255,255,255,.12);
  color:#ecf8ff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}

.ev4x-sp-cinematic-skip:hover {
  transform:translateY(-1px);
}

@keyframes ev4xSpRouteGlow {
  0%, 100% { opacity:.72; transform:rotate(-18deg) scale(1); }
  50% { opacity:1; transform:rotate(-18deg) scale(1.03); }
}

@keyframes ev4xSpPlanetFloat {
  0%, 100% { transform:translateY(0px) scale(1); }
  50% { transform:translateY(-10px) scale(1.02); }
}

@keyframes ev4xSpPlanetPulse {
  0%, 100% { transform:scale(.9); opacity:.75; }
  50% { transform:scale(1.12); opacity:1; }
}

@keyframes ev4xSpBellatrixGlow {
  0%, 100% {
    opacity:.68;
    transform:translate(-50%, -50%) scale(0.98);
  }
  50% {
    opacity:.92;
    transform:translate(-50%, -50%) scale(1.04);
  }
}

@keyframes ev4xSpArrivalPulse {
  0%, 100% { transform:scale(1); filter:drop-shadow(0 0 14px rgba(255,234,161,.24)); }
  50% { transform:scale(1.04); filter:drop-shadow(0 0 28px rgba(255,234,161,.42)); }
}

@keyframes ev4xSpShootingStar {
  0%   { opacity:0; transform:translateX(-140px) translateY(0) rotate(-25deg) scaleX(.45); }
  10%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity:0; transform:translateX(420px) translateY(120px) rotate(-25deg) scaleX(1); }
}

@keyframes ev4xSpStarDrift {
  0% { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(-10px, 8px, 0) scale(1.03); }
  100% { transform:translate3d(0,0,0) scale(1); }
}

@keyframes ev4xSpNebulaPulse {
  0%,100% { transform:scale(1); opacity:.32; }
  50% { transform:scale(1.06); opacity:.48; }
}

@keyframes ev4xSpGlowPulse {
  0%,100% { transform:scale(.92); opacity:.65; }
  50% { transform:scale(1.08); opacity:.92; }
}

@keyframes ev4xSpRiseIn {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes ev4xSpTitleIn {
  0% { opacity:0; transform:scale(.85) translateY(28px); filter:blur(8px); }
  65% { opacity:1; transform:scale(1.04) translateY(-2px); filter:blur(0); }
  100% { opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}

@media (max-width: 900px) {
  .ev4x-sp-cinematic-stage {
    min-height:min(76vh, 680px);
  }
  .ev4x-sp-cinematic-content {
    padding:52px 24px 84px;
  }
}

@media (max-width: 640px) {
  .ev4x-sp-quick-controls {
    padding:8px;
    gap:8px;
    border-radius:16px;
    min-width:0;
  }

  .ev4x-sp-quick-controls .ev4x-sp-btn {
    min-height:40px;
    padding:9px 12px;
    font-size:13px;
  }

  .ev4x-sp-cinematic {
    padding:10px;
  }
  .ev4x-sp-cinematic-stage {
    min-height:min(84vh, 640px);
    border-radius:24px;
  }
  .ev4x-sp-cinematic-skip {
    right:12px;
    bottom:12px;
    font-size:14px;
    padding:10px 14px;
  }
}


/* Fullscreen improvements */
.ev4x-sp-app:fullscreen,
.ev4x-sp-app:-webkit-full-screen {
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  overflow:auto !important;
  padding:20px !important;
  border-radius:0 !important;
  box-sizing:border-box;
  scrollbar-width:auto;
}

.ev4x-sp-app:fullscreen .ev4x-sp-grid,
.ev4x-sp-app:-webkit-full-screen .ev4x-sp-grid {
  align-items:start;
}

.ev4x-sp-app:fullscreen .ev4x-sp-map,
.ev4x-sp-app:-webkit-full-screen .ev4x-sp-map {
  min-height:620px;
}

.ev4x-sp-app:fullscreen .ev4x-sp-quick-controls,
.ev4x-sp-app:-webkit-full-screen .ev4x-sp-quick-controls {
  position:fixed;
  top:18px;
  right:18px;
  z-index:200;
}

.ev4x-sp-app:fullscreen .ev4x-sp-topbar,
.ev4x-sp-app:-webkit-full-screen .ev4x-sp-topbar {
  align-items:flex-start;
}

@media (max-width: 1024px) {
  .ev4x-sp-app:fullscreen .ev4x-sp-quick-controls,
  .ev4x-sp-app:-webkit-full-screen .ev4x-sp-quick-controls {
    position:sticky;
    top:12px;
    right:auto;
  }
}


.ev4x-sp-vote-btn.is-correct {
  background:linear-gradient(135deg, #31b76b, #1d8b4f);
  color:#fff;
  box-shadow:0 0 0 3px rgba(49,183,107,.26);
  opacity:1;
}

.ev4x-sp-vote-btn.is-wrong {
  background:linear-gradient(135deg, #f7d5d5, #efb6b6);
  color:#742c2c;
  opacity:1;
}

.ev4x-sp-cinematic-orbit-intro .ev4x-sp-cinematic-planet.is-earth span,
.ev4x-sp-cinematic-orbit-intro .ev4x-sp-cinematic-planet.is-destination span {
  backdrop-filter:blur(4px);
}
@media (max-width: 900px) {
  .ev4x-sp-cinematic-planet.is-earth {
    left:4%;
    bottom:8%;
    width:min(34vw, 170px);
    height:min(34vw, 170px);
  }
  .ev4x-sp-cinematic-planet.is-destination {
    right:4%;
    top:12%;
    width:min(18vw, 98px);
    height:min(18vw, 98px);
  }
  .ev4x-sp-cinematic-orbit-outro .ev4x-sp-cinematic-planet.is-arrival {
    width:min(50vw, 230px);
    height:min(50vw, 230px);
    margin-left:calc(min(50vw, 230px) / -2);
    margin-top:calc(min(50vw, 230px) / -2);
    left:50%;
    top:72%;
  }
  .ev4x-sp-cinematic-welcome {
    top:calc(72% + min(50vw, 230px) / 2 + 16px);
    font-size:14px;
    padding:9px 14px;
    width:min(86vw, 420px);
    text-align:center;
  }
}

.ev4x-sp-cinematic-orbit-intro .ev4x-sp-cinematic-planet span { font-size:12px; opacity:.88; }

.ev4x-sp-optional{font-size:12px;color:#6b7280;font-weight:700;}
.ev4x-sp-student-form-note{font-size:13px;color:#64748b;margin-top:8px;}

/* 58.0: mini mapa mise v anonymním samostatném průchodu */
.ev4x-sp-student-map-card {
  margin:14px 0 0;
}

.ev4x-sp-student-map-details {
  border:1px solid rgba(46, 85, 120, .16);
  border-radius:18px;
  background:linear-gradient(180deg, #f7fbff 0%, #eef7fb 100%);
  overflow:hidden;
}

.ev4x-sp-student-map-details summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  font-weight:900;
  color:#223247;
  user-select:none;
}

.ev4x-sp-student-map-details summary::-webkit-details-marker { display:none; }

.ev4x-sp-student-map-details summary::before {
  content:'✦';
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:999px;
  background:linear-gradient(135deg, #f2d17d, #e2ab3c);
  color:#223247;
  box-shadow:0 0 0 3px rgba(231,186,82,.18);
}

.ev4x-sp-student-map-details summary span {
  margin-left:auto;
  color:#607087;
  font-size:12px;
  font-weight:800;
  text-align:right;
}

.ev4x-sp-student-map {
  position:relative;
  height:258px;
  margin:0 12px 10px;
  border-radius:18px;
  overflow:hidden;
  background-color:#07161b;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(22, 48, 72, .22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), 0 10px 22px rgba(20, 41, 58, .10);
}

.ev4x-sp-student-map::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(3,12,19,.16), rgba(4,15,22,.52)),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 24%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 76%, rgba(255,255,255,.48) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 68%, rgba(255,255,255,.60) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, rgba(125,176,255,.08), transparent 42%);
  z-index:0;
  pointer-events:none;
}

.ev4x-sp-student-map::after {
  content:'';
  position:absolute;
  inset:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  pointer-events:none;
  z-index:0;
}

.ev4x-sp-student-map-scenery {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.ev4x-sp-student-map-route {
  position:absolute;
  left:9%;
  right:10%;
  top:24%;
  bottom:20%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(121,167,255,.10), rgba(255,217,120,.06), rgba(123,224,183,.10));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.ev4x-sp-student-map-route::before {
  content:'';
  position:absolute;
  left:9%;
  right:12%;
  top:49%;
  height:2px;
  background:linear-gradient(90deg, rgba(121,167,255,.6), rgba(255,217,120,.75), rgba(123,224,183,.55));
  box-shadow:0 0 10px rgba(255,217,120,.25);
}

.ev4x-sp-student-map-route::after {
  content:'';
  position:absolute;
  right:10%;
  top:49%;
  transform:translateY(-50%);
  border-left:10px solid rgba(255,217,120,.82);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  filter:drop-shadow(0 0 6px rgba(255,217,120,.35));
}

.ev4x-sp-student-map-planet {
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(2,8,22,.28);
}

.ev4x-sp-student-map-planet span {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(9,20,37,.82);
  color:#f8fbff;
  font-size:11px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
}

.ev4x-sp-student-map-planet span small {
  display:block;
  font-size:10px;
  opacity:.88;
  font-weight:800;
}

.ev4x-sp-student-map-planet.is-earth {
  left:18px;
  top:18px;
  width:34px;
  height:34px;
  background:radial-gradient(circle at 32% 30%, #b9ebff 0%, #4ca7ff 35%, #1a59ab 68%, #0b2e57 100%);
}

.ev4x-sp-student-map-planet.is-earth span {
  top:42px;
}

.ev4x-sp-student-map-planet.is-bellatrix {
  right:18px;
  bottom:18px;
  width:42px;
  height:42px;
  background:radial-gradient(circle at 32% 28%, #fff5bf 0%, #7be0b7 38%, #297d7b 72%, #143f54 100%);
  box-shadow:0 0 0 5px rgba(123,224,183,.12), 0 10px 28px rgba(2,8,22,.28);
}

.ev4x-sp-student-map-planet.is-bellatrix span {
  bottom:48px;
}

.ev4x-sp-student-map-lines,
.ev4x-sp-student-map-nodes {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ev4x-sp-student-map-lines { z-index:2; }
.ev4x-sp-student-map-nodes { z-index:3; }

.ev4x-sp-student-map-line {
  stroke:rgba(255,255,255,.22);
  stroke-width:.7;
  stroke-dasharray:2.4 2.6;
  stroke-linecap:round;
}

.ev4x-sp-student-map-line.is-next,
.ev4x-sp-student-map-line.is-target-current {
  stroke:rgba(255,255,255,.42);
  stroke-width:.95;
}

.ev4x-sp-student-map-line.is-visited {
  stroke:rgba(231,186,82,.96);
  stroke-width:1.55;
  stroke-dasharray:none;
  filter:drop-shadow(0 0 5px rgba(231,186,82,.45));
}

.ev4x-sp-student-map-node {
  position:absolute;
  z-index:2;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:8px;
  max-width:180px;
  opacity:.56;
}

.ev4x-sp-student-map-node.label-left {
  flex-direction:row-reverse;
}

.ev4x-sp-student-map-node.label-above,
.ev4x-sp-student-map-node.label-below {
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.ev4x-sp-student-map-node.label-above {
  flex-direction:column-reverse;
}

.ev4x-sp-student-map-dot {
  position:relative;
  display:block;
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:999px;
  background:#dbe8f3;
  border:2px solid rgba(255,255,255,.72);
  box-shadow:0 0 12px rgba(255,255,255,.30);
}

.ev4x-sp-student-map-node.is-visited { opacity:.96; }
.ev4x-sp-student-map-node.is-visited .ev4x-sp-student-map-dot { background:#e7ba52; box-shadow:0 0 16px rgba(231,186,82,.60); }
.ev4x-sp-student-map-node.is-start .ev4x-sp-student-map-dot { background:#79a7ff; }
.ev4x-sp-student-map-node.is-goal .ev4x-sp-student-map-dot { background:#7be0b7; box-shadow:0 0 0 4px rgba(123,224,183,.16), 0 0 16px rgba(123,224,183,.42); }

.ev4x-sp-student-map-marker {
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  line-height:1;
  color:#fff5c7;
  text-shadow:0 0 10px rgba(255,217,120,.75);
  pointer-events:none;
}

.ev4x-sp-student-map-node.is-current {
  opacity:1;
  z-index:4;
}

.ev4x-sp-student-map-node.is-current .ev4x-sp-student-map-dot {
  width:20px;
  height:20px;
  flex-basis:20px;
  background:#ffd978;
  border-color:#fff7cf;
  box-shadow:0 0 0 6px rgba(231,186,82,.24), 0 0 26px rgba(255,217,120,.88);
  animation:ev4xSpStudentMapPulse 2.2s ease-in-out infinite;
}

.ev4x-sp-student-map-node.is-current.is-goal .ev4x-sp-student-map-dot {
  background:linear-gradient(135deg, #ffe58b 0%, #7be0b7 100%);
  border-color:#fff8d9;
}

.ev4x-sp-student-map-label {
  display:block;
  max-width:150px;
  padding:7px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.95);
  color:#223247;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
  overflow-wrap:anywhere;
  text-align:center;
}

.ev4x-sp-student-map-legend {
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  padding:0 14px 12px;
  color:#516075;
  font-size:12px;
  font-weight:800;
}

.ev4x-sp-student-map-legend span {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.ev4x-sp-student-map-legend i {
  width:10px;
  height:10px;
  border-radius:999px;
  background:#dbe8f3;
  border:1px solid rgba(45, 63, 82, .18);
}

.ev4x-sp-student-map-legend i.is-current { background:#ffd978; box-shadow:0 0 10px rgba(231,186,82,.55); }
.ev4x-sp-student-map-legend i.is-visited { background:#e7ba52; }

@keyframes ev4xSpStudentMapPulse {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.14); }
}

@media (max-width:640px) {
  .ev4x-sp-student-map { height:222px; margin-left:8px; margin-right:8px; }
  .ev4x-sp-student-map-details summary { align-items:flex-start; flex-wrap:wrap; }
  .ev4x-sp-student-map-details summary span { width:100%; margin-left:40px; text-align:left; }
  .ev4x-sp-student-map-node { max-width:140px; }
  .ev4x-sp-student-map-label { max-width:116px; font-size:11px; padding:6px 8px; }
  .ev4x-sp-student-map-route { left:12%; right:13%; top:25%; bottom:22%; }
  .ev4x-sp-student-map-planet.is-earth { left:14px; top:14px; width:28px; height:28px; }
  .ev4x-sp-student-map-planet.is-bellatrix { right:14px; bottom:14px; width:34px; height:34px; }
  .ev4x-sp-student-map-planet span { font-size:10px; padding:4px 8px; }
  .ev4x-sp-student-brief-title { font-size:18px; }
  .ev4x-sp-student-brief-text { font-size:13px; }
}


/* 69.0: nástup do kosmické lodi, počet neodeslaných hlasů, správná posloupnost */
.ev4x-sp-boarding-panel {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin:14px 0 18px;
}

.ev4x-sp-boarding-card,
.ev4x-sp-correct-sequence {
  border:1px solid rgba(80,120,170,.18);
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,247,255,.94));
  border-radius:18px;
  padding:12px 14px;
  color:#223247;
  box-shadow:0 10px 24px rgba(20,40,70,.08);
}

.ev4x-sp-boarding-muted {
  color:#607087;
  font-weight:700;
}

.ev4x-sp-unanswered-number {
  display:inline-grid;
  place-items:center;
  min-width:42px;
  height:34px;
  margin-left:8px;
  padding:0 10px;
  border-radius:999px;
  background:#fff0e6;
  color:#92390b;
  font-weight:950;
  font-size:20px;
}

.ev4x-sp-unanswered-number.is-zero {
  background:#e8f8ef;
  color:#11613c;
}

.ev4x-sp-correct-sequence {
  grid-column:1 / -1;
}

.ev4x-sp-correct-sequence summary {
  cursor:pointer;
  font-weight:900;
  color:#19355d;
}

.ev4x-sp-correct-sequence-list {
  margin-top:10px;
  display:grid;
  gap:8px;
}

.ev4x-sp-correct-row {
  display:grid;
  grid-template-columns:38px 1fr auto auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(80,120,170,.14);
  border-radius:14px;
  padding:8px 10px;
  background:rgba(255,255,255,.72);
}

.ev4x-sp-correct-row span {
  font-weight:900;
  color:#61708a;
}

.ev4x-sp-correct-row strong {
  color:#20304a;
}

.ev4x-sp-correct-row em {
  min-width:34px;
  text-align:center;
  border-radius:999px;
  padding:5px 10px;
  background:#173d74;
  color:#fff;
  font-style:normal;
  font-weight:950;
}

.ev4x-sp-correct-original {
  font-size:12px;
  color:#748197;
}

@media (max-width:760px) {
  .ev4x-sp-boarding-panel { grid-template-columns:1fr; }
  .ev4x-sp-correct-row { grid-template-columns:30px 1fr auto; }
  .ev4x-sp-correct-original { display:none; }
}


/* 70.0: rozbalovací graf hlasování a seznamy žáků pro bezpečné promítání */
.ev4x-sp-teacher-toggle-panel {
  margin:14px 0;
  border:1px solid rgba(110,150,190,.20);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(235,247,249,.88));
  box-shadow:0 12px 28px rgba(20,40,70,.08);
  overflow:hidden;
}

.ev4x-sp-teacher-toggle-panel > summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  font-weight:950;
  color:#16365f;
}

.ev4x-sp-teacher-toggle-panel > summary::-webkit-details-marker {
  display:none;
}

.ev4x-sp-teacher-toggle-panel > summary span {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.ev4x-sp-teacher-toggle-panel > summary em {
  font-style:normal;
  font-size:12px;
  font-weight:850;
  color:#65748a;
  background:rgba(22,54,95,.08);
  border-radius:999px;
  padding:6px 10px;
}

.ev4x-sp-teacher-toggle-panel[open] > summary {
  border-bottom:1px solid rgba(110,150,190,.16);
  background:rgba(255,255,255,.55);
}

.ev4x-sp-teacher-toggle-panel .ev4x-sp-options,
.ev4x-sp-teacher-toggle-panel .ev4x-sp-helper,
.ev4x-sp-teacher-toggle-panel .ev4x-sp-columns,
.ev4x-sp-teacher-toggle-panel .ev4x-sp-section-title {
  margin-left:14px;
  margin-right:14px;
}

.ev4x-sp-teacher-toggle-panel .ev4x-sp-section-title {
  margin-top:14px;
}

.ev4x-sp-teacher-toggle-panel .ev4x-sp-helper,
.ev4x-sp-teacher-toggle-panel .ev4x-sp-columns {
  margin-bottom:14px;
}

@media (max-width:760px) {
  .ev4x-sp-teacher-toggle-panel > summary {
    align-items:flex-start;
    flex-direction:column;
  }
}


/* 71.0: vyšší kontrast rozbalených učitelských panelů */
.ev4x-sp-teacher-toggle-panel[open] {
  background:#f6fbff;
  border-color:rgba(32,68,112,.32);
}

.ev4x-sp-teacher-toggle-panel[open] > summary {
  background:linear-gradient(135deg, #ffffff, #e8f3fb);
  color:#102a4c;
  border-bottom:1px solid rgba(32,68,112,.20);
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-columns {
  background:#eaf3f7;
  border:1px solid rgba(32,68,112,.14);
  border-radius:18px;
  padding:16px;
  color:#102033;
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-columns h4 {
  color:#14365f;
  font-size:20px;
  font-weight:950;
  text-shadow:none;
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-code-badge {
  min-width:42px;
  height:42px;
  display:inline-grid;
  place-items:center;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(135deg, #ffffff, #d7e6ef);
  color:#19304d;
  border:1px solid rgba(32,68,112,.18);
  box-shadow:0 8px 16px rgba(25,48,77,.10);
  font-weight:950;
  font-size:17px;
  opacity:1;
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-code-badge-empty {
  background:#eef3f7;
  color:#536274;
  border:1px dashed rgba(32,68,112,.25);
  opacity:1;
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-options {
  background:#f7fbff;
  border-radius:18px;
  padding:14px;
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-helper {
  color:#405066;
  font-weight:750;
}

.ev4x-sp-teacher-toggle-panel[open] .ev4x-sp-section-title {
  color:#14365f;
  font-weight:950;
  text-shadow:none;
}


/* 74.0: viditelné odhalení správné odpovědi v žákovském režimu */
.ev4x-sp-student-answer-reveal {
  grid-column:1 / -1;
  border-radius:18px;
  padding:14px 16px;
  margin-top:8px;
  background:linear-gradient(135deg, #eef7ff, #f8fbff);
  border:1px solid rgba(38, 89, 144, .22);
  color:#17304d;
  box-shadow:0 10px 22px rgba(20, 44, 76, .10);
}

.ev4x-sp-student-answer-reveal.is-correct {
  background:linear-gradient(135deg, #e9fff3, #f7fffb);
  border-color:rgba(36, 140, 85, .30);
}

.ev4x-sp-student-answer-reveal.is-wrong {
  background:linear-gradient(135deg, #fff3ec, #fffaf7);
  border-color:rgba(190, 92, 44, .30);
}

.ev4x-sp-student-answer-kicker {
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:950;
  color:#5a6a7e;
  margin-bottom:5px;
}

.ev4x-sp-student-answer-main {
  font-size:19px;
  font-weight:900;
  color:#102a4c;
}

.ev4x-sp-student-answer-main strong {
  display:inline-grid;
  place-items:center;
  min-width:38px;
  margin-left:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#173d74;
  color:#fff;
  font-weight:950;
}

.ev4x-sp-student-answer-note {
  margin-top:6px;
  font-weight:800;
  color:#334155;
}