/* Seni Visual DARJAH 3 — tema subjek.
   Gaya asas dari _core/css/style.css; fail ini tambah aksen & kelas warna sebenar.
   Nota aksesibiliti: setiap opsyen warna dalam content.js ada LABEL TEKS (t:"Merah")
   selain emoji — kelas di bawah hanya menambah warna, tidak menggantikan teks. */

/* —— warna sebenar untuk opsyen mcq/multi (opts.cls) ——
   Pemilih :not(...) supaya state feedback 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; }

/* —— palet berdenyut: dunia Warna (kartu ke-3) menjemput untuk ditekan —— */
.worldgrid .worldcard:nth-child(3) .wicon { animation: palettepulse 1.8s ease-in-out infinite alternate; }
@keyframes palettepulse { from { transform: scale(1); } to { transform: scale(1.14) rotate(-6deg); } }

/* —— animasi "sapuan berus": result muncul dari kiri ke kanan ——
   base state = tiada clip-path, jadi selamat apabila reduced-motion mematikan animasi */
.result { animation: brushwipe .55s ease-out; }
@keyframes brushwipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* —— celebration pelangi —— */
.celebrate .celcard {
  background:
    linear-gradient(#fffdf7cc, #fffdf7cc) padding-box,
    linear-gradient(120deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #bdb2ff) border-box;
  border: 4px solid transparent;
}
.celebrate .conf { animation: floaty 1.4s infinite alternate; letter-spacing: .4em; }

/* —— skrin warna: swatch besar mudah disentuh (>=64px sudah oleh .opt) —— */
.opts .opt .oe { font-size: clamp(2.4rem, 8vw, 3.2rem); }

/* —— Darjah 3: panel cloze istilah teknik + kad karya besar —— */
.clozeline { background: #fffdf7; border: 3px solid #f0e3c8; }
.blank:not(.filled) { border-color: #d9b25f; background: #fffaef; }
.labelarea { background: linear-gradient(#fdf7ea, #f6ecff); border-color: #e6d7f7; }
.passage { background: #fdf7ea; border-color: #f0dfb8; }
/* kad karya warisan (W10) & teknik (W4/W5/W9) — paparan besar, tiada fail imej */
.opts .opt .oe { font-size: clamp(2.4rem, 8vw, 3.2rem); }