/* Minda Ceria · Pen pemeriksa (core/pen.css) — pustaka KONGSI, pasangan core/pen.js */
@font-face{font-family:'MC Tangan';src:url(tema/fon/tangan.woff2) format('woff2');font-weight:400;font-display:swap}
:root{--pen-merah:#d7263d;--pen-hijau:#1d8f4e}

.mcpen{position:absolute;pointer-events:none;overflow:visible;z-index:6;fill:none;stroke:var(--pen-merah);stroke-linecap:round;stroke-linejoin:round;stroke-width:5.5}
.mcpen path{stroke-dasharray:var(--L,0);stroke-dashoffset:var(--L,0);animation:mcpen-lukis .38s cubic-bezier(.45,.05,.4,1) forwards}
@keyframes mcpen-lukis{to{stroke-dashoffset:0}}

/* saiz lalai: diletak di sudut kanan atas host; pemanggil boleh tindih dengan kelas sendiri */
.mcpen--tick{width:44px;height:38px;right:-6px;top:-14px}
.mcpen--pangkah{width:34px;height:34px;right:-4px;top:-12px}
.mcpen--bulat{left:-5px;top:-8px;width:calc(100% + 10px);height:calc(100% + 16px);stroke-width:3.2}
.mcpen--coret{left:-3px;right:-3px;top:calc(50% - 8px);width:calc(100% + 6px);height:16px;stroke-width:4}

.mcpen-tulis{display:inline-block;font:400 clamp(22px,2.6vw,27px)/1.1 'MC Tangan','Comic Sans MS','Segoe Print',cursive;color:var(--pen-merah);
  transform:rotate(var(--putar,-1deg));transform-origin:left center;opacity:0;animation:mcpen-muncul .3s ease-out forwards;letter-spacing:.2px;overflow-wrap:anywhere}
@keyframes mcpen-muncul{from{opacity:0;transform:rotate(var(--putar,-1deg)) translateY(3px)}to{opacity:1;transform:rotate(var(--putar,-1deg))}}

.mcpen-markah{position:relative;display:inline-grid;place-items:center;min-width:54px;height:38px;padding:0 8px}
.mcpen-markah .mcpen--bulat{stroke-width:2.6}
.mcpen-markah__nombor{font-size:22px;line-height:1}

@media (prefers-reduced-motion:reduce){
  .mcpen path{animation:none;stroke-dashoffset:0}
  .mcpen-tulis{animation:none;opacity:1}
}