/* Seni Visual (Darjah 2) — 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; }
.opt.coklat:not(.good):not(.bad):not(.picked)  { background:#f1e3d3; border-color:#a1662f; }

/* —— swatch besar (>=64px) dengan label teks — untuk kad unsur seni —— */
.swatch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 16px;
  border-radius: 18px; background: #fff; border: 3px solid #e6e0ea; font-weight: 800;
}
.swatch .sw { width: 48px; height: 48px; border-radius: 12px; border: 2px solid #3b3b46; }

/* —— kad unsur seni: garis / bentuk / tekstur / ruang (CSS + SVG, tiada fail imej) —— */
.artcard { border-radius: 20px; border: 3px solid #e6e0ea; background: #fff; min-height: 96px; overflow: hidden; }
.artcard.garis-beralun { background: repeating-radial-gradient(circle at 50% 120%, #cfe8ff 0 6px, #fff 6px 14px); }
.artcard.tekstur-kasar { background: repeating-linear-gradient(35deg, #efe6da 0 4px, #d9cbb6 4px 9px); }
.artcard.tekstur-halus { background: linear-gradient(160deg, #f7fbff, #e8f1fb); }
.artcard.anyaman { background: repeating-linear-gradient(90deg, #ffe0b2 0 10px, #ffd08a 10px 20px),
                              repeating-linear-gradient(0deg, #00000022 0 10px, #00000000 10px 20px); }
.artcard.cetakan { background: radial-gradient(#b26a3c 3px, transparent 4px) 0 0 / 18px 18px, #fff7ee; }

/* —— palet berdenyut: dunia Warna (kartu ke-2) menjemput untuk ditekan —— */
.worldgrid .worldcard:nth-child(2) .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 bentuk/warna: simbol besar mudah disentuh (>=64px sudah oleh .opt) —— */
.opts .opt .oe { font-size: clamp(2.4rem, 8vw, 3.2rem); }

@media (prefers-reduced-motion: reduce) {
  .worldgrid .worldcard:nth-child(2) .wicon { animation: none; }
  .result { animation: none; }
  .celebrate .conf { animation: none; }
}