/* Seni Visual (Darjah 4) — tema subjek.
   Gaya asas dari _core/css/style.css; fail ini tambah aksen warna seni.
   Aksesibiliti: setiap opsyen warna sentiasa ada LABEL TEKS (t:"Merah 🔴") selain emoji —
   kelas di bawah hanya menambah warna, tidak menggantikan teks. */

/* —— swatch warna sebenar untuk opsyen mcq/multi (opts.cls) ——
   :not(...) supaya keadaan maklum balas teras (.good/.bad/.picked) tetap menang. */
.opt.merah:not(.good):not(.bad):not(.picked)      { background:#ffe3e0; border-color:#e4574c; }
.opt.jingga:not(.good):not(.bad):not(.picked)     { background:#ffedd5; border-color:#f08c2e; }
.opt.kuning:not(.good):not(.bad):not(.picked)     { background:#fff6cf; border-color:#e8a900; }
.opt.hijau:not(.good):not(.bad):not(.picked)      { background:#ddf7e4; border-color:#2fb457; }
.opt.biru:not(.good):not(.bad):not(.picked)       { background:#dcebff; border-color:#2f7fe8; }
.opt.ungu:not(.good):not(.bad):not(.picked)       { background:#ece0ff; border-color:#8b5cf6; }
.opt.kelabu:not(.good):not(.bad):not(.picked)     { background:#eceff3; border-color:#94a3b8; }
.opt.putih:not(.good):not(.bad):not(.picked)      { background:#ffffff; border-color:#cbd5e1; }
.opt.hitam:not(.good):not(.bad):not(.picked)      { background:#e7e7ee; border-color:#334155; }
.opt.merahmuda:not(.good):not(.bad):not(.picked)  { background:#ffe4ef; border-color:#ec4899; }

/* —— kanvas karya: bingkai gubahan SVG/CSS (label engine) —— */
.labelarea {
  box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 9px #dbe6f3, 0 10px 22px rgba(35, 50, 74, .12);
  background: #fff;
}

/* —— kotak "sebab" (D4: fb menerangkan sebab, bukan pujian sahaja) —— */
.fb .fact { border-left: 5px solid #8b5cf6; padding-left: 10px; }

/* —— sapuan berus: kad result muncul dari kiri (dimatikan oleh reduced-motion) —— */
.result { animation: brushwipe .5s ease-out; }
@keyframes brushwipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* —— celebration pelangi untuk trofi seni —— */
.celebrate .celcard {
  background:
    linear-gradient(#fffdf7cc, #fffdf7cc) padding-box,
    linear-gradient(120deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #bdb2ff) border-box;
  border: 4px solid transparent;
}

/* —— skrin elemen seni: arahan 2 baris, sasaran sentuh besar —— */
.qtext { line-height: 1.45; }
.slot.lbl .bt { font-size: .85rem; }