/* Seni Visual Darjah 6 — tema studio (krim · arang · aksen oren)
   Gaya asas dari _core/css/style.css; fail ini tambah aksen subjek.
   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) —— */
.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; }

/* —— kad karya (SVG inline) untuk find/diff/label —— */
.labelarea {
  border-color: #e2c9a6;
  background: linear-gradient(#fffaf1, #f6ecdc);
  box-shadow: inset 0 0 0 6px #fffdf7;
}
.slot.lbl:not(.filled) { border-color: #d9a05b; background: #fffdf7; }
.slot.lbl.filled { border-color: var(--green); }
.slot.lbl { touch-action: manipulation; }
.diffwrap .dcell { background: #fffaf1; border-radius: 14px; }

/* —— panel petikan apresiasi / sejarah seni —— */
.passage {
  border-color: #e2c9a6;
  background: #fffaf1;
  font-weight: 600;
}

/* —— sapuan berus: skrin result muncul dari kiri ke kanan —— */
.result { animation: brushwipe .55s ease-out; }
@keyframes brushwipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { .result { animation: none; } .chip.sel { transition: none; } }

/* —— dunia cetakan: ikon berdenyut lembut sebagai jemputan —— */
.worldgrid .worldcard:nth-child(4) .wicon { animation: printpulse 2.2s ease-in-out infinite alternate; }
@keyframes printpulse { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .worldgrid .worldcard .wicon { animation: none; } }

/* —— label pin lebih besar pada skrin kecil (sasaran sentuh >= 44px) —— */
@media (max-width: 380px) {
  .slot.lbl { min-width: 64px; padding: 3px 4px; }
  .slot.lbl .bt { font-size: .72rem; }
}