.clay-card{width:100%;max-width:1200px;margin:0 auto;background:linear-gradient(135deg,#f0f4ff,#fef3f0,#f0faf4);border-radius:24px;padding:20px;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 20px #0000000f}@media(max-width:768px){.clay-card{padding:8px;border-radius:16px}}.clay-slab{max-width:100%;padding:1rem;border-radius:20px;background:#fff9;border:1.5px solid rgba(0,0,0,.06);direction:rtl}@media(max-width:768px){.clay-slab{padding:.5rem;border-radius:14px}}.clay-title{text-align:center;margin-bottom:10px;color:#4a5568;font-weight:700;font-size:1.25rem}.color-container{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:560px;margin:0 auto;justify-items:center}.color-button{position:relative;width:60px;height:60px;border:3px solid transparent;cursor:pointer;background-color:var(--color);border-radius:50%;transition:transform .25s ease,border-color .2s ease,box-shadow .25s ease;box-shadow:0 3px 8px #00000026}.color-button:after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.4) 0%,transparent 60%);pointer-events:none}.color-button:before{position:absolute;content:attr(data-color-english);left:50%;bottom:calc(100% + 8px);transform:translate(-50%) scale(.8);padding:6px 12px;background:#333;color:#fff;border-radius:8px;font-size:13px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s ease,transform .2s ease;z-index:10}.color-button:focus{outline:none}.color-button:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.color-button:hover{transform:translateY(-4px) scale(1.1);box-shadow:0 6px 16px #0003}.color-button:hover:before{opacity:1;transform:translate(-50%) scale(1)}.color-button:active{transform:translateY(-1px) scale(.97)}.color-button[data-selected=true]{border-color:#fff;transform:translateY(-4px) scale(1.15);box-shadow:0 0 0 3px #00000026,0 6px 16px #0003}.selected-color-display{margin-top:8px;color:#4a5568;font-size:16px;text-align:center;direction:rtl;display:flex;align-items:center;justify-content:center;gap:10px}.speak-color-button{background:#fff;border:2px solid #cbd5e0;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0000001a;color:#4a5568}.speak-color-button:hover{transform:scale(1.1);border-color:#63b3ed;box-shadow:0 3px 10px #63b3ed4d}.speak-color-button:active{transform:scale(.95)}.content-section{margin-top:20px}@media(max-width:768px){.content-section{margin-top:10px}}.instruction-text{text-align:center;color:#718096;font-size:17px;margin-top:18px;direction:rtl}.test-title{font-size:24px;font-weight:700;color:#4a5568;text-align:center;margin-bottom:10px;direction:rtl}.test-instruction{text-align:center;font-size:18px;color:#4a5568;margin-bottom:10px;direction:rtl}.test-progress{text-align:center;font-size:16px;color:#4a5568;margin-bottom:15px;direction:rtl}.test-feedback{text-align:center;font-size:18px;margin:15px 0;direction:rtl;font-weight:600;min-height:30px}.test-completed{text-align:center;font-size:24px;color:#06d6a0;margin:20px 0;direction:rtl;font-weight:700}.reset-clay-button{padding:10px 28px;background:#fff;color:#4a5568;border:2px solid #e2e8f0;border-radius:50px;cursor:pointer;font-size:15px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 6px #0000000f;direction:rtl}.reset-clay-button:hover{transform:translateY(-2px);border-color:#cbd5e0;box-shadow:0 4px 12px #0000001a;background:#f7fafc}.reset-clay-button:active{transform:translateY(0)}@media(max-width:768px){.color-container{gap:8px;max-width:100%}.color-button{width:40px;height:40px;border-width:2px}.clay-title{font-size:.9rem;margin-bottom:6px}.selected-color-display{margin-top:4px}}