/* ====== Asas / latar ikut design kemah ====== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue: #2563eb;
  --indigo: #4f46e5;
  --purple: #7c3aed;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --green: #16a34a;
  --red: #dc2626;
  --card: #ffffff;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background-color: #f6f7fb;
  background-image: radial-gradient(#c9cfdd 1.3px, transparent 1.3px);
  background-size: 28px 28px;
  min-height: 100vh;
}

.screen { display: none; min-height: 100vh; }
.screen.active { display: block; }
#screen-home.active { display: flex; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ====== Butang ====== */
button { font: inherit; cursor: pointer; }

.btn-primary {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #111827, #2e2a72);
  transition: opacity .15s;
}
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-ghost {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.btn-ghost:hover { background: #f8fafc; }

.btn-cta {
  border: 0;
  border-radius: 12px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(90deg, #111827, #2e2a72);
  transition: opacity .15s;
}
.btn-cta:disabled { background: #cbd5e1; color: #f8fafc; cursor: not-allowed; }
.btn-cta.next { background: linear-gradient(90deg, #16a34a, #15803d); }

.chip-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
}

/* ====== Skrin 1 : Pilih domain ====== */
.sidebar {
  width: 280px;
  min-height: 100vh;
  flex-shrink: 0;
  padding: 28px 20px;
  color: #e2e8f0;
  background: linear-gradient(180deg, #3b3a7a 0%, #4a4f92 45%, #5560a4 100%);
}
.sidebar-menu-label { font-size: 11px; letter-spacing: 2px; color: #c7d2fe; font-weight: 700; }
.sidebar-title { font-weight: 800; color: #fff; margin: 4px 0 22px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-radius: 12px;
  color: #e0e7ff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.active { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); color: #fff; }
.nav-ico { width: 22px; text-align: center; }

.home-main { flex: 1; padding: 28px 44px; }
.home-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 34px; }
.back-link { color: var(--muted); text-decoration: none; font-weight: 600; }
.back-link:hover { color: var(--ink); }

.home-header { display: flex; align-items: center; gap: 20px; margin-bottom: 36px; }
.home-header h1 { font-size: 34px; letter-spacing: -.5px; }
.home-header p { margin-top: 4px; font-size: 16px; }

.subject-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  font-size: 26px;
  background: linear-gradient(135deg, #60a5fa, #4f46e5);
  box-shadow: 0 8px 20px rgba(79, 70, 229, .35);
}
.subject-icon.big { width: 88px; height: 88px; border-radius: 24px; font-size: 42px; }

.domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1100px; }
.domain-card {
  background: var(--card);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}
.domain-card h2 { font-size: 22px; margin-bottom: 4px; }
.domain-card p { margin-bottom: 20px; }
.domain-card.disabled { opacity: .6; }

/* ====== Skrin 2 : Kuiz ====== */
#screen-quiz { padding: 20px clamp(16px, 4vw, 48px) 48px; }

.quiz-header {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 16px 22px;
  box-shadow: 0 6px 24px rgba(15,23,42,.06);
}
.quiz-header-left { display: flex; align-items: center; gap: 16px; }
.subject-label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: var(--purple); }
.subject-topic { font-size: 24px; letter-spacing: -.4px; }
.quiz-header-right { display: flex; align-items: center; gap: 12px; }

/* Stepper */
.stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 26px 0 20px;
  flex-wrap: wrap;
}
.step-cloud {
  position: relative;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  font-size: 22px;
  background: #ecfdf5;
  border: 2px solid #a7f3d0;
}
.step-dashes { color: #34d399; letter-spacing: 3px; font-weight: 800; }
.step {
  position: relative;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 17px;
  color: #94a3b8;
  background: rgba(255,255,255,.7);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.step:hover { transform: translateY(-2px); border-color: #c7d2fe; box-shadow: 0 6px 16px rgba(15,23,42,.12); }
.step.current {
  color: var(--blue);
  background: #fff;
  border-color: var(--blue);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .25);
}
.step.current::after {
  content: "";
  position: absolute; top: -5px; right: -5px;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--blue);
  border: 2px solid #fff;
}
.step.done { background: #ecfdf5; border-color: #a7f3d0; color: var(--green); }
.step.pending { background: #fef2f2; border-color: #fecaca; color: var(--red); }
.step.pending.current { border-color: var(--red); box-shadow: 0 6px 18px rgba(220,38,38,.25); background: #fff; }
.step.pending.current::after { background: var(--red); }
.step.done .tick {
  position: absolute; top: -7px; right: -7px;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  font-size: 11px;
  color: #fff;
  background: var(--green);
  border-radius: 999px;
  border: 2px solid #fff;
}

/* Kad soalan */
.question-card {
  position: relative;
  max-width: 1500px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 24px;
  padding: 30px clamp(20px, 3vw, 40px) 26px;
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
}
.q-badge {
  display: inline-block;
  background: #111827;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 14px;
  margin-bottom: 12px;
}
.q-level {
  display: inline-block;
  margin: 0 0 22px 10px;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: #1e3a8a;
  background: linear-gradient(90deg, #dbeafe, #e0e7ff);
  border: 1px solid #bfdbfe;
  vertical-align: top;
}
.q-level:empty { display: none; }
.hint-btn {
  position: fixed; bottom: 26px; right: 26px;
  z-index: 60;
  display: inline-flex; align-items: center; gap: 8px;
  height: 56px;
  padding: 0 22px 0 16px;
  border-radius: 999px;
  border: 0;
  font-size: 24px;
  background: radial-gradient(circle at 35% 30%, #fde047, #f59e0b);
  box-shadow: 0 10px 24px rgba(245, 158, 11, .5);
  cursor: pointer;
  animation: hintPulse 1.5s ease-in-out infinite;
}
.hint-btn:hover { filter: brightness(1.04); }
.hint-btn .hint-ico { line-height: 1; }
.hint-btn .hint-label {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #7c2d12;
}
@keyframes hintPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(245,158,11,.5); transform: scale(1); }
  50% { box-shadow: 0 10px 30px rgba(245,158,11,.85), 0 0 0 7px rgba(253,224,71,.35); transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .hint-btn { animation: none; } }

.hint-pop {
  display: none;
  position: fixed; bottom: 92px; right: 26px;
  z-index: 61;
  max-width: min(340px, calc(100vw - 40px));
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
}
.hint-pop.show { display: block; }

.q-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}
@media (max-width: 900px) {
  .q-body { grid-template-columns: 1fr; }
  #screen-home.active { flex-direction: column; }
  .sidebar { width: 100%; min-height: 0; }
}

.q-visual {
  background: linear-gradient(160deg, #eef2ff 0%, #f5f3ff 55%, #ecfdf5 100%);
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 30px);
}
.q-visual-inner { display: grid; place-items: center; }
.q-caption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 14px; }
.q-caption b { color: var(--ink); }

.q-context {
  display: inline-block;
  background: #eef2ff;
  color: var(--indigo);
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
  padding: 8px 14px;
  margin-bottom: 16px;
}
.q-text { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.35; letter-spacing: -.3px; margin-bottom: 22px; }

.q-interact-box {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: #fbfcfe;
}
.q-tip { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* --- Jenis 1: mock pelayar berskala (stage), ikon jawapan sejajar dengan bar alat --- */
.bstage {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 700;
}
.bstage-window {
  position: absolute; left: 0; right: 0; top: 0; height: 56%;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
}
.bstage-tabbar-bg {
  position: absolute; left: 0; right: 0; top: 0; height: 12%;
  background: #e8ecf3;
  border-radius: 14px 14px 0 0;
  z-index: 1;
}
.bstage-tab {
  position: absolute; left: 3%; top: 6%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 8px 8px 0 0;
  padding: 6px 12px; font-size: 11px; font-weight: 700; color: #475569;
  max-width: 45%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 4;
}
.bstage-tab .dot { width: 8px; height: 8px; border-radius: 99px; background: #4285f4; flex-shrink: 0; }
.bstage-windots {
  position: absolute; right: 3%; top: 6%; transform: translateY(-50%);
  color: #94a3b8; font-size: 11px; letter-spacing: 2px;
  z-index: 4;
}

.bstage-toolbar-bg {
  position: absolute; left: 0; right: 0; top: 12%; height: 16%;
  background: #f1f3f4;
  border-bottom: 1px solid #e0e3e7;
  z-index: 1;
}
.bstage-content {
  position: absolute; left: 0; right: 0; top: 28%; height: 28%;
  background: #fbfcfe;
  padding: 6% 4%;
  z-index: 1;
}
.bstage-content .skel { height: 10px; border-radius: 5px; background: #e2e8f0; margin-bottom: 10px; }
.bstage-content .hantar {
  display: inline-block; margin-top: 4px;
  background: #dc2626; color: #fff; font-weight: 800; font-size: 11px;
  padding: 6px 14px; border-radius: 6px 2px 6px 2px;
}

.tb-item {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  z-index: 4;
}
.tb-item.sm .tb-btn, .tb-item.sm .tb-deco { width: 22px; height: 22px; font-size: 12px; }
.tb-btn {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: #5f6368;
  background: rgba(60,64,67,.08);
}
.tb-btn svg { width: 58%; height: 58%; }
.tb-deco { font-size: 15px; line-height: 1; color: #5f6368; }
.tb-field {
  position: absolute;
  transform: translateY(-50%);
  height: 36px;
  background: #fff; border: 1px solid #dadce0; border-radius: 999px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px;
  font-size: 11px; color: #5f6368;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  z-index: 4;
}

.bstage-dropdown {
  position: absolute;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15,23,42,.16);
  z-index: 3;
}
.dd-divider-line { position: absolute; height: 1px; background: var(--line); z-index: 4; }

.bstage-links {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
}

.bstage-answer {
  position: absolute;
  top: 74%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 14%;
  z-index: 5;
}
.bstage-circle {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 4px solid #a855f7;
  background: #fff;
  color: #475569;
  display: grid; place-items: center;
  box-shadow: 0 10px 22px rgba(15,23,42,.14);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.bstage-circle svg { width: 52%; height: 52%; }
.bstage-circle:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 28px rgba(15,23,42,.22); }
.bstage-circle.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 7px rgba(37, 99, 235, .18), 0 12px 24px rgba(15,23,42,.18);
}
.bstage-circle.correct { border-color: var(--green); box-shadow: 0 0 0 7px rgba(22,163,74,.18); }
.bstage-circle.wrong { border-color: var(--red); box-shadow: 0 0 0 7px rgba(220,38,38,.15); }
.answer-line { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; }
.answer-slot {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  color: #94a3b8;
  font-weight: 800;
  background: #fff;
  padding: 8px;
}
.answer-slot svg { width: 60%; height: 60%; }
.answer-slot.filled { border-style: solid; border-color: var(--blue); background: #eff6ff; }

/* --- Jenis 2: seret & lepas Betul/Salah (susunan: Betul | gambar | Salah) --- */
.q-body.single { grid-template-columns: 1fr; }
.q-body.single .q-visual { display: none; }

.bs-wrap { max-width: 1050px; margin: 0 auto; }
.bs-instruct {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 15.5px;
  margin-top: 4px;
  margin-bottom: 8px;
}
.bs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  margin-bottom: 26px;
}
@media (max-width: 700px) {
  .bs-row { grid-template-columns: 1fr; }
}

.drop-zone {
  min-height: clamp(200px, 26vw, 300px);
  border-radius: 18px;
  background: #8b80e0;
  display: grid; place-items: center;
  padding: 10px;
  transition: background .12s, box-shadow .12s, transform .12s;
}
.drop-zone.over { background: #7a6dd6; box-shadow: 0 0 0 5px rgba(124, 58, 237, .25); transform: scale(1.02); }
.drop-zone.filled { background: #ede9fe; }
.drop-zone.correct { background: #dcfce7; box-shadow: 0 0 0 5px rgba(22,163,74,.3); }
.drop-zone.wrong { background: #fee2e2; box-shadow: 0 0 0 5px rgba(220,38,38,.3); }
.drop-zone-label {
  text-align: center;
  font-weight: 800;
  font-size: 20px;
  margin-top: 12px;
}
.drop-zone-label.betul { color: var(--green); }
.drop-zone-label.salah { color: var(--red); }

.drag-home {
  min-height: clamp(200px, 26vw, 300px);
  display: grid; place-items: center;
  border-radius: 18px;
}
.drag-home:empty { border: 3px dashed #c4b5fd; }

.drag-chip {
  width: 100%;
  cursor: grab;
  border-radius: 16px;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 10px 22px rgba(2,8,20,.5));
  touch-action: none;
  user-select: none;
}
.drag-chip:active { cursor: grabbing; }
.drag-chip svg { width: 100%; height: auto; display: block; pointer-events: none; }
.drag-chip.dragging { opacity: .92; position: fixed; z-index: 50; pointer-events: none; transform: scale(1.04); }
.drop-zone .drag-chip { background: transparent; }
/* Kepingan seret guna gambar (illustImg) */
.drag-chip.has-img { background: transparent; padding: 0; box-shadow: none; }
.drag-chip .drag-illust { width: 100%; height: auto; display: block; border-radius: 12px; pointer-events: none; }
.drop-zone .drag-chip.has-img { background: transparent; }

.statement-banner {
  background: #fff;
  border: 2px solid #fca5a5;
  border-left: 12px solid #ef4444;
  border-right: 12px solid #ef4444;
  border-radius: 6px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 19px);
  text-align: center;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  margin-bottom: 24px;
}

/* --- Jenis 3: pilih butang (fon / ikon) --- */
.q-key { color: #ea580c; }
.choice-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(18px, 3.5vw, 44px);
  flex-wrap: wrap;
  padding: 30px 0 22px;
}
.choice-btn {
  min-width: clamp(150px, 18vw, 220px);
  min-height: 96px;
  display: grid; place-items: center;
  padding: 20px 30px;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: #fff;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.choice-btn svg { width: clamp(48px, 5vw, 64px); height: clamp(48px, 5vw, 64px); }
.choice-btn:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15,23,42,.14); }
.choice-btn.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 6px rgba(37, 99, 235, .18), 0 12px 26px rgba(15,23,42,.14);
}
.choice-btn.correct { border-color: var(--green); background: #f0fdf4; box-shadow: 0 0 0 6px rgba(22,163,74,.18); }
.choice-btn.wrong { border-color: var(--red); background: #fef2f2; box-shadow: 0 0 0 6px rgba(220,38,38,.15); }

/* --- Jenis: klik jawapan terus pada gambar --- */
.hotspot-wrap {
  width: min(100%, 1120px);
  margin: 0 auto;
}
.hotspot-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .35);
  background: #020617;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .2);
}
.hotspot-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.hotspot-btn {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(15, 23, 42, .12);
  color: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .12s;
}
.hotspot-btn span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .82);
  color: #fff;
  font-size: clamp(9px, 1vw, 12px);
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
.hotspot-btn:hover,
.hotspot-btn.selected {
  z-index: 2;
  transform: translate(-50%, -50%) scale(1.04);
  border-color: #38bdf8;
  background: rgba(56, 189, 248, .16);
  box-shadow: 0 0 0 5px rgba(56, 189, 248, .22), 0 0 24px rgba(56, 189, 248, .42);
}
.hotspot-btn:hover span,
.hotspot-btn.selected span,
.hotspot-btn.correct span,
.hotspot-btn.wrong span { opacity: 1; }
.hotspot-btn.correct {
  z-index: 3;
  border-color: #22c55e;
  background: rgba(34, 197, 94, .2);
  box-shadow: 0 0 0 6px rgba(34, 197, 94, .28), 0 0 28px rgba(34, 197, 94, .45);
}
.hotspot-btn.wrong {
  z-index: 3;
  border-color: #ef4444;
  background: rgba(239, 68, 68, .2);
  box-shadow: 0 0 0 6px rgba(239, 68, 68, .25), 0 0 24px rgba(239, 68, 68, .4);
}
/* Varian panel: bingkai segi empat + nombor sentiasa kelihatan (cth Misi 23) */
.hotspot-panels .hotspot-btn { border-radius: 14px; border-color: rgba(56,189,248,.4); }
.hotspot-panels .hotspot-btn span {
  opacity: 1;
  top: 10px;
  bottom: auto;
  padding: 3px 12px;
  font-size: clamp(13px, 1.4vw, 17px);
  background: rgba(8, 20, 40, .9);
  border: 1.5px solid rgba(56,189,248,.7);
  box-shadow: 0 2px 8px rgba(2,8,20,.5);
}
.hotspot-panels .hotspot-btn.selected span { border-color: #38bdf8; background: rgba(56,189,248,.28); }
.hotspot-panels .hotspot-btn.correct span { border-color: #22c55e; background: rgba(34,197,94,.32); }
.hotspot-panels .hotspot-btn.wrong span { border-color: #ef4444; background: rgba(239,68,68,.32); }

/* --- Slide 34-37: mesej profil media sosial --- */
.social-visual {
  position: relative;
  width: min(100%, 720px);
  min-height: 290px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
}
.social-screen {
  width: min(78%, 520px);
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  border: 10px solid #334155;
  background: #eef2ff;
  box-shadow: 0 14px 30px rgba(15,23,42,.18);
  overflow: hidden;
}
.social-top {
  height: 16%;
  background: #3159b7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}
.social-top span {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #f97316;
  opacity: .8;
}
.social-top span:nth-child(2) { background: #94a3b8; }
.social-top span:nth-child(3) { background: #cbd5e1; }
.social-search {
  margin-left: auto;
  width: 30%;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
}
.social-body {
  height: 84%;
  display: grid;
  grid-template-columns: 28% 1fr;
  gap: 12px;
  padding: 14px;
}
.social-side,
.social-feed { display: grid; gap: 10px; align-content: start; }
.social-side span,
.social-mini,
.social-card {
  border-radius: 8px;
  background: #cbd5e1;
}
.social-side span { height: 16px; }
.social-mini { height: 34px; background: #e2e8f0; }
.social-card {
  min-height: 84px;
  padding: 12px;
  display: flex;
  gap: 12px;
}
.social-card.pale { min-height: 58px; opacity: .65; }
.social-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #64748b;
  flex: 0 0 auto;
}
.social-lines {
  flex: 1;
  display: grid;
  gap: 9px;
  align-content: start;
}
.social-lines span {
  height: 12px;
  border-radius: 999px;
  background: #94a3b8;
}
.social-lines span:last-child { width: 70%; }
.social-bubble {
  position: absolute;
  right: 5%;
  top: 21%;
  width: min(58%, 430px);
  min-height: 120px;
  display: flex;
  align-items: flex-start;
  padding: 22px 26px;
  border-radius: 6px 6px 6px 0;
  background: #fff;
  border: 2px solid #fca5a5;
  color: #312e81;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.45;
  font-weight: 650;
  box-shadow: 0 18px 36px rgba(15,23,42,.16);
}
.social-bubble::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 24px;
  border-width: 11px;
  border-style: solid;
  border-color: transparent #fca5a5 transparent transparent;
}

/* --- Slide 38-41: port komputer meja --- */
.port-visual {
  position: relative;
  width: min(100%, 760px);
  min-height: 315px;
  margin: 0 auto 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.port-board {
  position: relative;
  z-index: 2;
  width: min(94%, 650px);
  min-height: 255px;
  display: grid;
  grid-template-columns: repeat(7, minmax(66px, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 22px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #f8fafc, #e2e8f0);
  border: 8px solid #475569;
  box-shadow: 0 18px 34px rgba(15,23,42,.18);
  transform: perspective(700px) rotateX(3deg);
}
.port-item {
  position: relative;
  display: grid;
  grid-template-rows: auto 28px 1fr;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 2px;
}
.port-label {
  color: #475569;
  font-weight: 900;
  font-size: clamp(10px, 1.1vw, 13px);
  line-height: 1.05;
  text-align: center;
}
.port-arrow {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  border: 3px solid #fee2e2;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(220,38,38,.28);
}
.port-item.active .port-arrow {
  background: #a3e635;
  border-color: #ecfccb;
  color: #365314;
  box-shadow: 0 0 16px rgba(163,230,53,.95);
}
.port-face {
  width: 100%;
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 6px;
}
.port-shape {
  display: block;
  background: #0f172a;
  border: 3px solid #94a3b8;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}
.port-shape.vga {
  width: 58px;
  height: 34px;
  border-radius: 9px 9px 15px 15px;
  background: #2563eb;
}
.port-shape.firewire {
  width: 45px;
  height: 35px;
  border-radius: 10px;
  background: #1d4ed8;
}
.port-shape.usb {
  width: 36px;
  height: 18px;
  border-radius: 4px;
}
.port-shape.slot {
  width: 62px;
  height: 16px;
  border-radius: 999px;
}
.port-shape.audio {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #7c3aed;
}
.port-item:nth-child(6) .port-shape.audio { background: #84cc16; }
.port-item:nth-child(7) .port-shape.audio { background: #22c55e; }
.port-cable {
  position: absolute;
  z-index: 1;
  border-radius: 999px;
  transform-origin: left center;
}
.cable-vga {
  left: -2%;
  top: 58%;
  width: 38%;
  height: 18px;
  background: #1f2937;
  transform: rotate(-18deg);
}
.cable-ieee {
  left: 10%;
  bottom: 12%;
  width: 32%;
  height: 14px;
  background: #2563eb;
  transform: rotate(-32deg);
}
@media (max-width: 760px) {
  .port-visual { min-height: 270px; }
  .port-board {
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    width: min(100%, 350px);
    min-height: 0;
    padding: 14px 10px;
    gap: 6px;
    border-width: 6px;
  }
  .port-face { min-height: 56px; }
  .port-shape.vga { width: 45px; height: 26px; }
  .port-shape.slot { width: 46px; }
  .port-cable { display: none; }
}

/* --- Jenis 4: Cut / Copy / Paste teks --- */
.cp-wrap { max-width: 760px; margin: 8px auto 0; }
.cp-tools {
  display: flex; justify-content: center; gap: clamp(10px, 2vw, 18px);
  margin-bottom: 20px;
}
.cp-tool {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  background: linear-gradient(90deg, #a21caf, #7c3aed);
  box-shadow: 0 8px 18px rgba(124, 58, 237, .3);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.cp-tool svg { width: 18px; height: 18px; fill: #fff; }
.cp-tool:hover { transform: translateY(-2px); }
.cp-tool.active { filter: brightness(1.15); box-shadow: 0 0 0 4px rgba(124,58,237,.28), 0 8px 18px rgba(124,58,237,.3); }

.cp-passage {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}
.cp-sel {
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  border-bottom: 2px dotted #a855f7;
  transition: background .12s;
}
.cp-sel:hover { background: #f3e8ff; }
.cp-sel.active { background: #bfdbfe; border-bottom-color: transparent; }
.cp-sel.cp-cut { color: #cbd5e1; text-decoration: line-through; border-bottom-color: transparent; cursor: default; }

.cp-status {
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  margin: 16px 0 10px;
}
.cp-target {
  min-height: 60px;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #fbfcfe;
  display: grid; place-items: center;
  padding: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.cp-target.filled { border-style: solid; border-color: var(--blue); background: #eff6ff; }
.cp-target.correct { border-color: var(--green); background: #f0fdf4; box-shadow: 0 0 0 5px rgba(22,163,74,.18); }
.cp-target.wrong { border-color: var(--red); background: #fef2f2; box-shadow: 0 0 0 5px rgba(220,38,38,.15); }
.cp-placeholder { color: #94a3b8; font-weight: 600; }
.cp-chip { font-weight: 800; color: var(--blue); font-size: 17px; }

/* Maklum balas */
.feedback {
  display: none;
  margin-top: 18px;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
}
.feedback.show { display: block; }
.feedback.ok { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.feedback.bad { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.feedback.warn { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.feedback small { display: block; font-weight: 600; margin-top: 4px; color: inherit; opacity: .85; }

/* Footer kad */
.q-footer {
  display: flex; justify-content: flex-end; align-items: center;
  margin-top: 26px;
  gap: 14px;
  flex-wrap: wrap;
}
.q-tools { display: flex; gap: 10px; }
.tool-btn {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 16px;
}
.tool-btn:hover { background: #f8fafc; }
.q-actions { display: flex; gap: 12px; }

/* ====== Skrin 3 : Keputusan ====== */
#screen-result.active {
  display: grid;
  place-items: center;
  padding: 28px clamp(14px, 4vw, 42px);
}
.result-card {
  width: min(100%, 1180px);
  background: #fff;
  border-radius: 26px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 16px 50px rgba(15,23,42,.1);
}
.result-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 34px);
  text-align: left;
  margin-bottom: 28px;
}
.result-ring {
  position: relative;
  width: 140px; height: 140px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid; place-items: center;
  background: conic-gradient(var(--blue) 0deg, #e5e7eb 0deg);
}
.result-ring::before {
  content: "";
  position: absolute;
  width: 108px; height: 108px;
  border-radius: inherit;
  background: #fff;
}
.result-ring span { position: relative; font-size: 28px; font-weight: 800; }
.result-kicker {
  color: var(--purple);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.result-card h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 6px; }
.result-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.result-stat {
  min-height: 104px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid var(--line);
}
.result-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.result-stat b {
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}
.result-stat small { color: var(--muted); font-weight: 700; }
.result-panels {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  margin-bottom: 16px;
}
.result-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcfe;
  padding: 18px;
}
.result-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.result-panel h2 {
  font-size: 18px;
  letter-spacing: -.2px;
}
.result-panel-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.level-breakdown { display: grid; gap: 10px; }
.level-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 12px;
  align-items: center;
}
.level-name {
  min-width: 0;
  font-weight: 800;
  font-size: 14px;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.level-score { color: var(--muted); font-size: 13px; font-weight: 800; text-align: right; }
.level-track {
  grid-column: 1 / -1;
  height: 9px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}
.level-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, #38bdf8);
}
.badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
  font-size: 13px;
  font-weight: 800;
}
.badge-chip span {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-panel { background: #fff; }
.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.review-item {
  text-align: left;
  border: 1px solid #fecaca;
  border-radius: 14px;
  background: #fef2f2;
  padding: 12px 14px;
  color: #7f1d1d;
}
.review-item b {
  display: block;
  margin-bottom: 3px;
  color: #991b1b;
  font-size: 14px;
}
.review-item span {
  display: block;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}
.review-empty {
  padding: 18px;
  border-radius: 14px;
  background: #f0fdf4;
  color: #166534;
  font-weight: 800;
  text-align: center;
}
.result-actions { display: flex; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.result-actions .btn-primary { width: auto; padding: 13px 26px; }
@media (max-width: 820px) {
  .result-hero { text-align: center; flex-direction: column; }
  .result-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-panels { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .result-stats { grid-template-columns: 1fr; }
  .result-actions > button { width: 100%; }
}

/* --- Slide 17: visual penimbang planet + pilihan teks --- */
.choice-visual { display: grid; place-items: center; margin: 4px auto 2px; width: 100%; }
.msg-img {
  width: 100%;
  max-width: 520px;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(56,189,248,.28);
  box-shadow: 0 10px 26px rgba(2,8,20,.45);
}
/* kad mesej dibina sbg SVG — padan saiz & gaya dgn .msg-img */
.msg-svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(56,189,248,.28);
  box-shadow: 0 10px 26px rgba(2,8,20,.45);
}
.timbang-svg { width: 100%; max-width: 780px; height: auto; }
.opt-teks { display: block; font-size: clamp(15px, 1.7vw, 19px); font-weight: 700; line-height: 1.35; }

/* --- Pilihan dlm grid (cth. 2x2) + pilihan berlabel A/B/C/D --- */
.choice-row.choice-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
  gap: clamp(14px, 2.6vw, 26px);
}
@media (max-width: 560px) { .choice-row.choice-cols-2 { grid-template-columns: 1fr; } }

.opt-lab { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.opt-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 9px;
  border-radius: 999px;
  background: rgba(56,189,248,.16);
  border: 1px solid var(--line, rgba(56,189,248,.28));
  color: var(--accent, #22d3ee);
  font-size: 15px; font-weight: 900; letter-spacing: .5px;
}
.opt-rak {
  display: block;
  font-size: clamp(22px, 3.6vw, 36px);
  letter-spacing: .1em;
  line-height: 1.45;
  word-spacing: .05em;
  white-space: nowrap; /* item rak MESTI kekal satu baris — konsep "bersebelahan" */
}

/* --- Senarai peraturan berasingan dlm kotak konteks --- */
.rule-list { display: grid; gap: 9px; margin-top: 11px; text-align: left; }
.rule-item { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.rule-no {
  flex: 0 0 22px; height: 22px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent, #22d3ee); color: #04121f;
  font-size: 12px; font-weight: 900;
}

/* --- Jenis 5: pilih banyak (susun kata laluan) --- */
.pw-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 2vw, 20px);
  padding: 30px 0 22px;
}
.pw-chip {
  min-width: 150px;
  padding: 16px 26px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: .5px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15,23,42,.07);
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.pw-chip:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15,23,42,.13); }
.pw-chip.selected { border-color: var(--blue); background: #eff6ff; box-shadow: 0 0 0 5px rgba(37,99,235,.18); }
.pw-chip.correct { border-color: var(--green); background: #f0fdf4; box-shadow: 0 0 0 5px rgba(22,163,74,.18); }
.pw-chip.wrong { border-color: var(--red); background: #fef2f2; box-shadow: 0 0 0 5px rgba(220,38,38,.15); }

/* --- Jenis 5c: seret spesifikasi ke slot CPU/RAM/HDD (spec-slots) --- */
.spec-wrap { display: flex; flex-direction: column; gap: clamp(18px, 3vw, 30px); padding: 10px 0 6px; }
.spec-pool {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start;
  gap: clamp(10px, 1.6vw, 16px);
  min-height: 70px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: rgba(19,32,67,.35);
}
.spec-chip {
  min-width: 118px;
  text-align: center;
  padding: 13px 20px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--panel2, #132043);
  color: #e6edf7;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 800;
  letter-spacing: .4px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 8px 20px rgba(2,8,20,.4);
  transition: transform .12s, box-shadow .12s, border-color .12s, background .12s;
}
.spec-chip:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 26px rgba(2,8,20,.5), 0 0 0 3px rgba(34,211,238,.12); }
.spec-chip.picked { border-color: var(--accent); background: #10233f; box-shadow: 0 0 0 4px rgba(34,211,238,.22); }
.spec-chip.dragging { z-index: 9999; cursor: grabbing; transform: scale(1.05); border-color: var(--accent); box-shadow: 0 18px 40px rgba(2,8,20,.6), 0 0 0 4px rgba(34,211,238,.25); }
.spec-chip.in-slot { min-width: 0; width: 100%; }

.spec-slots-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
}
.spec-slot {
  flex: 1 1 160px; max-width: 220px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 14px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--line);
  background: linear-gradient(160deg, var(--panel, #0e1730), #0b1428);
  box-shadow: 0 10px 26px rgba(2,8,20,.4);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s, background .12s, transform .12s;
}
.spec-slot.over { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(34,211,238,.22), 0 12px 30px rgba(2,8,20,.5); transform: translateY(-2px); }
.spec-slot-icon { width: clamp(34px, 4vw, 44px); height: clamp(34px, 4vw, 44px); color: var(--accent); }
.spec-slot-icon svg { width: 100%; height: 100%; display: block; }
.spec-slot-drop {
  width: 100%; min-height: 54px;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line); border-radius: 12px;
  background: rgba(7,12,24,.4);
}
.spec-slot.over .spec-slot-drop { border-color: var(--accent); }
.spec-slot-label {
  font-size: 12px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
}
.spec-slot.correct { border-color: var(--green); box-shadow: 0 0 0 4px rgba(22,163,74,.25); }
.spec-slot.correct .spec-slot-drop { border-style: solid; border-color: var(--green); }
.spec-slot.wrong { border-color: var(--red); box-shadow: 0 0 0 4px rgba(220,38,38,.22); }
.spec-slot.wrong .spec-slot-drop { border-style: solid; border-color: var(--red); }
@media (max-width: 560px) {
  .spec-slot { flex: 1 1 44%; }
}

/* --- Mod piramid utk spec-slots (hierarki data: bit → bait → ... → fail) --- */
.pyr-layout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(20px, 4vw, 44px);
}
.pyr-stack { flex: 0 1 460px; width: min(100%, 460px); display: flex; flex-direction: column; gap: 4px; }
.pyr-apex { position: relative; height: 56px; }
.pyr-bit {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  padding: 7px 26px; border-radius: 999px;
  background: linear-gradient(180deg, #16294f, #0e1c38);
  border: 1.5px solid var(--accent, #22d3ee);
  box-shadow: 0 8px 20px rgba(2,8,20,.5), 0 0 0 3px rgba(34,211,238,.12);
  font-weight: 900; font-style: italic; font-size: 16px; color: #e8f6ff;
}
.pyr-level.spec-slot {
  position: relative; flex: none; max-width: none; width: 100%;
  height: clamp(56px, 8vw, 68px);
  padding: 0; border: none; border-radius: 0; background: none; box-shadow: none;
  display: block;
}
.pyr-shape {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #38e1d3, #14b8ac);
  transition: background .12s, filter .12s;
  filter: drop-shadow(0 6px 14px rgba(2,8,20,.45));
}
.pyr-num {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: clamp(20px, 3vw, 26px); font-weight: 900; color: #073042;
  pointer-events: none;
}
.pyr-level:has(.spec-chip) .pyr-num { display: none; }
.pyr-level .spec-slot-drop {
  position: absolute; inset: 0; min-height: 0;
  border: none; border-radius: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.pyr-level .spec-chip.in-slot { width: auto; min-width: 120px; text-align: center; }
.pyr-level.spec-slot.over { transform: none; box-shadow: none; border: none; }
.pyr-level.spec-slot.over .pyr-shape {
  background: linear-gradient(180deg, #67f0e4, #1cd3c5);
  filter: drop-shadow(0 0 12px rgba(34,211,238,.75));
}
.pyr-level.spec-slot.correct { border: none; box-shadow: none; }
.pyr-level.spec-slot.correct .pyr-shape {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  filter: drop-shadow(0 0 12px rgba(34,197,94,.55));
}
.pyr-level.spec-slot.correct .spec-slot-drop { border: none; }
.pyr-level.spec-slot.wrong { border: none; box-shadow: none; }
.pyr-level.spec-slot.wrong .pyr-shape {
  background: linear-gradient(180deg, #f87171, #dc2626);
  filter: drop-shadow(0 0 12px rgba(239,68,68,.55));
}
.pyr-level.spec-slot.wrong .spec-slot-drop { border: none; }
.pyr-pool { flex: 0 0 auto; flex-direction: column; align-items: stretch; min-width: 150px; }
.pyr-pool .spec-chip { text-align: center; }
@media (max-width: 700px) {
  .pyr-pool { flex-direction: row; flex-wrap: wrap; justify-content: center; min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pyr-shape { transition: none; }
}

/* --- Jenis: download (muat turun fail sebenar) --- */
.dl-wrap { display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 8px 0; }
.dl-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(14px, 2.5vw, 26px);
  width: min(100%, 640px);
  padding: clamp(16px, 2.5vw, 26px);
  border-radius: 18px;
  border: 1.5px solid var(--line);
  background: linear-gradient(160deg, var(--panel, #0e1730), #0b1428);
  box-shadow: 0 12px 30px rgba(2,8,20,.45);
}
.dl-thumb {
  width: clamp(150px, 24vw, 220px); height: auto;
  border-radius: 12px;
  border: 1.5px solid rgba(56,189,248,.35);
  box-shadow: 0 8px 20px rgba(2,8,20,.5);
}
.dl-meta { display: grid; gap: 4px; min-width: 150px; }
.dl-meta b { font-family: 'Courier New', monospace; font-size: clamp(15px, 1.9vw, 19px); color: #e8f6ff; }
.dl-meta small { font-size: 13px; font-weight: 600; color: var(--muted, #8fa8cc); }
.dl-btn {
  padding: 14px 26px;
  border: none; border-radius: 999px;
  background: linear-gradient(180deg, #22d3ee, #0891b2);
  color: #06202b; font-weight: 900; font-size: clamp(15px, 1.8vw, 17px);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(8,145,178,.4), 0 0 0 3px rgba(34,211,238,.15);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.dl-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(8,145,178,.5), 0 0 0 4px rgba(34,211,238,.25); }
.dl-btn.done {
  background: linear-gradient(180deg, #4ade80, #16a34a);
  color: #052e12; cursor: default; transform: none;
  box-shadow: 0 10px 24px rgba(22,163,74,.35), 0 0 0 3px rgba(34,197,94,.2);
}
@media (prefers-reduced-motion: reduce) {
  .dl-btn, .dl-btn:hover { transition: none; transform: none; }
}

/* --- Jenis: upload-check (muat naik & semak fail — dalam pelayar sahaja) --- */
.up-card {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: min(100%, 560px);
  padding: clamp(16px, 2.5vw, 26px);
  border-radius: 18px;
  border: 1.5px solid var(--line);
  background: linear-gradient(160deg, var(--panel, #0e1730), #0b1428);
  box-shadow: 0 12px 30px rgba(2,8,20,.45);
}
.up-drop {
  width: 100%;
  padding: clamp(20px, 3vw, 32px);
  border: 2.5px dashed rgba(56,189,248,.4);
  border-radius: 14px;
  background: rgba(7,12,24,.4);
  text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.up-drop:hover { border-color: var(--accent); background: rgba(34,211,238,.06); }
.up-ico { font-size: clamp(34px, 5vw, 46px); }
.up-cta { margin-top: 6px; font-size: clamp(14px, 1.7vw, 16px); color: #cbd6ea; }
.up-name {
  margin-top: 8px; font-family: 'Courier New', monospace;
  font-size: clamp(13px, 1.6vw, 15px); font-weight: 700; color: var(--muted, #8fa8cc);
}
.up-name.filled { color: #e8f6ff; }
.up-status { min-height: 1.4em; font-weight: 800; font-size: clamp(13.5px, 1.6vw, 15.5px); text-align: center; }
.up-status.ok { color: #4ade80; }
.up-status.bad { color: #f87171; }
.dl-btn:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }

/* --- Jenis: text-answer (murid menaip jawapan) --- */
.ta-wrap { display: flex; flex-direction: column; gap: 16px; }
.ta-box { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.ta-label { font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent, #22d3ee); }
.ta-input {
  width: min(100%, 420px);
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid var(--line, rgba(56,189,248,.28));
  background: var(--panel2, #132043);
  color: #e6edf7;
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 800;
  text-align: center;
  letter-spacing: .4px;
}
.ta-input::placeholder { color: #64748b; font-weight: 600; font-size: 15px; letter-spacing: 0; }
.ta-input:focus { outline: none; border-color: var(--accent, #22d3ee); box-shadow: 0 0 0 4px rgba(34,211,238,.18); }
.ta-input.correct { border-color: var(--green); background: #0c2a1a; box-shadow: 0 0 0 4px rgba(34,197,94,.22); }
.ta-input.wrong { border-color: var(--red); background: #2a0f14; box-shadow: 0 0 0 4px rgba(239,68,68,.2); }
.ta-input:disabled { opacity: 1; }

/* --- Jenis: box-sort (susun krat kargo 3D) --- */
.bx-wrap { display: flex; flex-direction: column; gap: 14px; }
.bx-steps {
  margin: 0; padding: 14px 18px 14px 34px;
  border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--panel, #0e1730), #0b1428);
  color: #dbeafe; font-size: clamp(13px, 1.6vw, 15.5px); line-height: 1.55;
  list-style: none;
}
.bx-steps li { margin-bottom: 6px; }
.bx-steps li:last-child { margin-bottom: 0; }
.bx-steps b { color: var(--accent); margin-right: 4px; }
.bx-howto { text-align: center; font-size: 13px; color: var(--muted); margin: 0; }

.bx-stage { position: relative; padding: 24px 8px 0; overflow-x: auto; }
.bx-row {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(6px, 1.4vw, 14px);
  min-height: 110px;
  padding-bottom: 6px;
}
.bx-floor {
  height: 14px; border-radius: 4px;
  background: linear-gradient(180deg, #1e2b4d, #0d1730);
  border-top: 2px solid rgba(56,189,248,.3);
  box-shadow: 0 10px 24px rgba(2,8,20,.5);
}

.bx-crate {
  position: relative; flex: 0 0 auto;
  cursor: grab; touch-action: none; user-select: none;
  filter: drop-shadow(0 6px 6px rgba(2,8,20,.55));
  transition: transform .14s ease;
}
.bx-crate:hover { transform: translateY(-4px); }
.bx-crate:active { cursor: grabbing; }
.bx-crate > div { position: absolute; inset: 0; }
.bx-top {
  clip-path: polygon(50% 0, 100% 25%, 50% 50%, 0 25%);
  background: linear-gradient(135deg, #4d7ec4, #35578f);
}
.bx-left {
  clip-path: polygon(0 25%, 50% 50%, 50% 100%, 0 75%);
  background: linear-gradient(180deg, #16233f, #101a30);
}
.bx-right {
  clip-path: polygon(100% 25%, 50% 50%, 50% 100%, 100% 75%);
  background: linear-gradient(180deg, #26406d, #1a2c4d);
}
.bx-num {
  position: absolute; left: 50%; top: 24%;
  transform: translate(-50%, -50%);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(13px, 1.6vw, 17px); font-weight: 900;
  color: #eaf4ff; text-shadow: 0 1px 3px rgba(0,0,0,.7);
  pointer-events: none;
}
.bx-crate.picked { transform: translateY(-10px); filter: drop-shadow(0 0 10px rgba(34,211,238,.9)); }
.bx-crate.picked .bx-top { background: linear-gradient(135deg, #67e8f9, var(--accent, #22d3ee)); }
.bx-crate.bx-over .bx-top { background: linear-gradient(135deg, #fcd34d, #f59e0b); }
.bx-crate.correct .bx-top { background: linear-gradient(135deg, #4ade80, #16a34a); }
.bx-crate.correct { filter: drop-shadow(0 0 10px rgba(34,197,94,.8)); }
.bx-crate.wrong .bx-top { background: linear-gradient(135deg, #fca5a5, #dc2626); }
.bx-crate.wrong { animation: bxShake .4s ease; }
@keyframes bxShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.bx-ghost { position: fixed; z-index: 99999; pointer-events: none; opacity: .9; }
.bx-dim { opacity: .3; }
.bx-bar { display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .bx-crate { transition: none; }
  .bx-crate.wrong { animation: none; }
}

/* --- Jenis: trace-table (jadual jejak pemboleh ubah) --- */
.tt-wrap { display: flex; flex-direction: column; gap: 16px; }
.tt-scroll { overflow-x: auto; }
.tt-table {
  display: grid; gap: 3px;
  min-width: 320px; max-width: 560px; margin: 0 auto;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line);
}
.tt-cell {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 8px 6px;
  background: var(--panel2, #132043);
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(16px, 2vw, 20px); font-weight: 800;
  color: #e6edf7;
}
.tt-head {
  min-height: 44px;
  background: linear-gradient(90deg, #b45309, #c2410c);
  color: #fff7ed;
  font-family: system-ui, sans-serif;
  font-size: clamp(13px, 1.6vw, 16px); font-weight: 900; letter-spacing: .5px;
}
.tt-head.tt-hl { background: linear-gradient(90deg, #475569, #334155); }
.tt-given { background: linear-gradient(160deg, #ea7317, #d4620f); color: #fff; }
.tt-given.tt-hl { background: linear-gradient(160deg, #f59e0b, #ea7317); }
.tt-blank { background: #0b1428; padding: 6px; }
.tt-input {
  width: 100%; min-width: 0; height: 40px;
  text-align: center;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: clamp(16px, 2vw, 20px); font-weight: 800;
}

/* --- Jenis: binary-search (permainan teka carian binari) --- */
.bs-game { display: flex; flex-direction: column; gap: 16px; max-width: 620px; margin: 0 auto; padding: 8px 0; }
.bsg-panel {
  padding: 18px 18px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--panel, #0e1730), #0b1428);
  box-shadow: 0 10px 26px rgba(2,8,20,.4);
}
.bsg-line { display: flex; align-items: center; gap: 10px; }
.bsg-end { font-family: "Courier New", ui-monospace, monospace; font-size: 13px; font-weight: 800; color: var(--muted); }
.bsg-bar {
  flex: 1; position: relative; height: 16px; border-radius: 999px;
  background: repeating-linear-gradient(90deg, rgba(56,189,248,.10) 0 8px, transparent 8px 16px), rgba(7,12,24,.7);
  border: 1px solid var(--line); overflow: hidden;
}
.bsg-active {
  position: absolute; top: 0; bottom: 0;
  background: linear-gradient(90deg, #38bdf8, var(--accent, #22d3ee));
  box-shadow: 0 0 14px rgba(34,211,238,.6);
  transition: left .35s ease, width .35s ease;
}
.bsg-stat { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--muted); font-weight: 700; }
.bsg-stat b { color: var(--accent); font-family: "Courier New", ui-monospace, monospace; font-size: 15px; }

.bsg-input { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bsg-num {
  flex: 1 1 200px; max-width: 280px;
  padding: 12px 16px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--panel2, #132043); color: #e6edf7;
  font-family: "Courier New", ui-monospace, monospace; font-size: 19px; font-weight: 800; text-align: center;
}
.bsg-num:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(34,211,238,.18); }
.bsg-btn {
  padding: 12px 26px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #04121f;
  font-size: 16px; font-weight: 900; letter-spacing: .5px;
  box-shadow: 0 8px 20px rgba(14,165,233,.35);
}
.bsg-btn:hover:not(:disabled) { transform: translateY(-2px); }
.bsg-btn:disabled { opacity: .45; cursor: default; }
.bsg-note { text-align: center; font-size: 13px; font-weight: 700; color: #fbbf24; min-height: 0; opacity: 0; transition: opacity .2s; }
.bsg-note.show { opacity: 1; }

.bsg-history { display: flex; flex-direction: column; gap: 7px; max-height: 210px; overflow-y: auto; }
.bsg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(19,32,67,.5);
  font-size: 13.5px; color: #dbeafe;
}
.bsg-row b { font-family: "Courier New", ui-monospace, monospace; font-size: 17px; font-weight: 900; min-width: 54px; text-align: center; color: #fff; }
.bsg-row.high { border-color: rgba(248,113,113,.4); }
.bsg-row.low  { border-color: rgba(96,165,250,.4); }
.bsg-row.hit  { border-color: var(--green); background: rgba(22,163,74,.18); }
@media (prefers-reduced-motion: reduce) { .bsg-active { transition: none; } }

/* --- Jenis: block-coding (editor blok + dunia 3D isometric) --- */
.bc-wrap { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.4vw, 26px); align-items: flex-start; padding: 6px 0; }
.bc-world-col { flex: 1 1 320px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.iso-stage {
  width: 100%; min-height: 220px;
  display: flex; justify-content: center; align-items: center;
  overflow: visible;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(56,189,248,.10), transparent 60%),
    radial-gradient(rgba(56,189,248,.14) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(160deg, #0a1530, #070c18);
  background-color: #070c18;
  padding: 26px 10px 14px;
}
.iso-scene { position: relative; }

/* Kubus isometric (top + 2 sisi guna clip-path — tepat & tak perlu 3D transform) */
.iso-cube { position: absolute; width: 64px; height: 56px; filter: drop-shadow(0 6px 6px rgba(2,8,20,.5)); }
.iso-cube .cube-top,
.iso-cube .cube-left,
.iso-cube .cube-right { position: absolute; left: 0; top: 0; width: 64px; }
.iso-cube .cube-top   { height: 32px; clip-path: polygon(32px 0, 64px 16px, 32px 32px, 0 16px); background: linear-gradient(135deg, #3a5891, #2b426e); }
.iso-cube .cube-left  { height: 56px; clip-path: polygon(0 16px, 32px 32px, 32px 56px, 0 40px); background: #131f3b; }
.iso-cube .cube-right { height: 56px; clip-path: polygon(64px 16px, 32px 32px, 32px 56px, 64px 40px); background: #20355d; }
.iso-cube.start .cube-top { background: linear-gradient(135deg, #38bdf8, #2b6fae); }
/* kubus bawah dalam timbunan (gunung) — sedikit lebih gelap */
.iso-cube.stacked { filter: none; }
.iso-cube.stacked .cube-top { background: linear-gradient(135deg, #33507f, #263c63); }
.iso-cube.stacked .cube-left { background: #101a33; }
.iso-cube.stacked .cube-right { background: #1c2f52; }
.iso-cube.target .cube-top   { background: linear-gradient(135deg, #34d399, #16a34a); animation: isoGlow 1.4s ease-in-out infinite; }
.iso-cube.target .cube-left  { background: #0c5a2d; }
.iso-cube.target .cube-right { background: #128040; }
@keyframes isoGlow { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.iso-cube.target .cube-beam {
  position: absolute; left: 26px; top: -96px; width: 12px; height: 112px;
  background: linear-gradient(to top, rgba(52,211,153,.55), transparent);
  filter: blur(1px); pointer-events: none;
  animation: isoGlow 1.4s ease-in-out infinite;
}

/* Halangan di atas blok (kristal/batu) */
.iso-obstacle {
  position: absolute; left: 32px; top: 6px;
  transform: translate(-50%, -50%);
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 3px 3px rgba(2,8,20,.6));
  pointer-events: none;
}

/* Angkasawan */
.iso-actor { position: absolute; transform: translate(-50%, -100%) translateY(-6px); transition: left .4s ease, top .4s ease; will-change: left, top; }
.iso-actor.no-anim { transition: none; }
.iso-actor .iso-astro { display: block; width: 36px; filter: drop-shadow(0 4px 3px rgba(2,8,20,.6)); }
.iso-actor .iso-astro svg { display: block; width: 100%; height: auto; }
/* Anak panah ARAH di atas kepala — sentiasa tunjuk pandangan hadapan angkasawan */
.iso-actor .iso-face {
  position: absolute; left: 50%; top: -15px;
  width: 24px; height: 24px;
  filter: drop-shadow(0 0 6px rgba(34,211,238,.85));
  transition: transform .3s ease;
}
.iso-actor .iso-face svg { display: block; width: 100%; height: 100%; }
.iso-actor.fall { transform: translate(-50%, -100%) translateY(46px) scale(.55) rotate(18deg); opacity: .15; transition: all .5s ease; }

/* Bendera pilihan dlm dunia iso */
.iso-flag { position: absolute; transform: translate(-50%, -100%) translateY(-2px); width: 42px; pointer-events: none; }
.iso-flag svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(2,8,20,.55)); }

/* Jenis pseudo-flags: panel pseudokod + butang bendera */
.pf-panel {
  flex: 1 1 320px; min-width: 270px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel2, #132043);
  box-shadow: 0 10px 26px rgba(2,8,20,.45);
}
.pf-code-head { font-size: 13px; font-weight: 900; letter-spacing: 1px; color: var(--accent); }
.pf-code {
  margin: 0; padding: 12px 14px 12px 40px;
  border-radius: 10px;
  background: #fdfdfd; color: #16233c;
  font-family: 'Courier New', monospace; font-size: clamp(13px, 1.5vw, 15px); font-weight: 700;
  line-height: 1.65;
  border: 1px solid #cbd5e1;
}
.pf-code li::marker { color: #94a3b8; font-size: 12px; }
.pf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-btn {
  padding: 12px 10px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: rgba(7,12,24,.5);
  color: #e8f6ff; font-weight: 800; font-size: clamp(13px, 1.5vw, 15px);
  cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
}
.pf-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.pf-btn.selected { border-color: var(--accent); background: #10233f; box-shadow: 0 0 0 4px rgba(34,211,238,.2); }
.pf-btn.correct { border-color: #22c55e; background: #0c2a1a; box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.pf-btn.wrong { border-color: #ef4444; background: #2a0f14; box-shadow: 0 0 0 4px rgba(239,68,68,.22); }
@media (prefers-reduced-motion: reduce) {
  .pf-btn, .pf-btn:hover { transition: none; transform: none; }
}

/* Kaunter perlaksanaan */
.bc-exec { font-size: 13px; font-weight: 800; letter-spacing: .5px; color: var(--muted); background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; }
.bc-exec b { color: var(--accent); font-size: 16px; margin-left: 6px; }

/* Editor — gaya blok puzzle (Blockly-like) */
.bc-editor {
  flex: 1 1 340px; min-width: 280px;
  display: grid; grid-template-columns: auto 1fr;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(2,8,20,.45);
}
.bc-palette { background: #f7e3c3; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 18px; }
.bc-program-wrap { background: #fdfdff; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.bc-pal-title { font-size: 10px; font-weight: 900; letter-spacing: 1.6px; text-transform: uppercase; color: #a1714a; }

/* Blok asas: bentuk puzzle dgn tab bawah + notch atas */
.bc-block {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 9px 14px;
  border-radius: 7px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: 15px;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25);
  user-select: none; touch-action: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 3px rgba(0,0,0,.22);
}
/* tab keluar di bawah (penyambung) */
.bc-block::after {
  content: ''; position: absolute; left: 16px; bottom: -7px;
  width: 22px; height: 9px; background: inherit;
  border-radius: 0 0 11px 11px;
}
/* notch masuk di atas */
.bc-block::before {
  content: ''; position: absolute; left: 16px; top: 0;
  width: 22px; height: 8px; background: #fdfdff;
  border-radius: 0 0 11px 11px;
}
.bc-palette .bc-block::before { background: #f7e3c3; }

.bc-block.k-move   { background: #a2536b; }
.bc-block.k-jump   { background: #4a58a8; }
.bc-block.k-turn   { background: #9a9c5c; }
.bc-block.k-repeat { background: #4e93a8; }
.bc-block.k-when   { background: #a2536b; }
.bc-pal { cursor: grab; }
.bc-grip { cursor: grab; opacity: .55; font-size: 12px; font-style: normal; }

/* Blok-C (Repeat & When execute): lubang TERBUKA ke kanan, kembang bila blok masuk */
.bc-cblock { display: inline-flex; flex-direction: column; align-items: stretch; padding: 0; align-self: flex-start; }
.bc-cblock .bc-c-head { display: flex; align-items: center; gap: 7px; padding: 9px 14px 6px; }
.bc-cblock .bc-c-foot { height: 15px; }
.bc-cblock .bc-dropzone {
  min-width: 190px; min-height: 44px;
  display: flex; flex-direction: column; gap: 0;   /* rapat — blok snap antara satu sama lain */
  padding: 8px;
  background: #fdfdff;
  border-radius: 6px 0 0 6px;
  box-shadow: inset 3px 0 0 rgba(0,0,0,.14);
}
/* Blok bertindan rapat: hanya blok PERTAMA ada notch atas, hanya blok TERAKHIR ada tab bawah */
.bc-dropzone > .bc-block:not(:first-child)::before { display: none; }
.bc-dropzone > .bc-block:not(:last-child)::after { display: none; }
/* garis halus sebagai sendi + sudut segi empat pada sambungan (nampak satu susunan) */
.bc-dropzone > .bc-block:not(:last-child) { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18); }
.bc-dropzone > .bc-block:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0; }
.bc-dropzone > .bc-block:not(:last-child)  { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bc-palette .bc-cblock .bc-dropzone { background: #f7e3c3; }
.bc-cblock .bc-dropzone > .bc-block { align-self: flex-start; }

/* baris "Do" + lubang di sebelah kanannya (bentuk C) */
.bc-c-row { display: flex; align-items: stretch; gap: 9px; padding-left: 16px; }
.bc-do-label { padding-top: 11px; }
.bc-c-row .bc-dropzone { flex: 1; }

/* Repeat: lubang berlekuk di bawah tajuk, juga terbuka ke kanan */
.k-repeat > .bc-dropzone { margin-left: 18px; }

.bc-empty, .bc-empty-inner { color: #9aa3b5; font-size: 12.5px; font-style: italic; text-align: center; padding: 8px 4px; }

/* nombor dlm blok palet (paparan sahaja) + lubang blok-C palet */
.bc-num {
  background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.42);
  border-radius: 4px; padding: 1px 6px; font-size: 13px; font-style: normal; font-weight: 800;
}
.bc-c-hole { margin-left: 18px; width: 92px; height: 34px; background: #f7e3c3; border-radius: 6px 0 0 6px; box-shadow: inset 3px 0 0 rgba(0,0,0,.14); }

/* "When execute" ialah bekas tetap — tiada tab/notch, tak boleh diseret */
.bc-when-block { cursor: default; max-width: 100%; }
.bc-when-block::before, .bc-when-block::after { display: none; }
.bc-when-block .bc-c-head { font-size: 16px; padding-bottom: 2px; }

.bc-sel {
  background: rgba(255,255,255,.22); color: #fff;
  border: 1px solid rgba(255,255,255,.4); border-radius: 5px;
  padding: 2px 5px; font-weight: 800; font-size: 14px;
  font-family: Georgia, serif; font-style: italic;
}
.bc-sel option { color: #1f2937; background: #fff; font-style: normal; }
.bc-del {
  margin-left: 4px; background: rgba(0,0,0,.22); color: #fff;
  border: none; border-radius: 5px; width: 20px; height: 20px;
  cursor: pointer; font-size: 14px; line-height: 1; font-style: normal;
}
.bc-del:hover { background: #dc2626; }
.bc-toolbar { display: flex; justify-content: flex-end; margin-top: 2px; }
.bc-ghost { position: fixed; z-index: 99999; pointer-events: none; opacity: .95; transform: rotate(-2deg); box-shadow: 0 16px 34px rgba(2,8,20,.5); }
.bc-ghost::before { display: none; }
.bc-ghost .bc-dropzone, .bc-ghost .bc-c-hole { background: rgba(255,255,255,.5); }
/* seret keluar kawasan program = akan dibuang */
.bc-ghost.bc-ghost-del { opacity: .6; filter: grayscale(.5); outline: 3px dashed #dc2626; outline-offset: 3px; }
.bc-ghost.bc-ghost-del::after { content: '🗑'; position: absolute; right: -10px; top: -12px; font-size: 20px; background: #fff; border-radius: 50%; padding: 2px 4px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* blok dlm program: boleh klik/seret; keadaan dipilih */
#bc-program .bc-block { cursor: grab; }
#bc-program .bc-block:active { cursor: grabbing; }
#bc-program .bc-block.bc-picked { outline: 3px solid #f59e0b; outline-offset: 1px; }
.bc-dim { opacity: .3; }
.bc-insert { height: 4px; margin: 0; background: #f59e0b; border-radius: 3px; box-shadow: 0 0 8px rgba(245,158,11,.85); }

@media (max-width: 620px) { .bc-wrap { flex-direction: column; } .bc-editor { width: 100%; grid-template-columns: auto 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .iso-actor, .iso-actor .iso-face { transition: none; }
  .iso-cube.target .cube-top, .iso-cube.target .cube-beam { animation: none; }
}

/* --- Slide 21–22: kira bintang & isi jadual --- */
.ct-wrap {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: clamp(16px, 3vw, 34px);
  padding: 12px 0 6px;
}
.ct-field { flex: 1 1 320px; max-width: 460px; }
.ct-field svg { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 26px rgba(11,30,59,.25); }
.ct-tables { flex: 1 1 280px; max-width: 360px; display: grid; gap: 16px; }
.ct-table { width: 100%; border-collapse: collapse; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(15,23,42,.08); }
.ct-table th { background: var(--blue); color: #fff; font-size: 14px; padding: 9px 12px; text-align: left; }
.ct-table th:last-child { text-align: center; }
.ct-table td { border: 1px solid var(--line); padding: 6px 12px; font-weight: 700; color: var(--ink); }
.ct-table td:last-child { text-align: center; width: 98px; }
.ct-input {
  width: 70px; padding: 7px; text-align: center;
  font: inherit; font-size: 17px; font-weight: 800;
  border: 2px solid var(--line); border-radius: 8px;
}
.ct-input:focus { border-color: var(--blue); outline: none; }
.ct-input.correct { border-color: var(--green); background: #f0fdf4; color: #15803d; }
.ct-input.wrong { border-color: var(--red); background: #fef2f2; color: #b91c1c; }

/* --- Slide 30-31: jadual pilihan keselamatan digital --- */
.matrix-wrap { max-width: 930px; margin: 0 auto; }
.matrix-panel {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(124, 58, 237, .22);
  background: #5b2b83;
  box-shadow: 0 12px 28px rgba(15,23,42,.12);
}
.matrix-head {
  display: grid;
  grid-template-columns: 1fr minmax(var(--mx-min, 300px), var(--mx-max, 360px));
  gap: 10px;
  padding: 12px 18px 10px;
  background: #22a9b7;
  color: #ecfeff;
  font-weight: 800;
}
.matrix-head-actions {
  display: grid;
  grid-template-columns: repeat(var(--mx-cols, 2), 1fr);
  gap: 8px;
}
.matrix-head-actions span { text-align: center; }
.matrix-row {
  display: grid;
  grid-template-columns: 1fr minmax(var(--mx-min, 300px), var(--mx-max, 360px));
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-top: 4px solid #7c3aed;
  background: #f5edf7;
}
.matrix-row:nth-child(odd) { background: #fff7ff; }
.matrix-text {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #271437;
}
.matrix-text b { font-size: clamp(15px, 1.8vw, 19px); line-height: 1.2; }
.matrix-text small {
  font-size: clamp(12px, 1.45vw, 15px);
  line-height: 1.3;
  color: #5b4668;
  font-weight: 600;
}
.matrix-actions {
  display: grid;
  grid-template-columns: repeat(var(--mx-cols, 2), 1fr);
  gap: 8px;
}
/* 3+ lajur: butang lebih padat supaya label muat */
.matrix-multi .matrix-choice { padding: 8px 6px; gap: 5px; font-size: clamp(12px, 1.3vw, 14px); }
.matrix-multi .matrix-choice .matrix-dot { width: 13px; height: 13px; flex: 0 0 13px; }
.matrix-multi .matrix-head-actions span { font-size: clamp(11px, 1.2vw, 13px); }

/* Mod senarai juntai-bawah (dropdown) */
.matrix-selmode .matrix-head-actions { grid-template-columns: 1fr; }
.matrix-selwrap { grid-template-columns: 1fr; }
.matrix-sel {
  width: 100%;
  padding: 11px 12px;
  border-radius: 9px;
  border: 2px solid rgba(124,58,237,.35);
  background: #fff;
  color: #271437;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 800;
  cursor: pointer;
}
.matrix-sel:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.matrix-sel.filled { border-color: #7c3aed; background: #f5f3ff; }
.matrix-sel.correct { border-color: var(--green); background: #f0fdf4; box-shadow: 0 0 0 4px rgba(22,163,74,.18); }
.matrix-sel.wrong { border-color: var(--red); background: #fef2f2; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }
.matrix-sel:disabled { cursor: default; opacity: 1; }
.matrix-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: transparent;
  color: #37523d;
  font-weight: 800;
  font-size: clamp(13px, 1.5vw, 16px);
  transition: transform .12s, background .12s, box-shadow .12s, border-color .12s;
}
.matrix-choice:hover { transform: translateY(-1px); background: rgba(255,255,255,.42); }
.matrix-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid #e5e7eb;
  background: radial-gradient(circle at 35% 35%, #fca5a5 0 28%, #dc2626 34% 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4);
  flex: 0 0 auto;
}
.matrix-choice.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .16);
}
.matrix-choice.selected .matrix-dot {
  background: radial-gradient(circle at 35% 35%, #ecfccb 0 26%, #a3e635 34% 100%);
  box-shadow: 0 0 12px rgba(163, 230, 53, .9), inset 0 0 0 2px rgba(255,255,255,.5);
}
.matrix-choice.correct {
  border-color: var(--green);
  background: #f0fdf4;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .16);
}
.matrix-choice.wrong {
  border-color: var(--red);
  background: #fef2f2;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, .14);
}
/* Mod dot sahaja (q.dotOnly): kepala jadual sudah menamakan lajur, jadi butang
   hanya bulatan radio bersih — tiada perkataan berulang di atas butang. */
.matrix-dotmode .matrix-choice .mx-lbl { display: none; }
.matrix-dotmode .matrix-choice { min-height: 46px; }
.matrix-dotmode .matrix-dot { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .matrix-head { display: none; }
  .matrix-row { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .matrix-actions { grid-template-columns: 1fr 1fr; }
  /* kepala jadual disorok pada skrin sempit — label perlu kembali dalam butang */
  .matrix-dotmode .matrix-choice .mx-lbl { display: inline; }
  .matrix-dotmode .matrix-dot { width: 22px; height: 22px; }
}

/* --- Slide 24: kad petik sumber imej --- */
.cite-card { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 190px; }
.cite-img { width: 150px; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.cite-cap { font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.cite-cap.muted { color: var(--muted); font-style: italic; font-weight: 500; }

/* --- Pemilih soalan (dropdown) --- */
.jump-select {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; max-width: 190px;
}
.jump-select:hover { border-color: var(--blue); }

/* --- Slide 26–29: pengaturcaraan arah (gerakkan kapal) --- */
.cg-wrap { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; }
.cg-controls { display: flex; gap: 12px; }
.cg-btn {
  width: 62px; height: 62px; border-radius: 14px;
  border: 2px solid var(--line); background: #fff;
  font-size: 26px; font-weight: 800; color: #dc2626; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(15,23,42,.08); transition: transform .12s, border-color .12s;
}
.cg-btn:hover { border-color: var(--blue); transform: translateY(-2px); }
.cg-btn.cg-fwd { color: inherit; }
.cg-btn svg { width: 34px; height: 34px; }
.cg-btn .cg-ship-img { width: 42px; height: 42px; object-fit: contain; }
.cg-grid {
  display: grid; gap: 4px; background: #0b1e3b; padding: 8px;
  border-radius: 12px; width: min(100%, 460px);
  box-shadow: 0 10px 26px rgba(11,30,59,.25);
}
.cg-cell {
  aspect-ratio: 1; display: grid; place-items: center; font-size: 26px;
  background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.35); border-radius: 6px;
}
.cg-rocket { display: grid; place-items: center; width: 96%; height: 96%; transition: transform .18s; }
.cg-rocket svg { width: 100%; height: 100%; }
.cg-rocket .cg-ship-img { width: 100%; height: 100%; object-fit: contain; }
.cg-crash { filter: drop-shadow(0 0 7px #ef4444); }
.cg-grid-live { position: relative; width: min(100%, 680px); }
.cg-grid-live .cg-cell { font-size: 46px; position: relative; }
.cg-grid-live .cg-cell.cg-lit { box-shadow: inset 0 0 0 3px #22c55e; background: rgba(34,197,94,.16); }
.cg-grid-live .cg-cell.cg-lit::after {
  content: '✓'; position: absolute; top: 3px; right: 6px;
  color: #22c55e; font-size: 18px; font-weight: 900;
}
.cg-progress { margin: 0; font-weight: 800; font-size: 15px; text-align: center; color: #0b1e3b; }
.cg-rocket-live {
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  transition: transform .32s ease;
  pointer-events: none; z-index: 5;
}
.cg-rocket-live svg { width: 82%; height: 82%; }
.cg-rocket-live .cg-ship-img { width: 100%; height: 100%; object-fit: contain; }
.cg-gate-img { width: 1.9em; height: 1.9em; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 6px rgba(56,189,248,.55)); }
.cg-charimg { width: 1.85em; height: 1.85em; object-fit: contain; vertical-align: middle; border-radius: 50%; filter: drop-shadow(0 0 6px rgba(56,189,248,.5)); }
.cg-wall { display: grid; place-items: center; width: 100%; height: 100%; }
.cg-fw-wall { width: 86%; height: 86%; }
.cg-bump { animation: cgBump .42s ease; }
@keyframes cgBump {
  0%, 100% { filter: none; }
  30% { filter: drop-shadow(0 0 9px #ef4444); }
  60% { filter: drop-shadow(0 0 11px #ef4444); }
}
.cg-seq { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; min-height: 40px; }
.cg-chip {
  width: 34px; height: 34px; border-radius: 8px;
  background: #eff6ff; border: 1px solid var(--blue);
  display: grid; place-items: center; font-size: 18px; font-weight: 800; color: var(--blue);
}
.cg-empty { color: var(--muted); font-size: 13px; font-style: italic; }
.cg-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cg-count { font-size: 14px; font-weight: 700; color: var(--ink); }
.cg-mini {
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px;
  border-radius: 9px; border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.cg-mini:hover { border-color: var(--red); }

/* --- Slide 32-33: pengaturcaraan arah Tapir --- */
.tg-wrap {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.tg-grid {
  display: grid;
  gap: 4px;
  background: #10243f;
  padding: 8px;
  border-radius: 12px;
  width: min(100%, 520px);
  box-shadow: 0 10px 26px rgba(11,30,59,.25);
}
.tg-cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background-color: #e5e7eb;
  background-image: radial-gradient(#64748b 1.2px, transparent 1.2px);
  background-size: 10px 10px;
  border: 1px solid rgba(15,23,42,.2);
  border-radius: 6px;
  font-size: clamp(19px, 3vw, 28px);
}
.tg-cell.tg-mark::before {
  content: "X";
  position: absolute;
  inset: 9%;
  display: grid;
  place-items: center;
  color: #ef4444;
  font-weight: 900;
  font-size: clamp(22px, 4vw, 34px);
  opacity: .55;
}
.tg-cell.tg-exit::after {
  content: "↥";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 28%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #22c55e;
  color: #fff;
  font-weight: 900;
}
.tg-cell.tg-toolbox::after {
  content: "🧰";
  position: absolute;
  right: 4%;
  bottom: 2%;
  font-size: clamp(18px, 3vw, 25px);
}
.tg-box,
.tg-key,
.tg-tapir {
  position: relative;
  z-index: 2;
}
.tg-box.on-mark { filter: drop-shadow(0 0 7px #22c55e); }
.tg-tapir {
  width: 62%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #94a3b8, #475569);
  border: 3px solid #dbeafe;
  color: #fff;
  font-weight: 900;
  font-size: clamp(16px, 2.5vw, 24px);
  box-shadow: 0 6px 14px rgba(15,23,42,.22);
}
/* ---- Mod LIVE agen ---- */
.tg-grid.tg-live .tg-cell.tg-toolbox::after,
.tg-grid.tg-live .tg-cell.tg-exit::after { content: none; }
.tg-agent {
  width: 84%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: clamp(20px, 3.4vw, 32px);
  background: radial-gradient(circle at 35% 25%, #dbeafe, #93c5fd 60%, #2563eb);
  border: 3px solid #eff6ff;
  box-shadow: 0 6px 16px rgba(37,99,235,.4);
}
.tg-dest {
  width: 84%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: clamp(20px, 3.4vw, 32px);
  border-radius: 14px;
  background: rgba(34,197,94,.16);
  box-shadow: inset 0 0 0 3px #22c55e;
}
.tg-agent-bump { animation: tgAgentBump .4s ease; }
@keyframes tgAgentBump {
  0%, 100% { filter: none; transform: scale(1); }
  40% { filter: drop-shadow(0 0 9px #ef4444); transform: scale(1.12); }
}
.tg-progress {
  margin: 4px 0 2px;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  color: #0b1e3b;
}
.tg-controls {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-areas:
    ". up ."
    "left down right";
  gap: 8px;
}
.tg-btn {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 2px solid #22d3ee;
  background: #071526;
  color: #22d3ee;
  font-size: 30px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(15,23,42,.12);
  transition: transform .12s, box-shadow .12s;
}
.tg-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,23,42,.18); }
.tg-btn[title="Atas"] { grid-area: up; }
.tg-btn[title="Kiri"] { grid-area: left; }
.tg-btn[title="Bawah"] { grid-area: down; }
.tg-btn[title="Kanan"] { grid-area: right; }
.tg-seq {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}
.tg-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }

/* --- Slide 42-45: cabaran logik angkasa --- */
.logic-visual {
  width: min(100%, 560px);
  margin: 0 auto 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(34, 211, 238, .55);
  background: #0b1e3b;
  box-shadow: 0 12px 28px rgba(15,23,42,.16);
}
.logic-sky {
  min-height: 230px;
  position: relative;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.85) 0 1px, transparent 2px),
    radial-gradient(circle at 75% 24%, rgba(255,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 52%, rgba(255,255,255,.65) 0 1px, transparent 2px),
    linear-gradient(145deg, #10243f, #173a63);
}
.logic-ground {
  position: absolute;
  inset: auto 0 0;
  min-height: 155px;
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: end;
  background: linear-gradient(160deg, #d9f99d, #86efac 55%, #f9a8d4);
}
.rescue-item {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.58);
  border: 2px solid transparent;
  color: #173a2b;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.rescue-item.active {
  border-color: #22c55e;
  box-shadow: 0 0 0 5px rgba(34,197,94,.2);
  background: #f0fdf4;
}
.rescue-icon { font-size: 36px; line-height: 1; }
.rescue-ship {
  min-height: 118px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(#cbd5e1, #64748b);
  border: 5px solid #94a3b8;
  position: relative;
  box-shadow: inset 0 -12px 0 rgba(15,23,42,.18);
}
.rescue-ship span {
  position: absolute;
  bottom: 28%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #f472b6;
  border: 2px solid #be185d;
}
.rescue-ship span:nth-child(1) { left: 18%; }
.rescue-ship span:nth-child(2) { left: 41%; }
.rescue-ship span:nth-child(3) { right: 18%; }
.gem-visual { padding: 18px; background: linear-gradient(145deg, #0c1e38, #10243f); }
.gem-note {
  width: fit-content;
  margin: 0 auto 12px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #0c2b45;
  color: #7dd3fc;
  border: 1px solid rgba(56,189,248,.4);
  font-weight: 800;
  letter-spacing: .5px;
}
.gem-note b { color: #eaf1ff; }
.gem-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gem-cell {
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 112px;
  padding: 14px 8px;
  border-radius: 10px;
  background: #10233f;
  border: 2px solid rgba(56,189,248,.3);
}
.gem-cell.focus {
  background: #0e2b40;
  border-color: #22d3ee;
  box-shadow: 0 0 0 5px rgba(34,211,238,.2);
}
.gem-name { color: #7dd3fc; font-weight: 900; text-align: center; }
.gem-value { font-size: clamp(20px, 4vw, 30px); color: #eaf1ff; font-weight: 900; }
.gem-value.unknown { color: #fbbf24; }
.pipe-visual,
.shortcut-visual {
  padding: 18px;
  display: grid;
  gap: 12px;
  justify-items: center;
  background: linear-gradient(145deg, #10243f, #173a63);
}
.shortcut-title {
  padding: 7px 16px;
  border-radius: 999px;
  background: #ecfeff;
  color: #155e75;
  font-weight: 900;
  text-align: center;
}
.pipe-source {
  padding: 7px 18px;
  border-radius: 999px;
  background: #67e8f9;
  color: #164e63;
  font-weight: 900;
}
.pipe-board,
.shortcut-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 64px);
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #0f766e;
}
.pipe-cell,
.shortcut-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  border-radius: 6px;
  background: #d1d5db;
  border: 2px solid rgba(255,255,255,.3);
  color: #312e81;
  font-size: 24px;
  font-weight: 900;
}
.pipe-label {
  position: absolute;
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #164e63;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(15,23,42,.2);
}
.pipe-label.active { background: #22c55e; color: #052e16; }
.pipe-label.p0 { left: 28px; top: -8px; }
.pipe-label.p1 { left: 62px; top: 58px; }
.pipe-label.p2 { left: 48px; top: 128px; }
.pipe-label.p3 { left: 62px; top: 198px; }
.pipe-label.p4 { left: 98px; bottom: -8px; }
.pipe-label.p5 { left: 112px; top: 58px; }
.pipe-label.p6 { left: 184px; top: 58px; }
.pipe-label.p7 { left: 156px; top: 128px; }
.pipe-label.p8 { right: 48px; top: 128px; }
.pipe-label.p9 { right: 22px; top: 198px; }
.pipe-answer {
  padding: 9px 18px;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-weight: 900;
  letter-spacing: 1px;
}
.shortcut-cell.treasure { background: #fff7ed; }
.shortcut-entry {
  position: absolute;
  left: -12px;
  bottom: 36px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 28px solid #22c55e;
}
.shortcut-link {
  position: absolute;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f97316;
  color: #111827;
  font-weight: 900;
}
.shortcut-link.active {
  background: #a3e635;
  box-shadow: 0 0 16px rgba(163,230,53,.95), 0 0 0 5px rgba(163,230,53,.18);
}
.link-x { left: 148px; top: 88px; }
.link-y { left: 148px; top: 154px; }
.link-z { left: 80px; bottom: 26px; }
.shortcut-options {
  display: flex;
  gap: 16px;
}
.shortcut-options span {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 28%, #fecaca 0 26%, #dc2626 36% 100%);
  color: #fff;
  font-weight: 900;
  border: 3px solid rgba(255,255,255,.72);
}
.shortcut-options span.active {
  background: radial-gradient(circle at 35% 28%, #ecfccb 0 26%, #84cc16 36% 100%);
  box-shadow: 0 0 16px rgba(163,230,53,.9);
}
@media (max-width: 620px) {
  .logic-ground { grid-template-columns: repeat(2, 1fr); }
  .gem-table { grid-template-columns: repeat(2, 1fr); }
  .pipe-board,
  .shortcut-board {
    grid-template-columns: repeat(4, minmax(46px, 1fr));
    width: 100%;
    max-width: 328px;
  }
}

/* --- Placeholder: soalan belum dibina --- */
.pending-wrap { text-align: center; padding: 40px 16px; }
.pending-icon { font-size: 54px; margin-bottom: 10px; }
.pending-text { font-size: 18px; font-weight: 800; color: var(--red); margin-bottom: 6px; }

/* ====== Cyber Agent Academy: Mission Brief ====== */
.mission-brief {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr minmax(96px, 130px);
  gap: 14px;
  align-items: stretch;
  margin: 0 0 24px;
}
.mission-character,
.mission-info,
.mission-reward {
  border: 1px solid rgba(37, 99, 235, .18);
  background: linear-gradient(135deg, #f8fafc, #eef2ff);
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.mission-character {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}
.mission-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 18px;
  font-size: 34px;
  background: radial-gradient(circle at 35% 25%, #ffffff, #bfdbfe 55%, #4f46e5);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 8px 18px rgba(79,70,229,.22);
  overflow: hidden;
}
.mission-avatar.has-img {
  width: 96px;
  height: 96px;
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
  overflow: visible;
  padding: 0;
}
.mission-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: drop-shadow(0 5px 12px rgba(15,23,42,.3));
}
.mission-character b { display: block; font-size: 15px; color: #0f172a; }
.mission-character small { display: block; margin-top: 2px; color: #64748b; font-size: 12px; font-weight: 700; line-height: 1.25; }
.mission-character.nova .mission-avatar { background: radial-gradient(circle at 35% 25%, #ffffff, #e9d5ff 50%, #7c3aed); }
.mission-character.byte .mission-avatar { background: radial-gradient(circle at 35% 25%, #ffffff, #ccfbf1 50%, #0f766e); }
.mission-character.shadow .mission-avatar { background: radial-gradient(circle at 35% 25%, #fecaca, #7f1d1d 55%, #020617); }
.mission-character.agentx .mission-avatar { background: radial-gradient(circle at 35% 25%, #ffffff, #bbf7d0 50%, #166534); }
.mission-info { padding: 14px 18px; }
.mission-level {
  color: #4f46e5;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.mission-info h3 {
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -.3px;
  color: #111827;
  margin-bottom: 7px;
}
.mission-dialog {
  color: #334155;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 650;
}
.mission-reward {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
}
.mission-reward span { color: #64748b; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.mission-reward b { color: #16a34a; font-size: 30px; line-height: 1; }
.mission-reward small { color: #4f46e5; font-size: 12px; font-weight: 800; line-height: 1.2; }
@media (max-width: 900px) {
  .mission-brief { grid-template-columns: 1fr; }
}

/* ============================================================
   ===== TEMA HUD SCI-FI — Cyber Agent Academy (re-skin) =====
   ============================================================ */
:root {
  --ink: #e6edf7;
  --muted: #93a4c0;
  --line: rgba(56,189,248,.18);
  --card: #0e1730;
  --accent: #22d3ee;
  --accent2: #38bdf8;
  --panel: #0e1730;
  --panel2: #132043;
}
body {
  color: var(--ink);
  background-color: #070c18;
  background-image:
    radial-gradient(1200px 600px at 12% -12%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(124,58,237,.12), transparent 55%),
    radial-gradient(rgba(56,189,248,.10) 1px, transparent 1px);
  background-size: auto, auto, 26px 26px;
  background-attachment: fixed;
}
.muted { color: var(--muted); }

/* ---- Laman utama ---- */
.home-header h1 { color: #fff; }
.home-header p, .back-link { color: var(--muted); }
.domain-card {
  background: linear-gradient(160deg, var(--panel), #0b1428);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(2,8,20,.5);
}
.domain-card h2 { color: #fff; }
.chip-avatar { background: var(--panel2); border-color: var(--line); color: #dbeafe; }

/* ---- Header kuiz ---- */
.quiz-header {
  background: rgba(14,23,48,.78);
  border: 1px solid var(--line);
  box-shadow: 0 8px 26px rgba(2,8,20,.45);
}
.subject-topic { color: #fff; }
.subject-label { color: var(--accent); }
.jump-select { background: var(--panel2); color: #dbeafe; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.btn-ghost { background: var(--panel2); color: #dbeafe; border: 1px solid var(--line); }
.btn-ghost:hover { background: #1a2a52; }

/* ---- Stepper ---- */
.step { background: rgba(19,32,67,.7); color: #7f92b3; }
.step:hover { border-color: rgba(56,189,248,.5); box-shadow: 0 6px 16px rgba(2,8,20,.5); }
.step.current { background: #0b1226; color: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px rgba(34,211,238,.4); }
.step.current::after { background: var(--accent); border-color: #0b1226; }
.step.done { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.5); color: #34d399; }

/* ---- Kad soalan + bracket sudut HUD ---- */
.question-card {
  background: linear-gradient(165deg, var(--panel), #0a1226);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(2,8,20,.6), inset 0 1px 0 rgba(56,189,248,.08);
}
.question-card::before, .question-card::after {
  content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 3;
  border-color: var(--accent); border-style: solid;
}
.question-card::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-top-left-radius: 8px; }
.question-card::after { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-bottom-right-radius: 8px; }

/* ---- Transisi masuk lembut, satu-satu elemen (bukan seluruh kad) bila soalan muncul.
   Elemen umum (badge/hint/footer) kekal statik — hanya bahagian yang berubah ikut soalan
   (taklimat misi, konteks, visual, teks, interaksi) yang beransur muncul. ---- */
@keyframes qcEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.question-card.qc-enter .mission-brief,
.question-card.qc-enter .q-context,
.question-card.qc-enter .q-visual,
.question-card.qc-enter .q-text,
.question-card.qc-enter .q-interact {
  animation: qcEnter 360ms ease both;
}
.question-card.qc-enter .mission-brief { animation-delay: 0ms; }
.question-card.qc-enter .q-context     { animation-delay: 60ms; }
.question-card.qc-enter .q-visual      { animation-delay: 100ms; }
.question-card.qc-enter .q-text        { animation-delay: 140ms; }
.question-card.qc-enter .q-interact    { animation-delay: 190ms; animation-fill-mode: backwards; }
/* fill-mode 'backwards' (bukan 'both'): 'to' keyframe (translateY(0)) tidak kekal
   selepas animasi tamat. translateY(0) kelihatan sama seperti tiada transform,
   tapi transform bukan-'none' yang berterusan mencipta containing block CSS baharu
   untuk anak position:fixed (cth. .drag-chip semasa diseret) — menyebabkan seretan
   soalan betul-salah/drag-bin terkeluar kedudukan. */
@media (prefers-reduced-motion: reduce) {
  .question-card.qc-enter .mission-brief,
  .question-card.qc-enter .q-context,
  .question-card.qc-enter .q-visual,
  .question-card.qc-enter .q-text,
  .question-card.qc-enter .q-interact {
    animation: none;
  }
}

/* ---- Bar loading HUD segmen bergaya panel sci-fi bila murid tekan 'Seterusnya' ---- */
.q-loading-bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,8,20,.74);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 40;
  border-radius: inherit;
}
.q-loading-bar.active { opacity: 1; }

.qlb-frame {
  position: relative;
  width: min(360px, 82%);
  padding: 22px 20px 16px;
  border: 2px solid var(--accent);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14,23,48,.92), rgba(7,12,26,.96));
  box-shadow: 0 0 26px rgba(34,211,238,.28), inset 0 0 20px rgba(34,211,238,.06);
}
.qlb-frame::before, .qlb-frame::after {
  content: "";
  position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--accent);
}
.qlb-frame::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.qlb-frame::after  { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

.qlb-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.qlb-dots i { width: 4px; height: 4px; background: var(--accent); opacity: .55; border-radius: 1px; }

.qlb-segments {
  display: flex; gap: 3px; align-items: stretch;
  height: 30px; padding: 4px;
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 4px;
  background: rgba(34,211,238,.04);
}
.qlb-segments i {
  flex: 1;
  background: rgba(34,211,238,.12);
  border-radius: 1px;
  transition: background .08s linear, box-shadow .08s linear;
}
.qlb-segments i.lit {
  background: linear-gradient(180deg, #bff7ff, var(--accent));
  box-shadow: 0 0 6px rgba(34,211,238,.85);
}

.qlb-status {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 12px;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 10.5px; letter-spacing: 2.5px; color: var(--accent);
  text-transform: uppercase;
}
.qlb-percent {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 17px; font-weight: 900; color: #fff; letter-spacing: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .q-loading-bar { display: none; }
}

/* ---- Lencana sync ke server: kelip sekejap bila kemajuan disimpan ---- */
.sync-badge {
  font-size: 15px;
  opacity: .32;
  transition: opacity .3s ease;
  cursor: default;
  user-select: none;
}
.sync-badge.pulse { animation: syncPulse 900ms ease; }
@keyframes syncPulse {
  0%   { opacity: .32; transform: scale(1); filter: drop-shadow(0 0 0 rgba(34,211,238,0)); }
  25%  { opacity: 1; transform: scale(1.25); filter: drop-shadow(0 0 6px rgba(34,211,238,.9)); }
  60%  { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 3px rgba(34,211,238,.6)); }
  100% { opacity: .32; transform: scale(1); filter: drop-shadow(0 0 0 rgba(34,211,238,0)); }
}
@media (prefers-reduced-motion: reduce) {
  .sync-badge.pulse { animation: none; }
}
.q-badge { background: linear-gradient(90deg, #0b3b52, #0e2a5a); color: #d8fbff; box-shadow: inset 0 0 0 1px rgba(56,189,248,.4); }
.q-context {
  display: block;
  background: linear-gradient(135deg, #14264a, #0c1526);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  color: #eaf1ff;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.5;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: inset 0 0 20px rgba(34,211,238,.06);
}
.q-text { color: #fff; }
.q-caption, .q-tip { color: var(--muted); }
.q-visual { border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 26px rgba(34,211,238,.08); }
.q-footer { border-color: var(--line); }

/* ---- Butang pilihan ---- */
.choice-btn { background: var(--panel2); border: 1px solid var(--line); color: #e6edf7; }
.choice-btn:hover { border-color: var(--accent); box-shadow: 0 10px 26px rgba(2,8,20,.5), 0 0 0 3px rgba(34,211,238,.12); }
.choice-btn.selected { border-color: var(--accent); background: #10233f; box-shadow: 0 0 0 4px rgba(34,211,238,.18); }
.opt-teks { color: #e6edf7; }

/* ---- Betul/Salah ---- */
.statement-banner { background: #0c1730; color: #fff; }
.drop-zone { background: rgba(19,32,67,.5); border-color: var(--line); }
.bs-instruct { color: var(--muted); }

/* ---- Mission brief (HUD + aksen warna karakter) ---- */
.mission-character, .mission-info, .mission-reward {
  background: linear-gradient(135deg, #0f1c3a, #0b1428);
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(2,8,20,.4);
}
.mission-character { border-left: 3px solid var(--char, var(--accent)); }
.mission-character.komander { --char: #f2b01e; }
.mission-character.nova { --char: #22d3ee; }
.mission-character.byte { --char: #3b82f6; }
.mission-character.shadow { --char: #a855f7; }
.mission-character.agentx { --char: #22d3ee; }
.mission-character.firewall { --char: #38bdf8; }
.mission-character b { color: #fff; }
.mission-character small { color: var(--char, var(--muted)); opacity: .95; }
.mission-level { color: var(--accent); }
.mission-info h3 { color: #fff; }
.mission-dialog { color: #c7d2e6; }
.mission-reward span { color: var(--muted); }
.mission-reward b { color: #34d399; }
.mission-reward small { color: var(--accent); }

/* ---- Alat footer ---- */
.tool-btn { background: var(--panel2); border-color: var(--line); color: #dbeafe; }
.tool-btn:hover { background: #1a2a52; }

/* ---- Skrin keputusan ---- */
.result-card { background: linear-gradient(165deg, var(--panel), #0a1226); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(2,8,20,.6); }
.result-card h1 { color: #fff; }
.result-kicker { color: var(--accent); }
.result-ring::before { background: #0b1428; }
.result-ring span { color: #fff; }
.result-stat { background: var(--panel2); border-color: var(--line); }
.result-stat b { color: #fff; }
.result-panel { background: #0d1a34; border-color: var(--line); }
.result-panel h2 { color: #fff; }
.review-panel { background: #0d1a34; }
.level-name { color: #dbeafe; }

/* ============================================================
   ===== TEMA HUD — bahagian 2: kotak jawapan / pernyataan / drop-zone =====
   ============================================================ */

/* Kotak "Jawapan:" (soalan ikon pelayar) — HUD gelap */
.q-interact-box {
  background: linear-gradient(135deg, #0f1c3a, #0b1428);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.06), 0 10px 26px rgba(2,8,20,.4);
}
.answer-line { color: #e6edf7; }
.answer-slot {
  background: rgba(19,32,67,.6);
  border: 2px dashed rgba(56,189,248,.5);
  color: var(--accent);
}
.answer-slot.filled {
  border-style: solid; border-color: var(--accent);
  background: #10233f;
  box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 0 16px rgba(34,211,238,.35);
}

/* Pernyataan Betul/Salah — panel amaran HUD (sudut terpotong + garis imbas) */
.statement-banner {
  position: relative;
  background: linear-gradient(135deg, #11213f 0%, #0a1120 100%);
  border: 1.5px solid rgba(56,189,248,.5);
  border-radius: 0;
  color: #fff;
  box-shadow: 0 12px 32px rgba(2,8,20,.55), inset 0 0 30px rgba(34,211,238,.1);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.statement-banner::before {
  content: "";
  position: absolute; left: 22px; right: 8px; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  opacity: .85;
}
.statement-banner::after {
  content: "";
  position: absolute; right: 10px; top: 10px;
  width: 8px; height: 8px; border-radius: 999px;
  background: #22d3ee; box-shadow: 0 0 10px #22d3ee;
  animation: hudBlink 1.4s ease-in-out infinite;
}
@keyframes hudBlink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Zon Betul/Salah — HUD + glow berdenyut bila jawapan diletak */
.drop-zone {
  background: linear-gradient(160deg, #0f1c3a, #0a1120);
  border: 2px dashed rgba(56,189,248,.42);
  box-shadow: inset 0 0 26px rgba(34,211,238,.06);
}
.drop-zone.over {
  background: #10233f; border-color: var(--accent); border-style: solid;
  box-shadow: 0 0 0 5px rgba(34,211,238,.22); transform: scale(1.02);
}
.drop-zone.filled {
  border-style: solid; border-color: var(--accent);
  background: #0e2038;
  animation: dzPulse 1.1s ease-in-out infinite;
}
@keyframes dzPulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(34,211,238,.28), inset 0 0 18px rgba(34,211,238,.12); }
  50% { box-shadow: 0 0 0 6px rgba(34,211,238,.42), 0 0 28px rgba(34,211,238,.45), inset 0 0 26px rgba(34,211,238,.22); }
}
.drop-zone.correct {
  border-color: #22c55e; background: #0c2a1a;
  animation: dzPulseGreen 1s ease-in-out infinite;
}
@keyframes dzPulseGreen {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.32), inset 0 0 18px rgba(34,197,94,.15); }
  50% { box-shadow: 0 0 0 7px rgba(34,197,94,.5), 0 0 30px rgba(34,197,94,.5); }
}
.drop-zone.wrong {
  border-color: #ef4444; background: #2a0f14;
  box-shadow: 0 0 0 5px rgba(239,68,68,.32), 0 0 26px rgba(239,68,68,.4);
  animation: none;
}

/* ============================================================
   ===== TEMA HUD — bahagian 3: kotak respons (feedback) =====
   ============================================================ */
.feedback.ok, .feedback.bad, .feedback.warn {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
}
.feedback.ok {
  background: linear-gradient(135deg, #0c2a1a, #08160f);
  border: 1.5px solid rgba(34,197,94,.55);
  color: #bbf7d0;
  box-shadow: 0 10px 28px rgba(2,8,20,.5), inset 0 0 26px rgba(34,197,94,.12);
}
.feedback.ok::before {
  content: ""; position: absolute; left: 18px; right: 8px; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #22c55e, transparent);
}
.feedback.warn {
  background: linear-gradient(135deg, #2a230c, #171205);
  border: 1.5px solid rgba(245,158,11,.55);
  color: #fde68a;
  box-shadow: 0 10px 28px rgba(2,8,20,.5), inset 0 0 26px rgba(245,158,11,.12);
}
.feedback.warn::before {
  content: ""; position: absolute; left: 18px; right: 8px; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}
/* SALAH = panel amaran berdenyut */
.feedback.bad {
  background: linear-gradient(135deg, #2a0f14, #180708);
  border: 1.5px solid rgba(239,68,68,.6);
  color: #fecaca;
  animation: fbAlarm 1.1s ease-in-out infinite;
}
.feedback.bad::before {
  content: ""; position: absolute; left: 18px; right: 8px; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
.feedback.bad::after {
  content: ""; position: absolute; right: 12px; top: 10px;
  width: 9px; height: 9px; border-radius: 999px;
  background: #ef4444; box-shadow: 0 0 12px #ef4444;
  animation: hudBlink 1s ease-in-out infinite;
}
@keyframes fbAlarm {
  0%,100% {
    box-shadow: 0 10px 28px rgba(2,8,20,.5), inset 0 0 26px rgba(239,68,68,.14);
    border-color: rgba(239,68,68,.55);
  }
  50% {
    box-shadow: 0 10px 28px rgba(2,8,20,.5), inset 0 0 36px rgba(239,68,68,.3), 0 0 26px rgba(239,68,68,.42);
    border-color: rgba(239,68,68,.98);
  }
}
.feedback small { color: inherit; opacity: .9; }

/* ============================================================
   ===== TEMA HUD — bahagian 4: Cut/Copy/Paste =====
   ============================================================ */
.cp-passage {
  background: linear-gradient(135deg, #0f1c3a, #0b1428);
  border: 1px solid var(--line);
  color: #eaf1ff;
  box-shadow: inset 0 0 22px rgba(34,211,238,.05);
}
.cp-sel { border-bottom-color: #c084fc; }
.cp-sel:hover { background: rgba(192,132,252,.22); }
.cp-sel.active { background: rgba(34,211,238,.3); border-bottom-color: transparent; color: #fff; }
.cp-sel.cp-cut { color: #64748b; }
.cp-status { color: #b8c6e0; }
.cp-target {
  background: linear-gradient(160deg, #0f1c3a, #0a1120);
  border: 2px dashed rgba(56,189,248,.42);
  box-shadow: inset 0 0 22px rgba(34,211,238,.06);
}
.cp-target.filled {
  border-style: solid; border-color: var(--accent); background: #0e2038;
  animation: dzPulse 1.1s ease-in-out infinite;
}
.cp-target.correct { border-color: #22c55e; background: #0c2a1a; animation: dzPulseGreen 1s ease-in-out infinite; }
.cp-target.wrong { border-color: #ef4444; background: #2a0f14; box-shadow: 0 0 0 5px rgba(239,68,68,.3); animation: none; }
.cp-placeholder { color: #93a4c0; }
.cp-chip { color: var(--accent); }

/* ============================================================
   ===== TEMA HUD — bahagian 5: grid coding/tapir, count-table, matrix =====
   ============================================================ */

/* --- Coding grid (kapal angkasa): butang & chip & progres --- */
.cg-btn {
  background: #071526; border: 2px solid #22d3ee; color: #22d3ee;
  box-shadow: 0 6px 16px rgba(2,8,20,.45);
}
.cg-btn:hover { border-color: #67e8f9; transform: translateY(-2px); }
.cg-chip { background: #0b1e3b; border: 1px solid var(--accent); color: #67e8f9; }
.cg-mini { background: var(--panel2); border: 1px solid var(--line); color: #dbeafe; }
.cg-mini:hover { border-color: #ef4444; }
.cg-progress { color: #eaf1ff; }
.cg-count { color: #dbeafe; }

/* --- Tapir grid (agen): sel papan jadi gelap HUD --- */
.tg-cell {
  background-color: #0e2038;
  background-image: radial-gradient(rgba(56,189,248,.32) 1.2px, transparent 1.2px);
  border: 1px solid rgba(56,189,248,.2);
}

/* --- Count-table (kira bintang) --- */
.ct-table th { background: linear-gradient(90deg, #0b3b52, #0e2a5a); color: #d8fbff; }
.ct-table td { border-color: var(--line); color: #eaf1ff; background: rgba(19,32,67,.4); }
.ct-input { background: #0c1730; border: 2px solid var(--line); color: #fff; }
.ct-input:focus { border-color: var(--accent); }
.ct-input.correct { background: #0c2a1a; border-color: #22c55e; color: #bbf7d0; }
.ct-input.wrong { background: #2a0f14; border-color: #ef4444; color: #fecaca; }

/* --- Matrix-choice (jadual pilihan) --- */
.matrix-panel { background: #0c1730; border: 1px solid var(--line); }
.matrix-head { background: linear-gradient(90deg, #0b3b52, #0e2a5a); color: #d8fbff; }
.matrix-row { background: #0f1c3a; border-top: 3px solid rgba(56,189,248,.28); }
.matrix-row:nth-child(odd) { background: #0c1730; }
.matrix-text { color: #eaf1ff; }
.matrix-text small { color: #93a4c0; }
.matrix-choice { color: #cbd6ea; }
.matrix-choice:hover { background: rgba(56,189,248,.12); }
.matrix-choice.selected { border-color: var(--accent); background: #10233f; color: #fff; box-shadow: 0 0 0 4px rgba(34,211,238,.16); }
.matrix-choice.correct { border-color: #22c55e; background: #0c2a1a; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.matrix-choice.wrong { border-color: #ef4444; background: #2a0f14; box-shadow: 0 0 0 4px rgba(239,68,68,.2); }
.matrix-sel { background: var(--panel2, #132043); color: #e6edf7; border-color: var(--line); }
.matrix-sel option { background: #132043; color: #e6edf7; }
.matrix-sel.filled { background: #10233f; border-color: var(--accent); }
.matrix-sel.correct { background: #0c2a1a; border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.matrix-sel.wrong { background: #2a0f14; border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.2); }

.tg-progress { color: #eaf1ff; }

/* ---- Cut/Copy/Paste: serlah sendiri + penanda (caret) ---- */
.cp-passage {
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
}
.cp-passage ::selection, .cp-passage::selection { background: rgba(34,211,238,.4); color: #fff; }
.cp-target { cursor: text; }
.cp-target.cp-armed {
  border-style: solid;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18), inset 0 0 18px rgba(34,211,238,.12);
}
.cp-caret {
  display: inline-block;
  width: 2px; height: 24px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: cpCaret 1s step-end infinite;
  vertical-align: middle;
}
@keyframes cpCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- Multi (pilih banyak): chip kata laluan gaya terminal HUD ---- */
.pw-chip {
  background: linear-gradient(135deg, #0f1c3a, #0b1428);
  border: 2px solid var(--line);
  color: #eaf1ff;
  box-shadow: 0 8px 20px rgba(2,8,20,.4);
}
.pw-chip:hover { border-color: var(--accent); box-shadow: 0 12px 26px rgba(2,8,20,.5), 0 0 0 3px rgba(34,211,238,.12); }
.pw-chip.selected { border-color: var(--accent); background: #10233f; color: #fff; box-shadow: 0 0 0 5px rgba(34,211,238,.2); }
.pw-chip.correct { border-color: #22c55e; background: #0c2a1a; color: #bbf7d0; box-shadow: 0 0 0 5px rgba(34,197,94,.22); }
.pw-chip.wrong { border-color: #ef4444; background: #2a0f14; color: #fecaca; box-shadow: 0 0 0 5px rgba(239,68,68,.22); }

/* ---- Tapir grid: susun atur 2-lajur (grid kiri, kawalan kanan) + grid lebih besar ---- */
.tg-wrap.tg-2col {
  max-width: 1200px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
}
.tg-2col .tg-left {
  min-width: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.tg-2col .tg-right {
  display: grid;
  gap: 18px;
  justify-items: center;
}
.tg-2col #tg-grid-box { width: min(52vw, 600px); }
.tg-2col .tg-grid { width: 100%; max-width: none; }
@media (max-width: 900px) {
  .tg-wrap.tg-2col { grid-template-columns: 1fr; justify-items: center; }
  .tg-2col #tg-grid-box { width: min(90vw, 520px); }
}

/* ---- Coding grid (kapal): susun atur 2-lajur (grid kiri, kawalan kanan) + grid lebih besar ---- */
.cg-wrap.cg-2col {
  max-width: 1200px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
}
.cg-2col .cg-left {
  min-width: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.cg-2col .cg-right {
  display: grid;
  gap: 16px;
  justify-items: center;
}
.cg-2col #cg-grid-box { width: min(52vw, 600px); }
.cg-2col .cg-grid,
.cg-2col .cg-grid-live { width: 100%; max-width: none; }
@media (max-width: 900px) {
  .cg-wrap.cg-2col { grid-template-columns: 1fr; justify-items: center; }
  .cg-2col #cg-grid-box { width: min(90vw, 480px); }
}

/* ===== TEMA HUD (bahagian 6): tag status Betul/Salah bawah petak seret ===== */
.dz-tag {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 14px auto 0;
  padding: 9px 20px 9px 13px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border: 1.5px solid;
  border-radius: 3px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.dz-tag .dz-tag-ico {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid;
}
.dz-tag.betul {
  border-color: #22c55e;
  box-shadow: 0 0 15px rgba(34,197,94,.35), inset 0 0 12px rgba(34,197,94,.12);
}
.dz-tag.betul .dz-tag-ico { background: rgba(34,197,94,.2); color: #4ade80; border-color: #22c55e; }
.dz-tag.betul .dz-tag-word { color: #86efac; }
.dz-tag.salah {
  border-color: #ef4444;
  box-shadow: 0 0 15px rgba(239,68,68,.35), inset 0 0 12px rgba(239,68,68,.12);
}
.dz-tag.salah .dz-tag-ico { background: rgba(239,68,68,.2); color: #f87171; border-color: #ef4444; }
.dz-tag.salah .dz-tag-word { color: #fca5a5; }

/* ===== TEMA HUD (bahagian 7): imej ikon tapir (Agen X / kiub / pintu / kunci / Firewall Core) ===== */
.tg-box, .tg-key { display: grid; place-items: center; width: 86%; height: 86%; }
.tg-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tg-round { border-radius: 50%; }
.tg-agent:has(img), .tg-dest:has(img) {
  background: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.tg-dest:has(img.tg-round) { filter: drop-shadow(0 0 7px rgba(56,189,248,.55)); }

/* ===== TEMA HUD (bahagian 8): litar teras tenaga (gear-swap) ===== */
.gs-wrap {
  display: grid;
  grid-template-columns: minmax(320px, 480px) minmax(300px, 1fr);
  gap: 22px;
  align-items: start;
}
.gs-panel {
  background: #0b1e3b;
  border: 1px solid rgba(56,189,248,.3);
  border-radius: 14px;
  padding: 8px;
  box-shadow: inset 0 0 30px rgba(34,211,238,.06);
}
.gs-panel svg { width: 100%; height: auto; display: block; }
.gs-core-g {
  cursor: pointer;
  transition: transform .68s cubic-bezier(.45, .05, .25, 1);
}
.gs-core-g:hover circle { filter: brightness(1.15); }
.gs-core-g.gs-glide > circle:nth-of-type(2) {
  filter: drop-shadow(0 0 12px rgba(34,211,238,.95)) brightness(1.22);
}
.gs-shake { animation: gsShake .4s ease; }
@keyframes gsShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}
.gs-bar { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.gs-log {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
}
.gs-step {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  background: rgba(34,211,238,.1);
  border: 1px solid rgba(56,189,248,.35);
  color: #d8fbff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.gs-empty { font-size: 12.5px; color: #6b7f9e; font-style: italic; }
.gs-guide {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-size: 14.5px;
  color: #cfe3ff;
  background: rgba(34,211,238,.07);
  border-left: 3px solid var(--accent, #22d3ee);
  border-radius: 6px;
}
.gs-options { flex-direction: column; align-items: stretch; }
.gs-opt {
  display: flex !important;
  align-items: center;
  gap: 12px;
  text-align: left;
  line-height: 1.6;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  min-height: 0;
  padding: 14px 20px;
}
.gs-opt-tag {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 14px;
  background: rgba(34,211,238,.14);
  border: 1.5px solid rgba(56,189,248,.5);
  color: #7ee8ff;
}
@media (max-width: 900px) {
  .gs-wrap { grid-template-columns: 1fr; }
}

/* ===== TEMA HUD (bahagian 9): penghala aliran (flow-route) ===== */
.fr-wrap {
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
.fr-panel {
  background: #0b1e3b;
  border: 1px solid rgba(56,189,248,.3);
  border-radius: 14px;
  padding: 8px;
  box-shadow: inset 0 0 34px rgba(34,211,238,.06);
}
.fr-panel svg { width: 100%; height: auto; display: block; }
.fr-tile { fill: rgba(16,38,68,.55); stroke: rgba(56,189,248,.16); stroke-width: 1; }
.fr-pipe { stroke: #22d3ee; stroke-width: 4; opacity: .6; stroke-linecap: round; }
.fr-flow { fill: #aef2ff; filter: drop-shadow(0 0 3px rgba(126,232,255,.9)); }
.fr-node circle { fill: #10233f; stroke: #38bdf8; stroke-width: 2.4; }
.fr-node-lbl { fill: #eaf1ff; font-weight: 800; font-size: 15px; text-anchor: middle; font-family: inherit; }
.fr-node.fr-src circle { fill: #0c3a2a; stroke: #22c55e; stroke-width: 3.2; filter: drop-shadow(0 0 8px rgba(34,197,94,.7)); }
.fr-src-tag { fill: #86efac; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-anchor: middle; }
.fr-srv rect { fill: #0e1c38; stroke: rgba(56,189,248,.45); stroke-width: 2; }
.fr-srv-lbl { fill: #cbd6ea; font-weight: 800; font-size: 14px; text-anchor: middle; }
.fr-srv.fr-target rect { fill: #10233f; stroke: #22d3ee; stroke-width: 3; filter: drop-shadow(0 0 9px rgba(34,211,238,.6)); }
.fr-srv.fr-target .fr-srv-lbl { fill: #7ee8ff; }
.fr-srv-tag { fill: #7ee8ff; font-size: 11px; font-weight: 900; letter-spacing: 1.5px; text-anchor: middle; }
.fr-guide {
  margin: 0 0 16px;
  padding: 12px 15px;
  font-size: 15px;
  line-height: 1.55;
  color: #cfe3ff;
  background: rgba(34,211,238,.07);
  border-left: 3px solid var(--accent, #22d3ee);
  border-radius: 6px;
}
.fr-label { display: block; font-size: 14px; color: #93a4c0; margin-bottom: 8px; }
.fr-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #eaf1ff;
  background: #0c1730;
  border: 2px solid rgba(56,189,248,.4);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fr-input::placeholder { color: #4a5f80; letter-spacing: 1px; font-weight: 600; text-transform: none; }
.fr-input:focus { border-color: var(--accent, #22d3ee); box-shadow: 0 0 0 4px rgba(34,211,238,.16); }
.fr-input.correct { border-color: #22c55e; background: #0c2a1a; color: #bbf7d0; }
.fr-input.wrong { border-color: #ef4444; background: #2a0f14; animation: gsShake .4s ease; }
@media (max-width: 900px) {
  .fr-wrap { grid-template-columns: 1fr; }
}

/* ===== TEMA HUD (bahagian 10): maze bilik berpintu (maze-route) ===== */
.mz-room { fill: #10233f; stroke: rgba(56,189,248,.34); stroke-width: 2; }
.mz-vault-room { fill: #12283f; stroke: #22d3ee; stroke-width: 2.6; filter: drop-shadow(0 0 7px rgba(34,211,238,.4)); }
.mz-door rect { fill: #22d3ee; opacity: .9; filter: drop-shadow(0 0 4px rgba(34,211,238,.7)); }
.mz-door line { stroke: #0a1830; stroke-width: 3; stroke-dasharray: 3 4; opacity: .55; }
.mz-badge rect { fill: #f97316; stroke: #ffd8b0; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(249,115,22,.6)); }
.mz-badge-lbl { fill: #1a0d02; font-weight: 900; font-size: 22px; text-anchor: middle; font-family: inherit; }
.mz-entry line { stroke: #22c55e; stroke-width: 5; stroke-linecap: round; }
.mz-entry polygon { fill: #22c55e; filter: drop-shadow(0 0 5px rgba(34,197,94,.7)); }
.mz-tag { fill: #86efac; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-anchor: middle; }
.mz-vault-tag { fill: #7ee8ff; }
.mz-vault-ico { font-size: 34px; text-anchor: middle; }
.mz-opts { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 10px; }
.mz-opt {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 14px 18px; font-size: 17px; font-weight: 700;
}
.mz-radio {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(56,189,248,.6); flex: 0 0 auto;
  position: relative; transition: all .15s;
}
.mz-opt.selected .mz-radio { border-color: #22d3ee; }
.mz-opt.selected .mz-radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: #22d3ee; box-shadow: 0 0 8px rgba(34,211,238,.8);
}
.mz-opt.correct .mz-radio { border-color: #22c55e; }
.mz-opt.correct .mz-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #22c55e; }
.mz-opt.wrong .mz-radio { border-color: #ef4444; }
@media (max-width: 900px) {
  .mz-wrap { grid-template-columns: 1fr; }
}

/* ===== TEMA HUD (bahagian 11): lengkapkan jadual komponen (fill-table) ===== */
.ft-wrap { display: grid; gap: 14px; }
.ft-scroll { overflow-x: auto; padding-bottom: 4px; }
.ft-table {
  display: grid;
  grid-template-columns: repeat(5, minmax(128px, 1fr));
  gap: 10px;
  min-width: 680px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, #0c1e38, #10243f);
  border: 1px solid rgba(56,189,248,.3);
}
.ft-col {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 10px;
  background: #10233f;
  border: 2px solid rgba(56,189,248,.28);
}
.ft-head { display: grid; justify-items: center; gap: 6px; }
.ft-ico { width: 30px; height: 30px; color: #22d3ee; }
.ft-ico svg { width: 100%; height: 100%; display: block; }
.ft-lbl {
  color: #7dd3fc; font-weight: 800; font-size: 13.5px;
  text-align: center; letter-spacing: .4px; line-height: 1.25;
}
.ft-val {
  align-self: center;
  text-align: center;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  color: #eaf1ff;
  padding: 8px 4px;
}
.ft-given { border-style: dashed; }
.ft-total { background: #0c2b45; border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,.14); }
.ft-total .ft-ico, .ft-total .ft-lbl { color: #aef2ff; }
.ft-input {
  width: 100%;
  box-sizing: border-box;
  align-self: center;
  padding: 10px 6px;
  text-align: center;
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 900;
  color: #eaf1ff;
  background: #0a1526;
  border: 2px solid rgba(251,191,36,.55);
  border-radius: 8px;
  outline: none;
  -moz-appearance: textfield;
  transition: border-color .15s, box-shadow .15s;
}
.ft-input::-webkit-outer-spin-button, .ft-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ft-input::placeholder { color: #fbbf24; font-weight: 900; }
.ft-input:focus { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,.16); }
.ft-input.correct { border-color: #22c55e; background: #0c2a1a; color: #bbf7d0; }
.ft-input.wrong { border-color: #ef4444; background: #2a0f14; animation: gsShake .4s ease; }
@media (max-width: 720px) {
  .ft-table { grid-template-columns: repeat(5, minmax(112px, 1fr)); min-width: 600px; }
}

/* ===== TEMA HUD (bahagian 12): rover kargo (ferry-puzzle) ===== */
.fp-wrap { display: grid; gap: 14px; }
.fp-rules { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fp-rule {
  padding: 6px 14px; border-radius: 999px;
  background: #2a0f14; border: 1px solid rgba(239,68,68,.5);
  color: #fca5a5; font-size: 13px; font-weight: 700;
}
.fp-rule b { color: #fecaca; }
.fp-rule.ok-rule { background: #0c2b45; border-color: rgba(56,189,248,.45); color: #7dd3fc; }
.fp-rule.ok-rule b { color: #aef2ff; }
.fp-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 18px 8px;
  border-radius: 14px;
  background: linear-gradient(145deg, #0c1e38, #10243f);
  border: 1px solid rgba(56,189,248,.3);
}
.fp-zone {
  border-radius: 12px;
  padding: 12px;
  background: rgba(16,35,63,.6);
  border: 1.5px dashed rgba(56,189,248,.35);
  min-height: 158px;
}
.fp-base { grid-column: 1; grid-row: 1; }
.fp-shipzone { grid-column: 2; grid-row: 1; }
.fp-track { grid-row: 2; }
.fp-zone-lbl {
  margin: 0 0 10px; text-align: center;
  color: #7dd3fc; font-weight: 900; font-size: 12px; letter-spacing: 2.5px;
}
.fp-baserow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fp-chip {
  display: grid; justify-items: center; gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #10233f;
  border: 2px solid rgba(56,189,248,.4);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.fp-chip:hover:not(:disabled) { transform: translateY(-3px); border-color: #22d3ee; box-shadow: 0 6px 18px rgba(34,211,238,.25); }
.fp-chip-ico { width: 46px; height: 46px; }
.fp-chip-ico svg { width: 100%; height: 100%; display: block; }
.fp-chip-lbl { color: #cfe6ff; font-weight: 800; font-size: 12.5px; text-align: center; }
.fp-chip.riding { transform: scale(.86); border-color: #22d3ee; box-shadow: 0 0 14px rgba(34,211,238,.4); }
.fp-chip.shipped { transform: scale(.8); opacity: .95; border-color: rgba(34,197,94,.6); }
.fp-instrrow { display: flex; align-items: center; gap: 10px; }
.fp-instr {
  flex: 1; margin: 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: #2b2008;
  border: 1px solid rgba(251,191,36,.5);
  color: #fde68a;
  font-size: 14px; font-weight: 600;
}
.fp-instr b { color: #fff3c4; }
.fp-steps {
  padding: 10px 16px;
  border-radius: 10px;
  background: #0c2b45;
  border: 1px solid rgba(56,189,248,.45);
  color: #aef2ff;
  font-weight: 900; font-size: 14px;
  white-space: nowrap;
}
.fp-arrow {
  position: absolute;
  bottom: 22px;
  left: calc(4% + 132px);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: #04121f;
  border: 2px solid #22d3ee;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 0 12px rgba(34,211,238,.35);
  transition: transform .15s, box-shadow .15s;
}
.fp-arrow:hover { box-shadow: 0 0 18px rgba(34,211,238,.6); transform: translateY(-2px); }
.fp-arrow svg { width: 26px; height: 26px; }
.fp-arrow.at-ship { left: auto; right: calc(4% + 132px); }
.fp-arrow.at-ship svg { transform: scaleX(-1); }
.fp-chip.clash { border-color: #ef4444; background: #2a0f14; animation: gsShake .5s ease 2; box-shadow: 0 0 16px rgba(239,68,68,.5); }
.fp-shipzone { position: relative; text-align: center; }
.fp-jet { width: min(150px, 60%); display: block; margin: 0 auto; filter: drop-shadow(0 8px 18px rgba(2,8,20,.6)); }
.fp-hold { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; min-height: 40px; }
.fp-shipzone.done { border-color: #22c55e; }
.fp-shipzone.done .fp-jet { filter: drop-shadow(0 0 18px rgba(34,197,94,.65)); }
.fp-track {
  grid-column: 1 / -1;
  position: relative;
  height: 128px;
  border-top: 2px dashed rgba(56,189,248,.28);
  margin-top: 6px;
}
.fp-track::after {
  content: '';
  position: absolute; left: 3%; right: 3%; bottom: 12px;
  border-bottom: 3px solid rgba(56,189,248,.4);
  border-radius: 2px;
}
.fp-rover {
  position: absolute;
  left: 4%;
  bottom: 16px;
  width: 118px;
  transition: left 1.5s ease-in-out;
  z-index: 2;
}
.fp-rover.go { left: calc(96% - 118px); }
.fp-rover svg { width: 100%; height: auto; display: block; }
.fp-slot {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
}
.fp-slot .fp-chip { padding: 6px 8px; }
.fp-slot .fp-chip .fp-chip-lbl { display: none; }
@media (max-width: 640px) {
  .fp-stage { grid-template-columns: 1fr; }
  .fp-base { grid-column: 1; grid-row: 1; }
  .fp-shipzone { grid-column: 1; grid-row: 3; }
  .fp-track { grid-row: 2; height: 112px; }
}

/* ===== TEMA HUD (bahagian 13): seret kata laluan ke tong sampah / peti besi (drag-bin) ===== */
.dragbin-wrap {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
  padding: 20px 0 8px;
}
.dragbin-pool {
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: clamp(10px, 1.6vw, 16px);
  min-height: 140px;
}
.dragbin-chip { cursor: grab; touch-action: none; user-select: none; }
.dragbin-chip.dragging { opacity: .92; z-index: 60; transform: scale(1.05); box-shadow: 0 16px 34px rgba(2,8,20,.6), 0 0 0 3px rgba(34,211,238,.3); cursor: grabbing; }
.dragbin-target {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 16px 10px 14px;
  border-radius: 16px;
  background: linear-gradient(160deg, #0f1c3a, #0a1120);
  border: 2px dashed rgba(56,189,248,.42);
  box-shadow: inset 0 0 26px rgba(34,211,238,.06);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.dragbin-target.over {
  border-color: var(--accent); border-style: solid;
  box-shadow: 0 0 0 5px rgba(34,211,238,.22);
  transform: scale(1.02);
}
.dragbin-img { width: min(120px, 70%); height: auto; display: block; filter: drop-shadow(0 8px 18px rgba(2,8,20,.6)); pointer-events: none; }
.dragbin-label { font-weight: 800; font-size: 14px; letter-spacing: .5px; color: var(--accent); text-transform: uppercase; }
.dragbin-dropped {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px;
  min-height: 34px;
  width: 100%;
}
.dragbin-dropped .pw-chip { min-width: 0; padding: 6px 12px; font-size: 14px; }
@media (max-width: 720px) {
  .dragbin-wrap { grid-template-columns: 1fr; }
  .dragbin-target { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .dragbin-img { width: 76px; }
}

/* ===== TEMA HUD (bahagian 14): landing Operasi Firewall, briefing, transisi level, pangkat, confetti ===== */

/* --- Font paparan sci-fi --- */
.landing-title, .landing-subtitle, .landing-kicker, .cast-title, .villain-tag,
.briefing-kicker, .level-next-name, .level-done-name, .rank-nama,
.step-level, .subject-label, .q-badge, .result-kicker {
  font-family: 'Orbitron', system-ui, sans-serif;
  letter-spacing: 1px;
}

/* --- Baiki kebocoran tema cerah --- */
.q-visual { background: linear-gradient(160deg, #0d1a34 0%, #0a1120 100%); }

/* --- Landing --- */
#screen-home.active { display: block; }
.landing {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 32px) 60px;
}
.landing-hero {
  position: relative;
  text-align: center;
  padding: clamp(28px, 5vw, 52px) clamp(18px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(14,23,48,.85), #0a1226);
  box-shadow: 0 18px 50px rgba(2,8,20,.6), inset 0 1px 0 rgba(56,189,248,.08);
  overflow: hidden;
}
.landing-hero::before, .landing-hero::after {
  content: ""; position: absolute; width: 30px; height: 30px; pointer-events: none;
  border-color: var(--accent); border-style: solid;
}
.landing-hero::before { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-top-left-radius: 8px; }
.landing-hero::after { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; border-bottom-right-radius: 8px; }
.landing-kicker {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  color: #fda4af;
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.45);
  border-radius: 999px;
  padding: 6px 16px;
  margin-bottom: 18px;
  animation: hudBlink 1.6s ease-in-out infinite;
}
.landing-title {
  font-size: clamp(30px, 6vw, 54px);
  font-weight: 900;
  color: #fff;
  margin: 0 0 6px;
  text-shadow: 0 0 24px rgba(34,211,238,.45);
}
.landing-subtitle {
  font-size: clamp(15px, 2.4vw, 21px);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 6px;
  margin-bottom: 18px;
}
.landing-story {
  max-width: 720px;
  margin: 0 auto 24px;
  color: #c7d2e6;
  font-size: clamp(14.5px, 1.8vw, 17px);
  line-height: 1.65;
}
.landing-story b { color: #fff; }
.landing-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  margin-bottom: 28px;
}
.lstat {
  min-width: 96px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(19,32,67,.6);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 18px rgba(34,211,238,.05);
}
.lstat b { display: block; font-size: clamp(20px, 3vw, 28px); color: var(--accent); font-family: 'Orbitron', system-ui, sans-serif; }
.lstat span { font-size: 12.5px; color: var(--muted); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.landing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.landing-start {
  font-size: clamp(16px, 2.2vw, 20px);
  padding: 16px 42px;
  box-shadow: 0 0 0 2px rgba(34,211,238,.25), 0 12px 30px rgba(2,8,20,.55), 0 0 30px rgba(34,211,238,.35);
}
.landing-start small { display: block; font-size: 12px; font-weight: 600; opacity: .85; }

/* --- Barisan karakter --- */
.landing-cast { margin-top: clamp(26px, 4vw, 40px); }
.cast-title {
  font-size: 14px; font-weight: 700; color: var(--accent);
  letter-spacing: 3px; margin-bottom: 16px;
}
.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(10px, 2vw, 18px);
  margin-bottom: 18px;
}
.cast-card {
  text-align: center;
  padding: 16px 10px 14px;
  border-radius: 16px;
  background: linear-gradient(165deg, #0f1c3a, #0b1428);
  border: 1px solid var(--line);
  border-top: 3px solid var(--char, var(--accent));
  box-shadow: 0 8px 22px rgba(2,8,20,.4);
  transition: transform .15s, box-shadow .15s;
}
.cast-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(2,8,20,.55), 0 0 18px rgba(34,211,238,.18); }
.cast-card.komander { --char: #f2b01e; }
.cast-card.nova { --char: #22d3ee; }
.cast-card.byte { --char: #3b82f6; }
.cast-card.agentx { --char: #34d399; }
.cast-card.firewall { --char: #38bdf8; }
.cast-card img {
  width: 76px; height: 76px; object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--char, var(--accent));
  box-shadow: 0 0 14px rgba(34,211,238,.3);
  margin-bottom: 10px;
}
.cast-card b { display: block; color: #fff; font-size: 14.5px; }
.cast-card small { color: var(--muted); font-size: 12px; }

.villain-card {
  display: flex; align-items: center; gap: clamp(14px, 3vw, 26px);
  padding: 16px clamp(16px, 3vw, 26px);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(88,28,135,.25), #0b1020);
  border: 1px solid rgba(168,85,247,.45);
  box-shadow: 0 8px 26px rgba(2,8,20,.5), inset 0 0 30px rgba(168,85,247,.08);
}
.villain-card img {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 50%;
  border: 2px solid #a855f7;
  box-shadow: 0 0 18px rgba(168,85,247,.5);
  flex-shrink: 0;
}
.villain-tag {
  font-size: 11px; font-weight: 700; color: #f0abfc;
  letter-spacing: 2px; margin-bottom: 4px;
  animation: hudBlink 1.4s ease-in-out infinite;
}
.villain-card b { display: block; color: #fff; font-size: 18px; }
.villain-card small { color: #c4b5fd; font-size: 12.5px; }
.villain-desc { color: #c7d2e6; font-size: 13.5px; margin-top: 6px; line-height: 1.5; }

/* --- Overlay HUD am (briefing & transisi level) --- */
.hud-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(3,7,18,.82);
  backdrop-filter: blur(4px);
  animation: hudFadeIn .25s ease;
}
@keyframes hudFadeIn { from { opacity: 0; } to { opacity: 1; } }

.briefing-box {
  max-width: 560px;
  width: 100%;
  text-align: center;
  padding: clamp(26px, 4vw, 42px);
  border-radius: 20px;
  background: linear-gradient(165deg, #101d3d, #0a1226);
  border: 1px solid rgba(56,189,248,.45);
  box-shadow: 0 24px 60px rgba(2,8,20,.7), 0 0 40px rgba(34,211,238,.15);
  animation: briefPop .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes briefPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.briefing-avatar {
  width: 108px; height: 108px; object-fit: cover;
  border-radius: 50%;
  border: 3px solid #f2b01e;
  box-shadow: 0 0 22px rgba(242,176,30,.45);
  margin-bottom: 14px;
}
.briefing-kicker { font-size: 11.5px; font-weight: 700; color: #f2b01e; letter-spacing: 2px; margin-bottom: 6px; }
.briefing-box h2 { color: #fff; font-size: clamp(22px, 3vw, 28px); margin-bottom: 14px; }
.briefing-text { color: #c7d2e6; font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; }
.briefing-text b { color: var(--accent); }
.briefing-accept { font-size: 17px; padding: 14px 36px; }

.level-box {
  text-align: center;
  padding: 30px 46px;
  border-radius: 20px;
  background: linear-gradient(165deg, #101d3d, #0a1226);
  border: 1px solid rgba(56,189,248,.45);
  box-shadow: 0 24px 60px rgba(2,8,20,.7), 0 0 40px rgba(34,211,238,.2);
  animation: briefPop .35s cubic-bezier(.2,.9,.3,1.2);
  cursor: pointer;
}
.level-done-name { font-size: 14px; font-weight: 700; color: #34d399; letter-spacing: 1.5px; margin-bottom: 10px; }
.level-arrow { color: var(--accent); font-size: 20px; margin-bottom: 10px; animation: hudBlink 1s ease-in-out infinite; }
.level-next-name { color: #fff; font-size: clamp(19px, 3vw, 26px); margin-bottom: 8px; text-shadow: 0 0 18px rgba(34,211,238,.5); }
.level-sub { color: var(--muted); font-size: 13.5px; }

/* --- Stepper: tag level --- */
.step-level {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  margin: 0 2px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.4);
  text-transform: uppercase;
  user-select: none;
}

/* --- Skrin keputusan: pangkat + epilog --- */
.result-rank {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  margin: 10px 0 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(34,211,238,.12), rgba(59,130,246,.08));
  border: 1px solid rgba(34,211,238,.5);
  box-shadow: 0 0 22px rgba(34,211,238,.18);
}
.rank-ikon { font-size: 24px; }
.rank-nama { font-size: clamp(14px, 2vw, 17px); font-weight: 700; color: var(--accent); }
.result-epilog {
  color: #e6edf7;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 8px;
  max-width: 560px;
}

/* --- Isyarat HUD selepas jawapan: ping ring (betul) / ping diamond (salah) --- */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.confetti .ping {
  position: absolute;
  top: 32%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 18px 2px rgba(34,211,238,.7);
  animation: confPing 650ms cubic-bezier(.2,.8,.3,1) forwards;
}
.confetti .ping.ping2 { border-width: 2px; animation-delay: 120ms; }
.confetti .ping.wrong {
  border-radius: 4px;
  border-color: #ef4444;
  box-shadow: 0 0 18px 2px rgba(239,68,68,.7);
  animation: confPingWrong 420ms cubic-bezier(.3,0,.4,1) forwards;
}
@keyframes confPing {
  0%   { opacity: .95; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(11) rotate(0deg); }
}
@keyframes confPingWrong {
  0%   { opacity: .95; transform: scale(1) rotate(45deg); }
  15%  { opacity: 1; transform: scale(1.3) rotate(38deg); }
  30%  { opacity: 1; transform: scale(1.6) rotate(52deg); }
  100% { opacity: 0; transform: scale(7) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .confetti .ping { animation-duration: .01s; }
  .hud-overlay, .briefing-box, .level-box { animation: none; }
}
@media (max-width: 640px) {
  .villain-card { flex-direction: column; text-align: center; }
  .landing-subtitle { letter-spacing: 3px; }
}

/* --- Baiki kebocoran tema cerah pada skrin keputusan (HUD) --- */
.level-track { background: #132043; }
.level-name { color: #dbeafe; }
.badge-chip { background: rgba(34,211,238,.1); color: #a5f3fc; border-color: rgba(34,211,238,.4); }
.review-item { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.4); color: #fecaca; }
.review-item b { color: #fca5a5; }
.review-item span { color: #f87171; }
.review-empty { background: rgba(34,197,94,.1); color: #86efac; }

/* ===== TEMA HUD (bahagian 15): tahap prestasi (Sempurna / Guna Petunjuk / Perlu Ulang) ===== */
.result-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.tier-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(19,32,67,.55);
  border: 1px solid var(--line);
  text-align: center;
}
.tier-chip .tier-ico { font-size: 22px; }
.tier-chip .tier-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted);
}
.tier-chip b { font-size: clamp(18px, 2.4vw, 24px); color: #fff; }
.tier-chip.perfect { border-color: rgba(34,197,94,.5); box-shadow: inset 0 0 20px rgba(34,197,94,.08); }
.tier-chip.perfect .tier-label { color: #86efac; }
.tier-chip.perfect b { color: #4ade80; }
.tier-chip.assisted { border-color: rgba(234,179,8,.5); box-shadow: inset 0 0 20px rgba(234,179,8,.08); }
.tier-chip.assisted .tier-label { color: #fde68a; }
.tier-chip.assisted b { color: #facc15; }
.tier-chip.retried { border-color: rgba(249,115,22,.5); box-shadow: inset 0 0 20px rgba(249,115,22,.08); }
.tier-chip.retried .tier-label { color: #fed7aa; }
.tier-chip.retried b { color: #fb923c; }
@media (max-width: 620px) {
  .result-tiers { grid-template-columns: 1fr; }
}

/* ===== TEMA HUD (bahagian 16): pendaftaran murid + status hantar markah ===== */
.reg-box {
  max-width: 460px; width: 100%;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 20px;
  background: linear-gradient(165deg, #101d3d, #0a1226);
  border: 1px solid rgba(56,189,248,.45);
  box-shadow: 0 24px 60px rgba(2,8,20,.7), 0 0 40px rgba(34,211,238,.15);
  animation: briefPop .3s cubic-bezier(.2,.9,.3,1.2);
}
.reg-kicker { font-family: 'Orbitron', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 2px; color: var(--accent); margin-bottom: 4px; }
.reg-box h2 { color: #fff; font-size: clamp(20px, 3vw, 26px); margin-bottom: 8px; }
.reg-note { color: #c7d2e6; font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.reg-note b { color: var(--accent); }
.reg-field { display: block; margin-bottom: 14px; text-align: left; }
.reg-field span { display: block; font-size: 12.5px; font-weight: 700; color: #9fb3d1; margin-bottom: 5px; letter-spacing: .3px; }
.reg-field input, .reg-field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(19,32,67,.6);
  color: #eaf1ff;
  font-size: 15px;
  font-family: inherit;
}
.reg-field input:focus, .reg-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,.18);
}
.reg-field select option { background: #0b1428; color: #eaf1ff; }
.reg-error { color: #fca5a5; font-size: 13.5px; font-weight: 700; min-height: 18px; margin-bottom: 10px; }
.reg-submit { width: 100%; font-size: 16px; padding: 14px; }

/* Banner identiti di laman utama */
.landing-identity {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px;
  margin-bottom: 16px;
}
.li-name { font-weight: 800; color: #fff; }
.li-meta { color: var(--muted); font-size: 13.5px; }
.li-switch {
  background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.4);
  color: var(--accent); border-radius: 999px; padding: 5px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.li-switch:hover { background: rgba(34,211,238,.2); }

/* Status hantar markah di skrin keputusan */
.result-submit {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 700;
  border: 1px solid var(--line);
  text-align: center;
}
.result-submit:empty { display: none; }
.result-submit.sending { background: rgba(34,211,238,.08); color: var(--accent); border-color: rgba(34,211,238,.35); }
.result-submit.ok { background: rgba(34,197,94,.1); color: #86efac; border-color: rgba(34,197,94,.4); }
.result-submit.ok b { color: #fff; }
.result-submit.err { background: rgba(249,115,22,.1); color: #fed7aa; border-color: rgba(249,115,22,.4); }
.result-submit .new-best { color: #facc15; font-weight: 800; }
.result-submit .retry-submit { margin-left: 8px; padding: 6px 14px; font-size: 13px; }

/* ===== PORTAL MUKA DEPAN ===== */
#screen-portal.active { display: flex; }
.portal {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 32px) 60px;
  display: flex;
  flex-direction: column;
}
.portal-top {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  margin-bottom: clamp(28px, 6vw, 56px);
}
.portal-brand { display: flex; align-items: center; gap: 14px; }
.portal-logo { font-size: 40px; filter: drop-shadow(0 0 14px rgba(34,211,238,.5)); }
.portal-logo-img {
  height: clamp(100px, 13vw, 150px); width: auto; display: block;
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(2,8,20,.55), 0 0 0 1px rgba(34,211,238,.18);
}
/* Logo utama di tengah hero — fokus utama portal */
.portal-top-slim { justify-content: flex-end; margin-bottom: clamp(10px, 2vw, 20px); }
.portal-hero-logo {
  display: block; margin: 0 auto clamp(18px, 3vw, 28px);
  width: min(460px, 78vw); height: auto;
  border-radius: 22px;
  box-shadow:
    0 20px 55px rgba(2,8,20,.65),
    0 0 0 1px rgba(34,211,238,.22),
    0 0 70px rgba(34,211,238,.16);
}
.portal-kicker {
  font-family: 'Orbitron', system-ui, sans-serif;
  color: var(--accent); letter-spacing: 3px; font-size: 11.5px; font-weight: 700;
}
.portal-title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(20px, 3.4vw, 30px); font-weight: 900; color: #fff;
  text-shadow: 0 0 20px rgba(34,211,238,.4); margin-top: 2px;
}
.portal-access { display: flex; flex-wrap: wrap; gap: 10px; }
.portal-login {
  text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 10px 18px; border-radius: 10px;
  border: 1px solid var(--line); color: #dbeafe;
  background: var(--panel2); transition: .15s;
}
.portal-login:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34,211,238,.16); }
.portal-login.penyelia { background: linear-gradient(90deg, rgba(124,58,237,.28), rgba(56,189,248,.18)); }

.portal-hero { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
.portal-hero-kicker {
  font-family: 'Orbitron', system-ui, sans-serif;
  color: var(--accent); letter-spacing: 2px; font-size: 12px; font-weight: 700;
}
.portal-hero-title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: clamp(26px, 5vw, 44px); font-weight: 900; color: #fff; margin: 8px 0 6px;
}
.portal-hero-sub { color: var(--muted); font-size: clamp(14px, 2vw, 16px); }

.portal-levels {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.portal-card {
  position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: clamp(24px, 3vw, 34px) 20px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(165deg, var(--panel), #0a1226);
  box-shadow: 0 16px 44px rgba(2,8,20,.5);
  color: var(--ink); font: inherit; cursor: pointer; transition: .18s;
}
.portal-card.active:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 22px 54px rgba(2,8,20,.6), 0 0 0 3px rgba(34,211,238,.18);
}
.portal-card-ico { font-size: 46px; }
.portal-card-img {
  width: clamp(96px, 12vw, 132px); height: auto; display: block; margin: 0 auto 2px;
  filter: drop-shadow(0 10px 22px rgba(34,211,238,.28));
  transition: transform .18s;
}
.portal-card:hover .portal-card-img { transform: translateY(-4px) scale(1.04); }
.portal-card b { font-size: 19px; color: #fff; font-family: 'Orbitron', system-ui, sans-serif; }
.portal-card small { color: var(--muted); font-size: 13px; }
.portal-card-cta {
  margin-top: 8px; font-weight: 800; color: #06121f;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  padding: 8px 22px; border-radius: 999px; font-size: 14px;
}
.portal-card.soon { cursor: not-allowed; opacity: .62; }
.portal-card.soon .portal-card-ico, .portal-card.soon b, .portal-card.soon small { filter: grayscale(.4); }
.portal-lock {
  position: absolute; top: 12px; right: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: #fde68a; background: rgba(250,204,21,.14);
  border: 1px solid rgba(250,204,21,.4); border-radius: 999px; padding: 4px 12px;
}
.portal-foot { text-align: center; color: var(--muted); font-size: 13px; margin-top: 32px; }

.landing-back {
  position: absolute; margin: -8px 0 0; z-index: 3;
  background: var(--panel2); border: 1px solid var(--line);
  color: #dbeafe; font-weight: 700; font-size: 13px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
}
.landing-back:hover { border-color: var(--accent); }

@media (max-width: 560px) {
  .portal-top { justify-content: center; text-align: center; }
  .portal-access { justify-content: center; }
}

/* ============================================================
   ===== Jenis `image-labels` — rajah bergambar + dropdown atas kotak =====
   Kedudukan setiap <select> ditetapkan dalam % gambar (inline style dari app.js),
   jadi ia kekal bertindih tepat di atas kotak merah pada semua saiz skrin.
   ============================================================ */
.imglab-wrap { display: grid; gap: 12px; justify-items: center; width: 100%; }
.imglab-stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  container-type: inline-size;           /* membolehkan unit cqw untuk saiz teks */
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(2, 8, 20, .5);
}
.imglab-img { display: block; width: 100%; height: auto; }

.imglab-sel {
  position: absolute;
  transform: translate(-50%, -50%);      /* x/y = TENGAH kotak */
  appearance: none; -webkit-appearance: none;
  padding: 0 2.2cqw 0 1.4cqw;
  text-align: center;
  text-align-last: center;
  border-radius: 7px;
  border: 2px solid rgba(56, 189, 248, .55);
  background: rgba(6, 18, 38, .88);
  color: #e6edf7;
  font-family: inherit;
  font-size: clamp(10px, 2.5cqw, 19px);
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(2, 8, 20, .35), 0 0 14px rgba(34, 211, 238, .18);
}
.imglab-sel option { background: #132043; color: #e6edf7; font-size: 15px; }
.imglab-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(34, 211, 238, .25); }
.imglab-sel.filled { border-color: var(--accent); background: rgba(16, 35, 63, .95); }
.imglab-sel.correct { border-color: #22c55e; background: rgba(12, 42, 26, .95); box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.imglab-sel.wrong { border-color: #ef4444; background: rgba(42, 15, 20, .95); box-shadow: 0 0 0 4px rgba(239, 68, 68, .25); animation: imglabShake .45s ease; }
.imglab-sel:disabled { cursor: default; opacity: 1; }

@keyframes imglabShake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(calc(-50% - 5px), -50%); }
  75% { transform: translate(calc(-50% + 5px), -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .imglab-sel.wrong { animation: none; }
}

/* Butang Log Masuk Guru/Penyelia di skrin landing T3 — t3.html melangkau
   skrin portal (terus ke misi), jadi guru perlukan akses log masuk di sini. */
.landing { position: relative; }
.landing-access {
  position: absolute; right: clamp(16px, 4vw, 32px); margin: -8px 0 0; z-index: 3;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.landing-access .portal-login { font-size: 12px; padding: 8px 13px; }
@media (max-width: 720px) {
  /* susun menegak: butang '‹ Portal' baris sendiri, baris log masuk di tengah bawahnya —
     elak bertindih pada skrin sempit (landing-back berkedudukan absolute pada desktop) */
  .landing-back { position: static; display: inline-flex; margin: 0 0 10px; }
  .landing-access { position: static; margin: 0 0 8px; justify-content: center; }
}

/* ============================================================
   ===== Jenis `code-text` (T5) — editor kod ditaip + dunia iso =====
   Kongsi susun atur .bc-wrap dgn block-coding; editor teks di kanan.
   ============================================================ */
.ct-editor {
  flex: 1 1 320px; min-width: 280px; max-width: 480px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--panel2, #132043); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px;
}
.ct-ed-head {
  display: flex; align-items: center; justify-content: space-between;
  color: #d8fbff; font-weight: 800; font-size: 14px;
}
.ct-code {
  width: 100%; min-height: 150px; resize: vertical;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 15px; font-weight: 700; line-height: 1.55; letter-spacing: .3px;
  color: #e6edf7; background: #0c1730;
  border: 2px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.ct-code:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(34,211,238,.16); }
.ct-help {
  background: #0e2038; border: 1px dashed rgba(56,189,248,.45);
  border-radius: 10px; padding: 10px 12px;
  color: #cbd6ea; font-size: 13px; line-height: 1.8;
}
.ct-help code {
  background: #071526; border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 7px; color: #67e8f9; font-weight: 700;
}
.ct-err { margin: 0; min-height: 18px; color: #fca5a5; font-size: 13px; font-weight: 700; }

/* ============================================================
   ===== Jenis `rotate-pieces` (T5) — putar kepingan susun suai =====
   ============================================================ */
.rp-wrap { display: grid; gap: 14px; justify-items: center; width: 100%; }
.rp-row { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.5vw, 26px); justify-content: center; }
.rp-col { display: grid; gap: 8px; justify-items: center; }
.rp-stage {
  width: clamp(96px, 15vw, 140px); height: clamp(96px, 15vw, 140px);
  display: grid; place-items: center;
  background: #0c1730; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: inset 0 0 18px rgba(2,8,20,.5);
}
.rp-piece {
  width: 78%; height: 78%; display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.34,1.4,.64,1);
}
.rp-piece svg { width: 100%; height: 100%; display: block; }
.rp-piece.correct { filter: drop-shadow(0 0 10px rgba(34,197,94,.8)); }
.rp-piece.wrong { filter: drop-shadow(0 0 10px rgba(239,68,68,.85)); }
.rp-ctrl { display: flex; align-items: center; gap: 10px; }
.rp-name { color: #eaf1ff; font-family: 'Orbitron', system-ui, sans-serif; font-size: 15px; }
.rp-btn {
  width: 40px; height: 40px; border-radius: 999px; font-size: 19px; cursor: pointer;
  background: #071526; border: 2px solid #22d3ee; color: #22d3ee;
  box-shadow: 0 5px 14px rgba(2,8,20,.45);
}
.rp-btn:hover { border-color: #67e8f9; transform: translateY(-2px); }
.rp-btn:disabled { opacity: .45; cursor: default; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rp-piece { transition: none; }
}

/* --- Jalur pautan manual di portal --- */
.portal-manual { margin-top: clamp(18px, 3vw, 30px); text-align: center; }
.pm-tajuk {
  font-family: 'Orbitron', system-ui, sans-serif; color: var(--accent, #22d3ee);
  font-size: 12.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  margin: 0 0 12px;
}
.pm-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pm-item {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel2, #132043); border: 1px solid var(--line, #24365e);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; color: var(--ink, #eaf1ff);
}
.pm-item b { font-weight: 800; }
.pm-item a {
  color: var(--accent, #22d3ee); text-decoration: none; font-weight: 800;
  border: 1px solid rgba(34,211,238,.35); border-radius: 999px; padding: 2px 10px;
}
.pm-item a:hover, .pm-item a:focus-visible { background: rgba(34,211,238,.14); outline: none; }